/* el Ojo de Dios — una app para mirar cámaras desde el celular, de noche, con una mano.
   De ahí salen las decisiones: fondo oscuro (el video manda, no la interfaz), botones grandes,
   y nada que parpadee. Sin frameworks: son 6 KB y cargan con mala señal. */

:root {
  --fondo:      #0b1620;
  --panel:      #14222e;
  --panel-alto: #1c2f3e;
  --borde:      #24384a;
  --texto:      #e8f1f6;
  --tenue:      #8fa6b5;
  --ser:        #17b6e0;
  --ser-alto:   #41d4f2;
  --rojo:       #ff6b6b;
  --verde:      #4ad991;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* la barra de estado del celular no tapa la interfaz */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.oculta { display: none !important; }

.pantalla { min-height: 100vh; }
.centrada { display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: .5rem; padding: 2rem 1.25rem; text-align: center; }

.emblema-grande { width: 132px; height: 132px; }
.emblema-chico  { width: 30px;  height: 30px; }

h1 { font-size: 1.55rem; margin: .4rem 0 0; letter-spacing: .2px; }
.bajada { color: var(--tenue); margin: 0 0 1.4rem; }

header {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 5;
}
header .titulo { font-weight: 600; flex: 1; }

button {
  font: inherit; font-weight: 600;
  background: var(--ser); color: #04222c; border: 0;
  border-radius: 12px; padding: .8rem 1.1rem; cursor: pointer;
  /* 44 px es el mínimo para que un dedo no falle */
  min-height: 44px;
}
button:active { background: var(--ser-alto); }
button.secundario { background: var(--panel-alto); color: var(--texto); }
button.icono { background: transparent; color: var(--texto); font-size: 1.35rem;
               padding: .2rem .55rem; min-height: 40px; }
button.volver { font-size: 1.9rem; line-height: 1; }
button[disabled] { opacity: .5; }

input, select {
  font: inherit; width: 100%;
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 12px;
  padding: .78rem .9rem; min-height: 44px;
}
label { display: block; text-align: left; color: var(--tenue); font-size: .85rem;
        margin-bottom: .75rem; }
label input { margin-top: .25rem; color: var(--texto); font-size: 1rem; }

form { display: flex; flex-direction: column; gap: .7rem; width: 100%; max-width: 380px; }
.cuerpo { padding: 1rem; max-width: 640px; margin: 0 auto; }
.fila { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0; }
.fila > input { flex: 1 1 8rem; }

.error { color: var(--rojo); min-height: 1.2em; margin: .3rem 0; font-size: .92rem; }
.ok    { color: var(--verde); min-height: 1.2em; margin: .3rem 0; font-size: .92rem; }
.ayuda { color: var(--tenue); font-size: .9rem; }
.vacio { color: var(--tenue); text-align: center; padding: 3rem 1.5rem; line-height: 1.7; }

/* la grilla de cámaras: todas juntas, como el DMSS */
.grilla { display: grid; gap: .6rem; padding: .6rem;
          grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
           overflow: hidden; cursor: pointer; }
.tarjeta img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #060d13;
               display: block; }
.tarjeta .pie { padding: .5rem .6rem; font-size: .88rem; }
.tarjeta .equipo { color: var(--tenue); font-size: .76rem; }
/* Un fabricante roto NO deja un rectángulo negro mudo: dice qué pasó. */
.tarjeta .motivo { color: var(--rojo); font-size: .76rem; padding: 0 .6rem .5rem; }

.visor { background: #000; }
.visor video { width: 100%; aspect-ratio: 16/9; background: #000; display: block; }

.pestanas { display: flex; border-bottom: 1px solid var(--borde); }
.pestana { flex: 1; background: transparent; color: var(--tenue); border-radius: 0;
           border-bottom: 3px solid transparent; }
.pestana.activa { color: var(--texto); border-bottom-color: var(--ser); }

/* La línea de tiempo: cada bloque es un pedazo grabado, ancho proporcional a su duración.
   Naranja = movimiento, cian = grabación continua. */
.linea-tiempo { display: flex; gap: 2px; height: 46px; background: var(--panel);
                border: 1px solid var(--borde); border-radius: 10px; overflow: hidden;
                align-items: stretch; }
.linea-tiempo .bloque { background: var(--ser); min-width: 3px; }
.linea-tiempo .bloque.movimiento { background: #f0a13a; }
.linea-tiempo .hueco { background: transparent; }

#lector { display: none; margin-bottom: .8rem; }
#lector.viendo { display: block; }
#lector video { width: 100%; border-radius: 12px; background: #000; }

/* La invitación a instalar. Va arriba de las cámaras y se va sola cuando el usuario dice que no
   (queda anotado en el teléfono: preguntar en cada visita es acoso, no es un recordatorio). */
.instalar { display: flex; align-items: center; gap: .7rem; margin: .8rem 0;
            padding: .7rem .8rem; background: var(--panel); border: 1px solid var(--borde);
            border-radius: 14px; }
.instalar img { width: 38px; height: 38px; flex: none; }
.instalar div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.instalar span { color: var(--tenue); font-size: .82rem; }
.instalar button { padding: .5rem .9rem; }