/* ═══════════════════════════════════════════════════════════════
   PATAGONIA NOCTURNA · sistema de diseño
   Visores de datos institucionales — Ministerio CTCI / Mesa Agroclimática
   Extraído del Visor de la Red de Estaciones · Región de Aysén

   Uso:  <link rel="stylesheet" href="patagonia.css">
   Fuentes (opcional, mejora notoriamente el resultado):
     Outfit 300/400/500/600/700 + IBM Plex Mono 400/500
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1 · FICHAS DE COLOR (tokens)
   ───────────────────────────────────────────────────────────── */
:root{
  /* Superficies */
  --fondo:        #070f18;   /* suelo de la página */
  --fondo-2:      #0c1826;   /* lienzo, mapa sin teselas */
  --panel:        rgba(11, 22, 35, .84);   /* vidrio grande */
  --panel-solido: #0d1b2b;                 /* cuando no hay nada detrás */
  --vidrio:       rgba(19, 34, 51, .72);   /* vidrio pequeño: botones, píldoras */

  /* Bordes */
  --borde:        rgba(140, 190, 235, .14);
  --borde-fuerte: rgba(140, 190, 235, .28);

  /* Texto — sólo tres niveles, no inventes un cuarto */
  --texto:   #e6f0f9;   /* contenido */
  --texto-2: #9db3c8;   /* secundario */
  --texto-3: #6c8299;   /* rótulos, metadatos, unidades */

  /* Primario */
  --hielo:   #56c4ef;
  --hielo-f: rgba(86, 196, 239, .16);
  --hielo-b: rgba(86, 196, 239, .50);

  /* Series de acento — una por fuente de datos / categoría mayor.
     Cada serie: base · clara (degradados) · fondo 18% · sombra 55%       */
  --a1:   #3f92ea;  --a1-claro: #7cc0ff;  --a1-fondo: rgba(63,146,234,.18);  --a1-sombra: rgba(63,146,234,.55);
  --a2:   #34ba7c;  --a2-claro: #74e6b0;  --a2-fondo: rgba(52,186,124,.18);  --a2-sombra: rgba(52,186,124,.55);
  --a3:   #f0913f;  --a3-claro: #ffc178;  --a3-fondo: rgba(240,145,63,.18);  --a3-sombra: rgba(240,145,63,.55);
  --a4:   #a879e6;  --a4-claro: #cbaaf5;  --a4-fondo: rgba(168,121,230,.18); --a4-sombra: rgba(168,121,230,.55);

  /* Semánticos */
  --ok:    #34ba7c;  --ok-claro:    #74e6b0;
  --aviso: #f0b23f;  --aviso-claro: #ffd28a;

  /* Forma */
  --r-s: 9px;  --r-m: 14px;  --r-l: 20px;
  --tr: 260ms cubic-bezier(.4, .14, .3, 1);        /* estado */
  --tr-fis: 200ms cubic-bezier(.34, 1.56, .64, 1); /* físico, con rebote */
  --sombra: 0 18px 48px -12px rgba(0,0,0,.72), 0 2px 8px rgba(0,0,0,.4);

  /* Medidas del armazón */
  --barra-h: 84px;
  --panel-w: 372px;
  --ficha-w: 452px;

  /* Tipografía */
  --tipo: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
}

/* ─────────────────────────────────────────────────────────────
   2 · BASE
   ───────────────────────────────────────────────────────────── */
