/* =================================================================
   Proyecto Digitalización Documentación Lagartario de El Hierro
   Sistema de diseño. Todos los colores salen de variables CSS para
   que los gráficos puedan leerlos y para que el tema oscuro funcione.
   ================================================================= */

:root {
  --ground:#FBFAF7; --surface:#FFFFFF; --surface-2:#F4F3EE; --surface-3:#EAE9E2;
  --ink:#1A1E1B; --ink-2:#4A5149; --ink-3:#7C837A;
  --line:#DEDDD5; --line-strong:#C6C5BB;
  --brand:#0B3D2A; --brand-2:#12563B; --brand-pale:#DDEAE1;
  --accent:#C2410C;
  --s1:#0F7B4F; --s2:#C2410C; --s3:#2563A8; --s4:#9A7B12;
  --good:#0F7B4F; --warn:#9A7B12; --crit:#B3261E;
  --good-bg:#E3F2E9; --warn-bg:#FAF1D9; --crit-bg:#FBE6E4;
  --grid:#E7E6DE;

  --fuente-titulo:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-texto:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-cifra:'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --radio:12px;
  --sombra-flotante:0 10px 30px rgba(16,24,20,.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:#131513; --surface:#1A1D1A; --surface-2:#212520; --surface-3:#2A2F29;
    --ink:#EDEFEA; --ink-2:#B4BBB2; --ink-3:#858C83;
    --line:#2E332D; --line-strong:#414740;
    --brand:#0E4A33; --brand-2:#17694A; --brand-pale:#1D3A2C;
    --accent:#E5722F;
    --s1:#1E9265; --s2:#D65A1C; --s3:#4E86CE; --s4:#AE8F22;
    --good:#1E9265; --warn:#AE8F22; --crit:#E0655C;
    --good-bg:#16301F; --warn-bg:#2E2A14; --crit-bg:#331B19;
    --grid:#282D27;
    --sombra-flotante:0 10px 30px rgba(0,0,0,.55);
  }
}

/* ---------------------------- Base ---------------------------- */

*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--fuente-texto);
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;            /* la página nunca se desplaza en horizontal */
}

h1, h2, h3, h4 { font-family:var(--fuente-titulo); font-weight:700; color:var(--ink); margin:0 0 8px; line-height:1.25; }
h1 { font-size:21px; } h2 { font-size:18px; } h3 { font-size:15px; }

a { color:var(--brand-2); }
@media (prefers-color-scheme: dark) { a { color:var(--s1); } }

p { margin:0 0 10px; }

code { font-family:var(--fuente-cifra); background:var(--surface-3); padding:1px 5px; border-radius:4px; }

.cifra, table.datos td.num, .kpi-valor, .contador {
  font-family:var(--fuente-cifra);
  font-variant-numeric:tabular-nums;
}

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

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

