/* ══════════════════════════════════════════════════════════════════════════
   TerraNava · Identidad "instrumento científico / atlas hidrológico"  (v1)
   Módulo compartido de elementos-firma. Lo cargan TODAS las páginas vía shell.
   Nacido del piloto /incendios/ (jul 2026) y generalizado para todo el sitio.

   Acento por página: cada portada define --tn-accent (cálido fuego/sequía,
   frío agua). Por defecto usa el verde institucional. Ejemplos:
     .tn-fuego   → --tn-accent:#C1440E   (fuego)
     .tn-sequia  → --tn-accent:#B4791A   (sequía/ámbar)
     .tn-agua    → --tn-accent:#1E6F8E   (agua, por defecto)
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --tn-accent:#1D5B50;      /* interfaz institucional por defecto */
  --tn-accent-warm:#C1440E; /* fuego  */
  --tn-accent-amber:#B4791A;/* sequía */
}
.tn-fuego  { --tn-accent:#C1440E; }
.tn-sequia { --tn-accent:#B4791A; }
.tn-agua   { --tn-accent:#1E6F8E; }
.tn-bio    { --tn-accent:#1C7A43; }  /* biosfera / vegetación */

.tn-wrap{ max-width:1080px; margin:0 auto; padding:0 clamp(16px,3vw,32px); }

/* ── Filete técnico con coordenadas (elemento-firma nº1) ─────────────────── */
.tn-fil{ display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--font-mono,monospace); font-size:10.5px; letter-spacing: 0;
  text-transform:uppercase; color:var(--tn-ink-soft);
  padding:10px 0 8px; border-bottom:1px solid var(--tn-ink); }
.tn-fil .sep{ flex:1; min-width:24px; height:1px;
  background:repeating-linear-gradient(90deg,var(--tn-ruled) 0 6px,transparent 6px 10px); }
.tn-fil b{ color:var(--tn-ink); font-weight:600; letter-spacing: 0; }
/* En móvil el filete se reduce a lo esencial (sello + subtítulo), sin apretujarse */
@media(max-width:560px){
  .tn-fil{ gap:10px; font-size:10px; }
  .tn-fil .sep, .tn-fil span:nth-of-type(n+2){ display:none; }
}

/* ── Héroe con curvas de nivel de fondo (elemento-firma nº2) ─────────────── */
.tn-hero{ position:relative; padding:26px 0; overflow:hidden; }
.tn-hero::before{ content:""; position:absolute; inset:0 -40px; z-index:0; pointer-events:none;
  opacity:.5; background-repeat:no-repeat; background-position:right -60px top -30px; background-size:520px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='420'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1' opacity='0.5'%3E%3Cpath d='M-20 120 C120 60 260 180 420 110 S620 40 720 120'/%3E%3Cpath d='M-20 170 C120 110 260 230 420 160 S620 90 720 170'/%3E%3Cpath d='M-20 220 C120 160 260 280 420 210 S620 140 720 220'/%3E%3Cpath d='M-20 270 C120 210 260 330 420 260 S620 190 720 270'/%3E%3Cpath d='M-20 320 C120 260 260 380 420 310 S620 240 720 320'/%3E%3C/g%3E%3C/svg%3E"); }
.tn-hero > *{ position:relative; z-index:1; }

.tn-eyebrow{ font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px;
  letter-spacing: 0; text-transform:uppercase; color:var(--tn-sepia-deep);
  display:inline-flex; align-items:center; gap:9px; margin-top:16px; }
.tn-live{ width:8px;height:8px;border-radius:50%;background:var(--tn-accent);
  box-shadow:0 0 0 0 rgba(0,0,0,.001); animation:tnpulse 2.2s infinite; }
@keyframes tnpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tn-accent) 45%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.tn-live{animation:none}}

.tn-h1{ font-family:var(--font-display,'Source Serif Pro',serif); font-weight:600;
  letter-spacing: 0; font-size:clamp(34px,5.4vw,60px); line-height:1.0;
  margin:14px 0 10px; max-width:18ch; color:var(--tn-ink); }
.tn-h1 em{ font-style:normal; color:var(--tn-accent); }
.tn-lede{ font-family:var(--font-display,'Source Serif Pro',serif); font-size:clamp(15px,2vw,18px);
  color:var(--tn-ink-muted); max-width:60ch; margin:0; line-height:1.5; }
.tn-stamp{ margin-top:14px; font-family:var(--font-mono,monospace); font-size:11.5px;
  color:var(--tn-ink-soft); border-left:2px solid var(--tn-ruled); padding-left:12px; line-height:1.6; }

/* ── Panel de instrumento: KPIs unidos con filetes (mata la rejilla) ─────── */
.tn-panel{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--tn-ink);
  border-radius:8px; overflow:hidden; background:var(--tn-surface,#fff); }
.tn-panel.cols-3{ grid-template-columns:repeat(3,1fr); }
.tn-panel.cols-2{ grid-template-columns:repeat(2,1fr); }
.tn-panel.cols-5{ grid-template-columns:repeat(5,1fr); }
.tn-panel.cols-5 .tn-cell:nth-child(5n){ border-right:0; }
.tn-panel.cols-5 .tn-cell:nth-child(4n){ border-right:1px solid var(--tn-ruled); }
@media(max-width:820px){ .tn-panel,.tn-panel.cols-3,.tn-panel.cols-5{ grid-template-columns:repeat(2,1fr); }
  .tn-panel.cols-5 .tn-cell:nth-child(4n){ border-right:0; } }
.tn-cell{ padding:18px 20px; border-right:1px solid var(--tn-ruled);
  border-bottom:1px solid var(--tn-ruled); position:relative; }
.tn-cell:nth-child(4n),.tn-cell:last-child{ border-right:0; }
.tn-panel.cols-3 .tn-cell:nth-child(3n){ border-right:0; }
.tn-panel.cols-3 .tn-cell:nth-child(4n){ border-right:1px solid var(--tn-ruled); }
@media(max-width:820px){ .tn-cell:nth-child(2n){ border-right:0; }
  .tn-panel.cols-3 .tn-cell:nth-child(3n){ border-right:1px solid var(--tn-ruled); }
  .tn-panel.cols-3 .tn-cell:nth-child(2n){ border-right:0; } }
.tn-cell .lab{ font-family:var(--font-mono,monospace); font-size:10px; letter-spacing: 0;
  text-transform:uppercase; color:var(--tn-ink-soft); min-height:28px; }
.tn-cell .val{ font-family:var(--font-mono,monospace); font-size:34px; font-weight:600; line-height:1;
  margin:8px 0 3px; font-variant-numeric:tabular-nums; color:var(--tn-ink); }
.tn-cell .sub{ font-size:11.5px; color:var(--tn-ink-soft); }
.tn-cell.key{ background:var(--tn-carbon); }
.tn-cell.key .lab, .tn-cell.key .sub{ color:rgba(250,246,238,.7); }
.tn-cell.key .val{ color:var(--tn-sepia); font-size:38px; }

/* ── Lámina técnica: marco de instrumento para mapas y figuras ──────────── */
.tn-plate{ border:1px solid var(--tn-ink); border-radius:8px; overflow:hidden; position:relative; }
.tn-plate-head, .tn-plate-foot{ display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:8px 14px; font-family:var(--font-mono,monospace); font-size:10.5px;
  letter-spacing: 0; color:var(--tn-ink-soft); background:var(--tn-bone); flex-wrap:wrap; }
.tn-plate-head{ border-bottom:1px solid var(--tn-ruled); text-transform:uppercase; }
.tn-plate-head b{ color:var(--tn-ink); letter-spacing: 0; }
.tn-plate-foot{ border-top:1px solid var(--tn-ruled); }
.tn-plate-foot .live-dot{ width:7px;height:7px;border-radius:50%;background:#2E9E5B;
  display:inline-block;margin-right:5px; }
.tn-corner{ position:absolute; width:12px; height:12px; border:1.5px solid var(--tn-sepia);
  z-index:500; pointer-events:none; }
.tn-corner.tl{ top:34px; left:10px; border-right:0; border-bottom:0; }
.tn-corner.tr{ top:34px; right:10px; border-left:0; border-bottom:0; }
.tn-corner.bl{ bottom:34px; left:10px; border-right:0; border-top:0; }
.tn-corner.br{ bottom:34px; right:10px; border-left:0; border-top:0; }

/* ── Separador reglado (rompe la monotonía entre secciones) ─────────────── */
.tn-sep{ display:flex; align-items:center; gap:14px; margin:34px 0 20px;
  font-family:var(--font-mono,monospace); font-size:11px; letter-spacing: 0;
  text-transform:uppercase; color:var(--tn-sepia-deep); }
.tn-sep::after{ content:""; flex:1; height:1px;
  background:repeating-linear-gradient(90deg,var(--tn-ruled) 0 6px,transparent 6px 10px); }
.tn-sep b{ color:var(--tn-ink); font-weight:600; }

/* ── Fichas municipales · red de seguridad responsive ─────────────────────────
   Las fichas tienen rejillas en estilo inline (sin clase) que se desbordaban en
   móvil (texto cortado). Se colapsan a una columna bajo 700px, con alcance
   .main-wrap (solo fichas). Cubre tanto las rejillas ya publicadas (por atributo
   style) como las regeneradas (clases .g-resumen / .g-gloss). */
@media (max-width:700px){
  .main-wrap .g-resumen,
  .main-wrap [style*="grid-template-columns:180px 1fr 1fr"]{
    grid-template-columns:1fr !important; gap:16px !important; }
  .main-wrap .g-gloss,
  .main-wrap [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important; }
  .main-wrap, .main-wrap .section-card, .main-wrap .section-body{
    overflow-wrap:anywhere; word-break:break-word; }
  .main-wrap img, .main-wrap table, .main-wrap canvas{ max-width:100%; height:auto; }
  main table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}