/* GUARDIAN — app web
   Idea visual: la lámpara de sodio de la garita. Fondo de noche azul pizarra, una sola luz ámbar
   que marca lo que está "en vigilancia". Tipografía Atkinson Hyperlegible: hecha para leerse sin esfuerzo. */

@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --noche: #1B2433;
  --noche-2: #243046;
  --tinta: #1A1F26;
  --sodio: #F0B04E;
  --sodio-hondo: #9A6212;
  --senal: #2E8C83;
  --alarma: #C8463D;

  /* Tema claro (por defecto si no hay JS) */
  --fondo: #EEF1F4;
  --superficie: #FFFFFF;
  --chip: #E6EAEF;
  --texto: #1A1F26;
  --texto-2: #4F5A68;
  --linea: #D5DCE3;
  --acento-texto: #9A6212;
  --encendido: #FFF4E0;
  --barra-tabs: #FFFFFF;

  --r-chico: 8px;
  --r-medio: 16px;
  --r-grande: 22px;
  --paso: clamp(16px, 4vw, 28px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --fondo: #121924;
  --superficie: #1C2535;
  --chip: #26324A;
  --texto: #F1F4F7;
  --texto-2: #A9B4C2;
  --linea: #2C384D;
  --acento-texto: #F0B04E;
  --encendido: #2D2A20;
  --barra-tabs: #161E2C;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fondo: #121924; --superficie: #1C2535; --chip: #26324A; --texto: #F1F4F7; --texto-2: #A9B4C2;
    --linea: #2C384D; --acento-texto: #F0B04E; --encendido: #2D2A20; --barra-tabs: #161E2C; color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--fondo); color: var(--texto);
  font: 400 1.0625rem/1.55 "Atkinson", system-ui, sans-serif;
}

/* ---------- barra superior: siempre de noche, también en tema claro ---------- */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--paso); padding-top: max(12px, env(safe-area-inset-top));
  background: var(--noche); color: #EEF1F4;
}
.marca { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;
  font-weight: 700; letter-spacing: .14em; font-size: 1rem; }
.lampara { width: 14px; height: 14px; border-radius: 50%; background: var(--sodio);
  box-shadow: 0 0 0 4px rgb(232 163 61 / .18), 0 0 18px 2px rgb(232 163 61 / .55); }
.nav { display: flex; gap: 6px; align-items: center; }
.nav button, .nav a { background: none; border: 1px solid #3A4862; color: #EEF1F4; border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: .9375rem; cursor: pointer; text-decoration: none; }
.nav button:hover, .nav a:hover { border-color: var(--sodio); }

/* ---------- contenido ---------- */
.vista { max-width: 760px; margin: 0 auto; padding: var(--paso); padding-bottom: 96px; outline: none; }
h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.15; margin: 8px 0 4px; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; margin: 32px 0 10px; }
p { margin: 0 0 12px; max-width: 64ch; }
.sub { color: var(--texto-2); margin-bottom: 20px; }
a { color: var(--acento-texto); }
.migas { font-size: .9375rem; color: var(--texto-2); margin-bottom: 4px; }
.migas a { color: inherit; }

/* Pestañas de una cuenta */
.pestanas { display: flex; gap: 4px; margin: 20px 0 8px; border-bottom: 1px solid var(--linea); overflow-x: auto; }
.pestanas a { padding: 10px 14px; text-decoration: none; color: var(--texto-2); border-bottom: 3px solid transparent;
  white-space: nowrap; margin-bottom: -1px; }
.pestanas a[aria-current="page"] { color: var(--texto); border-bottom-color: var(--sodio); font-weight: 700; }

/* Listas en filas, no tarjetas */
.lista { list-style: none; margin: 0; padding: 0; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: var(--r-medio); overflow: hidden; }
.lista > li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--linea); }
.lista > li:first-child { border-top: 0; }
.lista .cuerpo { flex: 1; min-width: 0; }
.lista .titulo { font-weight: 700; overflow-wrap: anywhere; }
.lista .detalle { color: var(--texto-2); font-size: .9375rem; }
a.fila { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
a.fila:hover .titulo { text-decoration: underline; text-decoration-color: var(--sodio); text-underline-offset: 3px; }
.vacio { padding: 20px 16px; color: var(--texto-2); }

/* Estado de vigilancia: la lámpara de cada elemento */
.punto { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid var(--texto-2); }
.punto.vigila { border: 0; background: var(--sodio); box-shadow: 0 0 10px 1px rgb(232 163 61 / .6); }
.punto.ok { border: 0; background: var(--senal); }
.punto.apagado { border-style: dashed; }
.estado { font-size: .875rem; color: var(--texto-2); white-space: nowrap; }

/* Formularios */
form.bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-medio);
  padding: 18px 16px; display: grid; gap: 14px; margin-top: 12px; }
