/* CCTV IA: consola de monitoreo. Base azul noche para salas con poca luz,
   ámbar como señal de acción, rojo/naranja solo para severidad. */
:root {
  --noche: #13203a;
  --placa: #1b2a48;
  --placa-alta: #22345a;
  --linea: #2d4169;
  --texto: #e6ebf3;
  --tenue: #97a6bf;
  --ambar: #f2b544;
  --naranja: #f08a3c;
  --rojo: #e5553f;
  --verde: #4db384;
  --radio: 6px;
  --cuerpo: "Barlow", "Segoe UI", system-ui, sans-serif;
  --titular: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--noche); color: var(--texto); font: 400 16px/1.5 var(--cuerpo); }
a { color: var(--ambar); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
h1, h2 { font-family: var(--titular); font-weight: 600; line-height: 1.1; margin: 0; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.4rem; margin-bottom: .75rem; }
.tenue { color: var(--tenue); margin: .25rem 0 0; }

/* Estructura */
.marco { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.riel { background: var(--placa); border-right: 1px solid var(--linea); padding: 1.25rem .75rem; display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 0; height: 100vh; }
.riel a { color: var(--texto); text-decoration: none; padding: .55rem .75rem; border-radius: var(--radio); font-weight: 500; }
.riel a:hover { background: var(--placa-alta); }
.riel a[aria-current="page"] { background: var(--placa-alta); box-shadow: inset 3px 0 0 var(--ambar); }
.riel .marca { font-family: var(--titular); font-size: 1.6rem; font-weight: 700; color: var(--ambar); margin-bottom: 1rem; }
.riel .marca:hover { background: none; }
.salir { margin-top: auto; padding: .75rem; border-top: 1px solid var(--linea); color: var(--tenue); font-size: .9rem; display: grid; gap: .35rem; }
.salir button { all: unset; cursor: pointer; color: var(--ambar); }
.contenido { padding: 2rem clamp(1rem, 3vw, 2.5rem); max-width: 1400px; width: 100%; }
.contenido > section { margin-top: 2.25rem; }
.cabecera { margin-bottom: 1.5rem; }
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* Estado general: una sola línea de lectura rápida */
.estado-general { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--placa); }
.estado-general div { padding: 1rem 1.25rem; border-left: 1px solid var(--linea); }
.estado-general div:first-child { border-left: 0; }
.estado-general dt { color: var(--tenue); font-size: .9rem; }
.estado-general dd { margin: .2rem 0 0; font: 600 2.2rem/1 var(--titular); }
.estado-general small { font: 400 1rem var(--cuerpo); color: var(--tenue); }
.estado-general .hay-problema dd { color: var(--rojo); }

/* Tira de evidencias: el elemento central del panel */
.tira { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.evento, .visor { border-left: 5px solid var(--tenue); }
.evento { display: flex; flex-direction: column; background: var(--placa); border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--texto); }
.evento:hover .evento-texto strong { color: var(--ambar); }
.sev-baja { border-left-color: var(--verde); }
.sev-media { border-left-color: var(--ambar); }
.sev-alta { border-left-color: var(--naranja); }
.sev-critica { border-left-color: var(--rojo); }
.evento-foto { position: relative; aspect-ratio: 16 / 9; background: #0c1628; display: grid; place-items: center; }
.evento-foto img { width: 100%; height: 100%; object-fit: cover; }
.evento-foto time { position: absolute; left: 0; bottom: 0; padding: .15rem .6rem; background: rgb(12 22 40 / .82); font: 600 1.5rem/1.2 var(--titular); letter-spacing: .02em; }
.evento-texto { padding: .7rem .85rem .85rem; display: grid; gap: .15rem; font-size: .92rem; }
.evento-texto strong { font-size: 1rem; }
.evento-texto > span { color: var(--tenue); }
.sin-foto { color: var(--tenue); font-size: .9rem; }
.sin-foto.grande { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #0c1628; }

/* Estados */
.estado { font-size: .88rem; }
.evento-texto .estado-alertado, .estado-alertado, .estado-alertado-ok { color: var(--verde); }
.evento-texto .estado-descartado, .estado-descartado, .estado-suprimido { color: var(--tenue); }
.evento-texto .estado-error, .estado-error { color: var(--rojo); }
.estado-verificando, .estado-recibido { color: var(--ambar); }

/* Detalle */
.detalle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
.visor { margin: 0; border-radius: var(--radio); overflow: hidden; background: #0c1628; }
.lienzo { position: relative; }
.caja { position: absolute; border: 2px solid var(--ambar); border-radius: 2px; }
.caja em { position: absolute; top: -1.45rem; left: -2px; background: var(--ambar); color: var(--noche); font: 600 .8rem/1.4 var(--cuerpo); font-style: normal; padding: 0 .35rem; white-space: nowrap; }
.ficha { background: var(--placa); border-radius: var(--radio); padding: 1.25rem; }
.ficha dl { margin: 0 0 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; }
.ficha dt { color: var(--tenue); }
.ficha dd { margin: 0; }
.ficha h2 { margin-top: 1.25rem; font-size: 1.2rem; }
.envios { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .92rem; }
.envios .ok { color: var(--verde); }
.envios .fallo { color: var(--rojo); }

/* Cámaras */
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .85rem; }
.camara { margin: 0; background: var(--placa); border-radius: var(--radio); overflow: hidden; border-top: 3px solid var(--verde); }
.camara.falla { border-top-color: var(--rojo); }
.camara img, .camara .sin-foto { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: #0c1628; display: grid; place-items: center; }
.camara figcaption { padding: .55rem .75rem; display: grid; font-size: .9rem; }
.camara figcaption span { color: var(--tenue); }
.camara.falla figcaption span { color: var(--rojo); }

/* Tablas y formularios */
.tabla { width: 100%; border-collapse: collapse; background: var(--placa); border-radius: var(--radio); overflow: hidden; }
.tabla th, .tabla td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--linea); }
.tabla th { color: var(--tenue); font-weight: 500; font-size: .9rem; }
.tabla tr:last-child td { border-bottom: 0; }
input, select, textarea { width: 100%; margin-top: .3rem; padding: .55rem .7rem; background: var(--noche); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio); font: inherit; }
label { display: block; color: var(--tenue); font-size: .92rem; }
.boton { display: inline-block; background: var(--ambar); color: var(--noche); border: 0; border-radius: var(--radio); padding: .6rem 1.1rem; font: 600 1rem var(--cuerpo); text-decoration: none; cursor: pointer; }
.boton:hover { background: #f7c865; }
.enlace-peligro { all: unset; cursor: pointer; color: var(--rojo); }
.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.filtros label { min-width: 170px; }
.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; align-items: end; max-width: 900px; }
.vincular { background: var(--placa); padding: 1.25rem; border-radius: var(--radio); }
.vincular .tenue { margin-bottom: 1rem; }
.error { display: block; color: var(--rojo); margin-top: .25rem; }
.aviso { padding: .75rem 1rem; border-radius: var(--radio); background: var(--placa-alta); margin: 0 0 1rem; }
.aviso-success { box-shadow: inset 4px 0 0 var(--verde); }
.aviso-error { box-shadow: inset 4px 0 0 var(--rojo); }
.vacio { background: var(--placa); border: 1px dashed var(--linea); border-radius: var(--radio); padding: 1.5rem; }
.vacio p { color: var(--tenue); max-width: 60ch; }
.paginas { display: flex; gap: 1.25rem; justify-content: center; margin-top: 1.5rem; color: var(--tenue); }
.ficha form textarea { margin-bottom: .75rem; }

/* Acceso */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.tarjeta-acceso { width: min(380px, 100%); background: var(--placa); padding: 2rem; border-radius: var(--radio); border-top: 4px solid var(--ambar); display: grid; gap: .6rem; }
.tarjeta-acceso h1 { color: var(--ambar); }
.tarjeta-acceso .tenue { margin-bottom: .75rem; }
.tarjeta-acceso .boton { margin-top: .75rem; }

@media (max-width: 820px) {
  .marco { grid-template-columns: 1fr; }
  .riel { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: .5rem; }
  .riel .marca { margin: 0 .5rem 0 0; }
  .salir { margin: 0 0 0 auto; border: 0; padding: .5rem; display: flex; }
  .salir span { display: none; }
  .detalle { grid-template-columns: 1fr; }
  .estado-general div { border-left: 0; border-top: 1px solid var(--linea); }
  .estado-general div:first-child { border-top: 0; }
}

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