.oculto { display:none !important; }
.visualmente-oculto {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ------------------------ Cabecera institucional ------------------------ */

.cabecera {
  background:var(--brand);
  border-bottom:3px solid var(--accent);
  padding:12px 16px;
}
.cabecera-rejilla {
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
}
.cabecera img { height:44px; width:auto; display:block; }
.cabecera-titulo { text-align:center; min-width:0; }
.cabecera-titulo h1 {
  font-family:var(--fuente-titulo); font-weight:700; color:#fff;
  font-size:clamp(15px, 2.1vw, 21px); margin:0;
}
.cabecera-titulo p {
  margin:3px 0 0; color:#CFE0D6; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase;
}
/* Reserva de espacio si aún no se han subido los logotipos. */
.logo-alt {
  display:inline-flex; align-items:center; height:44px; padding:0 10px;
  border:1px dashed rgba(255,255,255,.45); border-radius:6px;
  color:#CFE0D6; font-family:var(--fuente-titulo); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}

@media (max-width:640px) {
  .cabecera { padding:9px 10px; }
  .cabecera-rejilla { gap:8px; }
  .cabecera img, .logo-alt { height:30px; }
  .logo-alt { font-size:9px; padding:0 6px; }
  .cabecera-titulo p { font-size:9px; letter-spacing:.04em; }
}

/* ----------------------------- Navegación ----------------------------- */

.nav {
  position:sticky; top:0; z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.nav-rejilla {
  max-width:1240px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; gap:6px;
}
.nav-pestanas { display:flex; gap:2px; flex:1; min-width:0; overflow-x:auto; }
.nav-pestanas a {
  font-family:var(--fuente-titulo); font-weight:600; font-size:13.5px;
  color:var(--ink-2); text-decoration:none;
  padding:14px 12px; border-bottom:2.5px solid transparent; white-space:nowrap;
}
.nav-pestanas a:hover { color:var(--ink); }
.nav-pestanas a.activa { color:var(--ink); border-bottom-color:var(--accent); }
.nav-pestanas .icono { display:none; }

.nav-derecha { display:flex; align-items:center; gap:10px; }
.nav-usuario { text-align:right; line-height:1.2; }
.nav-usuario strong { font-size:13px; display:block; }
.nav-usuario span { font-size:11px; color:var(--ink-3); }
@media (max-width:720px) { .nav-usuario { display:none; } }

.pildora-sesion {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:5px 11px 5px 9px;
  font-family:var(--fuente-cifra); font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--ink-2);
}
.punto { width:8px; height:8px; border-radius:50%; background:var(--good); flex:none; }
.pildora-sesion.aviso { border-color:var(--crit); color:var(--crit); }
.pildora-sesion.aviso .punto { background:var(--crit); }

.salir { font-size:12.5px; color:var(--ink-3); text-decoration:none; font-family:var(--fuente-titulo); font-weight:600; }
.salir:hover { color:var(--crit); }

/* Barra inferior fija en móvil */
@media (max-width:640px) {
  .nav-rejilla { padding:0 10px; }
  .nav-pestanas {
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--surface); border-top:1px solid var(--line);
    padding:0; overflow:visible;
    box-shadow:0 -2px 12px rgba(0,0,0,.07);
  }
  .nav-pestanas a {
    flex:1; text-align:center; padding:8px 2px 7px; font-size:10.5px;
    border-bottom:none; border-top:2.5px solid transparent;
    display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .nav-pestanas a.activa { border-top-color:var(--accent); border-bottom-color:transparent; }
  .nav-pestanas .icono { display:block; font-size:17px; line-height:1; }
  .nav-pestanas .texto-largo { display:none; }
  body { padding-bottom:62px; }
}
@media (min-width:641px) { .nav-pestanas .texto-corto { display:none; } }

/* ------------------------------ Estructura ------------------------------ */

.contenido { max-width:1240px; margin:0 auto; padding:20px 16px 40px; }
@media (max-width:640px) { .contenido { padding:14px 10px 30px; } }

.seccion { margin-bottom:22px; }

.seccion-cabecera {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:14px;
}
.supra {
  font-family:var(--fuente-titulo); font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin:0 0 4px;
}
.seccion-cabecera h2 { margin:0; font-size:20px; }
.seccion-cabecera .pie-titulo { margin:4px 0 0; font-size:13px; color:var(--ink-3); }

/* Tarjetas */
.tarjeta {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radio); padding:18px;
}
.tarjeta + .tarjeta { margin-top:14px; }
.tarjeta h3 { margin:0 0 12px; }
.tarjeta-cabecera {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:12px; flex-wrap:wrap;
}
.tarjeta-cabecera h3 { margin:0; }
.tarjeta-cabecera .resumen { font-size:12.5px; color:var(--ink-3); font-family:var(--fuente-cifra); }

.rejilla-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rejilla-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
@media (max-width:960px) { .rejilla-2, .rejilla-3 { grid-template-columns:1fr; } }

/* --------------------------- Fila de indicadores --------------------------- */

.kpis {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radio); overflow:hidden;
}
@media (max-width:960px) { .kpis { grid-template-columns:1fr 1fr; } }
@media (max-width:420px) { .kpis { grid-template-columns:1fr; } }