label { display: grid; gap: 6px; font-weight: 700; font-size: .9375rem; }
.ayuda { font-weight: 400; color: var(--texto-2); font-size: .875rem; }
input, select { font: inherit; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--r-chico); padding: 11px 12px; width: 100%; min-height: 46px; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--sodio); outline-offset: 2px; }
.fila-campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

button.primario, button.secundario, button.peligro {
  font: inherit; font-weight: 700; border-radius: var(--r-chico); padding: 11px 18px; min-height: 46px; cursor: pointer; }
button.primario { background: var(--sodio); color: var(--tinta); border: 0; }
button.primario:hover { background: #F0B455; }
button.secundario { background: transparent; color: var(--texto); border: 1px solid var(--linea); }
button.secundario:hover { border-color: var(--sodio); }
button.peligro { background: transparent; color: var(--alarma); border: 1px solid currentColor; }
button[disabled] { opacity: .55; cursor: progress; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
button.chico { min-height: 36px; padding: 6px 12px; font-size: .9375rem; }

.error { color: var(--alarma); font-weight: 700; }
.nota { border-left: 4px solid var(--sodio); padding: 10px 14px; background: var(--superficie);
  border-radius: 0 var(--r-chico) var(--r-chico) 0; color: var(--texto-2); margin: 16px 0; }
code, .clave { font-family: ui-monospace, Consolas, monospace; font-size: .9375rem; overflow-wrap: anywhere; }

/* Entrada: pantalla de noche con la lámpara encendida */
.entrada { min-height: calc(100dvh - 140px); display: grid; align-content: center; gap: 8px; }
.entrada h1 { font-size: clamp(2rem, 8vw, 3rem); }
.entrada form.bloque { max-width: 420px; }

.aviso { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--noche); color: #EEF1F4; border-left: 4px solid var(--sodio); padding: 12px 18px;
  border-radius: var(--r-chico); max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.aviso.ver { opacity: 1; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.qr { display: block; background: #fff; border-radius: var(--r-chico); padding: 8px; margin: 8px 0 12px; }
.punto.enlinea { display: inline-block; vertical-align: middle; }
[hidden] { display: none !important; }

ol.pasos { margin: 0 0 12px; padding-left: 22px; max-width: 64ch; }
ol.pasos li { margin-bottom: 6px; }
.lista .acciones { flex-wrap: nowrap; }
@media (max-width: 520px) { .lista > li { flex-wrap: wrap; } .lista .acciones { width: 100%; justify-content: flex-end; } }

/* Video en vivo */
a.boton { font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
a.boton.secundario { background: transparent; color: var(--texto); border: 1px solid var(--linea); border-radius: var(--r-chico); }
a.boton.secundario:hover { border-color: var(--sodio); }
a.boton.chico { min-height: 36px; padding: 6px 12px; font-size: .9375rem; }
.visor { background: #000; border-radius: var(--r-medio); overflow: hidden; aspect-ratio: 16 / 9; margin: 8px 0 6px; }
.visor guardian-video { display: block; width: 100%; height: 100%; }
.visor video { object-fit: contain; background: #000; }
.estado-video { font-size: .9375rem; color: var(--texto-2); }
.estado-video[data-tipo="ok"]::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--alarma); margin-right: 8px; vertical-align: middle; }
.estado-video[data-tipo="error"] { color: var(--alarma); font-weight: 700; }
@media (max-width: 560px) { .lista > li { flex-wrap: wrap; } .lista .cuerpo { flex-basis: calc(100% - 30px); } }
.barra-video { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.calidad { display: flex; gap: 8px; }
.calidad button[aria-pressed="true"] { border-color: var(--sodio); color: var(--sodio); }

/* =====================================================================================
   v0.5.0 — interfaz de 5 pestañas (Inicio, Equipos, Cámaras, Escenas, Más)
   ===================================================================================== */
:root { --naranja: #FF7A45; --turquesa: #3CC0B0; --azul: #5AA8F0; --violeta: #9C8CF0; --rojo: #E5776F; --verde: #7FD36B; --gris: #A9B4C2; --ambar: #F0B04E; }
body.con-tabs .vista { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) { body.con-tabs .barra { display: none; } }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 6px max(10px, env(safe-area-inset-bottom)); background: var(--barra-tabs); border-top: 1px solid var(--linea); }
.tabbar:empty { display: none; }
@media (min-width: 761px) { .tabbar { left: 50%; right: auto; width: 520px; transform: translateX(-50%); bottom: 16px; border: 1px solid var(--linea);
  border-radius: 20px; box-shadow: 0 10px 30px rgb(0 0 0 / .18); padding-bottom: 6px; } }
.tab { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .75rem;
  color: var(--texto-2); text-decoration: none; }
.tab .pastilla { width: 52px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.tab[aria-current="page"] { color: var(--acento-texto); font-weight: 700; }
.tab[aria-current="page"] .pastilla { background: rgb(240 176 78 / .16); }

.cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.cab h1 { margin: 0; font-size: 1.75rem; }
.cab .h-chico, .h-chico { font-size: 1.25rem; margin: 0; }
.crece { flex: 1; min-width: 0; }
.sub-cab, .hola { display: block; font-size: .875rem; color: var(--texto-2); }
.sitio { font-size: 1.5rem; font-weight: 700; }
.sitio-select { font: 700 1.375rem "Atkinson", sans-serif; border: 0; background: transparent; padding: 2px 0; min-height: 40px; width: auto; color: var(--texto); }
.redondo { width: 44px; height: 44px; border-radius: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); cursor: pointer; text-decoration: none; padding: 0; }
.redondo.lleno { background: var(--sodio); border: 0; color: #1A1F26; }
.redondo.cuadro { border-radius: 12px; }
.redondo[aria-pressed="true"] { border-color: var(--sodio); color: var(--acento-texto); background: rgb(240 176 78 / .16); }
.pildora { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); font: 700 .875rem "Atkinson", sans-serif; cursor: pointer; }
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 10px; }
.titulo-seccion h2 { margin: 0; font-size: 1.125rem; }
.titulo-seccion a { font-size: .875rem; text-decoration: none; }
.pie-ayuda { margin-top: 14px; }
.centro-txt { text-align: center; max-width: none; }
.separa { margin-top: 18px; }

/* Héroe del Modo Guardián: el color cambia con el modo */
.hero { border-radius: 24px; padding: 18px; color: #F6F8F9; display: grid; gap: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .18);
  background: linear-gradient(135deg, #2B3A55 0%, #1B2537 100%); }
.hero[data-modo="away"] { background: linear-gradient(135deg, #A4611A 0%, #5E3410 100%); }
.hero[data-modo="night"] { background: linear-gradient(135deg, #3B3A7A 0%, #1C1D45 100%); }
.hero[data-modo="vacation"] { background: linear-gradient(135deg, #1F7468 0%, #0F3B36 100%); }
.hero[data-modo="guests"] { background: linear-gradient(135deg, #2F6FA8 0%, #173A5C 100%); }
.hero[data-modo="emergency"] { background: linear-gradient(135deg, #B42A2A 0%, #5C1212 100%); }
.hero-cab { display: flex; align-items: center; gap: 14px; }
.hero-icono { width: 54px; height: 54px; border-radius: 18px; background: rgb(255 255 255 / .14); display: flex; align-items: center; justify-content: center; color: #F0B04E; }
.hero-etq { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .78); }
.hero-tit { display: block; font-size: 1.375rem; font-weight: 700; }
.hero-txt { margin: 0; color: rgb(255 255 255 / .9); font-size: .9375rem; }
.modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 16px; background: rgb(0 0 0 / .22); }
.modos button { min-height: 60px; border-radius: 12px; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font: 700 .75rem "Atkinson", sans-serif; background: transparent; color: rgb(255 255 255 / .88); }
.modos button[aria-checked="true"] { background: #FFFFFF; color: #1A1F26; }

/* Carrusel de escenas */
.carrusel { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(-1 * var(--paso)); padding: 0 var(--paso) 4px; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.escena-mini { flex: none; width: 136px; min-height: 112px; padding: 14px; border-radius: 18px; text-align: left; cursor: pointer; display: flex; flex-direction: column;
  gap: 6px; font-family: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--linea); }
.escena-mini .chip, .escena .chip { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.escena-mini .nom { font-weight: 700; font-size: .9375rem; }
.escena-mini .det { font-size: .75rem; color: var(--texto-2); }
.turquesa .chip { color: var(--turquesa); background: rgb(60 192 176 / .16); }
.ambar .chip { color: var(--ambar); background: rgb(240 176 78 / .18); }
.violeta .chip { color: var(--violeta); background: rgb(156 140 240 / .18); }
.rojo .chip { color: var(--rojo); background: rgb(229 119 111 / .18); }
.azul .chip { color: var(--azul); background: rgb(90 168 240 / .18); }

/* Escenas grandes */
.escena { border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 22px rgb(0 0 0 / .16); }
.escena.turquesa { background: linear-gradient(140deg, #2FA597, #1A6B62); }
.escena.ambar { background: linear-gradient(140deg, #E39A35, #A9601A); }
.escena.violeta { background: linear-gradient(140deg, #6E66D6, #3A3490); }
.escena.rojo { background: linear-gradient(140deg, #E2685F, #9C3A33); }
.escena.azul { background: linear-gradient(140deg, #4A8FD6, #24538F); }
.escena .chip { color: #fff !important; background: rgb(255 255 255 / .2) !important; }
.escena-run { flex: 1; min-height: 130px; padding: 14px; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; font-family: inherit; }
.escena-run .nom { font-size: 1.0625rem; font-weight: 700; }
.escena-run .det { font-size: .8125rem; opacity: .92; }
.escena-borrar { border: 0; background: rgb(0 0 0 / .18); color: #fff; font: 400 .8125rem "Atkinson", sans-serif; min-height: 36px; cursor: pointer; }

/* Cámara destacada y cámaras */
.cam-destacada { position: relative; display: block; height: 168px; border-radius: 22px; overflow: hidden; margin-top: 18px; color: #fff; text-decoration: none;
  background: radial-gradient(120% 90% at 30% 20%, #3B4A63 0%, #1A2333 55%, #0B111B 100%); }
.cam-destacada .insignia { position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px;
  background: rgb(0 0 0 / .5); font-size: .75rem; }
.luz-estado { width: 8px; height: 8px; border-radius: 4px; background: var(--gris); }
.luz-estado.ok { background: var(--turquesa); }
.play { width: 54px; height: 54px; border-radius: 27px; background: rgb(255 255 255 / .18); display: flex; align-items: center; justify-content: center; color: #fff; }
.cam-destacada .play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); }
.cam-destacada .pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; background: linear-gradient(transparent, rgb(0 0 0 / .65));
  display: flex; justify-content: space-between; align-items: flex-end; }
.cam-destacada .pie strong, .cam-destacada .pie small { display: block; }
.rejilla-1 { display: grid; gap: 14px; }
.cam { display: flex; flex-direction: column; gap: 6px; color: var(--texto); text-decoration: none; }
.cam-cuadro { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--linea); background: radial-gradient(120% 90% at 30% 20%, #3B4A63 0%, #1A2333 55%, #0B111B 100%); }
.cam.sin-video .cam-cuadro { background: var(--chip); }
.cam-aviso { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--texto-2); font-size: .875rem; }
.segmentado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--superficie);
  border: 1px solid var(--linea); margin-bottom: 14px; }
.segmentado button { min-height: 40px; border-radius: 10px; border: 0; cursor: pointer; font: 400 .875rem "Atkinson", sans-serif; background: transparent; color: var(--texto); }
.segmentado button[aria-selected="true"] { background: var(--sodio); color: #1A1F26; font-weight: 700; }

/* Tarjetas de equipo */
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rejilla-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
@media (min-width: 620px) { .rejilla-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eq { --col: var(--gris); min-height: 150px; border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--linea);
  background: var(--superficie); transition: background .15s, border-color .15s; }
.eq.compacta { min-height: 0; flex-direction: row; align-items: center; padding: 12px; }
.eq.compacta .eq-arriba { order: 2; }
.eq.compacta .eq-nombre { order: 1; flex: 1; min-width: 0; }
.eq.compacta .eq-icono { display: none; }
.t-luz { --col: var(--ambar); } .t-interruptor { --col: var(--turquesa); } .t-sensor { --col: var(--violeta); } .t-sirena { --col: var(--rojo); } .t-otro { --col: var(--azul); }
.eq.on { background: var(--encendido); border-color: var(--col); }
.eq.caido { opacity: .62; }
.eq-arriba { display: flex; align-items: flex-start; justify-content: space-between; }
.eq-icono { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--col);
  background: color-mix(in srgb, var(--col) 16%, transparent); }
.eq.on .eq-icono { background: var(--col); color: #1A1F26; }
.power { width: 44px; height: 44px; border-radius: 22px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: var(--chip); color: var(--texto); }
.power[aria-pressed="true"] { background: var(--sodio); color: #1A1F26; }
.eq-nombre { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
.eq-titulo { font-weight: 700; font-size: .9375rem; line-height: 1.25; overflow-wrap: anywhere; }
.eq-estado { font-size: .8125rem; color: var(--texto-2); }
.eq.on .eq-estado { color: var(--acento-texto); }
.origen { align-self: flex-start; padding: 2px 8px; border-radius: 8px; font-size: .6875rem; font-weight: 700; background: var(--chip); }
.origen.naranja { background: rgb(255 122 69 / .2); } .origen.turquesa { background: rgb(60 192 176 / .2); } .origen.azul { background: rgb(90 168 240 / .2); }

.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--paso)) 12px; padding: 0 var(--paso) 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-sala { flex: none; min-height: 40px; padding: 0 8px 0 14px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 8px;
  font: 400 .875rem "Atkinson", sans-serif; border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); }
.chip-sala .cuenta { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: .75rem; font-weight: 700; display: flex; align-items: center;
  justify-content: center; background: var(--chip); }
.chip-sala[aria-selected="true"] { background: var(--sodio); border-color: var(--sodio); color: #1A1F26; font-weight: 700; }
.chip-sala[aria-selected="true"] .cuenta { background: rgb(26 31 38 / .18); }

/* Detalle de equipo */
.centro { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 10px; }
.power-grande { width: 132px; height: 132px; border-radius: 66px; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: var(--chip); color: var(--texto); box-shadow: 0 0 0 10px var(--superficie); }
.power-grande.on { background: radial-gradient(circle at 35% 30%, #FFD38A, #E8962A); color: #1A1F26;
  box-shadow: 0 0 0 10px rgb(240 176 78 / .16), 0 0 0 22px rgb(240 176 78 / .07); }
.grande-estado { font-size: 1.25rem; font-weight: 700; }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 18px; padding: 14px; margin: 14px 0; }
.tarjeta h2 { margin: 0 0 10px; font-size: 1rem; }
.chip-opcion { min-height: 44px; border-radius: 12px; cursor: pointer; font: 400 .875rem "Atkinson", sans-serif; border: 1px solid var(--linea);
  background: var(--fondo); color: var(--texto); }
.chip-opcion:hover { border-color: var(--sodio); }
.chip-opcion.quitar { color: var(--alarma); }
form.plano { display: grid; gap: 12px; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 400; }
label.check input { width: 22px; height: 22px; min-height: 0; }
.lista select { width: auto; min-height: 40px; }

/* Más */
.perfil { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; color: #F6F8F9; background: linear-gradient(135deg, #2B3A55 0%, #1B2537 100%); }
.perfil strong, .perfil small { display: block; overflow-wrap: anywhere; } .perfil small { color: rgb(255 255 255 / .8); }
.avatar { width: 56px; height: 56px; border-radius: 28px; background: var(--sodio); color: #1A1F26; font-size: 1.375rem; font-weight: 700; display: flex;
  align-items: center; justify-content: center; flex: none; }
h2.etq { font-size: .875rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .06em; margin: 22px 0 10px; }
.temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tema { min-height: 104px; border-radius: 16px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font: 400 .875rem "Atkinson", sans-serif; color: var(--texto); background: var(--superficie); border: 2px solid var(--linea); }
.tema[aria-checked="true"] { border-color: var(--sodio); color: var(--acento-texto); font-weight: 700; }
.tema .muestra { width: 54px; height: 40px; border-radius: 10px; position: relative; overflow: hidden; border: 1px solid var(--linea); }
.tema.claro .muestra { background: #EEF1F4; } .tema.oscuro .muestra { background: #121924; }
.tema.sistema .muestra { background: linear-gradient(90deg, #EEF1F4 50%, #121924 50%); }
.tema .muestra span { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 8px; border-radius: 4px; background: var(--sodio); }
.conexion, .marca-op { min-height: 108px; padding: 14px; border-radius: 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--linea); }
.conexion.pendiente { border-style: dashed; }
.marca-op { align-items: center; justify-content: center; text-align: center; padding: 10px 6px; }
.marca-op.apagada { opacity: .7; }
.marca-op .eq-titulo { font-size: .8125rem; }
.logo { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #1A1F26; background: var(--gris); }
.logo.naranja { background: var(--naranja); } .logo.turquesa { background: var(--turquesa); } .logo.azul { background: var(--azul); }
.logo.violeta { background: var(--violeta); } .logo.ambar { background: var(--ambar); } .logo.rojo { background: var(--rojo); } .logo.verde { background: var(--verde); }
.etiqueta { font-size: .6875rem; padding: 2px 8px; border-radius: 8px; background: var(--chip); color: var(--texto); }
.etiqueta.ok { background: rgb(60 192 176 / .25); } .etiqueta.plan { background: rgb(240 176 78 / .25); }
.chip-ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.chip-ic.ambar { color: var(--ambar); background: rgb(240 176 78 / .18); } .chip-ic.turquesa { color: var(--turquesa); background: rgb(60 192 176 / .18); }
.chip-ic.azul { color: var(--azul); background: rgb(90 168 240 / .18); } .chip-ic.rojo { color: var(--rojo); background: rgb(229 119 111 / .18); }
.lista .detalle.error { color: var(--rojo); font-weight: 400; }
.buscar-wifi { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #2FA597 0%, #1A6B62 100%); box-shadow: 0 8px 22px rgb(0 0 0 / .18); }
.buscar-wifi strong, .buscar-wifi small { display: block; } .buscar-wifi small { opacity: .9; }
.onda { width: 54px; height: 54px; flex: none; border-radius: 27px; background: rgb(255 255 255 / .18); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px rgb(255 255 255 / .08); }

/* v0.6.0 — avisos y reglas */
.campana { position: relative; }
.insignia-num { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #E5554B; color: #fff;
  font-size: .6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lista li.nuevo { background: rgb(240 176 78 / .08); }
.switch { width: 52px; height: 32px; flex: none; border-radius: 16px; border: 0; padding: 3px; cursor: pointer; display: flex; background: var(--chip); }
.switch span { width: 26px; height: 26px; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--sodio); }
.switch[aria-checked="true"] span { transform: translateX(20px); }
.mini-acciones { display: flex; gap: 14px; margin-top: 6px; }
button.enlace { border: 0; background: none; padding: 6px 0; min-height: 32px; color: var(--acento-texto); font: 700 .8125rem "Atkinson", sans-serif; cursor: pointer; }
button.enlace.peligro { color: var(--rojo); }
.grupo { display: grid; gap: 12px; }
.grupo[hidden] { display: none; }
fieldset.dias { border: 1px solid var(--linea); border-radius: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; margin: 0; }
fieldset.dias legend { font-size: .875rem; padding: 0 4px; }

.visor-grab { width: 100%; aspect-ratio: 16 / 9; background: #05080D; border-radius: 16px; margin: 4px 0 8px; }
.lista li > .switch { margin-left: auto; }
.lista.tramos li { flex-wrap: nowrap; align-items: center; gap: 12px; }
.lista.tramos .cuerpo { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- Cámaras 0.9.0 (estilo EZVIZ / Yi IoT) */
.cam-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-cuadro guardian-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.cam-cuadro .play { position: relative; z-index: 1; }
.punto-estado { position: absolute; left: 8px; top: 8px; z-index: 2; font-size: .6875rem; padding: 2px 8px 2px 18px; border-radius: 10px;
  background: rgb(0 0 0 / .55); color: #fff; }
.punto-estado::before { content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--gris); }
.punto-estado.verde::before { background: var(--verde); } .punto-estado.rojo::before { background: var(--rojo); }

.visor-pro { position: relative; touch-action: pan-y; }
.visor-pro guardian-video video { transition: transform .2s; transform-origin: center; }
.visor-pro:fullscreen { aspect-ratio: auto; border-radius: 0; }
.visor-capa { position: absolute; inset: auto 0 0 0; z-index: 2; }
.visor-barra { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 8px 8px 12px;
  background: linear-gradient(transparent, rgb(0 0 0 / .65)); color: #fff; }
.visor-barra .estado-video { font-size: .8125rem; color: #fff; margin: 0; }
.visor-botones { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.ctl { width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgb(255 255 255 / .14); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; position: relative; }
.ctl:hover { background: rgb(255 255 255 / .26); } .ctl:disabled { opacity: .45; }
.ctl.texto { font: 700 .8125rem "Atkinson", sans-serif; }
.ctl[data-z]:not([data-z=""])::after { content: attr(data-z); position: absolute; top: -6px; right: -4px; font-size: .625rem; background: var(--sodio);
  color: #1A1F26; border-radius: 6px; padding: 0 4px; }
.cam-aviso.grande { position: absolute; inset: 0; justify-content: center; color: #C9D2DD; text-align: center; padding: 16px; }

.acciones-cam { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 14px 0; }
.accion { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); font: 400 .8125rem "Atkinson", sans-serif; cursor: pointer; text-align: center; }
.accion-ic { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: var(--chip); }
.accion.rojo .accion-ic { color: var(--rojo); background: rgb(229 119 111 / .18); }
.accion:disabled { opacity: .5; }

.pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); gap: 6px; justify-content: center; margin: 6px auto; }
.pad button { border-radius: 18px; border: 1px solid var(--linea); background: var(--chip); color: var(--texto); cursor: pointer; display: flex;
  align-items: center; justify-content: center; }
.pad button:active { background: var(--sodio); color: #1A1F26; }
.pad-up { grid-column: 2; grid-row: 1; } .pad-left { grid-column: 1; grid-row: 2; } .pad-right { grid-column: 3; grid-row: 2; } .pad-down { grid-column: 2; grid-row: 3; }
.pad-centro { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; color: var(--texto-2); }

.linea-tiempo { cursor: pointer; margin: 6px 0 2px; }
.linea-tiempo svg { display: block; width: 100%; height: 44px; }
.lt-fondo { fill: var(--chip); } .lt-grabado { fill: var(--senal); } .lt-protegido { fill: var(--sodio); }
.lt-evento { fill: var(--rojo); } .lt-manual { fill: var(--azul); }
.lt-hora { font-size: 22px; fill: var(--texto-2); }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: .75rem; color: var(--texto-2); margin-bottom: 8px; }
.lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lg.grabado::before { background: var(--senal); } .lg.evento::before { background: var(--rojo); } .lg.manual::before { background: var(--azul); } .lg.protegido::before { background: var(--sodio); }

h2.dia { font-size: .875rem; color: var(--texto-2); text-transform: capitalize; margin: 16px 0 6px; }
.eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ev { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; border: 1px solid var(--linea);
  background: var(--superficie); color: var(--texto); cursor: pointer; text-align: left; font: inherit; }
.ev:disabled { cursor: default; opacity: .75; }
.ev .cuerpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ev .titulo { font-weight: 700; font-size: .9375rem; } .ev .detalle { font-size: .8125rem; color: var(--texto-2); }
.ev-mini { width: 96px; height: 54px; flex: none; border-radius: 10px; overflow: hidden; background: var(--chip); display: flex; align-items: center; justify-content: center; color: var(--texto-2); }
.ev-mini img { width: 100%; height: 100%; object-fit: cover; }

.hoja { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .55); display: flex; align-items: flex-end; justify-content: center; }
.hoja-caja { width: min(720px, 100%); background: var(--fondo); border-radius: 22px 22px 0 0; padding: 14px var(--paso) calc(20px + env(safe-area-inset-bottom)); }
@media (min-width: 720px) { .hoja { align-items: center; } .hoja-caja { border-radius: 22px; } }

.fila-switch { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); }
.fila-switch .cuerpo { flex: 1; display: flex; flex-direction: column; } .fila-switch .detalle { font-size: .8125rem; color: var(--texto-2); }
.fila-switch input[role="switch"] { appearance: none; width: 46px; height: 28px; border-radius: 14px; background: var(--chip); position: relative; cursor: pointer;
  border: 1px solid var(--linea); flex: none; transition: background .15s; }
.fila-switch input[role="switch"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: left .15s; }
.fila-switch input[role="switch"]:checked { background: var(--sodio); } .fila-switch input[role="switch"]:checked::after { left: 21px; }
.fila-enlace { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--linea); color: var(--texto); text-decoration: none; }
.tarjeta h3 { font-size: .8125rem; color: var(--texto-2); margin: 14px 0 0; text-transform: uppercase; letter-spacing: .04em; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .875rem; margin: 12px 0 0; }
.ficha dt { color: var(--texto-2); } .ficha dd { margin: 0; overflow-wrap: anywhere; }

/* Alexa y voz */
.voz-frases { margin: 0; padding-left: 1.1em; }
.voz-frases li { margin: 4px 0; }
.voz-frases q { font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chips span { padding: 4px 10px; border-radius: 999px; background: var(--superficie-2, rgb(127 127 127 / .14)); font-size: .85rem; }
.copiable { display: flex; gap: 8px; align-items: center; }
.copiable code { flex: 1; overflow-wrap: anywhere; font-size: .8rem; }

/* Ajustes agrupados: cada grupo es una fila que se abre al tocarla (solo uno abierto a la vez) */
.grupos { background: var(--superficie); border-radius: 16px; overflow: hidden; margin: 8px 0 16px; }
.grupos details { border-top: 1px solid var(--linea); }
.grupos details:first-child { border-top: 0; }
.grupos summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
.grupos summary::-webkit-details-marker { display: none; }
.grupos summary .cuerpo { flex: 1; min-width: 0; }
.grupos summary .titulo { font-weight: 700; display: block; }
.grupos summary .detalle { color: var(--texto-2); font-size: .9rem; }
.grupos summary .flecha { transition: transform .2s; color: var(--texto-2); }
.grupos details[open] summary .flecha { transform: rotate(90deg); }
.grupos .contenido { padding: 0 16px 16px; animation: abrir .18s ease-out; }
.grupos .contenido > .bloque, .grupos .contenido > form { margin: 0; }
@keyframes abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .grupos .contenido { animation: none; } .grupos summary .flecha { transition: none; } }
.chip-ic.violeta { color: #A78BFA; background: rgb(167 139 250 / .18); } .chip-ic.gris { color: var(--texto-2); background: rgb(127 127 127 / .16); }
.estado-prot { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--superficie); margin: 8px 0; }
.estado-prot.rojo { box-shadow: inset 4px 0 0 var(--rojo); } .estado-prot.ambar { box-shadow: inset 4px 0 0 var(--ambar); } .estado-prot.turquesa { box-shadow: inset 4px 0 0 var(--turquesa); }
/* Asistente de voz */
.asis-fab { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: var(--sodio, #F0B04E); color: #1A1F26; box-shadow: 0 6px 18px rgb(0 0 0 / .35); z-index: 40; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.asis-fondo { position: fixed; inset: 0; background: rgb(0 0 0 / .55); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.asis-hoja { width: min(560px, 100%); background: var(--superficie); border-radius: 20px 20px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 12px; justify-items: center; }
.asis-cab { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.asis-mic { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--sodio, #F0B04E); color: #1A1F26; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.asis-mic.escuchando { animation: latido 1s infinite; }
@keyframes latido { 50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgb(240 176 78 / .25); } }
@media (prefers-reduced-motion: reduce) { .asis-mic.escuchando { animation: none; outline: 4px solid rgb(240 176 78 / .5); } }
.asis-txt { text-align: center; font-size: 1.05rem; min-height: 2.6em; margin: 0; }
.asis-entrada { width: 100%; }