/*
 * CarpeIoT Display — identidad de marca fija (a diferencia de Access, que
 * resuelve el color 100% por tenant, Display fija su propia paleta y solo
 * permite un color de acento opcional por empresa — ver
 * empresa_apariencia.color_acento y headerView.php).
 *
 * Paleta (documento de requerimientos, sección 23):
 *   Oscuro (marca / sidebar):  #0F172A
 *   Turquesa (acento):         #14B8A6
 *   Azul (primario):           #2563EB
 *   Blanco:                    #FFFFFF
 *   Gris (texto secundario):   #64748B
 * Tipografía: sin font-family propia — se hereda el stack de sistema de
 * Bootstrap 5 (incluye Segoe UI), igual criterio que Access.
 */

:root {
  --display-oscuro: #0F172A;
  --display-turquesa: #14B8A6;
  --display-azul: #2563EB;
  --display-gris: #64748B;

  --bs-primary: var(--display-azul);
  --bs-primary-rgb: 37, 99, 235;
}

.app-sidebar {
  background-color: var(--display-oscuro) !important;
}

/* Acento turquesa para elementos secundarios de marca (íconos de
   cabecera de módulos, badges informativos) sin pelear con el azul
   primario de Bootstrap. */
.text-display-accent {
  color: var(--display-turquesa) !important;
}
.bg-display-accent {
  background-color: var(--display-turquesa) !important;
}

/* ============================================================
   Reglas de UI ya validadas en access.carpeiot.com — mismas
   convenciones (card con ícono en el título, botones de acción en una
   celda, badges, estado vacío) para que Display se sienta parte de la
   misma familia de producto.
   ============================================================ */

.dt-buttons .btn,
.dt-buttons a.dt-button,
.dt-buttons button.dt-button {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.dt-buttons .btn-outline-secondary { color: #6c757d !important; border-color: #6c757d !important; }
.dt-buttons .btn-outline-success   { color: #198754 !important; border-color: #198754 !important; }
.dt-buttons .btn-outline-info      { color: #0dcaf0 !important; border-color: #0dcaf0 !important; }
.dt-buttons .btn-outline-primary   { color: #0d6efd !important; border-color: #0d6efd !important; }
.dt-buttons .btn-outline-danger    { color: #dc3545 !important; border-color: #dc3545 !important; }
.dt-buttons .btn-outline-secondary:hover { background-color: #6c757d !important; color: #fff !important; }
.dt-buttons .btn-outline-success:hover   { background-color: #198754 !important; color: #fff !important; }
.dt-buttons .btn-outline-info:hover      { background-color: #0dcaf0 !important; color: #fff !important; }
.dt-buttons .btn-outline-primary:hover   { background-color: #0d6efd !important; color: #fff !important; }
.dt-buttons .btn-outline-danger:hover    { background-color: #dc3545 !important; color: #fff !important; }
.dt-buttons .btn i.bi { font-size: 1rem; vertical-align: -.125em; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--bs-body-color) !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color, #ced4da);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--bs-body-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--bs-secondary-color, #adb5bd) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #fff !important;
  background: var(--bs-primary, #0d6efd) !important;
  border-color: var(--bs-primary, #0d6efd) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #fff !important;
  background: var(--bs-secondary, #6c757d) !important;
}

.card {
  border-radius: .5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 6px rgba(0, 0, 0, .05);
}
.card-header {
  font-weight: 500;
}

.card-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.card-title > i.bi:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  background: var(--bs-primary-bg-subtle, rgba(37, 99, 235, .12));
  color: var(--bs-primary-text-emphasis, #2563EB);
  font-size: 1.05rem;
  margin: 0 !important;
  flex-shrink: 0;
}
.card-danger .card-title > i.bi:first-child,
.card-outline.card-danger .card-title > i.bi:first-child {
  background: var(--bs-danger-bg-subtle, rgba(220, 53, 69, .12));
  color: var(--bs-danger-text-emphasis, #dc3545);
}
.card-success .card-title > i.bi:first-child,
.card-outline.card-success .card-title > i.bi:first-child {
  background: var(--bs-success-bg-subtle, rgba(25, 135, 84, .12));
  color: var(--bs-success-text-emphasis, #198754);
}
.card-info .card-title > i.bi:first-child,
.card-outline.card-info .card-title > i.bi:first-child {
  background: var(--bs-info-bg-subtle, rgba(13, 202, 240, .15));
  color: var(--bs-info-text-emphasis, #0dcaf0);
}
.card-warning .card-title > i.bi:first-child,
.card-outline.card-warning .card-title > i.bi:first-child {
  background: var(--bs-warning-bg-subtle, rgba(255, 193, 7, .15));
  color: var(--bs-warning-text-emphasis, #664d03);
}

td .btn + .btn,
.card-tools .btn + .btn {
  margin-left: .35rem;
}

.badge {
  font-weight: 500;
  padding: .42em .65em;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--bs-secondary-color, #6c757d);
}
.empty-state .empty-state-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-tertiary-bg, rgba(108, 117, 125, .1));
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.empty-state p {
  margin: 0;
  max-width: 26rem;
}

.soporte-banner {
  background: var(--bs-warning, #ffc107);
  color: #212529;
  padding: .5rem 1rem;
  text-align: center;
  font-size: .9rem;
}

/* Dashboard: cards de resumen con número grande + ícono, patrón propio
   de Display (no existe en Access). */
.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.stat-card .stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  background: var(--bs-primary-bg-subtle, rgba(37, 99, 235, .12));
  color: var(--bs-primary-text-emphasis, #2563EB);
}
.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}
.stat-card .stat-label {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .85rem;
}