*{ box-sizing: border-box; }
html, body{ height:100%; margin:0; }
body{
  font-family: var(--tipo);
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
/* El armazón fijo de tres zonas no debe hacer scroll global.
   Quítalo si construyes una página de documento que sí scrollea. */
body.armazon{ overflow: hidden; }

/* Todo icono es SVG de trazo. Nunca fuentes de iconos. */
svg{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
svg.relleno{ fill:currentColor; stroke:none; }

button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, select, textarea{ font-family:inherit; }
a{ color:var(--hielo); text-decoration:none; border-bottom:1px solid rgba(86,196,239,.3); }
a:hover{ border-bottom-color:var(--hielo); }
button:focus-visible,
a:focus-visible{
  outline:3px solid var(--hielo);
  outline-offset:3px;
}

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(140,190,235,.2); border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(140,190,235,.36); }

/* Rótulo institucional: versalitas espaciadas. La pieza que más
   define el carácter del sistema — respeta el letter-spacing. */
.rotulo{
  display:block; font-size:.63rem; font-weight:600; color:var(--texto-3);
  text-transform:uppercase; letter-spacing:.13em; line-height:1.1;
}
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.cifra-num{ font-variant-numeric:tabular-nums; }

/* ─────────────────────────────────────────────────────────────
   3 · PANTALLA DE CARGA
   ───────────────────────────────────────────────────────────── */
.cargando{
  position:fixed; inset:0; z-index:9000; display:flex; gap:18px;
  flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 42%, #123049 0%, #070f18 68%);
  color:var(--texto-2); font-size:.9rem; letter-spacing:.04em;
  transition:opacity .5s ease, visibility .5s;
}
.cargando.fuera{ opacity:0; visibility:hidden; }
.spin{
  width:42px; height:42px; border-radius:50%;
  border:2.5px solid rgba(86,196,239,.16); border-top-color:var(--hielo);
  animation:girar .85s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────
   4 · BARRA SUPERIOR
   ───────────────────────────────────────────────────────────── */
.barra{
  position:fixed; top:0; left:0; right:0; height:var(--barra-h); z-index:1200;
  display:flex; align-items:center; gap:20px; padding:0 18px;
  background:linear-gradient(180deg, rgba(8,17,27,.97) 0%, rgba(8,17,27,.88) 100%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid var(--borde);
  box-shadow:0 8px 32px -14px rgba(0,0,0,.9);
}
.marca{ display:flex; align-items:center; gap:16px; min-width:0; }
/* Logo institucional: completo, sin recortes ni recoloreo. */
.marca-logo{ height:64px; width:auto; flex:none; display:block; image-rendering:-webkit-optimize-contrast; }
.marca-txt{ min-width:0; padding-left:16px; border-left:1px solid var(--borde); }
.marca-org{
  display:block; font-size:.635rem; font-weight:500; color:var(--hielo);
  text-transform:uppercase; letter-spacing:.11em; line-height:1.1; opacity:.92;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.marca-txt h1{
  margin:4px 0 0; font-size:.98rem; font-weight:600; letter-spacing:-.01em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.marca-txt p{
  margin:2px 0 0; font-size:.71rem; color:var(--texto-3); font-weight:300; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Cifra de cabecera (KPI) ── */
.totales{ display:flex; gap:9px; margin-left:auto; }
.total{
  display:flex; align-items:center; gap:9px; padding:7px 14px 7px 11px;
  background:var(--vidrio); border:1px solid var(--borde); border-radius:var(--r-m);
  position:relative; overflow:hidden;
}
.total::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c, var(--hielo)); }
.total .tcol{ display:flex; flex-direction:column; gap:4px; }
.total b{ font-size:1.02rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; }
.total span{ font-size:.63rem; color:var(--texto-3); text-transform:uppercase; letter-spacing:.1em; line-height:1; }

/* ── Botón de icono ── */
.acciones{ display:flex; gap:6px; }
.icono-btn{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--vidrio); border:1px solid var(--borde); color:var(--texto-2);
  transition:var(--tr);
}
.icono-btn svg{ width:19px; height:19px; }
.icono-btn:hover{ color:var(--hielo); border-color:var(--borde-fuerte); background:rgba(86,196,239,.1); transform:translateY(-1px); }
.icono-btn.activo{ color:var(--hielo); border-color:var(--hielo-b); background:var(--hielo-f); }
.solo-movil{ display:none; }

/* ─────────────────────────────────────────────────────────────
   5 · PANEL LATERAL
   ───────────────────────────────────────────────────────────── */
.panel{
  position:fixed; top:var(--barra-h); left:0; bottom:0; width:var(--panel-w); z-index:1100;
  display:flex; flex-direction:column;
  background:var(--panel); backdrop-filter:blur(22px) saturate(160%);
  border-right:1px solid var(--borde);
  transition:transform var(--tr);
}
.panel.oculto{ transform:translateX(-100%); }

/* ── Buscador ── */
.buscador{ position:relative; display:flex; align-items:center; margin:14px 16px 10px; }
.buscador .lupa{ position:absolute; left:13px; width:16px; height:16px; color:var(--texto-3); pointer-events:none; }
.buscador input{
  width:100%; padding:10px 32px 10px 36px; font-size:.84rem;
  background:rgba(6,14,23,.7); border:1px solid var(--borde); border-radius:var(--r-m);
  color:var(--texto); outline:none; transition:var(--tr);
}
.buscador input::placeholder{ color:var(--texto-3); }
.buscador input:focus{ border-color:var(--hielo-b); box-shadow:0 0 0 3px rgba(86,196,239,.11); }
.buscador input::-webkit-search-cancel-button{ display:none; }
.limpiar{
  position:absolute; right:9px; width:20px; height:20px; border-radius:50%;
  font-size:1.05rem; line-height:1; color:var(--texto-3); display:none;
}
.limpiar:hover{ color:var(--texto); background:rgba(255,255,255,.09); }
.limpiar.visible{ display:block; }

/* ── Grupos de filtro ── */
.filtros{ padding:2px 16px 12px; border-bottom:1px solid var(--borde); }
.filtro-grupo + .filtro-grupo{ margin-top:13px; }
.grupo-cab{ display:flex; align-items:baseline; justify-content:space-between; }
.filtros h3{
  margin:0 0 7px; font-size:.63rem; font-weight:600; color:var(--texto-3);
  text-transform:uppercase; letter-spacing:.13em;
}
.mini-link{ font-size:.66rem; color:var(--texto-3); text-decoration:underline; text-underline-offset:2px; }
.mini-link:hover{ color:var(--hielo); }

/* ── Píldora de filtro ──
   Apagada por defecto; .on la enciende con --c-b / --c-f de la instancia. */
.fichas{ display:flex; flex-wrap:wrap; gap:6px; }
.ficha{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; font-size:.74rem; font-weight:400;
  background:rgba(255,255,255,.035); border:1px solid var(--borde);
  color:var(--texto-2); transition:var(--tr); white-space:nowrap;
}
.ficha:hover{ border-color:var(--borde-fuerte); color:var(--texto); }
.ficha svg{ width:13px; height:13px; }
.ficha .n{ font-size:.66rem; color:var(--texto-3); font-variant-numeric:tabular-nums; }
.ficha .pt{ width:8px; height:8px; border-radius:50%; background:var(--c-b, var(--hielo)); flex:none; }
.ficha.on{ color:#fff; border-color:var(--c-b, var(--hielo)); background:var(--c-f, var(--hielo-f)); }
.ficha.on .n{ color:rgba(255,255,255,.72); }
.ficha.on .pt{ box-shadow:0 0 0 3px var(--c-f, rgba(86,196,239,.2)); }
.fichas-menudas .ficha{ font-size:.7rem; padding:4px 9px; }

/* ── Cabecera de lista ── */
.lista-cab{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 16px; border-bottom:1px solid var(--borde);
}
.lista-cab .conteo{ font-size:.7rem; color:var(--texto-3); letter-spacing:.03em; }
.lista-cab .conteo b{ color:var(--texto); font-weight:600; font-variant-numeric:tabular-nums; }
.lista-cab select{
  font-size:.7rem; padding:4px 8px; border-radius:var(--r-s);
  background:rgba(6,14,23,.7); border:1px solid var(--borde); color:var(--texto-2); outline:none;
}
.lista-cab select option{ background:var(--panel-solido); }

/* ── Fila de lista ── */
.lista{ flex:1; overflow-y:auto; padding:8px 10px 16px; }
.item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 11px; border-radius:var(--r-m); margin-bottom:3px;
  border:1px solid transparent; transition:background 160ms, border-color 160ms;
}
.item:hover{ background:rgba(255,255,255,.05); border-color:var(--borde); }
.item.sel{ background:var(--c-f); border-color:var(--c-b); }
.item-marca{
  width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--c-f); color:var(--c-b); border:1px solid var(--c-b);
}
.item-marca svg{ width:15px; height:15px; }
.item-txt{ min-width:0; flex:1; }
.item-nom{ display:block; font-size:.8rem; font-weight:500; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-sub{ display:block; font-size:.67rem; color:var(--texto-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-dato{ font-size:.66rem; color:var(--texto-3); font-family:var(--mono); flex:none; }

/* ── Estado vacío ── */
.vacio{ padding:34px 20px; text-align:center; color:var(--texto-3); font-size:.78rem; line-height:1.6; }

/* ── Nota al pie del panel ── */
.nota-pie:not(:empty){
  padding:11px 16px; border-top:1px solid var(--borde);
  background:rgba(240,178,63,.07); font-size:.68rem; color:var(--texto-2); line-height:1.5;
}
.nota-pie b{
  color:var(--aviso); font-weight:600; display:block; margin-bottom:3px;
  font-size:.64rem; text-transform:uppercase; letter-spacing:.08em;
}

/* ─────────────────────────────────────────────────────────────
   6 · LIENZO
   ───────────────────────────────────────────────────────────── */
.lienzo{
  position:fixed; top:var(--barra-h); left:var(--panel-w); right:0; bottom:0;
  background:var(--fondo-2); transition:left var(--tr);
}
.panel.oculto ~ .lienzo{ left:0; }

/* ── Grupo de botones flotante (zoom, herramientas) ── */
.ctrl-grupo{
  position:absolute; right:16px; top:16px; z-index:600;
  display:flex; flex-direction:column; gap:1px;
  background:var(--panel); backdrop-filter:blur(16px);
  border:1px solid var(--borde); border-radius:var(--r-m); overflow:hidden;
  box-shadow:var(--sombra);
}
.ctrl-grupo button{
  width:38px; height:38px; display:grid; place-items:center; color:var(--texto-2);
  transition:var(--tr); border-bottom:1px solid var(--borde);
}
.ctrl-grupo button:last-child{ border-bottom:none; }
.ctrl-grupo button svg{ width:17px; height:17px; }
.ctrl-grupo button:hover{ background:rgba(86,196,239,.14); color:var(--hielo); }

/* ── Tarjeta flotante (leyenda, selector, ayuda) ── */
.flotante{
  position:absolute; right:16px; top:66px; z-index:620; width:266px;
  background:var(--panel); backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--borde); border-radius:var(--r-l); box-shadow:var(--sombra);
  padding:14px 16px 15px;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transition:var(--tr);
}
.flotante.abierto{ opacity:1; visibility:visible; transform:none; }
.flotante-cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.flotante h4{
  margin:0; font-size:.68rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; color:var(--texto-2);
}
.cerrar{ width:20px; height:20px; border-radius:6px; color:var(--texto-3); font-size:1.15rem; line-height:1; }
.cerrar:hover{ color:var(--texto); background:rgba(255,255,255,.09); }

/* ── Leyenda ── */
.ley-seccion + .ley-seccion{ margin-top:12px; padding-top:12px; border-top:1px solid var(--borde); }
.ley-titulo{ display:block; font-size:.62rem; color:var(--texto-3); margin-bottom:8px; letter-spacing:.05em; }
.ley-fila{ display:flex; flex-direction:column; gap:7px; }
.ley-item{ display:flex; align-items:center; gap:9px; font-size:.75rem; color:var(--texto-2); }
.ley-item svg{ width:14px; height:14px; }
.ley-forma{ width:22px; height:22px; flex:none; display:grid; place-items:center; }
.ley-forma svg{ width:22px; height:22px; stroke:none; }
.ley-punto{ width:15px; height:15px; border-radius:50%; flex:none; background:var(--c-b, var(--hielo)); }
.ley-punto.aprox{ border:1.6px dashed var(--aviso); background:rgba(240,178,63,.18); }
.ley-glifo{
  width:22px; height:22px; border-radius:7px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid var(--borde); color:var(--texto);
}
.ley-glifo svg{ width:13px; height:13px; }

/* ── Lista de opciones (selector de capa, vista, etc.) ── */
.opciones{ display:flex; flex-direction:column; gap:4px; }
.op{
  display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:var(--r-s);
  font-size:.76rem; color:var(--texto-2); transition:var(--tr); text-align:left; width:100%;
}
.op:hover{ background:rgba(255,255,255,.06); color:var(--texto); }
.op.on{ background:var(--hielo-f); color:#fff; }
.op-mini{ width:26px; height:20px; border-radius:5px; flex:none; border:1px solid var(--borde); }

/* ─────────────────────────────────────────────────────────────
   7 · HOJA DE DETALLE (side sheet)
   El original la llamaba #ficha; renombrada para no chocar con
   .ficha (píldora de filtro).
   ───────────────────────────────────────────────────────────── */
.velo{
  position:fixed; inset:0; z-index:1290; background:rgba(3,8,14,.5);
  opacity:0; visibility:hidden; transition:var(--tr); backdrop-filter:blur(1.5px);
}
.velo.on{ opacity:1; visibility:visible; }

.hoja{
  position:fixed; top:var(--barra-h); right:0; bottom:0; width:var(--ficha-w); z-index:1300;
  background:linear-gradient(180deg, var(--panel-solido) 0%, #091522 100%);
  border-left:1px solid var(--borde-fuerte);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.85);
  overflow-y:auto; overflow-x:hidden;
  transform:translateX(100%); transition:transform 340ms cubic-bezier(.32,.72,.3,1);
}
.hoja.abierta{ transform:none; }

/* Cabecera con lavado de color de la instancia */
.hoja-hero{ position:relative; padding:22px 26px 20px; overflow:hidden; }
.hoja-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 88% -10%, var(--c-f) 0%, transparent 62%);
}
.hoja-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--c-b), transparent 78%);
}
.hoja-top{ position:relative; display:flex; align-items:flex-start; gap:14px; }
.hoja-icono{
  width:52px; height:52px; flex:none; border-radius:15px; display:grid; place-items:center;
  background:var(--c-f); border:1px solid var(--c-b); color:var(--c-b);
  box-shadow:0 6px 20px -6px var(--c-s), inset 0 1px 0 rgba(255,255,255,.1);
}
.hoja-icono svg{ width:25px; height:25px; }
.hoja-tit{ flex:1; min-width:0; }
.hoja-tit h2{ margin:0; font-size:1.26rem; font-weight:600; line-height:1.2; letter-spacing:-.015em; }
.hoja-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.hoja-cerrar{
  width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center;
  color:var(--texto-3); border:1px solid var(--borde); background:rgba(255,255,255,.04);
  transition:var(--tr);
}
.hoja-cerrar:hover{ color:var(--texto); background:rgba(255,255,255,.1); transform:rotate(90deg); }
.hoja-cerrar svg{ width:15px; height:15px; }
.hoja-cuerpo{ padding:20px 26px 40px; }
.hoja-pie{
  margin-top:26px; padding-top:14px; border-top:1px solid var(--borde);
  font-size:.66rem; color:var(--texto-3); line-height:1.6;
}

