/* 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;
  --niebla: #E8ECEF;
  --papel: #F6F8F9;
  --tinta: #1A1F26;
  --tinta-suave: #556070;
  --sodio: #E8A33D;
  --sodio-hondo: #9A6212;
  --senal: #2E8C83;
  --alarma: #C8463D;
  --linea: #CDD4DB;

  --fondo: var(--niebla);
  --superficie: var(--papel);
  --texto: var(--tinta);
  --texto-2: var(--tinta-suave);
  --acento-texto: var(--sodio-hondo);

  --r-chico: 6px;
  --r-medio: 12px;
  --paso: clamp(16px, 4vw, 28px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: var(--noche);
    --superficie: var(--noche-2);
    --texto: #EEF1F4;
    --texto-2: #A8B3C2;
    --linea: #354259;
    --acento-texto: var(--sodio);
    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; }