:root {
  color-scheme: dark;
  --fondo: #000;
  --superficie: #1c1c1e;
  --linea: #2c2c2e;
  --texto: #f5f5f7;
  --secundario: #98989f;
  --acento: #0a84ff;
  --rojo: #ff3b30;
  --naranja: #ff9f0a;
  --pulgar: 28px;
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
  --seguro-sup: env(safe-area-inset-top, 0px);
  --seguro-inf: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
p { margin: 0; }
.sin-js { padding: 24px; }

/* Estructura */
.pantalla { min-height: 100dvh; display: flex; flex-direction: column; }
.pantalla.centrada { justify-content: center; align-items: center; padding: var(--seguro-sup) var(--seguro-der) var(--seguro-inf) var(--seguro-izq); gap: 16px; }
.contenido { flex: 1; width: 100%; padding: 12px calc(12px + var(--seguro-der)) calc(12px + var(--seguro-inf)) calc(12px + var(--seguro-izq)); }
.contenido.angosto { max-width: 720px; margin: 0 auto; }

.barra {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px;
  min-height: calc(48px + var(--seguro-sup));
  padding: var(--seguro-sup) calc(4px + var(--seguro-der)) 0 calc(4px + var(--seguro-izq));
  background: rgba(0, 0, 0, 0.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.barra h1 { margin: 0; padding: 0 8px; font-size: 17px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .izquierda { justify-self: start; display: flex; min-width: 0; }
.barra .derecha { justify-self: end; display: flex; min-width: 0; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--acento);
  font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.boton.primario { background: var(--acento); color: #fff; font-weight: 600; padding: 0 20px; }
.boton.icono-boton { color: var(--texto); padding: 0; }
.boton:disabled { opacity: 0.4; cursor: default; }
.icono { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.spinner { width: 22px; height: 22px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: giro 0.8s linear infinite; flex: none; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.insignia { display: inline-block; padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); font-size: 12px; line-height: 1.3; }
.insignia.vivo { background: var(--rojo); font-weight: 700; }
.aviso { color: var(--secundario); font-size: 13px; text-align: center; margin: 4px 0 8px; }

/* Login */
.login { width: min(100%, 360px); padding: 0 28px; display: flex; flex-direction: column; gap: 16px; }
.login h1 { margin: 0 0 8px; text-align: center; font-size: 34px; }
input[type="text"], input[type="password"], input[type="date"], select.campo {
  min-height: 48px; border: 0; border-radius: 10px; padding: 0 14px; background: var(--superficie); color: var(--texto); font: inherit; width: 100%;
}
.renglon input[type="date"], .renglon select.campo { width: auto; max-width: 60%; }
.error { color: var(--rojo); text-align: center; font-size: 15px; }

/* Mosaico */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; }
@media (min-width: 900px) { .rejilla { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } }
.tarjeta { display: block; color: inherit; text-decoration: none; min-width: 0; }
.foto, .miniatura {
  position: relative; background: var(--superficie); overflow: hidden; display: grid; place-items: center; color: var(--secundario);
}
.foto { aspect-ratio: 16 / 9; border-radius: 10px; }
.foto img, .miniatura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto.sin-conexion img { opacity: 0.45; }
.foto .insignia { position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.7); font-weight: 700; }
.nombre { margin-top: 6px; font-weight: 600; overflow-wrap: anywhere; }
.edad { margin-top: 2px; font-size: 12px; color: var(--secundario); }

/* Cámara en vivo */
.pantalla.camara { height: 100dvh; min-height: 0; }
.escenario { position: relative; flex: 1; min-height: 0; background: #000; overflow: hidden; }
.fondo, .video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.video { background: transparent; opacity: 0; transition: opacity 0.3s ease; }
.video.visible { opacity: 1; }
.capa {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none;
  padding: 12px calc(12px + var(--seguro-der)) calc(12px + var(--seguro-inf)) calc(12px + var(--seguro-izq));
}
.estado {
  pointer-events: auto; align-self: center; margin-bottom: 20px; padding: 16px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}

/* Línea de tiempo y eventos */
.visor { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.visor .foto-linea { width: 100%; height: 100%; object-fit: contain; }
.visor .estado { position: absolute; inset: 0; margin: 0; border-radius: 0; background: none; justify-content: center; }
.aviso-visor { color: var(--secundario); padding: 0 16px; text-align: center; }
.tiempo { text-align: center; margin: 16px 0; }
.hora { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fecha { font-size: 13px; color: var(--secundario); }
.barra-tiempo { position: relative; padding-top: 16px; margin-top: 8px; }
.marcas { position: absolute; top: 0; left: 0; right: 0; height: 14px; pointer-events: none; }
.marca { position: absolute; top: 0; width: 3px; height: 14px; border-radius: 2px; background: var(--naranja); left: calc(var(--pulgar) / 2 + var(--f) * (100% - var(--pulgar)) - 1.5px); }
.deslizador { width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.deslizador::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #48484a; }
.deslizador::-moz-range-track { height: 4px; border-radius: 2px; background: #48484a; }
.deslizador::-webkit-slider-thumb { -webkit-appearance: none; width: var(--pulgar); height: var(--pulgar); margin-top: -12px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.deslizador::-moz-range-thumb { width: var(--pulgar); height: var(--pulgar); border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.deslizador:disabled { opacity: 0.4; }
.extremos { display: flex; justify-content: space-between; font-size: 12px; color: var(--secundario); }

.filtros { background: var(--superficie); border-radius: 12px; padding: 0 14px; margin-bottom: 12px; }
.filtros .campo { background: var(--linea); min-height: 40px; }
.renglon { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--linea); }
.renglon:last-child { border-bottom: 0; }
.renglon input[type="checkbox"] { width: 28px; height: 28px; accent-color: var(--acento); }
.lista { list-style: none; margin: 0; padding: 0; }
.fila { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 6px 0; color: inherit; text-decoration: none; border-bottom: 1px solid var(--linea); }
.miniatura { width: 96px; height: 54px; flex: none; border-radius: 6px; }
.fila .datos { min-width: 0; }
.fila .nombre { margin: 0; }
.estado-lista { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; color: var(--secundario); }
.centinela { height: 1px; }
.detalle { margin-top: 12px; }
.titulo { font-size: 20px; font-weight: 700; }