/* ── Etiqueta / badge ── */
.etq{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:.67rem; font-weight:500; letter-spacing:.02em;
  background:rgba(255,255,255,.06); border:1px solid var(--borde); color:var(--texto-2);
}
.etq svg{ width:11px; height:11px; }
.etq.acento{ background:var(--c-f); border-color:var(--c-b); color:#fff; font-weight:600; }
.etq.ok{ background:rgba(52,186,124,.15); border-color:rgba(52,186,124,.45); color:var(--ok-claro); }
.etq.av{ background:rgba(240,178,63,.14); border-color:rgba(240,178,63,.42); color:var(--aviso-claro); }
.etq .lat{
  width:6px; height:6px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 3px rgba(52,186,124,.22); animation:latir2 2.4s ease-in-out infinite;
}
@keyframes latir2{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* ── Rejilla de cifras clave ── */
.cifras{
  position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  margin:18px 0 0; background:var(--borde); border:1px solid var(--borde);
  border-radius:var(--r-m); overflow:hidden;
}
.cifras.tres{ grid-template-columns:repeat(3, 1fr); }
.cifras.dos{ grid-template-columns:repeat(2, 1fr); }
.cifra{ background:rgba(9,20,32,.92); padding:11px 8px 10px; text-align:center; }
.cifra .v{
  font-size:1.02rem; font-weight:600; line-height:1.15;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.cifra .v small{ font-size:.62rem; color:var(--texto-3); font-weight:400; margin-left:1px; }
.cifra .v.nd{ color:var(--texto-3); font-size:.88rem; }
.cifra .k{ font-size:.58rem; color:var(--texto-3); text-transform:uppercase; letter-spacing:.09em; margin-top:4px; }

/* ── Bloque con encabezado y filete ── */
.bloque + .bloque{ margin-top:22px; }
.bloque > h3{
  margin:0 0 11px; font-size:.63rem; font-weight:600; color:var(--texto-3);
  text-transform:uppercase; letter-spacing:.14em;
  display:flex; align-items:center; gap:8px;
}
.bloque > h3::after{ content:''; flex:1; height:1px; background:var(--borde); }
.bloque > h3 .suave{ color:var(--texto-3); letter-spacing:0; font-weight:400; }

/* ── Aviso en línea ── */
.aviso{
  display:flex; gap:10px; padding:10px 13px; border-radius:var(--r-m);
  background:rgba(240,178,63,.09); border:1px solid rgba(240,178,63,.28);
  font-size:.72rem; color:#ffd9a1; line-height:1.5; margin-bottom:16px;
}
.aviso svg{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--aviso); }

/* ── Píldoras de atributo ── */
.vars{ display:flex; flex-wrap:wrap; gap:6px; }
.var{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px 6px 8px;
  border-radius:var(--r-s); font-size:.74rem;
  background:rgba(86,196,239,.08); border:1px solid rgba(86,196,239,.22); color:#c6e6f7;
}
.var svg{ width:14px; height:14px; color:var(--hielo); }

/* ── Tabla de especificaciones (dl) ── */
.especs{
  display:flex; flex-direction:column; gap:1px; background:var(--borde);
  border:1px solid var(--borde); border-radius:var(--r-m); overflow:hidden;
}
.espec{
  display:grid; grid-template-columns:132px 1fr; gap:14px; padding:10px 14px;
  background:rgba(9,20,32,.9); font-size:.77rem; align-items:baseline;
}
.espec.ancha{ grid-template-columns:1fr; }
.espec dt{ color:var(--texto-3); font-size:.71rem; }
.espec dd{ margin:0; color:var(--texto); line-height:1.5; word-break:break-word; }
.espec dd.mono{ font-family:var(--mono); font-size:.73rem; }
.espec dd.nd{ color:var(--texto-3); font-style:italic; }

/* ── Tarjeta de sub-elemento ── */
.tarjetas{ display:flex; flex-direction:column; gap:6px; }
.tarjeta{
  display:flex; align-items:flex-start; gap:11px; padding:10px 13px;
  background:rgba(255,255,255,.028); border:1px solid var(--borde); border-radius:var(--r-m);
  transition:var(--tr);
}
.tarjeta:hover{ border-color:var(--borde-fuerte); background:rgba(255,255,255,.05); }
.tarjeta-i{
  width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:rgba(86,196,239,.1); color:var(--hielo); border:1px solid rgba(86,196,239,.2);
}
.tarjeta-i svg{ width:13px; height:13px; }
.tarjeta-t{ min-width:0; flex:1; }
.tarjeta-n{ display:block; font-size:.77rem; font-weight:500; line-height:1.3; }
.tarjeta-m{ display:block; font-size:.69rem; color:var(--texto-3); margin-top:3px; font-family:var(--mono); line-height:1.4; word-break:break-word; }
.tarjeta-v{ display:block; font-size:.66rem; color:var(--hielo); margin-top:3px; opacity:.85; }

/* ── Botones ── */
.botones{ display:flex; gap:8px; margin-top:22px; }
.btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 12px; border-radius:var(--r-m); font-size:.76rem; font-weight:500;
  background:rgba(255,255,255,.05); border:1px solid var(--borde); color:var(--texto-2);
  transition:var(--tr);
}
a.btn{ text-decoration:none; }
.btn:hover{ background:rgba(86,196,239,.13); border-color:rgba(86,196,239,.42); color:#fff; transform:translateY(-1px); }
.btn svg{ width:15px; height:15px; }
.btn.hecho{ background:rgba(52,186,124,.16); border-color:rgba(52,186,124,.45); color:var(--ok-claro); }

/* ─────────────────────────────────────────────────────────────
   8 · ADAPTABLE
   Tres cortes, nada más. No inventes otros.
   ───────────────────────────────────────────────────────────── */
@media (max-width:1400px){
  :root{ --barra-h:76px; }
  .marca-txt p{ display:none; }
}
@media (max-width:1180px){
  :root{ --panel-w:322px; --ficha-w:404px; }
  .marca-logo{ height:46px; }
  .marca{ gap:12px; }
  .marca-txt{ padding-left:12px; }
}
@media (max-width:900px){
  :root{ --barra-h:66px; }
  .marca-logo{ height:40px; }
  .marca-org{ font-size:.58rem; letter-spacing:.07em; }
  .marca-txt h1{ font-size:.82rem; }
  .solo-movil{ display:grid; }
  .totales{ display:none; }
  .panel{ width:min(88vw, 360px); box-shadow:var(--sombra); }
  .panel.oculto{ transform:translateX(-100%); }
  .lienzo{ left:0 !important; }
  .flotante{ right:10px; }
  .hoja{
    width:100%; top:auto; height:82vh; border-left:none;
    border-top:1px solid var(--borde-fuerte); border-radius:var(--r-l) var(--r-l) 0 0;
    transform:translateY(100%);
  }
  .hoja.abierta{ transform:none; }
}