/* ──────────────────────────────────────────────────────────────────────────
   Tema CLARO sobre la imagen de fondo (media/fondo.png).
   Se incluye en todas las páginas DESPUÉS de su <style> inline, así redefine
   las variables CSS (la mayoría del estilo usa var()) y unas pocas superficies
   oscuras fijas. El vídeo de las cámaras sigue sobre negro con texto claro.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#aebfcb;
  --panel:rgba(255,255,255,.74);
  --line:rgba(18,44,62,.24);
  --fg:#15232e;
  --muted:#4a5b68;
  --accent:#0e7ca0;
  --amber:#b3770a;
  --green:#1f9d63;
  --red:#d23b58;
}

body{
  background:#b7c6d2 url("/media/fondo.png") center center / cover no-repeat fixed !important;
  color:var(--fg);
}

/* Superficies que eran oscuras fijas → cristal claro */
header{
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.55)) !important;
  border-bottom:1px solid var(--line) !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.sidebar{background:rgba(255,255,255,.5) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.side-head{background:rgba(255,255,255,.74) !important}
.tree-section{background:rgba(255,255,255,.45) !important}
.group>.dev-row,.group.vis>.dev-row{background:rgba(255,255,255,.42) !important}
.folder-head{background:rgba(255,255,255,.5) !important}
/* Columna lateral del buscador de Matrículas (misma estética que .sidebar) */
.side{background:rgba(255,255,255,.5) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.side-title{background:rgba(255,255,255,.74) !important}
.nvr-all,.nvr-name{background:rgba(255,255,255,.42) !important}
th{background:rgba(255,255,255,.82) !important}
.card{background:rgba(255,255,255,.74) !important; color:var(--fg)}
#lightbox{background:rgba(15,35,55,.55) !important}

/* Celdas de cámara: relleno CLARO y sobrio (marco en camaras.html). El rótulo va
   sobre un degradado oscuro al pie, así que su texto sigue claro y legible. */
.tile{background:#e9eef2 !important}
.tile .label{color:#e9eff3 !important}
.tile .label .dev{color:#c2cdd6 !important}

/* Matrícula de eventos: texto oscuro sobre el amarillo */
.plate{color:#241800 !important}

/* ──────────────────────────────────────────────────────────────────────────
   App a PANTALLA COMPLETA del monitor: sin barras de desplazamiento de página.
   El alto lo ocupa el monitor; el scroll, cuando hace falta, va DENTRO del
   contenido (no en la página). Como theme.css se carga tras el <style> inline,
   estas reglas mandan sobre la maquetación de cada plantilla.
   ────────────────────────────────────────────────────────────────────────── */
html,body{height:100%;}
body{margin:0; overflow:hidden; display:flex; flex-direction:column;}
/* Cabecera, barra de filtros y pie: alto natural, no se encogen */
body>header,body>.bar,body>footer{flex:0 0 auto;}
/* Zona principal: ocupa el resto y hace scroll interno si el contenido no cabe */
body>main{flex:1 1 auto; min-height:0; overflow:auto;}
/* Páginas con tabla suelta bajo la barra (p. ej. Eventos): el flex fija el alto */
body>.wrap{flex:1 1 auto; min-height:0; overflow:auto; max-height:none;}
/* Cámaras en directo y Grabaciones gestionan su propio scroll interno: que llenen
   el resto del alto sin recortar (anula su height:calc fijo) */
body>.app{flex:1 1 auto; min-height:0; height:auto !important;}

/* ──────────────────────────────────────────────────────────────────────────
   VISTA MÓVIL (≤ 760 px). La app es de diseño "escritorio a pantalla completa"
   (body en flex con overflow:hidden), lo que en un teléfono RECORTA el contenido.
   En pantallas estrechas devolvemos el scroll normal del documento, compactamos
   la cabecera/barras y damos scroll horizontal a las tablas anchas. El menú de
   navegación se colapsa en un botón ☰ (ver _nav.html). Como theme.css se carga
   tras el <style> de cada plantilla, estas reglas mandan sobre su maquetación.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px){
  /* Scroll de documento normal en lugar del lienzo fijo de escritorio */
  html,body{height:auto !important; overflow:visible !important;}
  body{display:block !important;}
  body>main,body>.app{overflow:visible !important; height:auto !important;
    min-height:0 !important; max-height:none !important;}
  /* .wrap (tablas anchas): alto natural pero scroll HORIZONTAL propio, para que la
     tabla no empuje el ancho de toda la página. Mismo nivel de especificidad
     (body>.wrap) que la regla de alto, así no la pisa con overflow:visible. */
  body>.wrap{overflow-x:auto !important; overflow-y:visible !important; height:auto !important;
    min-height:0 !important; max-height:none !important; -webkit-overflow-scrolling:touch;}

  /* Cabecera compacta y apilable */
  header{flex-wrap:wrap !important; gap:8px !important; padding:10px 12px !important;}
  header h1{font-size:18px !important; letter-spacing:.04em !important;}
  header img{height:34px !important;}

  /* Barras de filtros/herramientas: que envuelvan y aprovechen el ancho */
  .bar,.tools{flex-wrap:wrap !important; padding:10px 12px !important; gap:8px !important;}
  .bar>.grow,.tools>.grow{display:none !important;}
  .bar select,.bar input,.bar input[type=search]{flex:1 1 140px; min-width:0;}

  /* Márgenes interiores más ajustados */
  main{padding:16px 12px !important;}

  /* Tablas anchas: que se desplacen en horizontal dentro de su contenedor en vez
     de desbordar la pantalla */
  .wrap{overflow-x:auto !important; -webkit-overflow-scrolling:touch;}
  .wrap table{min-width:640px;}

  /* Objetivos táctiles algo mayores en botones de navegación/acción */
  a.nav,button.nav{padding:9px 12px !important;}
}