.kpi { background:var(--surface); padding:16px 16px 18px; min-width:0; }
.kpi-etiqueta {
  font-family:var(--fuente-titulo); font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 8px;
}
.kpi-valor { font-size:31px; line-height:1.05; font-weight:600; letter-spacing:-.01em; }
.kpi-valor .unidad { font-size:14px; color:var(--ink-3); font-weight:400; margin-left:3px; }
.kpi-valor.aviso { color:var(--warn); }
.kpi-valor.critico { color:var(--crit); }
.kpi-nota { font-size:12.5px; color:var(--ink-3); margin:6px 0 0; }
.kpi-nota.pendiente { font-style:italic; }
.kpi .variacion { font-family:var(--fuente-cifra); font-size:12.5px; }
.variacion.sube { color:var(--good); }
.variacion.baja { color:var(--crit); }
.variacion.plana { color:var(--ink-3); }

/* --------------------------- Barras de progreso --------------------------- */

.barra {
  height:6px; border-radius:999px; background:var(--surface-3);
  overflow:hidden; margin-top:9px;
}
.barra > span { display:block; height:100%; border-radius:999px; background:var(--s1); }
.barra.fina { height:5px; }
.barra.gruesa { height:7px; }

/* ------------------------------ Insignias ------------------------------ */

.insignia {
  display:inline-block; font-family:var(--fuente-titulo); font-weight:600;
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; white-space:nowrap;
  background:var(--surface-3); color:var(--ink-2);
}
.insignia.alta     { background:var(--crit-bg); color:var(--crit); }
.insignia.media    { background:var(--warn-bg); color:var(--warn); }
.insignia.baja     { background:var(--surface-3); color:var(--ink-3); }
.insignia.ok       { background:var(--good-bg); color:var(--good); }
.insignia.abierta  { background:var(--crit-bg); color:var(--crit); }
.insignia.en_curso { background:var(--warn-bg); color:var(--warn); }
.insignia.resuelta { background:var(--good-bg); color:var(--good); }

/* ------------------------------- Botones ------------------------------- */

