/*
 * Componentes compartidos entre área cliente y admin.
 * Firma visual: consola de telemetría — ver plan de diseño para el porqué de
 * cada decisión (paleta/tipografía en tokens.css).
 */

body {
  background-color: var(--surface-bg);
  color: var(--text-1);
  font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6, legend, .navbar-brand, .brand-word {
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
}

/*
 * Navbar compartida: siempre con el tono grafito del panel de control,
 * igual en ambos temas — es parte de la firma visual, no del tema claro/oscuro.
 */
.navbar.app-navbar {
  background-color: var(--led-bezel-bg);
  border-bottom: 1px solid var(--led-bezel-border);
  min-height: 56px;
}
.navbar.app-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.navbar.app-navbar .navbar-brand img { height: 26px; width: auto; }
.navbar.app-navbar .navbar-text {
  color: #8A93A1;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding-left: .75rem;
  margin-left: .25rem;
  border-left: 1px solid var(--led-bezel-border);
}
.navbar.app-navbar .btn-outline-light {
  --bs-btn-color: #C7CDD6;
  --bs-btn-border-color: var(--led-bezel-border);
  --bs-btn-hover-bg: rgba(255,255,255,.08);
  --bs-btn-hover-border-color: var(--led-bezel-border);
  --bs-btn-hover-color: #ECEFF3;
  border-radius: .55rem;
}
.navbar.app-navbar .theme-toggle { color: #E9ECEF; border-color: var(--led-bezel-border); }
.navbar.app-navbar .theme-toggle:hover { background-color: rgba(255, 255, 255, .08); }

/* Botón de toggle claro/oscuro */
.theme-toggle {
  border: 1px solid var(--surface-border);
  background: transparent;
  color: var(--text-1);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.theme-toggle:hover { background-color: var(--surface-2); }
.theme-toggle .icon-moon { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .icon-moon { display: inline-block; }

/* ---------- Sidebar de cuenta (menu_opciones*.php) ---------- */

.acct-card {
  background-color: var(--surface-2);
  border: 1px solid var(--surface-border);
  border-radius: .75rem;
  padding: .875rem;
}
.acct-card .acct-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-1);
}
.acct-card .acct-email {
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  margin-top: .1rem;
}
.acct-card .acct-stats {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
}
.acct-card .acct-stat {
  flex: 1;
  background-color: var(--surface-1);
  border: 1px solid var(--surface-border);
  border-radius: .55rem;
  padding: .45rem .55rem;
}
.acct-card .acct-stat .n {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-1);
  line-height: 1.2;
}
.acct-card .acct-stat.is-warn .n { color: var(--color-warning); }
.acct-card .acct-stat .l {
  color: var(--text-muted);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.nav-section-label {
  color: var(--text-muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  padding: 0 .2rem;
  margin: 1rem 0 .4rem;
}
.nav-section-label:first-of-type { margin-top: 0; }

/* Lista de navegación lateral: botones neutros y discretos, el color se
   reserva para la única acción real (Make a Payment) */
.side-nav-list .btn {
  border-radius: .55rem;
  font-weight: 600;
  border-color: transparent;
  color: var(--text-2);
  position: relative;
}
.side-nav-list .btn:hover {
  background-color: var(--surface-2);
  color: var(--text-1);
}
.side-nav-list .btn.active-nav {
  background-color: var(--surface-2);
  color: var(--text-1);
}
.side-nav-list .btn.active-nav::before {
  content: "";
  position: absolute;
  left: -.6rem;
  top: .4rem;
  bottom: .4rem;
  width: 3px;
  border-radius: 2px;
  background-color: var(--brand-primary);
}

/* Cards */
.card {
  background-color: var(--surface-1);
  border-color: var(--surface-border);
  border-radius: .75rem;
}

/* Tablas */
.table {
  --bs-table-bg: var(--surface-1);
  --bs-table-color: var(--text-1);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-border-color: var(--surface-border);
  --bs-table-hover-bg: var(--surface-2);
}

/* ---------- Chips de filtro (mnu_botones.php) ---------- */

.chip-row {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  background-color: var(--surface-2);
  border: 1px solid var(--surface-border);
  padding: .3rem;
  border-radius: .7rem;
  width: fit-content;
}

/* Barra de herramientas (dispositivos_area*.php): busqueda + chips de familia
   + acción principal, todo en una sola caja en vez de piezas sueltas. El
   chip-row anidado pierde su propia caja para no anidar una caja dentro de
   otra — la caja exterior ya hace ese trabajo. */
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  background-color: var(--surface-2);
  border: 1px solid var(--surface-border);
  padding: .4rem .6rem;
  border-radius: .7rem;
}
.toolbar-row .chip-row {
  background: transparent;
  border: none;
  padding: 0;
  width: auto;
}
.toolbar-row form#buscar {
  border-left: 1px solid var(--surface-border);
  padding-left: .6rem;
}
.chip-row .chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border-radius: .5rem;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.chip-row .chip:hover { color: var(--text-1); background-color: var(--surface-1); }
.chip-row .chip.is-alarm { color: var(--color-danger); margin-left: auto; }
/* Los logos de DINOS/IONA son trazo casi negro sobre fondo transparente,
   pensados para fondo claro: en modo oscuro se volvían casi invisibles.
   Se les da una placa clara fija (igual en ambos temas) para que conserven
   sus colores reales en vez de intentar invertirlos con filtros CSS. */
.chip-row .chip img {
  height: 16px;
  background-color: #fff;
  padding: 3px 5px;
  border-radius: .3rem;
}

/* Selector de rango de fechas personalizado (dispositivo_graph_*.php): misma
   "caja" que .chip-row para que se perciba como parte del mismo grupo de
   controles, en vez de flotar suelto al lado de los chips rápidos. */
.date-range-form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: end;
  background-color: var(--surface-2);
  border: 1px solid var(--surface-border);
  padding: .4rem .6rem;
  border-radius: .7rem;
}
.date-range-field {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.date-range-field label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- Lectura de dispositivo en vivo ----------
 * Un pequeño "bisel" de instrumento (mismo bisel en ambos temas, ver tokens.css)
 * con tipografía monoespaciada limpia — sustituye al look LED/7-segmentos.
 * Aplicado directamente a las clases que ya emiten estos valores en
 * dispositivos_area*.php/funciones.php, para no tener que tocar ese PHP.
 * .led-readout queda además como utilidad genérica para markup nuevo.
 */
.led-readout,
.display_value, .display_value_big,
.dinos_value, .dinos_value_big,
.pdw_value_pressure,
.IOC_value_temp, .IOC_value_temp_big,
.IOC_value_humi, .IOC_value_humi_big,
.IOC_value_co2, .IOC_value_co2_big,
.ptw_value_temp,
.ditelstudio_value_temp {
  font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 500;
  background-color: var(--led-bezel-bg);
  border: 1px solid var(--led-bezel-border);
  border-radius: .45rem;
  padding: .3rem .6rem;
  margin: 2px;
  display: inline-block;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: nowrap;
}
.led-readout,
.display_value, .display_value_big,
.dinos_value, .dinos_value_big,
.pdw_value_pressure,
.IOC_value_temp, .IOC_value_temp_big,
.ptw_value_temp,
.ditelstudio_value_temp {
  color: var(--color-device-reading);
}
.IOC_value_humi, .IOC_value_humi_big { color: var(--color-reading-blue); }
.IOC_value_co2, .IOC_value_co2_big { color: var(--color-reading-green); }
.display_value_small { color: var(--color-warning); }

.led-readout--empty {
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;
  font-size: .875rem;
  background: transparent;
  border-style: dashed;
}

/* ---------- Estado de conexión (dispositivos_area*.php) ---------- */

.state-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  margin-right: .45rem;
  vertical-align: middle;
}
.state-dot.is-live { background-color: var(--color-success); box-shadow: 0 0 0 3px rgba(var(--color-success-rgb), .18); }
.state-dot.is-stale { background-color: var(--color-warning); }
.state-dot.is-none { background-color: var(--text-muted); opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .state-dot.is-live { animation: state-pulse 2.2s ease-in-out infinite; }
}
@keyframes state-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), .45); }
  50% { box-shadow: 0 0 0 5px rgba(var(--color-success-rgb), 0); }
}