.btn {
  font-family:var(--fuente-titulo); font-weight:700; font-size:14px;
  border-radius:8px; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink);
  padding:10px 16px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px;
}
.btn:hover { background:var(--surface-2); }
.btn-principal { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-principal:hover { background:var(--brand-2); }
.btn-ancho { width:100%; }
.btn-pequeno { min-height:34px; padding:5px 11px; font-size:12.5px; }
.btn-peligro { color:var(--crit); border-color:var(--crit); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

.botonera { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* Selector de periodo */
.selector-periodo { display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; }
.selector-periodo button {
  font-family:var(--fuente-titulo); font-weight:600; font-size:12.5px;
  background:transparent; border:0; color:var(--ink-2);
  padding:7px 12px; border-radius:7px; cursor:pointer; min-height:36px;
}
.selector-periodo button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }

/* ----------------------------- Formularios ----------------------------- */

label { display:block; font-family:var(--fuente-titulo); font-weight:600; font-size:13.5px; margin:14px 0 5px; }
label .ayuda-campo { display:block; font-family:var(--fuente-texto); font-weight:400; font-size:12.5px; color:var(--ink-3); margin-top:2px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=color], select, textarea {
  width:100%; font-family:var(--fuente-texto); font-size:15px;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:8px;
  padding:10px 11px; min-height:44px;
}
input[type=color] { padding:4px; height:44px; }
textarea { min-height:64px; resize:vertical; }
input:disabled, select:disabled { background:var(--surface-2); color:var(--ink-3); }

.ayuda { font-size:12.5px; color:var(--ink-3); margin:5px 0 0; }

/* Control − / + */
.contador-campo { display:flex; align-items:stretch; gap:8px; max-width:320px; }
.contador-campo button {
  width:52px; min-width:52px; min-height:52px;
  font-family:var(--fuente-titulo); font-size:22px; font-weight:700;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:10px; cursor:pointer;
}
.contador-campo button:hover { background:var(--surface-3); }
.contador-campo input {
  flex:1; text-align:center; font-family:var(--fuente-cifra);
  font-variant-numeric:tabular-nums; font-size:24px; font-weight:600;
  min-height:52px; padding:6px;
}

/* Marcadores del parte diario */
.marcadores { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.marcador {
  font-family:var(--fuente-titulo); font-weight:600; font-size:13px;
  background:var(--surface-2); color:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:999px;
  padding:10px 15px; min-height:44px; cursor:pointer;
}
.marcador[aria-pressed="true"] { background:var(--brand-pale); border-color:var(--brand-2); color:var(--brand-2); }
@media (prefers-color-scheme: dark) { .marcador[aria-pressed="true"] { color:var(--ink); } }
.marcador-detalle {
  margin-top:8px; padding:12px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:10px;
}
.marcador-detalle .fila-detalle { display:grid; grid-template-columns:110px 1fr; gap:10px; }
@media (max-width:520px) { .marcador-detalle .fila-detalle { grid-template-columns:1fr; } }

/* ------------------------------- Avisos ------------------------------- */

.aviso { border-left:4px solid var(--ink-3); }
.aviso-ok      { border-left-color:var(--good); background:var(--good-bg); }
.aviso-atencion{ border-left-color:var(--warn); background:var(--warn-bg); }
.aviso-critico { border-left-color:var(--crit); background:var(--crit-bg); }
.aviso-info    { border-left-color:var(--s3); background:var(--surface-2); }
.aviso p:last-child, .aviso ul:last-child { margin-bottom:0; }

.vacio {
  text-align:center; color:var(--ink-3); font-size:14px;
  padding:26px 14px; border:1px dashed var(--line-strong); border-radius:10px;
}

/* ------------------------------- Tablas ------------------------------- */

.tabla-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.datos { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
table.datos th {
  font-family:var(--fuente-titulo); font-size:10.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
}
table.datos td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.datos td.num, table.datos th.num { text-align:right; }
table.datos tr:last-child td { border-bottom:0; }
table.datos tbody tr:hover { background:var(--surface-2); }

/* ------------------------------- Gráficos ------------------------------- */

.grafico-caja { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.grafico-lienzo { position:relative; height:300px; min-width:320px; }
.grafico-lienzo.bajo { height:210px; }
@media (max-width:640px) {
  .grafico-lienzo { height:250px; min-width:460px; }
  .grafico-lienzo.bajo { height:190px; min-width:420px; }
}

.leyenda { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12.5px; color:var(--ink-2); }
.leyenda span { display:inline-flex; align-items:center; gap:6px; }
.leyenda i { width:12px; height:3px; border-radius:2px; display:inline-block; }

/* Cadena de tratamiento */
.cadena { display:flex; flex-direction:column; gap:4px; }
.cadena-fase { padding:2px 0; }
.cadena-fila { display:flex; align-items:center; gap:10px; }
.cadena-etiqueta { font-size:13px; width:190px; flex:none; }
.cadena-barra { flex:1; height:22px; background:var(--surface-3); border-radius:6px; overflow:hidden; min-width:60px; }
.cadena-barra > span { display:block; height:100%; border-radius:6px; }
.cadena-valor { font-family:var(--fuente-cifra); font-variant-numeric:tabular-nums; font-size:13.5px; width:92px; text-align:right; flex:none; }
.cadena-paso { font-size:12px; color:var(--ink-3); margin:2px 0 2px 200px; font-family:var(--fuente-cifra); }
@media (max-width:640px) {
  .cadena-etiqueta { width:120px; font-size:12px; }
  .cadena-valor { width:74px; font-size:12.5px; }
  .cadena-paso { margin-left:130px; }
}

/* Incidencias */
.lista-incidencias { display:flex; flex-direction:column; gap:9px; }
.incidencia {
  display:flex; gap:11px; padding:11px 12px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
}
.incidencia .franja { width:4px; border-radius:3px; flex:none; background:var(--ink-3); }
.incidencia.alta  .franja { background:var(--crit); }
.incidencia.media .franja { background:var(--warn); }
.incidencia.baja  .franja { background:var(--ink-3); }
.incidencia.resuelta .franja { background:var(--good); }
.incidencia .cuerpo { min-width:0; flex:1; }
.incidencia .titulo { font-weight:600; font-size:14px; }
.incidencia .meta { font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.incidencia .meta .cifra { font-family:var(--fuente-cifra); }

/* Avance por serie */
.serie-fila { padding:11px 0; border-bottom:1px solid var(--line); }
.serie-fila:last-child { border-bottom:0; }
.serie-linea { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.serie-nombre { font-weight:600; font-size:14px; flex:1; min-width:130px; }
.serie-pct { font-family:var(--fuente-cifra); font-variant-numeric:tabular-nums; font-size:14px; }
.serie-detalle { font-size:12.5px; color:var(--ink-3); margin-top:5px; font-family:var(--fuente-cifra); }

/* Hitos */
.hito { display:flex; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); }
.hito:last-child { border-bottom:0; }
.hito .franja { width:4px; border-radius:3px; flex:none; background:var(--ink-3); }
.hito.pendiente  .franja { background:var(--ink-3); }
.hito.en_curso   .franja { background:var(--warn); }
.hito.completado .franja { background:var(--good); }
.hito .cuerpo { flex:1; min-width:0; }
.hito .nombre { font-weight:600; font-size:14px; }
.hito .fechas { font-size:12.5px; color:var(--ink-3); font-family:var(--fuente-cifra); margin-top:2px; }

/* ------------------------------ Modales ------------------------------ */

.modal-fondo {
  position:fixed; inset:0; z-index:100;
  background:rgba(10,16,12,.55);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal {
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:22px; max-width:430px; width:100%;
  box-shadow:var(--sombra-flotante);
}
.modal h3 { margin-top:0; }

/* --------------------------- Pantalla de acceso --------------------------- */

.pantalla-simple {
  min-height:100vh; background:var(--ground);
  display:flex; align-items:center; justify-content:center; padding:24px 16px;
}
.acceso { width:100%; max-width:396px; }
.acceso .logos {
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:14px 0 4px; flex-wrap:wrap;
}
.acceso .logos img { height:40px; width:auto; }
.acceso .logos .logo-alt { color:var(--ink-3); border-color:var(--line-strong); height:40px; }
.acceso h1 { text-align:center; font-size:19px; margin:14px 0 4px; }
.acceso .sub { text-align:center; color:var(--ink-3); font-size:13px; margin:0 0 6px; }
.acceso .pie-aviso { text-align:center; font-size:12px; color:var(--ink-3); margin-top:14px; }
.titulo-instalador { font-size:22px; margin-bottom:2px; }

/* -------------------------- Administración -------------------------- */

.pestanas-admin { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:16px; border-bottom:1px solid var(--line); }
.pestanas-admin a {
  font-family:var(--fuente-titulo); font-weight:600; font-size:13px;
  color:var(--ink-2); text-decoration:none; padding:10px 12px;
  border-bottom:2.5px solid transparent;
}
.pestanas-admin a.activa { color:var(--ink); border-bottom-color:var(--accent); }

.fila-form { display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); align-items:end; }
.fila-form label { margin-top:0; }

.credencial {
  font-family:var(--fuente-cifra); font-size:18px; background:var(--surface-3);
  padding:9px 12px; border-radius:8px; display:inline-block; user-select:all;
}

/* Texto de «pendiente del diagnóstico», dentro de cifras y notas. */
.pendiente { font-style:italic; color:var(--ink-3); font-family:var(--fuente-texto); }