.last-seen { font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.last-seen.is-live { color: var(--color-success); }
.last-seen.is-stale { color: var(--color-warning); }
.last-seen.is-none { color: var(--text-muted); }

/* Punto de color + código hex (dispositivos_area3.php: Play list) en vez de un
   rectángulo con el hex en blanco encima — evita problemas de contraste con
   colores claros (blanco, cian, amarillo) y usa el mismo lenguaje mono del
   resto de badges. */
.color-swatch {
  display: inline-block;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  vertical-align: middle;
  margin-right: .4rem;
}
/* Aviso plegable (dispositivos_area_reglas.php): importante pero no debe
   ocupar media pantalla por defecto — se abre solo si interesa. */
.notice-details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.notice-details summary::-webkit-details-marker { display: none; }
.notice-details summary::before {
  content: "▸";
  display: inline-block;
  margin-right: .4rem;
  transition: transform .15s;
}
.notice-details[open] summary::before { transform: rotate(90deg); }

/* Ficha de dato de conexión (display_setup.php): label + valor + copiar */
.setup-field {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--surface-border);
}
.setup-field:last-of-type { border-bottom: none; }
.setup-field-label {
  width: 90px;
  flex: none;
  font-size: .8rem;
  color: var(--text-muted);
}
.setup-field-value {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85rem;
  color: var(--text-1);
  word-break: break-all;
}

/* Guía de primeros pasos (index.php): secuencia real, así que los números
   tienen sentido aquí (a diferencia de usarlos como mera decoración). */
.setup-step {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.setup-step-num {
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: rgba(var(--brand-primary-rgb), .14);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}

.reg-date {
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85rem;
}

.device-cell { display: flex; align-items: center; }
.device-cell .device-alias { font-weight: 600; color: var(--text-1); font-size: .9rem; }
.device-cell .device-sn { color: var(--text-muted); font-family: 'IBM Plex Mono', monospace; font-size: .72rem; margin-top: 1px; }

/* ---------- Reordenar dispositivos por arrastre (dispositivos_area.php) ---------- */

.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .4rem;
  color: var(--text-muted);
  cursor: grab;
}
.drag-handle:hover { background-color: var(--surface-2); color: var(--text-1); }
.drag-handle:active { cursor: grabbing; }

tr.device-row.is-dragging { opacity: .4; }
tr.device-row {
  transition: background-color .15s;
  border-left: 3px solid transparent;
}
/* Franja de estado en el borde izquierdo de la fila: deja claro de un vistazo
   qué dispositivos llevan sin reportar más de 30 min, sin tener que leer cada
   celda. Los que van bien ("live") no llevan franja — solo se señala lo que
   necesita atención. */
tr.device-row.state-stale { border-left-color: var(--color-warning); }
tr.device-row.state-none { border-left-color: var(--surface-border); }

/* ---------- Densidad de la tabla de dispositivos ---------- */
.table-devices > :not(caption) > * > * {
  padding-top: .65rem;
  padding-bottom: .65rem;
  vertical-align: middle;
}
.table-devices .led-readout,
.table-devices .display_value, .table-devices .display_value_big,
.table-devices .dinos_value, .table-devices .dinos_value_big,
.table-devices .pdw_value_pressure,
.table-devices .IOC_value_temp, .table-devices .IOC_value_temp_big,
.table-devices .IOC_value_humi, .table-devices .IOC_value_humi_big,
.table-devices .IOC_value_co2, .table-devices .IOC_value_co2_big,
.table-devices .ptw_value_temp,
.table-devices .ditelstudio_value_temp {
  margin: 1px 3px 1px 0;
}

/* Columnas de solo icono (drag, estado, acciones): ancho fijo y compacto en vez
   de dejar que el % sobrante del layout de tabla las infle */
.table th.icon-col, .table td.icon-col {
  width: 44px;
  min-width: 44px;
  text-align: center;
  white-space: nowrap;
  padding-left: .35rem;
  padding-right: .35rem;
}

/* ---------- Iconos de fila (dispositivos_area*.php) ----------
 * Antes en color literal (blue/green/red/grey) fijado inline: no se adaptaba
 * al tema y el azul puro chocaba contra el fondo oscuro. Ahora sobre tokens. */
.icon-net { color: var(--color-info) !important; }
.icon-toggle-on { color: var(--color-success) !important; }
.icon-toggle-off { color: var(--text-muted) !important; }
.icon-toggle-suspended { color: var(--color-danger) !important; }
.icon-delete { color: var(--color-danger) !important; }
.chip-download {
  background-color: var(--surface-chip);
  border-radius: .35rem;
  display: inline-flex;
  padding: 4px 6px;
}
.chip-download .bi { color: #fff !important; }
.metric-count { color: var(--color-reading-green) !important; }
.metric-mass { color: var(--color-reading-blue) !important; }