/* =========================================================================
   Plataforma DFAS Nacional — aosenuma
   Sistema de diseño alineado a @aosenuma/ui (elawan-visor):
   near-black neutral · superficies cream cálidas · teal sobrio · CTA chartreuse
   ========================================================================= */
:root {
  /* Fondos: petróleo-teal profundo (familia del header aosenuma) */
  --bg-deep:        #0a1518;
  --bg-mid:         #111c20;
  --bg-soft:        #18232a;
  --bg-glass:       rgba(14, 22, 26, 0.9);
  --bg-glass-soft:  rgba(14, 22, 26, 0.6);

  /* Superficies cream (cálidas, translúcidas)
     Oleada 1 · profundidad: se sube la presencia del formulario para sacarlo del
     limbo del 2.5% (nivel-1). El drama vive en el hero/CTA (nivel-2), no aquí. */
  --surface:        rgba(242, 244, 237, 0.05);
  --surface-hover:  rgba(242, 244, 237, 0.08);
  --surface-track:  rgba(242, 244, 237, 0.06);

  /* Acentos */
  --teal:           var(--ui-teal, #4A9CA5);
  --teal-bright:    var(--ui-teal-bright, #66b8c0);
  --teal-deep:      var(--ui-petrol-800, #265560);
  --teal-soft:      rgba(74, 156, 165, 0.16);
  /* Cyan brillante — acento de realce del deck aosenuma (palabras clave, foco) */
  --cyan:           #2bb8d4;
  --cyan-bright:    #5fd0e6;
  --cyan-soft:      rgba(43, 184, 212, 0.14);
  --lime:           #d2dc76;
  --gold:           var(--ui-risk-medium, #c9a96e);
  --rose:           #b87a6a;
  --terra:          var(--ui-risk-high, #b56556);

  /* CTA primario — chartreuse suave (reservado a botones de acción) */
  --cta:            #b4c96f;
  --cta-hover:      #c5d67e;
  --cta-active:     #9fb85a;
  --cta-text:       #141a12;
  --cta-shadow:     rgba(34, 42, 18, 0.16);

  /* Texto cream */
  --cream:          #f2f4ed;
  --text:           #f2f4ed;
  --text-mid:       rgba(242, 244, 237, 0.78);
  --text-dim:       rgba(242, 244, 237, 0.55);
  --text-faint:     rgba(242, 244, 237, 0.32);

  /* Bordes */
  --border:         rgba(242, 244, 237, 0.11);
  --border-strong:  rgba(242, 244, 237, 0.18);

  /* Elevación · dos niveles definidos (Oleada 1)
     nivel-1 = formulario (presencia sobria); nivel-2 = hero / CTA (protagonista). */
  --elev-1:         0 6px 18px -12px rgba(3, 25, 31, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  --elev-2:         0 16px 40px -20px rgba(3, 25, 31, 0.70), inset 0 1px 0 rgba(255,255,255,0.12);

  /* Áreas de influencia (cool-warm family, consistente con el mapa) */
  --ai-an:          #c75c4f;
  --ai-aid:         #4A9CA5;
  --ai-aii:         #c9a96e;

  /* Tipografía — familias de marca aosenuma (Bricolage · Inter · Inter Tight · Barlow) */
  --font-sans:      var(--ui-font-body, 'Inter', system-ui, -apple-system, sans-serif);
  --font-display:   var(--ui-font-label, 'Inter Tight', 'Inter', sans-serif);
  --font-brand:     var(--ui-font-display, 'Bricolage Grotesque', 'Inter Tight', sans-serif);
  --font-accent:    var(--ui-font-action, 'Barlow', 'Inter', sans-serif);

  /* Marca aosenuma (teal petróleo del Código de Ética) */
  --aose-teal:      #0e8a9a;
  --aose-lime:      #a6c84b;

  /* Radios */
  --radius-sm:      9px;
  --radius-md:      13px;
  --radius-card:    16px;
  --radius-lg:      20px;
  --radius-pill:    999px;

  /* Sombras */
  --shadow-sm:      0 3px 16px rgba(10, 20, 22, 0.22);
  --shadow-md:      0 10px 30px -12px rgba(10, 20, 22, 0.32);
  --shadow-lg:      0 20px 50px -16px rgba(10, 20, 22, 0.40);

  /* Motion */
  --motion-fast:    0.12s;
  --motion-normal:  0.22s;
  --ease-soft:      cubic-bezier(0.33, 1, 0.68, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0.01ms; --motion-normal: 0.01ms; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#map { position: absolute; inset: 0; z-index: 1; }
.hidden { display: none !important; }
.muted { color: var(--text-faint); }

/* ===== HEADER — estilo aosenuma-topbar (portado de elawan-visor) ===== */
#header {
  position: fixed; top: 0; left: 0; right: 0; height: 46px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(10, 31, 38, 0.92) 0%, rgba(10, 31, 38, 0.78) 100%);
  backdrop-filter: blur(12px) saturate(1.05); -webkit-backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid rgba(242, 244, 237, 0.08);
  z-index: 200; pointer-events: auto;
}
.aosenuma-topbar__line {
  position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #4A9CA5 0%, #d2dc76 50%, #c9a96e 100%); opacity: 0.30;
}
.aosenuma-topbar__title-block { display: flex; align-items: center; gap: 14px; min-width: 0; flex-shrink: 1; }
.aosenuma-topbar__brand { font-family: var(--font-brand); font-weight: 600; letter-spacing: -0.01em; color: #f2f4ed; font-size: 13.5px; }
.aosenuma-topbar__home { display: inline-flex; align-items: center; text-decoration: none; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -2px -2px 0; transition: background var(--motion-fast), opacity var(--motion-fast); }
.aosenuma-topbar__home:hover { background: rgba(242,244,237,0.07); }
.aosenuma-topbar__home:hover .aosenuma-topbar__brand { color: var(--teal-bright); }
.aosenuma-topbar__home:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; }
.aosenuma-topbar__divider { width: 1px; height: 18px; background: rgba(242, 244, 237, 0.18); flex-shrink: 0; margin: 0 11px; }
.aosenuma-topbar__title-text {
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 500;
  color: rgba(242, 244, 237, 0.78); letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.aosenuma-topbar__title-strong { font-weight: 600; color: #f2f4ed; }
.aosenuma-topbar__scope { font-weight: 600; color: #f2f4ed; letter-spacing: 0.02em; }
.aosenuma-topbar__title-sep { opacity: 0.55; margin: 0 0.55rem; }
.aosenuma-topbar__powered { opacity: 0.78; font-size: 11px; letter-spacing: 0.02em; }
.aosenuma-topbar__logo-aosenuma { opacity: 0.9; margin: 0 4px 2px 6px; vertical-align: middle; filter: brightness(0) invert(1); flex-shrink: 0; }
.aosenuma-topbar__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: 16px; }
.aosenuma-topbar__live { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 10.5px; font-weight: 600; color: rgba(242, 244, 237, 0.78); letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; }

/* ===== GLASS ===== */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ===== PANEL IZQUIERDO (docked, retráctil) ===== */
#panel {
  position: fixed; top: 46px; left: 0; bottom: 0; width: 512px;
  z-index: 50; padding: 20px 22px 30px; overflow-y: auto; scroll-behavior: smooth;
  background: rgba(11, 21, 24, 0.95);
  backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: none; border-right: 1px solid var(--border-strong); border-radius: 0;
  box-shadow: 8px 0 40px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.38s var(--ease-soft);
}
#panel.is-collapsed { transform: translateX(-100%); }

/* Drawer handles (retraer / mostrar) */
.panel-toggle {
  position: fixed; top: 50%; margin-top: -16px; z-index: 60;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(13, 19, 24, 0.94); color: var(--teal-bright);
  border: 1.5px solid rgba(74, 156, 165, 0.7); border-radius: 50%; cursor: pointer;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: left 0.38s var(--ease-soft), right 0.38s var(--ease-soft), opacity 0.26s, color 0.15s, border-color 0.15s, background 0.15s, transform 0.18s var(--ease-soft), box-shadow 0.15s;
}
.panel-toggle:hover { color: var(--cta); border-color: var(--cta); background: rgba(180, 201, 111, 0.12); transform: scale(1.06); box-shadow: var(--shadow-md); }
.panel-toggle:active { transform: scale(0.95); }
.panel-toggle:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }
.panel-toggle svg { transition: transform 0.18s var(--ease-soft); }
/* fuera del panel (512px de ancho + holgura): no tapa valores de las listas */
#panel-collapse { left: 518px; }
#panel-collapse:hover svg { transform: translateX(-2px); }
#panel-expand { left: 14px; opacity: 0; pointer-events: none; }
#panel-expand:hover svg { transform: translateX(2px); }
body.panel-collapsed #panel-collapse { left: -46px; opacity: 0; pointer-events: none; }
body.panel-collapsed #panel-expand { left: 14px; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { #panel, .panel-toggle { transition: none; } }
#panel::-webkit-scrollbar, .layers-scroll::-webkit-scrollbar,
.ranked-list::-webkit-scrollbar { width: 5px; }
#panel::-webkit-scrollbar-thumb, .layers-scroll::-webkit-scrollbar-thumb,
.ranked-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }

.sidebar-section { padding: 4px 0; }
.section-title {
  font-family: var(--font-brand); font-size: 17px; font-weight: 600;
  color: var(--cream); letter-spacing: -0.015em; line-height: 1.2;
}
/* Kicker: uppercase teal, espaciado, display */
.section-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--teal-bright);
  margin-bottom: 10px;
}
.sidebar-hint { font-size: 12px; line-height: 1.6; color: var(--text-mid); margin: 8px 0 12px; }
.sidebar-hint code {
  background: var(--teal-soft); color: var(--teal-bright); font-family: var(--font-display);
  font-size: 10.5px; padding: 1px 6px; border-radius: 5px; font-weight: 500;
}
.divider { height: 1px; background: var(--border); margin: 14px 0; }

/* ===== MODE TABS (segmented) ===== */
.mode-tabs {
  /* cinco formas de definir el sitio: punto, línea, polígono, archivo y unidad */
  display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin-bottom: 12px;
  padding: 4px; background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.mode-tab { padding-left: 2px; padding-right: 2px; }
.mode-tab .msi { margin-right: 4px; }
.mode-tab {
  font-family: var(--font-display); font-size: 11px; font-weight: 600; padding: 9px 4px;
  background: transparent; color: var(--text-mid); border: none;
  border-radius: var(--radius-sm); cursor: pointer; transition: all var(--motion-fast) var(--ease-soft);
}
.mode-tab:hover { color: var(--cream); background: var(--surface-hover); }
.mode-tab.active { background: var(--teal-soft); color: var(--teal-bright); box-shadow: inset 0 0 0 1px rgba(74,156,165,0.4); }
.mode-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.mode-hint {
  font-size: 11.5px; color: var(--teal-bright); background: var(--teal-soft);
  border: 1px dashed rgba(74,156,165,0.32); border-radius: var(--radius-sm);
  padding: 9px 11px; line-height: 1.5; margin-bottom: 12px;
}

/* ===== UPLOAD ===== */
.upload-box { margin-bottom: 12px; }
.upload-box input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-label {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--motion-normal) var(--ease-soft); text-align: center;
}
.upload-label:hover { border-color: var(--teal); background: var(--teal-soft); transform: translateY(-1px); }
.upload-icon { font-size: 24px; color: var(--teal-bright); }
#upload-text { font-size: 11.5px; color: var(--text-mid); }

/* Panel de diferenciación: composición del archivo + buffer por geometría */
.file-detect { margin-top: 10px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.file-detect.hidden { display: none; }
.fd-h { font-family: var(--font-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-bright); margin-bottom: 8px; }
.fd-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.fd-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fd-dot.grad { background: var(--teal); }
.fd-dot.corr { background: var(--terra); }
.fd-rol { flex: 1; color: var(--text); min-width: 0; }
.fd-rol i { color: var(--text-faint); font-style: normal; }
.fd-buf { font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; font-family: var(--font-display); }
.fd-buf.grad { background: var(--teal-soft); color: var(--teal-bright); }
.fd-buf.corr { background: rgba(181, 101, 86, 0.16); color: var(--terra); }
.fd-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.45; color: var(--text-mid); }
.fd-note b { color: var(--text); font-weight: 600; }
/* Guarda roles_adivinados: la conjetura se distingue de una nota informativa. */
.fd-note.fd-warn { border-top-color: rgba(181, 101, 86, 0.55); color: var(--terra); }
.fd-note.fd-warn b { color: var(--terra); }
.fd-load { font-size: 12px; color: var(--text-dim); padding: 2px 0; }
.fd-load.err { color: var(--terra); }
/* corredor editable de la línea */
.ai-line { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--border); }
.ai-line.hidden { display: none; }
.ai-line .ai-input { max-width: 240px; }
.ai-line label small { color: var(--terra); }

/* ===== SITE STATUS ===== */
.site-status {
  display: flex; align-items: center; gap: 9px; font-size: 12px;
  padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface);
  border: 1px solid var(--border); transition: border-color var(--motion-normal) var(--ease-soft);
}
.site-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; transition: all var(--motion-normal); }
.site-status.ok { color: var(--cream); border-color: rgba(180,201,111,0.32); }
.site-status.ok .dot { background: var(--cta); box-shadow: 0 0 0 3px rgba(180,201,111,0.16); }
.site-status.empty { color: var(--text-dim); }
.btn-link {
  background: none; border: none; color: var(--teal-bright); font-size: 11px; cursor: pointer;
  margin-left: auto; text-decoration: underline; text-decoration-color: rgba(102,184,192,0.4);
  text-underline-offset: 3px; transition: text-decoration-color var(--motion-fast);
}
.btn-link:hover { text-decoration-color: var(--teal-bright); }

/* ===== AI INPUTS ===== */
.ai-inputs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ai-input label { display: block; font-size: 11px; font-weight: 600; color: var(--text-mid); margin-bottom: 5px; }
.ai-input label small { font-weight: 400; color: var(--text-faint); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.input-unit {
  display: flex; align-items: center; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.input-unit:focus-within { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(74,156,165,0.10); }
.input-unit input {
  flex: 1; width: 100%; padding: 8px; background: transparent; border: none; color: var(--cream);
  font-size: 13px; font-family: var(--font-display); font-weight: 500; outline: none;
}
.input-unit .unit { font-size: 10px; color: var(--text-faint); padding-right: 9px; }
.preview-areas { margin-top: 11px; font-size: 11px; color: var(--text-mid); display: grid; gap: 4px; }
.preview-areas b { color: var(--teal-bright); font-family: var(--font-display); font-weight: 600; }

/* Validación en vivo de AN/AID/AII */
.ai-error { margin-top: 9px; font-size: 11px; font-weight: 600; color: var(--terra); }
.input-unit.invalid { border-color: var(--terra); }
.input-unit.invalid:focus-within { border-color: var(--terra); box-shadow: 0 0 0 2px rgba(199, 92, 79, 0.14); }

/* ===== FIELDS ===== */
.field { margin-bottom: 9px; flex: 1; }
.field-row { display: flex; gap: 8px; }
.field label { display: block; font-size: 10px; color: var(--text-dim); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.field input, .field select {
  width: 100%; padding: 8px 10px; font-size: 12px; font-family: inherit;
  color: var(--cream); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(74,156,165,0.10); }
.field select option { background: var(--bg-mid); }

/* ===== PRIMARY BUTTON (chartreuse) ===== */
.btn-primary {
  width: 100%; padding: 13px; font-size: 13px; font-weight: 700; color: var(--cta-text);
  background: var(--cta); border: none; border-radius: var(--radius-sm);
  cursor: pointer; margin-top: 4px; font-family: var(--font-accent);
  letter-spacing: 0.05em; text-transform: uppercase;
  box-shadow: 0 4px 16px var(--cta-shadow);
  transition: background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.btn-primary:hover:not(:disabled) { background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 6px 20px var(--cta-shadow); }
.btn-primary:active:not(:disabled) { transform: translateY(0); background: var(--cta-active); }
.btn-primary:disabled { background: var(--surface-hover); color: var(--text-faint); cursor: not-allowed; box-shadow: none; }
.btn-primary:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }

/* ===== RESULTS ===== */
#results-view { animation: viewIn var(--motion-normal) var(--ease-soft); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.results-head .section-title {
  font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(135deg, var(--cream) 0%, var(--teal-bright) 140%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ===== AI FILTER ===== */
.ai-filter-bar {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin: 14px 0 10px;
  padding: 4px; background: rgba(0,0,0,0.25); border-radius: var(--radius-md); border: 1px solid var(--border);
}
.ai-pill {
  font-family: var(--font-display); font-size: 10px; font-weight: 700; padding: 7px 4px;
  background: transparent; color: var(--text-mid); border: none; border-radius: var(--radius-sm);
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; transition: all var(--motion-fast) var(--ease-soft);
}
.ai-pill:hover { background: var(--surface-hover); color: var(--cream); }
.ai-pill.active { background: var(--teal-soft); color: var(--teal-bright); box-shadow: inset 0 0 0 1px rgba(74,156,165,0.4); }
.ai-pill[data-ai="AN"].active { background: rgba(199,92,79,0.18); color: #e69b8f; box-shadow: inset 0 0 0 1px rgba(199,92,79,0.5); }
.ai-pill[data-ai="AID"].active { background: var(--teal-soft); color: var(--teal-bright); box-shadow: inset 0 0 0 1px rgba(74,156,165,0.5); }
.ai-pill[data-ai="AII"].active { background: rgba(201,169,110,0.18); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201,169,110,0.5); }
.ai-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Radio del anillo bajo la etiqueta: mantiene visible la selección del menú
   inicial (AN 0.5 km · AID 1 km · AII 0) mientras se ven los resultados. */
.ai-pill { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
.ai-pill-r {
  font-size: 9px; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
  opacity: 0.7; font-variant-numeric: tabular-nums;
}
.ai-pill-r:empty { display: none; }
/* Anillo en 0 = desactivado en este análisis: no hay geometría que filtrar. */
.ai-pill.is-off { opacity: 0.38; cursor: not-allowed; }
.ai-pill.is-off:hover { background: transparent; color: var(--text-mid); }

/* ===== KPI ===== */
/* Indicadores: tira compacta de 4 stats (una fila dividida, editorial) */
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.kpi { text-align: left; padding: 10px 11px; background: transparent; border: none; border-left: 1px solid var(--border); border-radius: 0; transition: background var(--motion-fast) var(--ease-soft); }
.kpi:first-child { border-left: none; }
.kpi:hover { background: var(--surface-hover); }
.kpi-val { display: block; font-family: var(--font-brand); font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi-val.kpi-green { color: var(--text); }
.kpi-val.kpi-red { color: var(--terra); }
.kpi-lbl { display: block; font-size: 8.5px; color: var(--text-dim); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.25; }
.cpli-flag {
  margin-top: 10px; font-size: 11.5px; padding: 10px 12px; border-radius: var(--radius-md);
  background: rgba(181,101,86,0.14); border: 1px solid rgba(181,101,86,0.4); color: #e3b2a6; font-weight: 500; line-height: 1.45;
}
.cpli-flag.ok { background: rgba(180,201,111,0.12); border-color: rgba(180,201,111,0.4); color: #d7e0a4; }
/* CPLI tri-estado (E-5): determinación indeterminada → «no evaluable». Nunca
   se oculta el chip: un blanco no es un estado. Ámbar del no-disponible. */
.cpli-flag.nd { background: rgba(212,160,23,0.12); border-color: rgba(212,160,23,0.45); color: #e8c65a; }

/* ===== RESUMEN EJECUTIVO ===== */
/* ===== ENCABEZADO DE RESULTADOS — seccionado / profesional ===== */
.res-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-dim); margin: 5px 0 2px; }
.res-meta b { color: var(--text-mid); font-weight: 600; }
.res-block { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border); }
.res-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.res-block-head .section-label { margin-bottom: 0; }
.res-block > .section-label { margin-bottom: 11px; }
.res-block .ai-filter-bar { margin: 0; }
.res-block .kpi-grid { margin-top: 0; }
.res-area-size { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; color: var(--teal-bright); background: var(--teal-soft); border: 1px solid rgba(74,156,165,0.28); border-radius: var(--radius-pill); padding: 3px 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Hallazgos clave: chips de severidad alineados en columna */
.exec-summary { display: flex; flex-direction: column; gap: 7px; }
.exec-line { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: start; }
.exec-tag { font-family: var(--font-display); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 0; border-radius: 5px; border: 1px solid; text-align: center; white-space: nowrap; margin-top: 1px; }
.exec-tx { font-size: 12px; line-height: 1.45; color: var(--text-mid); }
.exec-tx b { color: var(--text); font-weight: 600; }
.exec-line.is-crit .exec-tag { color: var(--terra); background: rgba(181,101,86,0.13); border-color: rgba(181,101,86,0.40); }
.exec-line.is-warn .exec-tag { color: var(--gold); background: rgba(201,169,110,0.14); border-color: rgba(201,169,110,0.42); }
.exec-line.is-ok   .exec-tag { color: var(--lime); background: rgba(180,201,111,0.14); border-color: rgba(180,201,111,0.42); }
.exec-line.is-info .exec-tag { color: var(--teal-bright); background: var(--teal-soft); border-color: rgba(74,156,165,0.36); }

/* ===== ENTREGABLES ===== */
.deliv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 7px; }
.deliv-btn {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); cursor: pointer; transition: all var(--motion-fast) var(--ease-soft);
  color: var(--text-mid); font-family: var(--font-sans);
}
.deliv-btn:hover { border-color: var(--teal); background: var(--surface-hover); transform: translateY(-1px); }
.deliv-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.deliv-ico { font-size: 17px; flex-shrink: 0; filter: saturate(0.85); }
.deliv-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.deliv-tx b { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--cream); }
.deliv-tx small { font-size: 9.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deliv-btn-primary { background: var(--teal-soft); border-color: rgba(74,156,165,0.45); }
.deliv-btn-primary .deliv-tx b { color: var(--teal-bright); }
.deliv-btn-primary:hover { background: rgba(74,156,165,0.2); border-color: var(--teal-bright); }

/* ===== DOCUMENTOS (tipos de entregable por plantilla) ===== */
.doc-reco { display: flex; align-items: center; gap: 9px; padding: 9px 11px; margin-bottom: 11px; background: rgba(180,201,111,0.10); border: 1px solid rgba(180,201,111,0.34); border-radius: var(--radius-md); font-size: 11.5px; color: var(--text-mid); line-height: 1.4; }
.doc-reco-chip { font-family: var(--font-display); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lime); background: rgba(180,201,111,0.16); border: 1px solid rgba(180,201,111,0.45); border-radius: 5px; padding: 3px 7px; white-space: nowrap; flex-shrink: 0; }
.doc-reco-tx b { color: var(--text); font-weight: 600; }

/* ===== MISSE regulatoria (VUPE) ===== */
.misse-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 11px; }
.misse-fs { border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); padding: 0 11px; }
.misse-fs[open] { padding-bottom: 11px; }
.misse-fs summary { cursor: pointer; padding: 10px 0; font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal-bright); list-style: none; }
.misse-fs summary::-webkit-details-marker { display: none; }
.misse-fs summary::after { content: '+'; float: right; color: var(--text-dim); font-weight: 400; }
.misse-fs[open] summary::after { content: '\2212'; }
.misse-form input, .misse-form textarea, .misse-form select { width: 100%; margin-top: 6px; padding: 8px 10px; background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-sans); font-size: 12px; }
.misse-form textarea { min-height: 44px; resize: vertical; }
.misse-form input:focus, .misse-form textarea:focus, .misse-form select:focus { outline: none; border-color: var(--teal); }
.misse-form input::placeholder, .misse-form textarea::placeholder { color: var(--text-faint); }
.misse-row { display: flex; gap: 8px; }
.misse-row > * { flex: 1; min-width: 0; }
.misse-row label { display: flex; flex-direction: column; font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.misse-reco { background: rgba(74,156,165,0.10); border-color: rgba(74,156,165,0.34); margin-top: 4px; }
.misse-reco .doc-reco-chip { color: var(--teal-bright); background: rgba(74,156,165,0.16); border-color: rgba(74,156,165,0.45); }
.misse-decision-card, .misse-area-nav, .misse-evidence, .misse-exports { margin: 8px 0 12px; padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); }
.misse-decision-card { border-color: rgba(74,156,165,.46); background: linear-gradient(135deg, rgba(74,156,165,.12), var(--surface)); }
.misse-decision-card__eyebrow, .misse-area-nav__head small, .misse-evidence-head small { display: block; color: var(--teal-bright); font: 700 9px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.misse-decision-card h4 { margin: 4px 0 3px; color: var(--text); font: 700 17px var(--font-display); }
.misse-decision-card p, .misse-decision-card small, .misse-area-nav > p, .misse-evidence-note, .misse-export-note, #misse-export-status { color: var(--text-dim); font-size: 10.5px; line-height: 1.45; }
.misse-decision-card p { margin: 0 0 9px; color: var(--text-mid); }
.misse-decision-card__facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin: 8px 0; }
.misse-decision-card__facts span { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; background: rgba(0,0,0,.12); border-radius: var(--radius-sm); font-size: 10px; color: var(--text-mid); }
.misse-decision-card__facts b { color: var(--text); font: 700 8px var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.misse-area-nav__head, .misse-evidence-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.misse-area-nav__head b, .misse-evidence-head b { display: block; margin-top: 3px; color: var(--text); font: 700 12px var(--font-display); }
.misse-area-nav__head em, .misse-evidence-head em { color: var(--text-faint); font-size: 9px; font-style: normal; }
.misse-area-nav__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 9px; }
.misse-area-btn { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 9px; text-align: left; color: var(--text-mid); background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.misse-area-btn:hover, .misse-area-btn.active { border-color: var(--teal); background: var(--teal-soft); }
.misse-area-btn > span { display: flex; flex-direction: column; gap: 2px; }
.misse-area-btn b { color: var(--teal-bright); font: 800 11px var(--font-display); }
.misse-area-btn i { overflow: hidden; color: var(--text); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.misse-area-btn strong { color: var(--text); font-size: 11px; }
.misse-area-btn small { color: var(--text-dim); font-size: 9px; line-height: 1.3; }
.misse-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; margin-top: 9px; }
.misse-evidence-card { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px; text-align: left; color: var(--text-mid); background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.misse-evidence-card:hover, .misse-evidence-card.active { border-color: var(--gold); background: rgba(201,169,110,.1); }
.misse-evidence-card.is-empty { cursor: default; opacity: .72; }
.misse-evidence-card__eyebrow { color: var(--text-faint); font: 700 8px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.misse-evidence-card b { overflow: hidden; color: var(--text); font: 700 11px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.misse-evidence-card strong { color: var(--teal-bright); font-size: 11px; }
.misse-evidence-card small { overflow: hidden; color: var(--text-dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.misse-evidence-card__cta { color: var(--gold); font-size: 9px; }
.misse-evidence-card.is-empty strong, .misse-evidence-card.is-empty .misse-evidence-card__cta { color: var(--text-dim); }
.misse-export-picker { display: grid; grid-template-columns: 1fr 1.35fr auto; gap: 8px; align-items: end; }
.misse-export-picker label { display: flex; flex-direction: column; gap: 4px; color: var(--text-dim); font: 700 8.5px var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.misse-export-picker select { width: 100%; padding: 8px; color: var(--text); background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: 11px var(--font-sans); text-transform: none; }
.misse-export-formats { display: flex; gap: 5px; }
.misse-export-formats button { padding: 8px 9px; color: var(--teal-bright); background: var(--teal-soft); border: 1px solid rgba(74,156,165,.45); border-radius: var(--radius-sm); cursor: pointer; font: 700 9px var(--font-display); }
.misse-export-formats button:hover { border-color: var(--teal-bright); }
.misse-export-formats button:disabled { color: var(--text-faint); background: transparent; border-color: var(--border); cursor: not-allowed; }
#misse-export-status { min-height: 16px; margin: 7px 0 0; }
.misse-export-lede { margin: 0 0 9px; color: var(--text-dim); font-size: 10.5px; line-height: 1.45; }
.lb-misse-exports { padding: 0; overflow: hidden; border-color: rgba(74,156,165,.34); }
.lb-misse-export-head { display: flex; justify-content: space-between; gap: 10px; padding: 12px 12px 10px; background: linear-gradient(135deg, rgba(74,156,165,.12), transparent 72%); border-bottom: 1px solid var(--border); }
.lb-misse-export-head span, .lb-misse-geometry > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-misse-export-head small, .lb-misse-geometry small { color: var(--teal-bright); font: 700 8px var(--font-display); letter-spacing: .07em; text-transform: uppercase; }
.lb-misse-export-head b, .lb-misse-geometry b { color: var(--text); font: 700 12px var(--font-display); }
.lb-misse-export-head em { align-self: center; max-width: 138px; color: var(--text-faint); font-size: 9px; font-style: normal; line-height: 1.3; text-align: right; }
.lb-misse-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.lb-misse-ai-chip { display: grid; grid-template-columns: auto 1fr; gap: 1px 5px; flex: 1 1 132px; min-width: 0; padding: 7px 8px; color: var(--text-mid); background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.lb-misse-ai-chip:hover, .lb-misse-ai-chip.active { border-color: var(--teal); background: var(--teal-soft); }
.lb-misse-ai-chip:focus-visible, .lb-misse-format:focus-visible, .lb-misse-geometry button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lb-misse-ai-chip b { grid-row: span 2; color: var(--teal-bright); font: 800 12px var(--font-display); }
.lb-misse-ai-chip span { overflow: hidden; color: var(--text); font: 700 10px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.lb-misse-ai-chip small { color: var(--text-dim); font-size: 8.5px; }
/* El acumulado no es un cuarto AI del motor: se distingue del resto con la
   franja dorada y su propia nota, nunca fingiendo ser un área más. */
.lb-misse-ai-chip--all { flex: 1 1 100%; border-style: dashed; }
.lb-misse-ai-chip--all b { color: var(--gold); font-size: 11px; letter-spacing: .02em; }
.lb-misse-ai-chip--all:hover, .lb-misse-ai-chip--all.active { border-style: solid; border-color: var(--gold); background: rgba(176, 131, 33, .1); }
.lb-misse-ai-note { margin: 0; padding: 8px 12px; color: var(--text-dim); font-size: 9px; line-height: 1.45; background: rgba(176, 131, 33, .07); border-bottom: 1px solid var(--border); }
.lb-misse-ai-note b { color: var(--text); }
.lb-misse-ai-note code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 8.5px; }
.lb-misse-theme-list { padding: 5px 12px 9px; }
.lb-misse-theme-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto auto; gap: 7px; align-items: center; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--border); }
.lb-misse-theme-row:last-child { border-bottom: 0; }
.lb-misse-theme-row.is-unavailable { opacity: .65; }
.lb-misse-theme-row__icon { display: grid; width: 25px; height: 25px; place-items: center; color: var(--teal-bright); background: var(--teal-soft); border-radius: 7px; }
.lb-misse-theme-row__body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.lb-misse-theme-row__body b { overflow: hidden; color: var(--text); font: 700 10.5px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.lb-misse-theme-row__body small { overflow: hidden; color: var(--text-faint); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.lb-misse-theme-state { max-width: 145px; padding: 3px 5px; border: 1px solid transparent; border-radius: 999px; color: var(--teal-bright); background: var(--teal-soft); font: 700 8px var(--font-display); line-height: 1.25; text-align: center; }
.lb-misse-theme-state.is-zero { color: var(--text-mid); background: rgba(255,255,255,.05); border-color: var(--border-strong); }
.lb-misse-theme-state.is-unavailable { color: var(--text-faint); background: transparent; border-color: var(--border); }
.lb-misse-theme-row__formats { display: flex; gap: 3px; }
.lb-misse-format, .lb-misse-geometry button { padding: 5px 6px; color: var(--teal-bright); background: var(--teal-soft); border: 1px solid rgba(74,156,165,.42); border-radius: 6px; cursor: pointer; font: 800 8px var(--font-display); letter-spacing: .03em; }
.lb-misse-format:hover, .lb-misse-geometry button:hover { border-color: var(--teal-bright); transform: translateY(-1px); }
.lb-misse-format:disabled, .lb-misse-geometry button:disabled { color: var(--text-faint); background: transparent; border-color: var(--border); cursor: wait; transform: none; }
.lb-misse-theme-row__status { grid-column: 2 / -1; min-height: 0; color: var(--text-dim); font-size: 8.5px; line-height: 1.3; }
.lb-misse-theme-row__status:not(:empty) { margin-top: -2px; }
.lb-misse-geometry { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin: 2px 12px 9px; padding: 10px; background: rgba(201,169,110,.07); border: 1px solid rgba(201,169,110,.30); border-radius: var(--radius-sm); }
.lb-misse-geometry > span em { color: var(--text-faint); font-size: 8.5px; font-style: normal; }
.lb-misse-geometry > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.lb-misse-geometry button { color: var(--gold); background: rgba(201,169,110,.10); border-color: rgba(201,169,110,.42); }
.lb-misse-geometry p, .lb-misse-geometry [data-lb-ai-geometry-status] { grid-column: 1 / -1; margin: 0; color: var(--text-dim); font-size: 8.8px; line-height: 1.35; }
.lb-misse-geometry [data-lb-ai-geometry-status]:not(:empty) { color: var(--teal-bright); }
@media (max-width: 760px) { .lb-misse-export-head { align-items: flex-start; } .lb-misse-theme-row { grid-template-columns: 25px minmax(0, 1fr) auto; } .lb-misse-theme-state { grid-column: 2 / 3; justify-self: start; max-width: none; } .lb-misse-theme-row__formats { grid-column: 3; grid-row: 1 / span 2; align-self: center; flex-direction: column; } .lb-misse-geometry { grid-template-columns: 1fr; } .lb-misse-geometry > div { justify-content: flex-start; } }
.misse-secondary-disclosure { margin: 10px 0; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); }
.misse-secondary-disclosure summary { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; }
.misse-secondary-disclosure summary::-webkit-details-marker { display: none; }
.misse-secondary-disclosure summary span { display: flex; flex-direction: column; gap: 2px; }
.misse-secondary-disclosure summary small { color: var(--text-dim); font: 700 8px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.misse-secondary-disclosure summary b { color: var(--text); font: 700 11px var(--font-display); }
.misse-secondary-disclosure summary em { color: var(--text-faint); font-size: 9px; font-style: normal; }
.misse-secondary-disclosure__body { padding: 0 12px 12px; }
@media (max-width: 760px) { .misse-decision-card__facts, .misse-area-nav__grid, .misse-export-picker { grid-template-columns: 1fr; } .misse-evidence-grid { grid-template-columns: 1fr; } .misse-export-formats { flex-wrap: wrap; } }
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 11px; }
.doc-card { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; padding: 12px 13px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: all var(--motion-fast) var(--ease-soft); color: var(--text-mid); }
.doc-card:hover { border-color: var(--teal); background: var(--surface-hover); transform: translateY(-1px); }
.doc-card.selected { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.doc-card.recommended { border-color: rgba(180,201,111,0.5); }
.doc-card.recommended.selected { border-color: var(--teal); }
.doc-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--teal-soft); display: grid; place-items: center; flex-shrink: 0; }
.doc-ic svg { width: 17px; height: 17px; stroke: var(--teal-bright); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.doc-card.selected .doc-ic { background: var(--teal); }
.doc-card.selected .doc-ic svg { stroke: #fff; }
.doc-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.doc-tx b { font-family: var(--font-brand); font-weight: 600; font-size: 13px; color: var(--text); }
.doc-tx small { font-size: 9.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-badge { position: absolute; top: 6px; right: 7px; font-family: var(--font-display); font-size: 7.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); background: rgba(201,169,110,0.14); border: 1px solid rgba(201,169,110,0.4); border-radius: 4px; padding: 1px 5px; }
.doc-fill { font-size: 11px; color: var(--text-mid); line-height: 1.55; margin-bottom: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.doc-fill .doc-fill-h { font-family: var(--font-display); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal-bright); display: block; margin-bottom: 6px; }
.doc-fill b { color: var(--text); font-weight: 600; }
.doc-fill .df-row { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.doc-fill .df-row svg { width: 12px; height: 12px; stroke: var(--teal); fill: none; stroke-width: 2; flex-shrink: 0; }
.doc-generate:disabled { opacity: 0.55; }

/* Datos y reportes técnicos — chips compactos (secundario, integrado bajo Entregables) */
.deliv-sub { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border); }
.deliv-sub-label { display: block; font-family: var(--font-display); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 9px; }
.deliv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.deliv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 11.5px; font-weight: 500; font-family: var(--font-sans); color: var(--text-mid); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); cursor: pointer; transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
.deliv-chip svg { width: 13px; height: 13px; stroke: var(--teal-bright); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.deliv-chip:hover { color: var(--text); background: var(--surface-hover); border-color: var(--teal); transform: translateY(-1px); }
.deliv-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.deliv-chip.is-loading { opacity: 0.6; cursor: progress; transform: none; }
.deliv-chip-primary { background: var(--teal-soft); border-color: rgba(74,156,165,0.45); color: var(--teal-bright); font-weight: 600; }
.deliv-chip-primary:hover { background: rgba(74,156,165,0.18); border-color: var(--teal-bright); color: var(--teal-bright); }

/* Paquete completo — descarga prominente (más llamativa que los chips) */
.deliv-pack { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 10px; padding: 12px 14px; text-align: left; background: var(--teal-soft); border: 1px solid rgba(74,156,165,0.45); border-radius: var(--radius-md); cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast); }
.deliv-pack:hover { background: rgba(74,156,165,0.18); border-color: var(--teal-bright); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.deliv-pack:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.deliv-pack.is-loading { opacity: 0.6; cursor: progress; transform: none; }
.deliv-pack-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--teal); display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 4px 12px -4px rgba(14,138,154,0.45); }
.deliv-pack-ic svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.deliv-pack-tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.deliv-pack-tx b { font-family: var(--font-brand); font-weight: 600; font-size: 13.5px; color: var(--text); line-height: 1.15; }
.deliv-pack-tx small { font-size: 10px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deliv-pack-arrow { color: var(--teal-bright); flex-shrink: 0; display: inline-flex; transition: transform var(--motion-fast) var(--ease-soft); }
.deliv-pack-arrow svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deliv-pack:hover .deliv-pack-arrow { transform: translateY(2px); }

/* ===== RIESGO IFC ===== */
.risk-summary { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.risk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; font-family: var(--font-display); border: 1px solid; }
.risk-chip b { font-size: 13px; }
.risk-chip.crit { background: rgba(199,92,79,0.16); color: #e69b8f; border-color: rgba(199,92,79,0.45); }
.risk-chip.alto { background: rgba(201,169,110,0.16); color: var(--gold); border-color: rgba(201,169,110,0.45); }
.risk-chip.medio { background: rgba(74,156,165,0.16); color: var(--teal-bright); border-color: rgba(74,156,165,0.4); }
.risk-chip.bajo { background: var(--surface-hover); color: var(--text-mid); border-color: var(--border-strong); }
.risk-list { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.risk-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--teal); border-radius: var(--radius-sm); }
.risk-row.crit { border-left-color: var(--terra); }
.risk-row.alto { border-left-color: var(--gold); }
.risk-row.medio { border-left-color: var(--teal); }
.risk-row.bajo { border-left-color: var(--text-faint); }
.risk-pm { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--cream); text-align: center; }
.risk-body { min-width: 0; }
.risk-name { font-size: 11.5px; color: var(--text); line-height: 1.35; }
.risk-dim { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.risk-cat { font-family: var(--font-display); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px; }
.risk-cat.crit { background: rgba(199,92,79,0.2); color: #e69b8f; }
.risk-cat.alto { background: rgba(201,169,110,0.2); color: var(--gold); }
.risk-cat.medio { background: rgba(74,156,165,0.2); color: var(--teal-bright); }
.risk-cat.bajo { background: var(--surface-hover); color: var(--text-dim); }

/* ===== DASH CATEGORIES ===== */
.dash-cat { margin-bottom: 6px; }
.category-header { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 6px 0; user-select: none; transition: opacity var(--motion-fast); }
.category-header:hover { opacity: 0.82; }
.category-header .section-label { margin-bottom: 0; pointer-events: none; }
.chev { font-size: 10px; color: var(--teal-bright); width: 12px; text-align: center; transition: transform var(--motion-normal) var(--ease-soft); }
.category-content { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-soft); }
.category-content.is-open { max-height: 6000px; padding-top: 8px; }

.chart-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 13px; margin-bottom: 9px; transition: border-color var(--motion-normal) var(--ease-soft);
}
.chart-card:hover { border-color: var(--border-strong); }
.chart-title { font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--teal-bright); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.chart-box { position: relative; width: 100%; }
.chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.usv-legend { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border); }
/* leyenda de uso de suelo en tarjeta propia (sin la gráfica): sin borde/margen superior huérfano */
.usv-legend-card .usv-legend { margin-top: 0; padding-top: 0; border-top: none; gap: 7px 12px; }
.usv-leg-item { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--text-mid); }
.usv-leg-sw { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; }

/* ===== RANKED LIST ===== */
.ranked-list { display: flex; flex-direction: column; gap: 2px; max-height: 248px; overflow-y: auto; font-size: 11px; }
.ranked-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--motion-fast);
}
.ranked-item:hover { background: var(--surface-hover); }
.ranked-name { color: var(--text-mid); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranked-val { flex-shrink: 0; color: var(--teal-bright); font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.ranked-tag { font-size: 8.5px; background: rgba(201,169,110,0.18); color: var(--gold); border-radius: 4px; padding: 1px 6px; margin-left: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.empty-note { font-size: 11px; color: var(--text-faint); font-style: italic; padding: 8px; }

/* ===== BAR LIST (núcleos agrarios, mayores consumidores REPDA) ===== */
.bar-list { display: flex; flex-direction: column; gap: 9px; max-height: 280px; overflow-y: auto; padding-right: 2px; }
.bl-row { display: flex; flex-direction: column; gap: 3px; }
.bl-head { display: flex; align-items: baseline; gap: 7px; font-size: 11px; }
.bl-rank { flex-shrink: 0; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 8.5px; font-weight: 700; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: 50%; }
.bl-name { flex: 1; min-width: 0; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-tag { flex-shrink: 0; font-size: 8px; background: rgba(201,169,110,0.18); color: var(--gold); border-radius: 4px; padding: 1px 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.bl-val { flex-shrink: 0; color: var(--teal-bright); font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-track { height: 5px; background: var(--surface); border-radius: 3px; overflow: hidden; }
.bl-fill { display: block; height: 100%; border-radius: 3px; min-width: 3px; transition: width var(--motion-normal); }
.bl-sub { font-size: 9px; color: var(--text-dim); margin-left: 22px; }

/* ===== ACUÍFERO STATUS STRIP (liga pozos ↔ estrés hídrico) ===== */
.acui-status { margin-bottom: 4px; }
.acui-status:empty { display: none; margin: 0; }
.acui-strip { display: flex; flex-direction: column; gap: 5px; }
.acui-chip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: 11px; }
.acui-chip .acui-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; }
.acui-chip.is-def { border-color: rgba(199,92,79,0.4); background: rgba(199,92,79,0.08); }
.acui-chip.is-def .acui-dot { background: var(--terra, #c75c4f); }
.acui-chip.is-ok { border-color: rgba(141,148,64,0.35); }
.acui-chip.is-ok .acui-dot { background: var(--cta, #b4c96f); }
.acui-name { flex: 1; min-width: 0; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acui-bal { flex-shrink: 0; font-family: var(--font-display); font-weight: 600; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.acui-chip.is-def .acui-bal { color: var(--terra, #c75c4f); }
.acui-chip.is-ok .acui-bal { color: var(--cta, #b4c96f); }
.acui-foot { margin-top: 6px; font-size: 10px; color: var(--text-dim); }
.acui-foot b { color: var(--teal-bright); font-variant-numeric: tabular-nums; }

/* ===== AI PRESETS (Definir áreas de influencia · trazo lineal) ===== */
/* Botones apilados: label de acción + subtítulo con la cita regulatoria
   (AN por DACG art. 15 fr. I / corredor derecho de vía) — la referencia vive aquí,
   no desaparece. */
.ai-presets { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ai-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; font-family: var(--font-display); font-weight: 600; padding: 8px 10px; color: var(--text-mid); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--motion-fast); }
.ai-preset:hover { color: var(--cream); border-color: var(--border-strong); }
.ai-preset.active { color: var(--teal-bright); background: var(--teal-soft, rgba(74,156,165,0.14)); border-color: rgba(74,156,165,0.4); }
.ai-preset-label { font-size: 11.5px; line-height: 1.25; }
.ai-preset-sub { font-size: 9.5px; font-weight: 500; line-height: 1.3; color: var(--text-dim); white-space: normal; }
.ai-preset.active .ai-preset-sub { color: var(--teal-bright); opacity: 0.85; }

/* subtítulo en chart-title + anillo ausente en preview */
.ct-sub { font-family: var(--font-display); font-size: 9px; font-weight: 500; color: var(--text-dim); text-transform: none; letter-spacing: 0; margin-left: 4px; }
.preview-areas .pa-off { color: var(--text-faint); }

.anp-near { font-size: 12px; }
.anp-near .an-name { font-family: var(--font-display); font-weight: 700; color: var(--cream); font-size: 13.5px; letter-spacing: -0.01em; }
.anp-near .an-meta { color: var(--text-mid); margin-top: 4px; }
.anp-near .an-dist { color: var(--gold); font-weight: 600; }

.infra-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.infra-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 11px; text-align: center; transition: border-color var(--motion-normal); }
.infra-stat:hover { border-color: var(--border-strong); }
.infra-stat b { display: block; font-family: var(--font-brand); font-size: 18px; font-weight: 700; color: var(--gold); letter-spacing: -0.01em; }
.infra-stat span { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; display: block; }

/* ===== LAYERS PANEL (docked, retráctil) ===== */
#layers-panel {
  position: fixed; top: 46px; right: 0; bottom: 0; width: 332px;
  z-index: 50; padding: 18px; display: flex; flex-direction: column;
  background: rgba(11, 21, 24, 0.95);
  backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: none; border-left: 1px solid var(--border-strong); border-radius: 0;
  box-shadow: -8px 0 40px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.38s var(--ease-soft);
}
#layers-panel.is-collapsed { transform: translateX(100%); }
#layers-collapse { right: 338px; }
#layers-collapse:hover svg { transform: translateX(2px); }
#layers-expand { right: 14px; opacity: 0; pointer-events: none; }
#layers-expand:hover svg { transform: translateX(-2px); }
body.layers-collapsed #layers-collapse { right: -46px; opacity: 0; pointer-events: none; }
body.layers-collapsed #layers-expand { right: 14px; opacity: 1; pointer-events: auto; }
.layers-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.layers-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.layers-active { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; color: var(--teal-bright); }
.layers-quick { display: flex; gap: 5px; }
.layers-quick-btn { font-size: 10px; font-weight: 500; color: var(--text-dim); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 3px 8px; cursor: pointer; transition: all var(--motion-fast); }
.layers-quick-btn:hover { color: var(--teal-bright); border-color: var(--teal); }

.layers-presets { padding: 0 2px 10px; margin-bottom: 8px; }
.layers-presets-label {
  display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-dim); margin-bottom: 7px;
}
.layers-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.map-preset-btn {
  font-family: var(--font-display, 'Inter Tight'); font-size: 10.5px; font-weight: 600;
  padding: 8px 6px; line-height: 1.25; text-align: center;
  color: var(--text-mid); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); cursor: pointer; transition: all var(--motion-fast);
}
.map-preset-btn:hover { color: var(--teal-bright); border-color: var(--teal); background: rgba(74,156,165,.08); }
.map-preset-btn.active {
  color: var(--cream); border-color: var(--teal); background: rgba(74,156,165,.22);
  box-shadow: inset 0 0 0 1px rgba(74,156,165,.35);
}
.layers-scroll { overflow-y: auto; flex: 1; }
.layer-group { margin-bottom: 6px; }
.layer-group-head { display: flex; align-items: center; gap: 8px; padding: 6px 4px; cursor: pointer; user-select: none; border-radius: var(--radius-sm); transition: background var(--motion-fast); }
.layer-group-head:hover { background: var(--surface); }
.lgh-chev { font-size: 9px; color: var(--teal-bright); width: 10px; text-align: center; transition: transform var(--motion-normal) var(--ease-soft); }
.layer-group.collapsed .lgh-chev { transform: rotate(-90deg); }
.lgh-title { font-family: var(--font-display); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-bright); flex: 1; }
.lgh-count { font-size: 9px; color: var(--text-dim); font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.layer-group-body { overflow: hidden; max-height: 1200px; transition: max-height var(--motion-normal) var(--ease-soft); padding: 4px 0 2px; }
.layer-group.collapsed .layer-group-body { max-height: 0; padding: 0; }
.layer-item {
  display: flex; align-items: center; justify-content: space-between; padding: 7px 9px;
  background: var(--surface); border-radius: var(--radius-sm); border: 1px solid transparent;
  transition: all var(--motion-fast) var(--ease-soft); margin-bottom: 3px;
}
.layer-item:hover { border-color: var(--border); background: var(--surface-hover); }
.layer-item.disabled { opacity: 0.32; pointer-events: none; }
.layer-item.is-on { background: var(--teal-soft); }
.layer-info { display: flex; align-items: flex-start; gap: 9px; flex: 1; min-width: 0; }
.layer-color { width: 12px; height: 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; margin-top: 3px; }
.layer-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.layer-icon svg { width: 100%; height: 100%; display: block; }
.layer-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.layer-name { font-size: 11px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-item.is-on .layer-name { color: var(--cream); }
.layer-src { font-size: 9px; line-height: 1.3; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Aviso de capa pesada: se dibuja igual, pero puede tardar. Tono de advertencia, no de error. */
.layer-src--aviso { color: var(--gold); }
.layer-ramp { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.layer-ramp b { font-size: 8px; font-weight: 700; color: var(--text-dim); letter-spacing: .02em; }
.layer-ramp i { flex: 1; height: 6px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
/* Leyenda por ruta dentro de la fila de la capa. Un KMZ multi-ruta trae cada
   trazo nombrado y coloreado por el cliente; sin esta lista el mapa muestra
   colores que nadie puede nombrar. Misma familia visual que .layer-ramp. */
.layer-rutas { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ruta-item { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--text-dim);
  line-height: 1.3; min-width: 0; }
.ruta-swatch { width: 12px; height: 3px; border-radius: 2px; flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ruta-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Marca del color que el archivo del cliente repite en más de una ruta. No se
   corrige el color —es su dato—, pero dos líneas idénticas sin aviso parecen un
   fallo del visor. */
.ruta-dup { flex-shrink: 0; font-size: 8px; font-weight: 700; color: var(--text-dim);
  border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; opacity: .8; }
.ruta-resto { font-style: italic; opacity: .8; }
.layer-count { font-size: 9px; color: var(--text-dim); font-variant-numeric: tabular-nums; margin-left: 6px; background: var(--teal-soft); border-radius: 4px; padding: 1px 6px; font-family: var(--font-display); font-weight: 600; }
/* Capa sondeada pero no bajada: se sabe que existe y cuánto pesa, y se pide
   con un clic. Es la puerta de vuelta del «no» del modal. */
.layer-cargar { align-self: flex-start; margin-top: 3px; padding: 2px 8px; font-size: 9.5px; font-weight: 600;
  font-family: var(--font-display); color: var(--teal-bright); background: var(--teal-soft);
  border: 1px solid var(--teal); border-radius: var(--radius-sm); cursor: pointer;
  letter-spacing: .02em; white-space: nowrap; }
.layer-cargar:hover:not(:disabled) { color: #fff; background: var(--teal); }
.layer-cargar:disabled { opacity: .55; cursor: default; }
.layer-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lr-zoom { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-faint); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: all var(--motion-fast); }
.layer-item:hover .lr-zoom { opacity: 1; }
.lr-zoom:hover { color: var(--teal-bright); background: rgba(74,156,165,0.14); }
.lr-style { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-faint); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: all var(--motion-fast); }
.layer-item:hover .lr-style { opacity: 1; }
.lr-style:hover { color: var(--teal-bright); background: rgba(74,156,165,0.14); }

/* popover de estilo por capa */
.lstyle-pop { position: fixed; z-index: 1200; width: 226px; background: var(--bg-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); box-shadow: 0 10px 30px rgba(0,0,0,0.30); padding: 12px; color: var(--text); font-size: 12px; }
.lstyle-pop.hidden { display: none; }
.lsp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lsp-title { font-weight: 700; font-size: 11px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 184px; font-family: var(--font-display, inherit); }
.lsp-close { background: none; border: none; color: var(--text-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.lsp-close:hover { color: var(--text); }
.lsp-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.lsp-lbl { width: 58px; color: var(--text-dim); font-size: 10.5px; }
.lsp-toggle-row { justify-content: space-between; }
.lsp-toggle-row .lsp-lbl { width: auto; flex: 1; }
.lsp-color { width: 42px; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; padding: 0; }
.lsp-color:disabled { opacity: .4; cursor: not-allowed; }
.lsp-op { flex: 1; accent-color: var(--teal-bright); }
.lsp-opv { width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--text-dim); }
.lsp-swatches { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; }
.lsp-sw { width: 17px; height: 17px; border-radius: 5px; cursor: pointer; border: 1px solid rgba(0,0,0,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); transition: transform var(--motion-fast); }
.lsp-sw:hover { transform: scale(1.18); }
.lsp-note { font-size: 10px; color: var(--text-faint); font-style: italic; }
.lsp-reset { width: 100%; margin-top: 6px; padding: 6px; font-size: 11px; color: var(--text-dim); background: var(--surface-hover); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; transition: all var(--motion-fast); }
.lsp-reset:hover { color: var(--text); background: var(--surface); }
.toggle-switch { position: relative; width: 32px; height: 18px; flex-shrink: 0; margin-left: 4px; }
.toggle-switch.toggle-sm { width: 28px; height: 16px; }
.toggle-switch.toggle-sm .toggle-slider::before { height: 10px; width: 10px; }
.toggle-switch.toggle-sm input:checked + .toggle-slider::before { transform: translateX(12px); }
.toggle-slider.is-indeterminate { background: rgba(201,169,110,0.5) !important; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: rgba(242,244,237,0.10); border-radius: var(--radius-pill); transition: 0.22s var(--ease-soft); }
.toggle-slider::before { content: ""; position: absolute; height: 12px; width: 12px; left: 3px; bottom: 3px; background: var(--text-dim); border-radius: 50%; transition: 0.22s var(--ease-soft); }
.toggle-switch input:checked + .toggle-slider { background: var(--teal); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(14px); background: var(--cream); }
.toggle-switch input:focus-visible + .toggle-slider { box-shadow: 0 0 0 3px rgba(74,156,165,0.3); }

.opacity-control { display: flex; align-items: center; gap: 10px; }
.opacity-control input[type="range"] { flex: 1; height: 4px; background: var(--surface-track); border-radius: 2px; outline: none; -webkit-appearance: none; }
.opacity-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: var(--teal-bright); border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 3px rgba(74,156,165,0.18); }
.opacity-badge { font-family: var(--font-display); font-weight: 600; color: var(--teal-bright); font-size: 10px; min-width: 36px; text-align: right; }
#basemap-select { width: 100%; padding: 8px 10px; font-size: 11.5px; color: var(--cream); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--motion-fast); }
#basemap-select:focus { border-color: var(--teal); outline: none; }
#basemap-select option { background: var(--bg-mid); }
.legend-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.legend-list li { display: flex; align-items: center; gap: 9px; font-size: 10.5px; color: var(--text-mid); }
.legend-color { width: 14px; height: 9px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.14); flex-shrink: 0; }

.fab {
  position: fixed; top: 56px; right: 14px; z-index: 60; padding: 9px 15px; font-size: 11px; font-weight: 600;
  color: var(--text-mid); background: var(--bg-glass); border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; backdrop-filter: blur(14px); font-family: var(--font-display); box-shadow: var(--shadow-sm);
  transition: all var(--motion-fast) var(--ease-soft);
}
.fab:hover { border-color: var(--teal); color: var(--teal-bright); transform: translateY(-1px); }

/* ===== EXPORT BUTTONS ===== */
.exp-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.btn-exp {
  padding: 10px 8px; font-size: 11px; font-weight: 600; font-family: var(--font-display);
  color: var(--text-mid); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); cursor: pointer; letter-spacing: 0.04em;
  transition: all var(--motion-fast) var(--ease-soft);
}
.btn-exp:hover { border-color: var(--teal); color: var(--teal-bright); transform: translateY(-1px); }
.btn-exp:disabled { opacity: 0.5; cursor: progress; transform: none; }
.btn-exp-primary { background: var(--teal-soft); border-color: rgba(74,156,165,0.45); color: var(--teal-bright); }
.btn-exp-primary:hover { background: var(--teal); color: var(--bg-deep); border-color: var(--teal); }

/* ===== PROGRESS — hoja discreta sobre el mapa ===== */
#progress {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: 28px 20px;
  background: rgba(10, 31, 38, 0.38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fadeIn 0.28s var(--ease-soft);
  overflow: hidden;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Reapertura: el velo va ENFRENTE y lo de atrás queda en glass ──────────
   Quien reabre un análisis ya sabe qué pidió y espera un resultado íntegro:
   ver paneles vacíos y el contenedor de Mapbox todavía sin teselas (que se
   pinta NEGRO) genera desconfianza. El desenfoque es fuerte a propósito —
   tiene que volver ilegible lo que hay detrás, no sólo suavizarlo.
   Vista clara únicamente (#235): el velo es cremoso, nunca oscuro. */
/* `html.theme-light #progress` (más abajo en este archivo) es MÁS específico
   que `#progress.is-reopen` por el selector de tipo, y le ganaría el fondo.
   Se declara con la misma especificidad para que el velo de reapertura mande
   en la única vista que existe. */
#progress.is-reopen,
html.theme-light #progress.is-reopen {
  background: rgba(238, 243, 236, 0.58);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}
/* Sin backdrop-filter no hay desenfoque posible: el velo tiene que ser opaco
   de verdad o volvería a enseñar justo lo que vino a tapar. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  #progress.is-reopen,
  html.theme-light #progress.is-reopen { background: rgba(240, 244, 238, 0.985); }
}
@media (prefers-reduced-motion: reduce) {
  #progress.is-reopen { animation: none; }
}

/* ── El círculo de la reapertura ───────────────────────────────────────────
   Reabrir NO es correr un análisis: no hay nueve etapas, no hay job en el
   servidor y las cuatro fases del motor (Ambiental/Infraestructura/Social/
   Integrando) no describen una descarga. Ese panel es diagnóstico de la
   corrida NUEVA y ahí se queda; aquí la espera se reduce a un arco y una
   frase. El arco NUNCA se mueve por un temporizador: o refleja capas
   realmente terminadas, o gira indeterminado. Ver _veloOrbeProgreso() y
   _veloOrbeIndeterminado() en app.js.
   La circunferencia del arco (2·π·42 ≈ 263.894) se declara en app.js: la
   geometría vive en un solo sitio para que radio y dasharray no se separen. */
.velo-orbe { display: none; }
#progress.is-reopen .velo-orbe {
  display: block;
  align-self: center;
  width: 84px; height: 84px;
  margin: 2px 0 4px;
}
/* Paciencia agotada: el círculo DA PASO al mensaje de salida. Un arco que
   sigue girando bonito mientras nada avanza es la mentira que este rediseño
   vino a evitar. */
#progress.is-reopen.is-stuck .velo-orbe { display: none; }
.velo-orbe-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg); /* 0% arranca arriba, no a las 3 en punto */
  overflow: visible;
}
.velo-orbe-pista {
  fill: none;
  stroke: rgba(18, 42, 46, 0.13);
  stroke-width: 4;
}
.velo-orbe-arco {
  fill: none;
  stroke: #0f5057;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 263.894;
  stroke-dashoffset: 263.894;
  transform-origin: 48px 48px;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Sin medida disponible todavía (GET del job, buffers): giro continuo. Es la
   única animación honesta cuando no hay fracción que enseñar. */
.velo-orbe.is-indeterminada .velo-orbe-arco {
  stroke-dasharray: 62 202;
  stroke-dashoffset: 0;
  transition: none;
  animation: veloOrbeGiro 1.15s linear infinite;
}
@keyframes veloOrbeGiro { to { transform: rotate(360deg); } }
/* Un círculo elegante no puede tragarse un fallo: si una capa no llegó, el
   arco se tiñe con el mismo rojo que ya usa .progress-read.is-error y la
   salida del velo se destapa (ver _veloOrbeFalla en app.js). */
.velo-orbe.is-falla .velo-orbe-arco { stroke: #9b2f2f; }
.velo-orbe.is-falla .velo-orbe-pista { stroke: rgba(155, 47, 47, 0.16); }

/* Reapertura: el panel de diagnóstico se calla entero. Sólo quedan el arco,
   una frase y —cuando toca— el error o la salida. */
#progress.is-reopen .progress-kicker,
#progress.is-reopen .progress-phases,
#progress.is-reopen .progress-track,
#progress.is-reopen .progress-meta,
#progress.is-reopen .progress-persist { display: none; }
#progress.is-reopen .progress-inner {
  align-items: center;
  text-align: center;
  width: min(304px, calc(100vw - 40px));
  padding: 28px 26px 24px;
  border-radius: 18px;
}
#progress.is-reopen .progress-stage {
  font-size: 17px;
  margin: 14px 0 0;
}
#progress.is-reopen .progress-read {
  justify-content: center;
  margin: 9px 0 0;
  min-height: 0;
  /* MEDIDO, no estimado: el color heredado rgba(18,42,46,0.62) sobre la tarjeta
     compuesta (rgb 250,251,247) da 4.34:1 — por debajo del 4.5:1 que exige el
     texto normal. En el panel de diagnóstico esa línea es telemetría de fondo;
     aquí carga el error y el mensaje de paciencia agotada, así que sube a 0.72
     → 5.94:1. La regla se acota a .is-reopen: el panel del análisis NUEVO no se
     toca en este PR (su 4.34:1 es un hallazgo previo, reportado aparte). */
  color: rgba(18, 42, 46, 0.72);
}
#progress.is-reopen .progress-escape { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  /* Sin giro: queda un arco quieto sobre la pista. Sigue leyéndose como
     «esperando» sin movimiento que maree. */
  .velo-orbe.is-indeterminada .velo-orbe-arco { animation: none; }
  .velo-orbe-arco { transition: none; }
}

/* Salida del velo: aparece SÓLO cuando la carga se declaró atascada. Un velo
   del que no se puede salir es peor que el cuadro negro que vino a resolver.
   La ficha de progreso se pinta sobre superficie clara (#235: el visor tiene
   una sola vista), así que estos botones se estilan directo sobre claro en vez
   de declarar un par oscuro/claro del que la mitad sería código muerto. */
.progress-escape {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid rgba(18, 42, 46, 0.12);
}
.progress-escape[hidden] { display: none; }
.progress-escape-btn {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  color: #122a2e;
  background: rgba(18, 42, 46, 0.05);
  border: 1px solid rgba(18, 42, 46, 0.18);
  transition: background 0.16s var(--ease-soft), border-color 0.16s var(--ease-soft);
}
.progress-escape-btn:hover { background: rgba(18, 42, 46, 0.10); border-color: rgba(18, 42, 46, 0.34); }
.progress-escape-btn:focus-visible { outline: 2px solid var(--aose-teal, #1d6d75); outline-offset: 2px; }
.progress-escape-btn.is-primary {
  background: rgba(29, 109, 117, 0.12);
  border-color: rgba(29, 109, 117, 0.42);
  color: #0f5057;
}
.progress-escape-btn.is-primary:hover { background: rgba(29, 109, 117, 0.2); }
/* Atascado: la barra deja de prometer avance inminente y las cuatro fases se
   retiran — ya no informan nada y su altura podía empujar los botones de
   salida fuera de la pantalla. Un botón de rescate recortado no rescata. */
#progress.is-stuck .progress-track-fill { animation: none; opacity: 0.5; }
#progress.is-stuck .progress-phases { display: none; }
/* Red de seguridad para pantallas bajas: el velo se puede desplazar antes que
   dejar la salida inalcanzable. */
#progress.is-reopen { overflow-y: auto; }
#progress.is-reopen .progress-inner { max-height: none; }

.progress-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: stretch;
  width: min(360px, calc(100vw - 40px));
  padding: 22px 24px 18px;
  border-radius: 14px;
  border: 1px solid rgba(242, 244, 237, 0.10);
  background: rgba(14, 24, 28, 0.94);
  box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.55);
  animation: progressCardIn 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes progressCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.progress-kicker {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 6px;
}
.progress-stage {
  font-family: var(--font-brand);
  font-size: 18px; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0 0 18px;
  min-height: 1.25em;
  transition: opacity 0.22s var(--ease-soft);
}
.progress-stage.is-swap { opacity: 0.35; }

/* Fases quietas — check / punto / apagado */
.progress-phases {
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 14px;
}
.progress-phase {
  display: flex; align-items: center; gap: 11px;
  min-height: 28px; position: relative; padding: 3px 0;
  transition: opacity 0.35s var(--ease-soft);
}
.progress-phase:not(.done):not(.active) { opacity: 0.38; }
.progress-phase:not(:last-child)::before {
  content: '';
  position: absolute; left: 5px; top: 22px; bottom: -4px; width: 1px;
  background: rgba(242, 244, 237, 0.10);
  transition: background 0.4s var(--ease-soft);
}
.progress-phase.done:not(:last-child)::before {
  background: rgba(74, 156, 165, 0.55);
}

.progress-node {
  width: 11px; height: 11px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(242, 244, 237, 0.22);
  background: transparent;
  position: relative; z-index: 1;
  transition: border-color 0.35s var(--ease-soft), background 0.35s var(--ease-soft);
}
.progress-plabel {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 520;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  transition: color 0.35s var(--ease-soft);
}

.progress-phase.done .progress-node {
  border-color: var(--teal);
  background: var(--teal);
}
.progress-phase.done .progress-node::after {
  content: '';
  position: absolute; left: 3px; top: 1px;
  width: 2.5px; height: 5px;
  border: solid #0e181c; border-width: 0 1.4px 1.4px 0;
  transform: rotate(45deg);
}
.progress-phase.done .progress-plabel { color: var(--text-mid); }

.progress-phase.active .progress-node {
  border-color: var(--teal-bright);
  background: transparent;
}
.progress-phase.active .progress-node::after {
  content: '';
  position: absolute; inset: 2px; border-radius: 50%;
  background: var(--teal-bright);
  animation: progressDotBreath 1.8s ease-in-out infinite;
}
.progress-phase.active .progress-plabel { color: var(--cream); font-weight: 600; }
@keyframes progressDotBreath {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

/* Línea viva — una sola base en curso */
.progress-read {
  display: flex; align-items: center; gap: 8px;
  min-height: 20px; margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 12px; color: var(--text-mid);
  letter-spacing: 0.01em;
}
.progress-read[hidden] { display: none; }
.progress-read-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal-bright);
  animation: progressDotBreath 1.4s ease-in-out infinite;
}
.progress-read-tx {
  font-variant-numeric: tabular-nums;
  transition: opacity 0.18s var(--ease-soft);
}
.progress-read-tx.is-swap { opacity: 0.25; }
.progress-read.is-error .progress-read-dot { background: #e07474; animation: none; }
.progress-read.is-error .progress-read-tx { color: #f2b0b0; }

/* Hairline de progreso — sin shimmer ni glow */
.progress-track {
  width: 100%; height: 2px;
  background: rgba(242, 244, 237, 0.10);
  border-radius: 999px; overflow: hidden;
  margin-bottom: 12px;
}
.progress-track-fill {
  height: 100%; width: 0%;
  background: var(--teal);
  border-radius: 999px;
  transition: width 0.55s var(--ease-soft);
}
@keyframes progressIndeterminate {
  from { transform: translateX(-130%); }
  to { transform: translateX(320%); }
}
#progress.is-indeterminate .progress-track-fill {
  width: 35% !important;
  transition: none;
  animation: progressIndeterminate 1.2s ease-in-out infinite;
}
/* Reapertura: los KPIs ya están disponibles mientras el mapa termina. El
   indicador se reduce a una tarjeta no bloqueante y nunca finge porcentaje. */
#progress.is-background {
  inset: auto 18px 18px auto;
  width: min(320px, calc(100vw - 36px));
  height: auto;
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
#progress.is-background .progress-inner {
  width: auto;
  padding: 12px 14px 11px;
  border-radius: 10px;
  background: rgba(14, 24, 28, 0.92);
}
#progress.is-background .progress-stage { margin-bottom: 5px; font-size: 13px; }
#progress.is-background .progress-kicker { margin-bottom: 3px; font-size: 9px; }
#progress.is-background .progress-phases,
#progress.is-background .progress-track,
#progress.is-background .progress-meta,
#progress.is-background .progress-persist { display: none; }
#progress.is-background .progress-read { min-height: 16px; margin: 0; font-size: 10.5px; }

.progress-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-display);
  font-size: 11px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.progress-sep { color: var(--text-faint); opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .progress-inner { animation: none; }
  .progress-phase.active .progress-node::after,
  .progress-read-dot { animation: none; }
  .progress-stage, .progress-read-tx { transition: none; }
}

/* ===== INFO PANEL ===== */
/* CONTENCIÓN de la tarjeta de detalle. El contrato 3.1/3.2 alargó el popup de
   la capa indígena hasta ~1,100 px de contenido: con `max-height: 50vh` y sin
   ninguna señal de scroll, la tarjeta se leía como CORTADA —el texto termina a
   media frase en el borde inferior y nada dice que sigue—. Tres medidas:
     1) el alto máximo se ata al viewport por los DOS lados, para que ni tape
        el mapa de más ni choque con la barra superior en pantallas bajas;
     2) el encabezado (nombre de la localidad + cerrar) queda pegado arriba,
        así el usuario nunca pierde de qué localidad está leyendo;
     3) la barra de scroll se hace VISIBLE: es la señal de que hay más abajo. */
#info-panel {
  position: fixed; bottom: 14px; left: 528px; width: 308px; z-index: 55; padding: 0;
  max-height: min(62vh, calc(100vh - 128px));
  overflow-y: auto; overscroll-behavior: contain;
  /* Barra de scroll SIEMPRE visible. OJO: en Chrome moderno, declarar
     `scrollbar-width`/`scrollbar-color` DESACTIVA los ::-webkit-scrollbar; y a
     su vez `scrollbar-color` es lo único que saca a macOS de la barra overlay,
     que se esconde y deja la tarjeta pareciendo cortada. Se usan las
     propiedades estándar y los ::-webkit-* quedan de respaldo para motores
     que aún no las soportan. */
  scrollbar-width: thin;
  scrollbar-color: var(--teal-deep) var(--surface-track);
  --info-fade: #0d181c;
  animation: viewIn var(--motion-normal) var(--ease-soft);
  transition: left 0.38s var(--ease-soft);
}
html.theme-light #info-panel { --info-fade: #f7f9f3; }
/* Degradado de «sigue abajo», POR ENCIMA del contenido. Un fondo del contenedor
   no sirve: las tarjetas hijas traen su propio background y lo taparían. Se usa
   un pseudo-elemento sticky —último en el flujo del scroller— que se pega al
   borde inferior y se solapa con la última línea, para que el corte del texto
   nunca se lea como el final de la ficha. */
#info-panel::after {
  content: ''; display: block; position: sticky; bottom: 0; z-index: 1;
  height: 16px; margin-top: -16px; pointer-events: none;
  background: linear-gradient(to top, var(--info-fade), transparent);
}
#info-panel::-webkit-scrollbar { width: 8px; }
#info-panel::-webkit-scrollbar-track { background: var(--surface-track); border-radius: 4px; margin: 4px 0; }
#info-panel::-webkit-scrollbar-thumb { background: var(--teal-deep); border-radius: 4px; }
#info-panel::-webkit-scrollbar-thumb:hover { background: var(--teal); }
body.panel-collapsed #info-panel { left: 14px; }
.info-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-glass); -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05); }
.info-header h3 { font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--teal-bright); text-transform: uppercase; letter-spacing: 0.1em; }
.btn-close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-dim); background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--motion-fast); }
.btn-close:hover { background: var(--surface-hover); color: var(--cream); }
.info-content { padding: 10px 16px 14px; }
.info-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); gap: 10px; }
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; width: 110px; }
.info-value { font-size: 11.5px; font-weight: 500; color: var(--text); text-align: right; max-width: 170px; word-break: break-word; }
.info-field-src { display: block; font-size: 8.5px; font-weight: 400; color: var(--text-faint); font-style: italic; margin-top: 1px; }
/* Densidad: la ficha indígena del contrato 3.1/3.2 apila 6 bloques antes de la
   tabla. 7 px entre cada uno sumaban 35 px de aire muerto en una tarjeta que ya
   no cabe; 5 px siguen separando sin que dos bloques se lean como uno. */
.indigena-popup-context { display: grid; gap: 5px; margin: 0 0 8px; }
.indigena-catalog-badge, .indigena-peoples {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 10.5px;
  line-height: 1.25; color: var(--text);
}
.indigena-catalog-badge > span:first-child { font-weight: 700; }
/* Los tokens `--ind-*` los publica `.indigena-popup-context` (ver el bloque
   «Popup indígena · presentación» más abajo): una terna por tema, para que
   estos hex —pensados para el papel cream— dejen de quedar en negro-sobre-
   negro cuando el popup se pinta con el tema oscuro, que es el de fábrica.
   En el tema claro los tokens valen EXACTAMENTE estos mismos valores. */
.indigena-catalog-badge.is-reconocida {
  color: var(--ind-dof-ink, #7a0f38); background: var(--ind-dof-fill, rgba(194, 24, 91, 0.08));
  border-color: var(--ind-dof-edge, rgba(194, 24, 91, 0.32));
}
.indigena-catalog-badge.is-no_reconocida {
  color: var(--ind-neg-ink, #53615f); background: var(--ind-neg-fill, rgba(83, 97, 95, 0.06));
}
.indigena-catalog-badge.is-no_disponible,
.indigena-peoples.is-no_disponible {
  color: var(--ind-amber-ink, #8a6417); background: var(--ind-amber-fill, rgba(176, 131, 33, 0.08));
  border-color: var(--ind-amber-edge, rgba(176, 131, 33, 0.3));
}
.indigena-peoples b { font-size: 11px; color: inherit; }
.indigena-popup-detail { display: block; font-size: 9px; font-weight: 400; color: var(--text-dim); }
/* Estado CANDIDATO: hay evidencia, no acreditación. Ni el verde del confirmado
   ni el gris del descartado — ámbar de «pendiente de juicio humano». */
.indigena-catalog-badge.is-candidata,
.indigena-cedula-badge.is-candidata {
  color: var(--ind-cand-ink, #7a5410); background: var(--ind-cand-fill, rgba(198, 140, 30, 0.10));
  border-color: var(--ind-cand-edge, rgba(198, 140, 30, 0.38));
}
/* Cédula INPI 2026: badge PROPIO, violeta, para que nunca se lea como el
   Catálogo histórico DOF 2024-25 (colores distintos = fuentes distintas). */
.indigena-cedula-badge, .indigena-art21, .indigena-ubicacion {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 9px;
  border: 1px solid var(--border); border-radius: 8px; font-size: 10.5px;
  line-height: 1.25; color: var(--text);
}
.indigena-cedula-badge > span:first-child { font-weight: 700; }
.indigena-cedula-badge.is-confirmada {
  color: var(--ind-cedula-ink, #4a148c); background: var(--ind-cedula-fill, rgba(106, 27, 154, 0.09));
  border-color: var(--ind-cedula-edge, rgba(106, 27, 154, 0.34));
}
.indigena-cedula-badge.is-no_reconocida {
  color: var(--ind-neg-ink, #53615f); background: var(--ind-neg-fill, rgba(83, 97, 95, 0.06));
}
.indigena-cedula-badge.is-no_disponible {
  color: var(--ind-amber-ink, #8a6417); background: var(--ind-amber-fill, rgba(176, 131, 33, 0.08));
  border-color: var(--ind-amber-edge, rgba(176, 131, 33, 0.3));
}
/* Art. 21: el tercer estado tiene color propio, no el del «no cumple». */
.indigena-art21 b { font-size: 11px; color: inherit; }
.indigena-art21.is-cumple {
  color: var(--ind-ok-ink, #1b5e20); background: var(--ind-ok-fill, rgba(27, 94, 32, 0.08));
  border-color: var(--ind-ok-edge, rgba(27, 94, 32, 0.30));
}
.indigena-art21.is-no_cumple {
  color: var(--ind-neg-ink, #53615f); background: var(--ind-neg-fill, rgba(83, 97, 95, 0.06));
}
.indigena-art21.is-indeterminado {
  color: var(--ind-warn-ink, #8a6417); background: var(--ind-warn-fill, rgba(176, 131, 33, 0.10));
  border-color: var(--ind-warn-edge, rgba(176, 131, 33, 0.34));
}
.indigena-ubicacion { font-weight: 600; background: rgba(83, 97, 95, 0.04); }

/* ═══════════════════════════════════════════════════════════════════════════
   Popup indígena · presentación de los TRES bloques del contrato 3.1/3.2
   (relación combinada, fuentes por carril, población por sexo).
   Sólo presentación: la semántica la fija app.js y NO se toca aquí.

   Vocabulario de color heredado, no inventado. Se reutilizan las mismas
   familias que ya usan `indigena-art21`, `indigena-catalog-badge` y
   `indigena-cedula-badge` (arriba):
     · violeta  → cédula INPI 2026 (la fuente que PREVALECE)
     · carmín   → Catálogo histórico DOF 2024-25
     · gris     → negación acreditada («ninguna fuente asocia esta localidad»)
     · ámbar    → no evaluable / fuente no disponible / reservado
   Honestidad visual: el ámbar NUNCA se lee como gris. Un «no evaluable» no se
   pinta como un «no»; un reservado no se pinta como un cero.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Los hex de los badges de arriba son colores OSCUROS: sólo tienen contraste
   sobre el papel cream del tema claro. #info-panel es `--bg-glass`, que en el
   tema por defecto (oscuro) es casi negro. Por eso el color de estado se toma
   de tokens y cada tema publica su propia terna (tinta / relleno / borde).
   Valores del tema CLARO = exactamente los que ya usan los badges existentes. */
.indigena-popup-context {
  /* afirmativo por cédula (violeta) */
  --ind-cedula-ink: #b48ce8;
  --ind-cedula-fill: rgba(150, 108, 214, 0.16);
  --ind-cedula-edge: rgba(168, 130, 224, 0.46);
  /* afirmativo por DOF (carmín) */
  --ind-dof-ink: #f090ae;
  --ind-dof-fill: rgba(214, 74, 122, 0.15);
  --ind-dof-edge: rgba(224, 110, 152, 0.44);
  /* negación acreditada (gris) */
  --ind-neg-ink: rgba(242, 244, 237, 0.62);
  --ind-neg-fill: rgba(242, 244, 237, 0.04);
  --ind-neg-edge: rgba(242, 244, 237, 0.14);
  /* no evaluable / reservado (ámbar) */
  --ind-amber-ink: #e0b452;
  --ind-amber-fill: rgba(198, 156, 56, 0.14);
  --ind-amber-edge: rgba(214, 172, 70, 0.44);
  /* candidata: ámbar propio, más profundo que el de «no disponible» */
  --ind-cand-ink: #e8c065;
  --ind-cand-fill: rgba(198, 140, 30, 0.16);
  --ind-cand-edge: rgba(216, 164, 62, 0.48);
  /* art. 21 · cumple (verde) e indeterminado (ámbar de la fr. I) */
  --ind-ok-ink: #86d68c;
  --ind-ok-fill: rgba(70, 160, 80, 0.15);
  --ind-ok-edge: rgba(110, 190, 120, 0.42);
  --ind-warn-ink: #e0b452;
  --ind-warn-fill: rgba(198, 156, 56, 0.16);
  --ind-warn-edge: rgba(214, 172, 70, 0.48);
}
html.theme-light .indigena-popup-context {
  --ind-cedula-ink: #4a148c;
  --ind-cedula-fill: rgba(106, 27, 154, 0.09);
  --ind-cedula-edge: rgba(106, 27, 154, 0.34);
  --ind-dof-ink: #7a0f38;
  --ind-dof-fill: rgba(194, 24, 91, 0.08);
  --ind-dof-edge: rgba(194, 24, 91, 0.32);
  --ind-neg-ink: #53615f;
  --ind-neg-fill: rgba(83, 97, 95, 0.06);
  --ind-neg-edge: rgba(18, 42, 46, 0.12);
  --ind-amber-ink: #8a6417;
  --ind-amber-fill: rgba(176, 131, 33, 0.08);
  --ind-amber-edge: rgba(176, 131, 33, 0.3);
  --ind-cand-ink: #7a5410;
  --ind-cand-fill: rgba(198, 140, 30, 0.10);
  --ind-cand-edge: rgba(198, 140, 30, 0.38);
  --ind-ok-ink: #1b5e20;
  --ind-ok-fill: rgba(27, 94, 32, 0.08);
  --ind-ok-edge: rgba(27, 94, 32, 0.30);
  --ind-warn-ink: #8a6417;
  --ind-warn-fill: rgba(176, 131, 33, 0.10);
  --ind-warn-edge: rgba(176, 131, 33, 0.34);
}

/* ── A · `indigena-relacion-badge` · la afirmación jurídica principal ──────
   Es UNA unidad, no dos badges pegados: por eso lleva más aire, tipografía
   mayor que el resto de los badges y una barra de estado a la izquierda que
   abarca todo el bloque —incluido el <details> de fuentes— para que se lea
   como un solo cuerpo. Encabeza la jerarquía sin gritar: el peso lo dan el
   tamaño y la barra, no una saturación mayor que la del headline del %. */
.indigena-relacion-badge {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 9px 7px 11px;
  border: 1px solid var(--ind-neg-edge);
  border-left: 3px solid var(--ind-neg-ink);
  border-radius: 8px;
  background: var(--ind-neg-fill);
  color: var(--ind-neg-ink);
  font-size: 10.5px; line-height: 1.3;
}
.indigena-relacion-badge > b {
  font-size: 12px; font-weight: 700; line-height: 1.25; color: inherit;
  letter-spacing: -0.005em;
}
/* Los tres estados AFIRMATIVOS. `asentamiento_sin_sede` y `sede_confirmada`
   se acreditan por cédula 2026 (violeta, la fuente que prevalece);
   `sede_y_asentamiento` concurre por las DOS y por eso suma un filo carmín
   al borde superior — sin fundir los dos colores en un degradado, que
   sugeriría una fuente única. */
.indigena-relacion-badge.is-asentamiento_sin_sede,
.indigena-relacion-badge.is-sede_confirmada,
.indigena-relacion-badge.is-sede_y_asentamiento {
  border-color: var(--ind-cedula-edge);
  border-left-color: var(--ind-cedula-ink);
  background: var(--ind-cedula-fill);
  color: var(--ind-cedula-ink);
}
.indigena-relacion-badge.is-sede_y_asentamiento {
  border-top: 2px solid var(--ind-dof-edge);
  padding-top: 6px;
}
/* Negación ACREDITADA: ambas fuentes estuvieron disponibles y ninguna asocia.
   Gris sobrio, sin borde de alarma: es un hecho, no un riesgo. */
.indigena-relacion-badge.is-sin_relacion {
  border-color: var(--ind-neg-edge);
  border-left-color: var(--ind-neg-ink);
  background: var(--ind-neg-fill);
  color: var(--ind-neg-ink);
}
/* NO EVALUABLE ≠ «no». Ámbar, y la barra izquierda pasa a discontinua para que
   la diferencia sobreviva a un daltonismo rojo-verde y a una captura en gris. */
.indigena-relacion-badge.is-not_available {
  border-color: var(--ind-amber-edge);
  border-left: 3px dashed var(--ind-amber-ink);
  background: var(--ind-amber-fill);
  color: var(--ind-amber-ink);
}
/* El detalle interno hereda la tinta del estado: subordinado al titular por
   TAMAÑO y PESO (9px/400 contra 12px/700), nunca por opacidad. A 9px, bajar la
   opacidad tira el contraste por debajo de 4.5:1 en el tema claro —medido— y
   un texto que hay que adivinar no respalda nada. */
.indigena-relacion-badge > .indigena-popup-detail { color: inherit; }

/* ── B · `indigena-relacion-fuentes` · el respaldo, SUBORDINADO ────────────
   Va plegado por defecto: el badge AFIRMA (qué es la localidad y de qué
   comunidad), y esto lo respalda. Dentro cuelga el aparato registral —método
   y distancia del vínculo, registrante, cargo, fechas, números de registro y
   de cédula— más la cita de CADA carril.

   Plegar NO es esconder: nada de esto se elimina ni se resume; está a un clic
   y sale completo al desplegar. Lo que se corrige es la jerarquía, porque seis
   líneas de aparato registral por delante enterraban la afirmación.

   Al abrirse, cada carril conserva su badge y su color propios y quedan
   SEPARADOS por espacio —nunca contiguos ni con bordes compartidos—, porque
   son dos fuentes distintas y el join por nombre entre ellas está prohibido. */
.indigena-relacion-fuentes { margin-top: 5px; }
/* Método y registro: alineados con las citas que vienen debajo, no con el
   titular, para que se lean como parte del expediente desplegado. */
.indigena-relacion-fuentes > .indigena-popup-detail { color: inherit; margin: 5px 0 0 9px; }
.indigena-relacion-fuentes > summary {
  display: inline-flex; align-items: center; gap: 4px;
  width: fit-content; padding: 1px 0;
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: inherit; cursor: pointer; list-style: none;
}
.indigena-relacion-fuentes > summary::-webkit-details-marker { display: none; }
.indigena-relacion-fuentes > summary::before {
  content: '▸'; font-size: 8px; line-height: 1; transition: transform var(--motion-fast) var(--ease-soft);
}
.indigena-relacion-fuentes[open] > summary::before { transform: rotate(90deg); }
.indigena-relacion-fuentes > summary:hover { text-decoration: underline; }
.indigena-relacion-fuentes > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
/* Sangría y cuerpo menor: lo que cuelga aquí depende del badge de arriba y no
   compite con él. La barra de estado del badge padre sigue corriendo por la
   izquierda, así que las dos citas quedan visiblemente DENTRO de la misma
   afirmación sin dejar de ser dos bloques separados. */
.indigena-relacion-fuentes > .indigena-catalog-badge,
.indigena-relacion-fuentes > .indigena-cedula-badge {
  margin: 6px 0 0 9px;
  padding: 6px 8px;
  font-size: 9.5px;
  border-radius: 6px;
}
/* La separación entre los dos carriles es MAYOR que su padding interno: se ve
   antes que se lee que son dos citas, no una. */
.indigena-relacion-fuentes > .indigena-cedula-badge { margin-top: 9px; }
.indigena-relacion-fuentes > .indigena-catalog-badge > span:first-child,
.indigena-relacion-fuentes > .indigena-cedula-badge > span:first-child {
  font-size: 9.5px; font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .indigena-relacion-fuentes > summary::before { transition: none; }
}

/* Los badges por fuente ya toman su terna de los tokens (arriba), así que su
   color vale igual dentro del <details> que fuera de él —un job anterior al
   contrato 3.1 (`unificado:false`) los sigue viendo sueltos y con el mismo
   lenguaje. Aquí sólo se ajusta el detalle, que hereda la tinta del carril. */
.indigena-catalog-badge > .indigena-popup-detail,
.indigena-cedula-badge > .indigena-popup-detail { color: inherit; }

/* ── C · `indigena-sexo` · contexto demográfico, NO afirmación jurídica ────
   Peso visual del resto del dato censal: sin barra de estado, sin color de
   acreditación, fondo neutro. Deliberadamente por debajo del badge de
   relación en la jerarquía de lectura. */
.indigena-sexo {
  display: flex; flex-direction: column; gap: 1px; padding: 5px 9px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
  color: var(--text); font-size: 10.5px; line-height: 1.25;
}
.indigena-sexo > b { font-size: 10.5px; font-weight: 600; color: inherit; }
.indigena-sexo.is-published > b { font-variant-numeric: tabular-nums; }
/* RESERVADO ≠ CERO. Mismo ámbar de reserva que el resto del popup, y la cifra
   ausente se marca con el borde discontinuo: no hay número porque INEGI lo
   suprimió, no porque valga 0. Sube a peso 700 sólo aquí, porque el usuario
   tiene que notar que falta el dato. */
.indigena-sexo.is-reserved {
  border: 1px dashed var(--ind-amber-edge);
  background: var(--ind-amber-fill);
  color: var(--ind-amber-ink);
}
.indigena-sexo.is-reserved > b { font-weight: 700; }
/* «No disponible en esta corrida» ≠ «reservado por INEGI»: es una carencia del
   análisis, no un acto de la fuente. Gris apagado, sin ámbar. */
.indigena-sexo.is-missing {
  border-style: dashed; border-color: var(--ind-neg-edge);
  background: transparent; color: var(--ind-neg-ink);
}
.indigena-sexo > .indigena-popup-detail { color: inherit; }

/* Descargas de la ficha de localidad: se generan en el navegador con las mismas
   properties del feature ya pintado (misma fuente que lo mostrado). */
.indigena-popup-downloads {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--border-strong);
}
.indigena-popup-downloads > span { color: var(--text-mid); font: 700 10px var(--font-sans); }
.indigena-popup-downloads > div { display: flex; gap: 5px; }
.indigena-popup-downloads button {
  padding: 4px 10px; color: var(--teal-bright); font: 700 10px var(--font-sans);
  background: var(--bg-deep); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); cursor: pointer;
}
.indigena-popup-downloads button:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }
.indigena-popup-downloads button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.indigena-popup-downloads button:disabled { opacity: .55; cursor: progress; }
.indigena-popup-downloads [data-ind-download-status]:empty { display: none; }
.indigena-popup-downloads [data-ind-download-status] { flex: 1 1 100%; color: var(--text-dim); font-size: 9px; line-height: 1.35; }
/* Modal de vista temática (post-análisis) */
.theme-ov { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: rgba(12, 20, 22, 0.55); backdrop-filter: blur(4px); animation: theme-fade .18s ease; }
@keyframes theme-fade { from { opacity: 0; } to { opacity: 1; } }
.theme-card { position: relative; width: min(600px, 93vw); background: var(--bg-panel, #fff); border: 1px solid var(--border);
  border-radius: 10px; padding: 24px 24px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: theme-pop .2s cubic-bezier(.2,.9,.3,1); }
.theme-close { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 7px; background: transparent;
  color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer; }
.theme-close:hover { color: var(--text); border-color: var(--text-dim); }
.theme-close:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; }
@keyframes theme-pop { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.theme-h { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: .01em; padding-bottom: 12px;
  border-bottom: 1px solid var(--border); text-transform: none; }
.theme-sub { font-size: 11.5px; color: var(--text-dim); margin: 12px 0 16px; line-height: 1.5; }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-opt { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; cursor: pointer;
  transition: border-color .14s ease, background .14s ease; }
.theme-opt:hover { border-color: var(--teal); background: var(--teal-soft); }
.theme-opt.is-suggested { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px rgba(74,156,165,.35); }
.theme-opt.is-suggested .theme-ic { border-color: var(--teal); }
.theme-ic { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid var(--border); color: var(--teal-bright); background: var(--bg-glass-soft); }
.theme-opt:hover .theme-ic { border-color: var(--teal); }
.theme-tx { display: flex; flex-direction: column; gap: 3px; }
.theme-tx b { font-size: 13px; font-weight: 650; color: var(--text); }
.theme-tx small { font-size: 10.5px; color: var(--text-dim); line-height: 1.35; }
.theme-skip { display: block; width: 100%; margin-top: 12px; padding: 9px; border-radius: 7px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font-size: 11.5px; font-weight: 600; cursor: pointer; letter-spacing: .02em; }
.theme-skip:hover { color: var(--text); border-color: var(--text-dim); }
.theme-skip.is-suggested { border-color: var(--teal); color: var(--teal-bright); }
/* Oferta de tenencia RAN dentro del modal de vista inicial. Nace desmarcada:
   el default es no bajarla, que es lo que hace rápida la reapertura. */
.theme-ran { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; padding: 10px 11px;
  border: 1px solid var(--border); border-radius: 7px; cursor: pointer; text-align: left; }
.theme-ran:hover { border-color: var(--text-dim); }
.theme-ran input { margin-top: 2px; flex-shrink: 0; accent-color: var(--teal); }
.theme-ran-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.theme-ran-tx b { font-size: 11.5px; font-weight: 600; color: var(--text); }
.theme-ran-tx small { font-size: 10px; line-height: 1.45; color: var(--text-dim); }
/* Sección de ajuste de áreas de influencia (panel de Diagnóstico, colapsable) */
.aoi-block-head { cursor: pointer; user-select: none; align-items: center; }
.aoi-block-head .section-label { display: flex; align-items: center; gap: 6px; }
.aoi-chev { color: var(--text-dim); transition: transform .18s ease; flex-shrink: 0; }
.aoi-block-head.is-open .aoi-chev { transform: rotate(180deg); }
.aoi-body { margin-top: 10px; }
.aoi-desc { font-size: 10.5px; color: var(--text-dim); margin: 0 0 12px; line-height: 1.5; }
.aoi-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.aoi-row > span:first-child { width: 36px; font-size: 11px; font-weight: 700; color: var(--teal-bright); letter-spacing: .04em; }
.aoi-row input { flex: 1; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-glass-soft); color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.aoi-row input:focus { outline: none; border-color: var(--teal); }
.aoi-u { font-size: 10.5px; color: var(--text-dim); width: 20px; }
.aoi-read { font-size: 11px; color: var(--text); background: var(--teal-soft); border-radius: 7px;
  padding: 9px 11px; margin: 11px 0; line-height: 1.55; font-variant-numeric: tabular-nums; }
.aoi-read b { color: var(--teal-bright); }
.aoi-actions { display: flex; gap: 8px; }
.aoi-restore { padding: 8px 12px; border-radius: 7px; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.aoi-restore:hover { border-color: var(--text-dim); color: var(--text); }
.aoi-apply { flex: 1; padding: 8px; border-radius: 7px; border: none; background: var(--teal); color: #fff;
  font-size: 11.5px; font-weight: 600; cursor: pointer; letter-spacing: .02em; }
.aoi-apply:hover { filter: brightness(1.06); }

/* ===== TOAST ===== */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 12px 20px; background: var(--bg-glass); backdrop-filter: blur(16px); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 9998; font-size: 12px; color: var(--text); max-width: 80vw; animation: toastIn var(--motion-normal) var(--ease-soft); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
.toast.err { border-color: rgba(181,101,86,0.55); color: #e3b2a6; }

/* ── Diálogo «Guardar como» (renombrar antes de descargar) ── */
.fname-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: rgba(8,12,15,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.18s ease; }
.fname-modal { width: min(440px, 90vw); background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 20px 20px 16px; color: var(--text); animation: toastIn var(--motion-normal) var(--ease-soft); }
.fname-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }
.fname-sub { font-size: 12px; color: var(--text-dim); margin: 3px 0 14px; }
.fname-field { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-glass-soft); overflow: hidden; }
.fname-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(74,156,165,0.14); }
.fname-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--text);
  font-size: 13px; padding: 10px 12px; font-family: inherit; }
.fname-ext { font-size: 12px; color: var(--text-dim); padding: 0 12px; border-left: 1px solid var(--border); white-space: nowrap; }
.fname-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.fname-cancel { background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 9px; padding: 8px 16px; font-size: 12px; cursor: pointer; transition: all var(--motion-fast, 0.15s) ease; }
.fname-cancel:hover { border-color: var(--teal); color: var(--text); }
.fname-ok { padding: 8px 18px; font-size: 12px; cursor: pointer; }

/* ── Selector de capas del KMZ (reusa la caja de «Guardar como») ── */
.kmzp-modal { width: min(560px, 92vw); }
.kmzp-list { max-height: min(52vh, 420px); overflow-y: auto; padding-right: 4px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-glass-soft); }
.kmzp-group + .kmzp-group { border-top: 1px solid var(--border); }
.kmzp-group-h { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); padding: 9px 12px 4px; }
.kmzp-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 12px; cursor: pointer; }
.kmzp-row:hover { background: rgba(255,255,255,0.03); }
.kmzp-row input { margin-top: 2px; accent-color: var(--teal); flex: none; cursor: pointer; }
/* Dos motivos para bloquear, dos lecturas opuestas. La del proyecto va marcada y
   NO se atenúa: tiene que leerse como incluida (una casilla marcada + disabled se
   ve vacía si se le baja la opacidad, que es el mensaje contrario). La vacía sí
   se apaga: no traería nada. En ambos casos la razón se lee en el subtítulo. */
.kmzp-row.is-always, .kmzp-row.is-empty { cursor: default; }
.kmzp-row.is-always input, .kmzp-row.is-empty input { cursor: not-allowed; }
/* La casilla del proyecto se dibuja a mano: el navegador pinta en gris toda
   casilla `disabled`, marcada o no, y `accent-color` no lo cambia. Medido en el
   panel: la fila del proyecto se leía como una casilla VACÍA. Se pinta llena y
   con su palomita para que diga lo que es — incluida y no negociable. */
.kmzp-row.is-always input { appearance: none; -webkit-appearance: none; opacity: 1;
  width: 13px; height: 13px; border-radius: 3px; background: var(--teal);
  border: 1px solid var(--teal); display: grid; place-items: center; }
.kmzp-row.is-always input::after { content: ''; width: 3px; height: 6.5px; margin-top: -1.5px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.kmzp-row.is-always .kmzp-tx small { color: var(--teal); }
.kmzp-row.is-empty { opacity: 0.55; }
.kmzp-tx { display: flex; flex-direction: column; min-width: 0; }
.kmzp-tx b { font-size: 12.5px; font-weight: 500; color: var(--text); }
.kmzp-tx small { font-size: 11px; color: var(--text-dim); }
.kmzp-count { font-size: 11px; color: var(--text-dim); margin-top: 9px; }
.kmzp-modal .fname-actions { justify-content: space-between; }
.kmzp-modal .kmzp-ok:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Panel Consulta Indígena ── */
.ind-empty { color: var(--text-dim); font-size: 12px; padding: 14px 2px; }
.ind-cpli { font-size: 12px; padding: 9px 11px; border-radius: 9px; margin-bottom: 10px; line-height: 1.35; }
.ind-cpli.on { background: rgba(181,101,86,0.14); border: 1px solid rgba(181,101,86,0.45); color: #d98a6f; }
.ind-cpli.off { background: var(--teal-soft); border: 1px solid var(--border); color: var(--text); }
/* CPLI indeterminada (E-5): ni «on» ni «off» — «no evaluable», ámbar. */
.ind-cpli.nd { background: rgba(212,160,23,0.10); border: 1px solid rgba(212,160,23,0.42); color: #e8c65a; }
.ind-line { font-size: 12px; color: var(--text); margin: 6px 0; line-height: 1.4; }
.ind-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.ind-kpi { background: var(--bg-glass-soft); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.ind-kpi-v { font-size: 20px; font-weight: 600; color: var(--teal-bright); letter-spacing: -0.02em; }
.ind-kpi-l { font-size: 10px; color: var(--text-dim); margin-top: 3px; line-height: 1.25; }
.ind-kpi-src { font-size: 8.5px; color: var(--text-faint); margin-top: 3px; letter-spacing: 0.02em; }
.ind-mini-src { font-style: normal; font-size: 9px; color: var(--text-faint); }
.ind-consulta { background: var(--teal-soft); border: 1px solid var(--teal); border-radius: 11px; padding: 11px 13px; margin: 10px 0; }
.ind-consulta-h { font-size: 11px; font-weight: 600; color: var(--teal-bright); text-transform: uppercase; letter-spacing: 0.04em; }
.ind-consulta-row { font-size: 14px; color: var(--text); margin-top: 5px; line-height: 1.4; }
.ind-consulta-row b { font-size: 18px; font-weight: 700; color: var(--teal-bright); }
.ind-consulta-row i { font-style: normal; color: var(--text-dim); margin: 0 3px; }
.ind-consulta-src { font-size: 9px; color: var(--text-faint); margin-top: 5px; }
.ind-block-h { font-size: 11px; font-weight: 600; color: var(--text); margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--border); }
.ind-block-h span { font-weight: 400; font-size: 9.5px; color: var(--text-dim); }
.info-src { font-size: 9.5px; color: var(--text-faint); margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.info-limitation{margin-top:8px;padding:7px 8px;border-left:2px solid var(--gold);background:rgba(191,164,119,.08);color:var(--text-dim);font-size:9px;line-height:1.4}
.ind-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.ind-mini-c { display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: var(--text-dim); padding: 4px 2px; }
.ind-mini-c b { font-size: 14px; color: var(--text); }
.ind-h { font-size: 12px; font-weight: 600; color: var(--text); margin: 14px 0 6px; }
.ind-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ind-table th, .ind-table td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--border); }
.ind-table th:first-child, .ind-table td:first-child { text-align: left; }
.ind-table th { color: var(--text-dim); font-weight: 600; }
/* Tabla de los 5 supuestos CPLI: columnas de texto, alineadas a la izquierda. */
.ind-table--sup th, .ind-table--sup td { text-align: left; vertical-align: top; }
.ind-table--sup td:nth-child(2), .ind-table--sup td:last-child { color: var(--text-dim); }
.ind-note { font-size: 10px; color: var(--text-faint); margin: 5px 0; font-style: italic; }
.ind-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ind-chip { font-size: 10.5px; background: var(--teal-soft); border: 1px solid var(--border); border-radius: 20px; padding: 3px 9px; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.ind-chip i { font-style: normal; color: var(--teal-bright); font-weight: 600; opacity: 0.9; }
/* Lista de pueblos indígenas: acotada y scrolleable (proyectos con muchos pueblos). */
.ind-pueblos-list { display: flex; flex-direction: column; gap: 4px; max-height: 208px;
  overflow-y: auto; padding: 2px 4px 2px 0; margin-top: 4px; scrollbar-width: thin; }
.ind-pueblos-list::-webkit-scrollbar { width: 7px; }
.ind-pueblos-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.ind-pueblo { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; padding: 7px 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-glass-soft); color: var(--text);
  transition: border-color var(--motion-fast, .15s) ease, transform var(--motion-fast, .15s) ease; }
.ind-pueblo:hover { border-color: var(--teal); transform: translateX(2px); }
.ind-pueblo:active { transform: translateX(0); }
.ind-pueblo-bar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: var(--teal-soft); opacity: 0.55; pointer-events: none; }
.ind-pueblo-name { position: relative; z-index: 1; flex: 1; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-pueblo-meta { position: relative; z-index: 1; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }
.ind-pueblo-meta b { color: var(--teal-bright); }
.ind-pueblo-meta i { font-style: normal; opacity: 0.5; margin: 0 2px; }
.ind-pueblo-go { position: relative; z-index: 1; width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: var(--text-faint); stroke-width: 1.8; }
.ind-pueblo:hover .ind-pueblo-go { stroke: var(--teal-bright); }
/* Desglose de población indígena por localidad: también acotado y scrolleable. */
.ind-desglose { margin: 8px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-glass-soft); }
.ind-desglose > summary { cursor: pointer; padding: 8px 10px; font-size: 11px; font-weight: 600;
  color: var(--text); list-style: none; user-select: none; }
.ind-desglose > summary::-webkit-details-marker { display: none; }
.ind-desglose > summary::before { content: '▸'; color: var(--teal-bright); margin-right: 6px; font-size: 10px; }
.ind-desglose[open] > summary::before { content: '▾'; }
.ind-desglose > table, .ind-desglose > .ind-note { max-height: 220px; }
.ind-desglose > table { display: block; overflow-y: auto; margin: 0 8px; width: calc(100% - 16px); }
.ind-desglose > .ind-note { margin: 6px 10px 10px; }
.ind-pills { display: flex; gap: 6px; margin: 10px 0 4px; }
.ind-pill { flex: 1; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 6px 4px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-glass-soft); color: var(--text-dim); cursor: pointer; transition: all var(--motion-fast, .15s) ease; }
.ind-pill:hover { border-color: var(--teal); color: var(--text); }
.ind-pill.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.ind-scope { font-size: 11px; color: var(--text-dim); margin: 8px 0 2px; }
.ind-scope b { color: var(--teal-bright); }
.ind-cumul { color: var(--text-faint); font-weight: 400; }
.ind-table tbody tr.hl { background: var(--teal-soft); }
.ind-table tbody tr.hl td:first-child { font-weight: 600; color: var(--teal-bright); }

/* CPLI · configuración y lectura ejecutiva sobre consulta_indigena@2.0.0 */
.cpli-setup { display: flex; flex-direction: column; gap: 10px; }
.cpli-setup[hidden] { display: none; }
.cpli-setup .step-requirement { margin-bottom: 0; }
.cpli-setup__rule { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start;
  padding: 11px; border: 1px solid rgba(194,24,91,.28); border-radius: 12px;
  background: linear-gradient(135deg, rgba(194,24,91,.10), var(--bg-glass-soft)); }
.cpli-setup__formula { color: #e15b93; font-size: 17px; font-style: normal; font-weight: 750;
  letter-spacing: -.03em; white-space: nowrap; }
.cpli-setup__formula i { color: var(--text-faint); font-size: 10px; font-style: normal;
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.cpli-setup__rule b, .cpli-setup__sources b, .cpli-setup__output b { color: var(--text); font-size: 11px; }
.cpli-setup__rule small { display: block; color: var(--text-dim); font-size: 9.5px; line-height: 1.35; margin-top: 3px; }
.cpli-setup__triggers { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cpli-setup__triggers span { padding: 7px 8px; border-radius: 8px; background: var(--teal-soft);
  border: 1px solid var(--border); color: var(--text-dim); font-size: 9.5px; line-height: 1.25; }
.cpli-setup__triggers span:last-child { grid-column: 1 / -1; }
.cpli-setup__sources { padding: 9px 10px; border-left: 2px solid var(--teal); background: var(--bg-glass-soft); }
.cpli-setup__sources p, .cpli-setup__output { margin: 3px 0 0; color: var(--text-dim); font-size: 10px; line-height: 1.4; }

.cpli-eyebrow { display: block; color: currentColor; opacity: .7; font-size: 8.5px;
  font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.ind-cpli { padding: 13px 14px; }
.ind-cpli b { display: block; margin-top: 3px; color: currentColor; font-size: 16px; letter-spacing: -.015em; }
.ind-cpli small { display: block; margin-top: 4px; color: currentColor; opacity: .82; font-size: 10px; line-height: 1.4; }
.cpli-overview { margin-bottom: 10px; }
.cpli-area-nav { margin: 9px 0; padding: 11px; border: 1px solid rgba(38,166,154,.34);
  border-radius: 12px; background: linear-gradient(145deg, rgba(38,166,154,.09), var(--bg-glass-soft)); }
.cpli-area-nav .cpli-section-head { margin-bottom: 8px; }
.cpli-area-nav__buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cpli-area-btn { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 7px;
  align-items: center; padding: 9px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-panel); color: var(--text); font-family: inherit; text-align: left; cursor: pointer;
  transition: transform var(--motion-fast, .15s) ease, border-color var(--motion-fast, .15s) ease,
    background var(--motion-fast, .15s) ease, box-shadow var(--motion-fast, .15s) ease; }
.cpli-area-btn:hover { transform: translateY(-1px); border-color: var(--teal); }
.cpli-area-btn:focus-visible, .cpli-map-card:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 2px; }
.cpli-area-btn__code { font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.cpli-area-btn__map { color: var(--text-faint); font-size: 15px; line-height: 1; }
.cpli-area-btn__copy { min-width: 0; grid-column: 1 / -1; }
.cpli-area-btn__copy b, .cpli-area-btn__copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.cpli-area-btn__copy b { color: var(--text); font-size: 9.5px; white-space: nowrap; }
.cpli-area-btn__copy small { margin-top: 2px; color: var(--text-faint); font-size: 7.5px; line-height: 1.25; }
.cpli-area-btn__measure { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 5px !important; }
.cpli-area-btn__measure span { padding: 2px 5px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-glass-soft); color: var(--text-dim); font-size: 8px; font-weight: 700; white-space: nowrap; }
.cpli-area-btn.active .cpli-area-btn__measure span { border-color: currentColor; color: var(--text); }
.cpli-area-btn.active { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.14); }
.cpli-area-btn[data-cpli-ai="AN"].active { border-color: #e07a5f; background: rgba(224,122,95,.13); }
.cpli-area-btn[data-cpli-ai="AID"].active { border-color: #e0a458; background: rgba(224,164,88,.13); }
.cpli-area-btn[data-cpli-ai="AII"].active { border-color: #5faa78; background: rgba(95,170,120,.13); }
.cpli-area-btn.active .cpli-area-btn__map { color: var(--text); }
.cpli-area-nav__scope { min-height: 26px; margin: 8px 1px 0; padding-top: 7px; border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 8.5px; line-height: 1.4; }
.cpli-area-nav__scope b { color: var(--teal-bright); }
.cpli-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.cpli-kpi { min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-glass-soft); }
.cpli-kpi > b { display: block; color: var(--text); font-size: 20px; line-height: 1; letter-spacing: -.04em; }
.cpli-kpi > span { display: block; color: var(--text); font-size: 9.5px; font-weight: 650; margin-top: 5px; }
.cpli-kpi > small { display: block; color: var(--text-faint); font-size: 8.5px; margin-top: 2px; line-height: 1.25; }
.cpli-map-card { appearance: none; position: relative; color: var(--text); font-family: inherit; text-align: left;
  cursor: pointer; transition: transform var(--motion-fast, .15s) ease, border-color var(--motion-fast, .15s) ease,
    background var(--motion-fast, .15s) ease, box-shadow var(--motion-fast, .15s) ease; }
.cpli-map-card:hover { transform: translateY(-1px); border-color: var(--teal); box-shadow: 0 5px 14px rgba(0,0,0,.12); }
.cpli-map-card > i { display: block; margin-top: 7px; color: var(--teal-bright); font-size: 8px;
  font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cpli-map-card.active { border-color: var(--teal-bright); background: var(--teal-soft);
  box-shadow: inset 0 0 0 1px rgba(38,166,154,.18), 0 5px 14px rgba(0,0,0,.12); }
.cpli-map-card.active > i::before { content: '● '; }

.cpli-source-panel, .cpli-evidence { margin: 8px 0; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-glass-soft); }
.cpli-source-panel { padding: 11px; }
.cpli-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.cpli-section-head span { min-width: 0; }
.cpli-section-head small { display: block; color: var(--text-faint); font-size: 8px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }
.cpli-section-head b { display: block; color: var(--text); font-size: 12px; margin-top: 2px; }
.cpli-section-head em, .cpli-disclosure > summary em { flex-shrink: 0; color: var(--teal-bright);
  font-size: 9px; font-style: normal; font-weight: 700; }
.cpli-section-head em.warn { color: #e15b93; }
.cpli-source-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.cpli-source { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); }
.cpli-source i { width: 6px; height: 6px; border-radius: 50%; background: #d4a017; }
.cpli-source.ok i { background: var(--teal-bright); box-shadow: 0 0 0 3px rgba(38,166,154,.10); }
.cpli-source b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 8.5px; }
.cpli-source small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--text-faint);
  font-size: 7.5px; white-space: nowrap; }
.cpli-source.nd { border-color: rgba(212,160,23,.34); }

.cpli-evidence--triggers, .cpli-evidence--sensitivity { padding: 11px; }
.cpli-trigger-list { display: flex; flex-direction: column; gap: 6px; }
.cpli-trigger { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: start;
  padding: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-panel); }
.cpli-trigger.on { border-color: rgba(194,24,91,.35); background: rgba(194,24,91,.06); }
.cpli-trigger.nd { border-color: rgba(212,160,23,.32); }
.cpli-trigger__n { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px;
  background: var(--teal-soft); color: var(--teal-bright); font-size: 9px; font-weight: 750; }
.cpli-trigger.on .cpli-trigger__n { color: #e15b93; background: rgba(194,24,91,.13); }
.cpli-trigger__body { min-width: 0; }
.cpli-trigger__body > b { color: var(--text); font-size: 10.5px; }
.cpli-trigger__body p { color: var(--text-dim); font-size: 9px; line-height: 1.3; margin: 2px 0; }
.cpli-trigger__body small { color: var(--text-faint); font-size: 8px; line-height: 1.25; }
.cpli-trigger__result { color: var(--text-dim); font-size: 9px; font-weight: 650; text-align: right; white-space: nowrap; }
.cpli-trigger.on .cpli-trigger__result { color: #e15b93; }
.cpli-trigger__result small { display: block; margin-top: 3px; color: var(--text-faint); font-size: 7.5px; font-weight: 500; }
.cpli-trigger__reason { grid-column: 2 / -1; margin: 0; padding-top: 5px; border-top: 1px dashed var(--border);
  color: var(--text-faint); font-size: 8.5px; line-height: 1.3; }
.cpli-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cpli-scenario { padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-panel); }
.cpli-scenario b, .cpli-scenario span, .cpli-scenario small { display: block; }
.cpli-scenario b { color: var(--text); font-size: 12px; }
.cpli-scenario span { color: var(--text-dim); font-size: 9px; font-weight: 650; margin-top: 3px; }
.cpli-scenario small { color: var(--text-faint); font-size: 7.5px; line-height: 1.25; margin-top: 4px; }
.cpli-scenario.on { border-color: rgba(194,24,91,.35); }
.cpli-scenario.on span { color: #e15b93; }
.cpli-scenario.nd { border-color: rgba(212,160,23,.35); }

.cpli-disclosure { overflow: clip; }
.cpli-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; padding: 11px; }
.cpli-disclosure > summary::-webkit-details-marker { display: none; }
.cpli-disclosure > summary::after { content: '＋'; color: var(--text-faint); font-size: 12px; }
.cpli-disclosure[open] > summary::after { content: '−'; }
.cpli-disclosure > summary span { flex: 1; }
.cpli-disclosure > summary small { display: block; color: var(--text-faint); font-size: 8px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }
.cpli-disclosure > summary b { display: block; color: var(--text); font-size: 11.5px; margin-top: 2px; }
.cpli-disclosure > summary em { margin-left: auto; }
.cpli-disclosure > :not(summary) { margin-left: 11px; margin-right: 11px; }
.cpli-disclosure > :last-child { margin-bottom: 11px; }
.cpli-disclosure.nd > summary em { color: #d4a017; }
.cpli-loc-list, .cpli-nuc-list { display: flex; flex-direction: column; gap: 5px; }
.cpli-loc-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(110px, 1fr) auto 40px;
  gap: 7px; align-items: center; width: 100%; padding: 8px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--bg-panel); color: var(--text); text-align: left; cursor: pointer; }
.cpli-loc-row:hover { border-color: var(--teal); }
.cpli-loc-row__main, .cpli-loc-row__people { min-width: 0; }
.cpli-loc-row__main b, .cpli-loc-row__main small, .cpli-loc-row__people b, .cpli-loc-row__people small { display: block; }
.cpli-loc-row__main b { overflow: hidden; text-overflow: ellipsis; font-size: 10px; white-space: nowrap; }
.cpli-loc-row__main small, .cpli-loc-row__people small { overflow: hidden; text-overflow: ellipsis; color: var(--text-faint);
  font-size: 7.5px; white-space: nowrap; }
.cpli-loc-row__people b { color: var(--text-dim); font-size: 8.5px; }
.cpli-loc-row__cat { padding: 3px 5px; border-radius: 10px; background: var(--bg-glass-soft);
  color: var(--text-faint); font-size: 7.5px; white-space: nowrap; }
.cpli-loc-row__cat.reconocida { color: var(--teal-bright); background: var(--teal-soft); }
.cpli-loc-row__cat.no_disponible { color: #d4a017; background: rgba(212,160,23,.10); }
.cpli-loc-row__pct { color: #e15b93; font-size: 10px; font-weight: 750; text-align: right; }
.cpli-nuc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-panel); }
.cpli-nuc span { min-width: 0; }
.cpli-nuc b, .cpli-nuc small { display: block; }
.cpli-nuc b { color: var(--text); font-size: 10px; }
.cpli-nuc small { color: var(--text-faint); font-size: 8px; margin-top: 2px; }
.cpli-nuc strong { color: var(--teal-bright); font-size: 10px; }
.cpli-more { margin: 6px 0; }
.cpli-more > summary { cursor: pointer; color: var(--teal-bright); font-size: 9px; font-weight: 650; padding: 5px 2px; }
.cpli-export-block { margin-top: 14px; }
.cpli-export-copy { margin: -3px 0 9px; color: var(--text-dim); font-size: 10px; line-height: 1.4; }

@media (max-width: 560px) {
  .cpli-area-nav__buttons { grid-template-columns: 1fr; }
  .cpli-area-btn { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cpli-area-btn__copy { grid-column: 2; grid-row: 1; }
  .cpli-area-btn__map { grid-column: 3; }
  .cpli-source-strip { grid-template-columns: repeat(3, 1fr); }
  .cpli-loc-row { grid-template-columns: minmax(110px, 1fr) auto; }
  .cpli-loc-row__people { grid-column: 1 / -1; grid-row: 2; }
  .cpli-loc-row__cat { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* ===== MAPBOX OVERRIDES ===== */
.mapboxgl-ctrl-top-right { top: 56px; right: 346px; transition: right 0.38s var(--ease-soft); }
body.state-setup .mapboxgl-ctrl-top-right, body.layers-collapsed .mapboxgl-ctrl-top-right { right: 14px; }
.mapboxgl-ctrl-bottom-right { right: 344px; transition: right 0.38s var(--ease-soft); }
body.state-setup .mapboxgl-ctrl-bottom-right, body.layers-collapsed .mapboxgl-ctrl-bottom-right { right: 8px; }

/* ===== GEOCODER (buscador) — posición y tema oscuro ===== */
.mapboxgl-ctrl-top-left { top: 56px; left: 532px; transition: left 0.38s var(--ease-soft); }
body.panel-collapsed .mapboxgl-ctrl-top-left { left: 14px; }
.mapboxgl-ctrl-geocoder {
  background: var(--bg-glass); backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); border-radius: var(--radius-md);
  min-width: 280px; max-width: 320px; font-family: var(--font-sans); font-size: 12.5px;
}
.mapboxgl-ctrl-geocoder--input { color: var(--cream); height: 38px; padding: 6px 36px; }
.mapboxgl-ctrl-geocoder--input::placeholder { color: var(--text-dim); }
.mapboxgl-ctrl-geocoder--icon { fill: var(--teal-bright); }
.mapboxgl-ctrl-geocoder--icon-search { top: 9px; left: 8px; }
.mapboxgl-ctrl-geocoder--button { background: transparent; }
.mapboxgl-ctrl-geocoder .suggestions { background: var(--bg-glass-soft); backdrop-filter: blur(16px); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.mapboxgl-ctrl-geocoder .suggestions > li > a { color: var(--text-mid); }
.mapboxgl-ctrl-geocoder .suggestions > .active > a, .mapboxgl-ctrl-geocoder .suggestions > li > a:hover { background: var(--surface-hover); color: var(--cream); }
.mapboxgl-ctrl-geocoder--suggestion-title { color: var(--cream); }

/* ===== HISTORIAL ===== */
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--teal); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--motion-fast) var(--ease-soft); }
.history-item:hover { border-color: var(--border-strong); background: var(--surface-hover); transform: translateY(-1px); }
.history-name { font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-meta { font-size: 9.5px; color: var(--text-dim); }

/* ===== FIRMA DE MARCA (pie del setup) ===== */
.setup-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.setup-foot__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; width: fit-content; opacity: 0.92; transition: opacity var(--motion-fast); }
.setup-foot__brand:hover { opacity: 1; }
.setup-foot__brand img { width: 26px; height: 26px; filter: brightness(0) invert(1); opacity: 0.92; flex-shrink: 0; }
.setup-foot__brand span { display: flex; flex-direction: column; line-height: 1.05; }
.setup-foot__brand b { font-family: var(--font-brand); font-weight: 600; font-size: 14px; color: var(--cream); letter-spacing: -0.01em; }
.setup-foot__brand small { font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-top: 3px; }
.setup-foot__brand:hover b { color: var(--teal-bright); }
.setup-foot__sign { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-brand); font-weight: 600; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.setup-foot__sign .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 7px var(--lime); flex-shrink: 0; }
.mapboxgl-popup-content { background: var(--bg-glass); backdrop-filter: blur(18px); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 12px 16px; font-size: 11px; max-width: 280px; }
.mapboxgl-popup-content b { color: var(--teal-bright); }
.mapboxgl-popup-close-button { color: var(--text-dim); font-size: 18px; }
.mapboxgl-ctrl-attrib { background: rgba(12,18,22,0.7) !important; }
.mapboxgl-ctrl-attrib a { color: var(--teal-bright) !important; }
.mapboxgl-ctrl-bottom-left { left: 520px; transition: left 0.38s var(--ease-soft); }
body.panel-collapsed .mapboxgl-ctrl-bottom-left { left: 8px; }
.mapboxgl-ctrl-group { background: var(--bg-glass) !important; border: 1px solid var(--border) !important; backdrop-filter: blur(14px); }
.mapboxgl-ctrl-group button + button { border-top: 1px solid var(--border) !important; }
.mapbox-gl-draw_ctrl-draw-btn { border-color: var(--border) !important; }

/* ===== STATE VISIBILITY ===== */
body.state-results #setup-view { display: none; }
body:not(.state-results) #results-view { display: none; }

@media (max-width: 860px) {
  #panel { width: 312px; }
  #layers-panel { width: 256px; }
  #info-panel { left: 14px; }
  #panel-collapse { left: 318px; }
  #layers-collapse { right: 262px; }
}

/* ===== ÍCONOS DE LÍNEA DE MARCA (estilo deck aosenuma) ===== */
.section-label .si { width: 14px; height: 14px; margin-right: 7px; vertical-align: -2.5px; display: inline-block; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.category-header .section-label .si { opacity: 0.95; }
/* Oleada 1 · un solo trazo para los 4 iconos de modo (todos stroke, grid 24, 1.7) */
.mode-tab .msi { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; stroke: currentColor; fill: none !important; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mode-tab .msi * { fill: none; }
.deliv-ico { color: var(--teal-bright); display: inline-flex; align-items: center; justify-content: center; }
.deliv-ico .dsi { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.deliv-btn-primary .deliv-ico { color: var(--cta); }

/* pie del setup: fila meta + url aosenuma (estilo pie del deck) */
.setup-foot__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.setup-foot__url { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.04em; color: var(--text-faint); white-space: nowrap; }

/* ===== TOGGLE DE TEMA (claro / oscuro) en el header ===== */
.topbar-theme { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(242,244,237,0.06); border: 1px solid rgba(242,244,237,0.12); cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.topbar-theme:hover { background: rgba(242,244,237,0.12); border-color: rgba(242,244,237,0.26); transform: translateY(-1px); }
.topbar-theme:focus-visible { outline: 2px solid #66b8c0; outline-offset: 2px; }
.topbar-theme .theme-ico { display: none; width: 16px; height: 16px; stroke: rgba(242,244,237,0.88); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topbar-theme .theme-ico.sun { display: block; }
html.theme-light .topbar-theme .theme-ico.sun { display: none; }
html.theme-light .topbar-theme .theme-ico.moon { display: block; }

/* ===== TEMA CLARO (papel cream del deck aosenuma) — VISTA ÚNICA del visor =====
   Desde «una sola vista», estos tokens ya no son una variante: son la paleta que
   se pinta siempre. Por eso están calibrados a contraste WCAG AA medido (no
   estimado) contra las superficies claras reales del visor — desde #ffffff (modal)
   hasta el tinte más oscuro en uso, #d1e3e0 (chip teal-soft):
     texto normal ≥ 4.5:1 · texto grande ≥ 3:1
   Si tocas un token de esta lista, vuelve a medir: el peor caso manda. */
html.theme-light {
  /* fondos claros */
  --bg-deep:        #eef0e9;
  --bg-mid:         #e6e9df;
  --bg-soft:        #dee2d6;
  --bg-glass:       rgba(248, 250, 244, 0.93);
  --bg-glass-soft:  rgba(248, 250, 244, 0.7);
  /* superficies = tintes oscuros sutiles sobre claro */
  --surface:        rgba(18, 42, 46, 0.04);
  --surface-hover:  rgba(18, 42, 46, 0.08);
  --surface-track:  rgba(18, 42, 46, 0.09);
  /* acentos: teal petróleo oscuro para contraste sobre claro.
     --teal y --teal-bright se usan sobre todo como COLOR DE TEXTO (etiquetas de
     sección, cifras, chips), así que se profundizan hasta pasar AA sobre el chip
     teal-soft, que es la superficie más oscura donde aparecen. */
  --teal:           #0b6b79;   /* AA: 4.59 (chip) – 6.19 (blanco) */
  --teal-bright:    #0b6673;   /* AA: 4.92 (chip) – 6.64 (blanco) */
  --teal-deep:      #0a5560;
  --teal-soft:      rgba(14, 138, 154, 0.12);
  /* cyan de realce, versión profunda para contraste sobre cream */
  --cyan:           #1098b5;
  --cyan-bright:    #0a6a80;   /* AA: 4.59 (chip) – 6.20 (blanco) */
  --cyan-soft:      rgba(16, 152, 181, 0.12);
  --lime:           #4c621b;   /* AA: 5.07 (chip) – 6.84 (blanco) */
  --gold:           #6e5a20;   /* AA: 4.95 (chip) – 6.67 (blanco) */
  /* texto oscuro (los usos de --cream/--text como texto pasan a oscuro).
     Tres escalones legibles: la jerarquía se mantiene por peso visual, no por
     bajar del umbral. Antes .74/.55/.38 daban 3.4:1 y 2.2:1 en secundarios. */
  --cream:          #1b2225;
  --text:           #1b2225;
  --text-mid:       rgba(27, 34, 37, 0.88);   /* AA: 8.27 (chip) */
  --text-dim:       rgba(27, 34, 37, 0.78);   /* AA: 6.53 (chip) */
  --text-faint:     rgba(27, 34, 37, 0.66);   /* AA: 4.59 (chip) */
  /* bordes oscuros sutiles */
  --border:         rgba(18, 42, 46, 0.12);
  --border-strong:  rgba(18, 42, 46, 0.22);
  /* sombras suaves */
  --shadow-sm:      0 4px 20px rgba(20, 50, 55, 0.10);
  --shadow-md:      0 12px 34px -10px rgba(20, 50, 55, 0.18);
  --shadow-lg:      0 22px 54px -14px rgba(20, 50, 55, 0.22);
}
/* el header permanece teal-navy en ambos temas → "Nacional" en blanco, hover teal */
html.theme-light .aosenuma-topbar__home:hover .aosenuma-topbar__brand { color: #66b8c0; }
/* superficies hardcodeadas → versión clara */
html.theme-light #panel,
html.theme-light #layers-panel { background: rgba(249, 251, 245, 0.96); box-shadow: 0 0 36px -18px rgba(20,50,55,0.18); }
html.theme-light .panel-toggle { background: rgba(248, 250, 244, 0.96); box-shadow: 0 2px 14px rgba(20,50,55,0.18), 0 0 0 4px rgba(14,138,154,0.12); }
html.theme-light .mode-tabs,
html.theme-light .ai-filter-bar { background: rgba(18, 42, 46, 0.05); }
html.theme-light #progress {
  background: rgba(18, 42, 46, 0.28);
}
html.theme-light .progress-inner {
  background: rgba(252, 253, 249, 0.97);
  border-color: rgba(18, 42, 46, 0.10);
  box-shadow: 0 18px 48px -24px rgba(20, 50, 55, 0.32);
}
html.theme-light .progress-kicker { color: rgba(18, 42, 46, 0.42); }
html.theme-light .progress-stage { color: #122a2e; }
html.theme-light .progress-track { background: rgba(18, 42, 46, 0.10); }
html.theme-light .progress-track-fill { background: var(--aose-teal); }
html.theme-light .progress-node { border-color: rgba(18, 42, 46, 0.28); }
html.theme-light .progress-phase:not(:last-child)::before { background: rgba(18, 42, 46, 0.12); }
html.theme-light .progress-phase.done:not(:last-child)::before { background: rgba(29, 109, 117, 0.5); }
html.theme-light .progress-phase.done .progress-node {
  background: #1d6d75; border-color: #1d6d75;
}
html.theme-light .progress-phase.done .progress-node::after { border-color: #f3f5ee; }
html.theme-light .progress-phase.active .progress-node { border-color: var(--aose-teal); }
html.theme-light .progress-phase.active .progress-node::after { background: var(--aose-teal); }
html.theme-light .progress-phase.active .progress-plabel { color: #122a2e; }
html.theme-light .progress-plabel { color: rgba(18, 42, 46, 0.55); }
html.theme-light .progress-phase.done .progress-plabel { color: rgba(18, 42, 46, 0.72); }
html.theme-light .progress-read { color: rgba(18, 42, 46, 0.62); }
html.theme-light .progress-read-dot { background: var(--aose-teal); }
html.theme-light .progress-read.is-error .progress-read-tx { color: #9b2f2f; }
html.theme-light .progress-read.is-error .progress-read-dot { background: #9b2f2f; }
html.theme-light .progress-meta, html.theme-light .progress-sep { color: rgba(18, 42, 46, 0.45); }
html.theme-light .toggle-slider { background: rgba(18,42,46,0.16); }
html.theme-light .toggle-slider::before { background: var(--text-dim); }
html.theme-light .toggle-switch input:checked + .toggle-slider::before { background: #fff; }
html.theme-light .mapboxgl-ctrl-attrib { background: rgba(248,250,244,0.8) !important; }
html.theme-light .mapboxgl-ctrl-attrib a { color: var(--teal-deep) !important; }
html.theme-light .mode-hint { border-color: rgba(14,138,154,0.32); }
html.theme-light .upload-label { border-color: var(--border-strong); }
/* el compositor de mapa conserva su rail oscuro en ambos temas (re-fija tokens) */
html.theme-light .mx-modal {
  --cream: #f2f4ed; --text: #f2f4ed; --text-mid: rgba(242,244,237,0.78); --text-dim: rgba(242,244,237,0.55); --text-faint: rgba(242,244,237,0.32);
  --teal-bright: #66b8c0; --surface: rgba(242,244,237,0.04); --surface-hover: rgba(242,244,237,0.07);
  --border: rgba(242,244,237,0.07); --border-strong: rgba(242,244,237,0.16); --bg-mid: #131a1f;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REFINAMIENTO EDITORIAL · aosenuma × nbs                              (v32)
   ───────────────────────────────────────────────────────────────────────────
   Funde la sofisticación de producto de la plataforma (Earthset/nbs: tarjetas
   glass, KPIs de dashboard, micro-interacciones) con la voz de marca aosenuma
   del deck Naturgy: tipografía editorial Bricolage con aire, paleta teal·lime·
   cyan (cyan = realce de palabra clave), reglas finas degradadas, pasos
   numerados, esquinas orgánicas. Capa final → gana en cascada sin reescribir.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Profundidad cálida del panel: glow teal/lime tenue arriba (aire del deck) ── */
html.theme-light #panel{
  background:
    radial-gradient(135% 60% at 10% 0%, rgba(14,138,154,0.055), transparent 55%),
    radial-gradient(115% 55% at 98% 0%, rgba(166,200,75,0.05), transparent 50%),
    rgba(249,251,245,0.975);
}
html:not(.theme-light) #panel{
  background:
    radial-gradient(135% 60% at 10% 0%, rgba(74,156,165,0.10), transparent 55%),
    radial-gradient(115% 55% at 98% 0%, rgba(210,220,118,0.05), transparent 50%),
    rgba(11,21,24,0.96);
}

/* ── Títulos de sección: voz editorial Bricolage, más grande y con aire ── */
.section-title{ font-size:19px; font-weight:500; letter-spacing:-0.02em; line-height:1.16; }
.section-title .hl, .section-title strong, .section-title em{ font-style:normal; font-weight:600; color:var(--cyan); }

/* ── Kicker numerado: tracking amplio + regla fina degradada (pasos del deck) ── */
.section-label{
  display:flex; align-items:center; gap:11px; color:var(--teal);
  font-size:10px; letter-spacing:0.14em; margin-bottom:13px;
}
.section-label::after{
  content:""; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg, var(--teal-soft) 0%, transparent 100%);
}

/* ── Divisores → regla fina con degradado (firma editorial aosenuma) ── */
.divider{ height:1px; background:linear-gradient(90deg, transparent, var(--border-strong) 16%, var(--border-strong) 84%, transparent); }

/* ── Sugerencias: code-chips en cyan de marca ── */
.sidebar-hint code{ background:var(--cyan-soft); color:var(--cyan); }

/* ── KPIs → tarjetas de dashboard (nbs) con número Bricolage grande (aosenuma) ── */
.kpi-grid{ grid-template-columns:repeat(2,1fr); gap:9px; background:transparent; border:none; border-radius:0; overflow:visible; }
.kpi{
  position:relative; padding:14px 15px 13px; border-radius:var(--radius-md);
  border:1px solid var(--border); border-left:1px solid var(--border);
  background:var(--surface); overflow:hidden;
  transition:transform var(--motion-fast) var(--ease-soft), border-color var(--motion-fast), background var(--motion-fast);
}
.kpi:first-child{ border-left:1px solid var(--border); }
.kpi::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--teal), var(--cyan)); opacity:0.55;
}
.kpi:hover{ transform:translateY(-1px); border-color:var(--border-strong); background:var(--surface-hover); }
.kpi-val{ font-size:25px; font-weight:600; letter-spacing:-0.025em; }
.kpi-val.kpi-red{ color:var(--terra); }
/* «reservado» como texto en el KPI compacto: baja el tamaño para que quepa la
   palabra en la celda sin desbordar el conteo vecino. */
.kpi-val.kpi-sm{ font-size:14px; letter-spacing:0; }
.kpi-lbl{ font-size:9px; margin-top:4px; letter-spacing:0.05em; }

/* ── Pestañas de modo: el seleccionado pasa a píldora clara (vseg de nbs) ── */
html.theme-light .mode-tab.active{
  background:#ffffff; color:var(--teal);
  box-shadow:0 1px 5px rgba(20,50,55,0.12), inset 0 0 0 1px var(--teal-soft);
}

/* ── CTA lime: pulido del deck (radio, sombra teñida, brillo superior) ── */
.btn-primary{
  border-radius:var(--radius-md); letter-spacing:0.08em;
  box-shadow:0 6px 20px -6px var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,0.20);
}
.btn-primary:hover:not(:disabled){ box-shadow:0 9px 26px -7px var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,0.24); }

/* ── Topbar: línea de acento teal→cyan→lime más presente (firma de marca) ── */
.aosenuma-topbar__line{
  height:2px; opacity:0.6;
  background:linear-gradient(90deg, var(--aose-teal) 0%, #2bb8d4 46%, var(--aose-lime) 100%);
}

/* ── Título de resultados: degradado teal→cyan de marca (legible en ambos temas) ── */
.results-head .section-title{
  background:linear-gradient(120deg, var(--teal) 0%, var(--cyan) 115%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── Scrollbars del panel: teal sobrio ── */
#panel::-webkit-scrollbar, #layers-panel::-webkit-scrollbar{ width:9px; }
#panel::-webkit-scrollbar-thumb, #layers-panel::-webkit-scrollbar-thumb{
  background:var(--teal-soft); border-radius:99px; border:2px solid transparent; background-clip:padding-box;
}
#panel::-webkit-scrollbar-thumb:hover, #layers-panel::-webkit-scrollbar-thumb:hover{ background:var(--teal); background-clip:padding-box; }

/* ── Encabezados de grupo de capas: misma regla fina que los kickers (consistencia) ── */
.lgh-title{ display:flex; align-items:center; gap:9px; color:var(--teal); }
.lgh-title::after{ content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg, var(--teal-soft) 0%, transparent 100%); }

/* ── Tarjetas de entregable (DFAS/MISSE): elevación al hover (micro-interacción nbs) ── */
.deliv-btn{ transition:transform var(--motion-fast) var(--ease-soft), border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast); }
.deliv-btn:hover{ box-shadow:var(--shadow-sm); }

/* ═══════════════════════════════════════════════════════════════════════════
   SHELL · Rail de iconos + paneles flotantes
   Arquitectura de producto de nbs/Earthset (rail vertical + glass flotante)
   en la marca aosenuma: el rail comparte el teal-navy del topbar → header +
   rail forman una "L" de marca; los paneles flotan separados de los bordes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rail: sustituido por la barra maestra compartida (masterbar.css/js).
   Los paneles flotantes y controles del mapa consumen var(--mb-total) para
   que el hover-reveal y el panel de nivel 2 EMPUJEN el layout (sin overlay). ── */

/* ── Panel izquierdo → flotante, más estrecho, separado del rail ── */
#panel{
  top:58px; left:calc(var(--mb-total, 48px) + 12px); width:392px; bottom:12px;
  border-radius:var(--radius-lg); border:1px solid var(--border-strong); box-shadow:var(--shadow-lg);
  transition:transform 0.38s var(--ease-soft), left .26s cubic-bezier(.33,1,.68,1);
}
#panel.is-collapsed{ transform:translateX(calc(-100% - var(--mb-total, 48px) - 12px)); }

/* ── Panel de capas → flotante simétrico a la derecha ── */
#layers-panel{
  top:58px; right:12px; bottom:12px; width:320px;
  border-radius:var(--radius-lg); border:1px solid var(--border-strong); box-shadow:var(--shadow-lg);
}
#layers-panel.is-collapsed{ transform:translateX(calc(100% + 16px)); }

/* ── Handles de retracción anclados a --mb-total (fuera del panel; H-20) ── */
#panel-collapse{ left:calc(var(--mb-total, 48px) + 388px); transition:left .26s cubic-bezier(.33,1,.68,1), opacity 0.26s, color 0.15s, border-color 0.15s, background 0.15s, transform 0.18s var(--ease-soft), box-shadow 0.15s; }
#panel-expand{ left:calc(var(--mb-total, 48px) + 8px); transition:left .26s cubic-bezier(.33,1,.68,1), opacity 0.26s, color 0.15s, border-color 0.15s, background 0.15s, transform 0.18s var(--ease-soft), box-shadow 0.15s; }
body.panel-collapsed #panel-expand{ left:calc(var(--mb-total, 48px) + 8px); }

/* ── Elementos anclados al borde derecho del panel izquierdo ── */
#info-panel{ left:calc(var(--mb-total, 48px) + 420px); transition:left .26s cubic-bezier(.33,1,.68,1); }
body.panel-collapsed #info-panel{ left:calc(var(--mb-total, 48px) + 12px); }
.mapboxgl-ctrl-top-left{ left:calc(var(--mb-total, 48px) + 424px); transition:left .26s cubic-bezier(.33,1,.68,1); }
body.panel-collapsed .mapboxgl-ctrl-top-left{ left:calc(var(--mb-total, 48px) + 8px); }
.mapboxgl-ctrl-bottom-left{ left:calc(var(--mb-total, 48px) + 412px); transition:left .26s cubic-bezier(.33,1,.68,1); }
/* ── Controles del mapa ante el panel de capas flotante ── */
.mapboxgl-ctrl-top-right{ right:340px; }
/* ── En setup no hay panel de capas → ocultar sus handles (sin chevron suelto) ── */
body.state-setup #layers-collapse, body.state-setup #layers-expand{ opacity:0 !important; pointer-events:none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   VISTAS DEL PANEL · navegación por rail (flujos separados, estilo nbs)
   El panel de resultados deja de ser un scroll único: cada vista es un flujo
   enfocado (Diagnóstico · Tablero · Propuestas · MISSE). El rail conmuta.
   ═══════════════════════════════════════════════════════════════════════════ */
#results-view > .panel__view{ display:none; }
#results-view > .panel__view.active{ display:block; animation:viewIn var(--motion-normal) var(--ease-soft); }
.view-head{ margin:2px 0 15px; }
.view-title{ font-family:var(--font-brand); font-size:17px; font-weight:500; letter-spacing:-0.02em; line-height:1.18; color:var(--text); overflow-wrap:break-word; }
.view-sub{ display:block; font-size:11px; line-height:1.45; color:var(--text-dim); margin-top:4px; }
/* la primera caja tras el encabezado de vista no necesita su línea superior */
.view-head + .res-block{ border-top:none; margin-top:0; padding-top:0; }

/* (el rail vive en masterbar.css; aquí ya no hay reglas propias) */

/* ── Chasis declarativo por régimen ───────────────────────────────────────
   Los estados, textos y listas nacen de regimen-chassis.js. El shell no
   ofrece CTAs: en construcción significa información verificable, no demo. */
.regime-contract{
  margin:0 0 14px; padding:11px 12px; border:1px solid var(--border-strong);
  border-left:3px solid var(--teal); border-radius:var(--radius-md);
  background:var(--surface); color:var(--text);
}
.regime-contract--parcial{ border-left-color:#d6a64b; }
.regime-contract--por_construir{ border-left-color:var(--text-faint); }
.regime-contract__meta, .regime-entry__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.regime-status{
  display:inline-flex; align-items:center; min-height:20px; padding:2px 7px;
  border:1px solid rgba(74,156,165,.4); border-radius:var(--radius-pill);
  background:rgba(74,156,165,.12); color:var(--teal-bright);
  font-family:var(--font-display); font-size:9px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.regime-contract--parcial .regime-status{ color:#d6a64b; border-color:rgba(214,166,75,.42); background:rgba(214,166,75,.1); }
.regime-contract--por_construir .regime-status{ color:var(--text-dim); border-color:var(--border-strong); background:var(--surface-hover); }
.regime-citation{ font-size:9px; line-height:1.35; color:var(--text-faint); }
.regime-golden-state{ margin:9px 0 0; font-size:10.5px; line-height:1.45; color:var(--text-dim); }
.regime-contract__exports{ margin-top:10px; padding-top:9px; border-top:1px solid var(--border); }
.regime-contract__exports > b{
  display:block; margin-bottom:5px; font-family:var(--font-display); font-size:9px;
  color:var(--text); letter-spacing:.08em; text-transform:uppercase;
}
.regime-shell{ padding-bottom:18px; }
.regime-shell__block{
  margin-top:9px; padding:11px 12px; border:1px solid var(--border);
  border-radius:var(--radius-md); background:var(--surface);
}
.regime-shell__block--missing{ border-color:rgba(214,166,75,.3); background:rgba(214,166,75,.05); }
.regime-shell__eyebrow{
  display:block; margin-bottom:6px; font-family:var(--font-display); font-size:9px;
  font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text);
}
.regime-shell__list{ margin:0; padding-left:17px; display:flex; flex-direction:column; gap:4px; }
.regime-shell__list li{ padding-left:1px; font-size:10.5px; line-height:1.42; color:var(--text-dim); overflow-wrap:anywhere; }
.regime-shell__truth{
  margin:11px 0 0; padding:9px 10px; border-left:2px solid var(--text-faint);
  font-size:10px; line-height:1.45; color:var(--text-faint); background:var(--surface-hover);
}
.regime-migrated-output{ margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.regime-migrated-output > .view-head{ margin-top:0; }

/* Selector glass: foco central tipo Action Button, sin chips. */
.sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.setup-analysis-card{ position:relative; padding-top:1px; }
.regime-entry{
  position:relative; isolation:isolate; overflow:hidden; margin:0 0 9px; padding:9px 8px 7px;
  border:1px solid rgba(102,184,192,.19); border-radius:15px;
  background:linear-gradient(145deg, rgba(242,244,237,.105), rgba(38,85,96,.075) 48%, rgba(7,28,34,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(7,28,34,.16), 0 16px 38px -26px rgba(3,25,31,.72);
  -webkit-backdrop-filter:blur(24px) saturate(145%); backdrop-filter:blur(24px) saturate(145%);
}
.regime-entry::before{
  content:""; position:absolute; z-index:-1; width:190px; height:120px; right:-58px; top:-68px;
  border-radius:50%; background:radial-gradient(circle, rgba(43,184,212,.20), rgba(14,131,145,.05) 48%, transparent 72%);
  filter:blur(5px); pointer-events:none;
}
.analysis-hero{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; padding:0 2px 5px; }
.analysis-hero__copy{ min-width:0; }
.analysis-hero__eyebrow{
  display:block; margin-bottom:2px; font-family:var(--font-display); font-size:7px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--teal-bright);
}
.analysis-hero__title{
  max-width:100%; margin:0; font-family:var(--font-brand); font-size:clamp(15px, 4.4vw, 18px);
  font-weight:600; letter-spacing:-.03em; line-height:1.02; color:var(--text);
  overflow-wrap:anywhere; word-break:normal; text-wrap:balance;
}
.analysis-hero__caption{ display:none; }
.regime-entry__position{
  display:inline-grid; place-items:center; min-width:39px; height:20px; padding:0 6px;
  border:1px solid rgba(102,184,192,.18); border-radius:7px; background:rgba(7,28,34,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08); color:var(--teal-bright);
  font-family:var(--font-display); font-size:7px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.07em;
}
.regime-entry__heading{ display:none; }
.analysis-roulette{ position:relative; display:grid; grid-template-columns:21px minmax(0,1fr) 21px; align-items:center; gap:1px; margin:0 -3px; }
.analysis-roulette__arrow{
  position:relative; z-index:4; width:21px; height:29px; display:grid; place-items:center; padding:0;
  border:1px solid rgba(102,184,192,.13); border-radius:8px; background:rgba(7,28,34,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06); color:var(--text-faint); cursor:pointer;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:color var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.analysis-roulette__arrow:hover{ color:var(--cyan-bright); border-color:rgba(43,184,212,.3); background:rgba(14,131,145,.15); transform:translateY(-1px); }
.analysis-roulette__arrow:active{ transform:scale(.92); }
.analysis-roulette__arrow:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.analysis-roulette__arrow svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.analysis-strip{
  display:flex; gap:7px; width:100%; overflow-x:auto; overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:calc(50% - 46px); scrollbar-width:none;
  padding:5px calc(50% - 46px) 6px; -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.analysis-strip::-webkit-scrollbar{ display:none; }
.analysis-tab{
  --roulette-accent:var(--cyan); --roulette-state:var(--teal-bright);
  position:relative; flex:0 0 92px; width:92px; min-width:92px; height:44px;
  display:grid; grid-template-columns:23px minmax(0,1fr); align-items:center; gap:6px; padding:6px;
  border:1px solid rgba(102,184,192,.13); border-radius:11px;
  background:linear-gradient(145deg, rgba(242,244,237,.075), rgba(7,28,34,.12)); color:var(--text);
  text-align:left; cursor:pointer; scroll-snap-align:center; opacity:.42; transform:scale(.91);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075), 0 8px 18px -16px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(16px) saturate(125%); backdrop-filter:blur(16px) saturate(125%);
  transition:opacity 280ms var(--ease-soft), transform 340ms var(--ease-soft), border-color 280ms, background 280ms, box-shadow 340ms, filter 280ms;
}
.analysis-tab--vivo{ --roulette-accent:#29b4c3; --roulette-state:#55c4cc; }
.analysis-tab--parcial{ --roulette-accent:#d6a64b; --roulette-state:#e2b85f; }
.analysis-tab--por_construir{ --roulette-accent:#60777d; --roulette-state:var(--text-faint); }
.analysis-tab.is-near{ opacity:.68; transform:scale(.96); }
.analysis-tab:hover{ opacity:.88; transform:translateY(-1px) scale(.98); border-color:rgba(102,184,192,.27); }
.analysis-tab.is-active{
  opacity:1; transform:translateY(-2px) scale(1.045); z-index:3;
  border-color:color-mix(in srgb, var(--roulette-accent) 62%, transparent);
  background:linear-gradient(145deg, color-mix(in srgb, var(--roulette-accent) 24%, rgba(242,244,237,.08)), rgba(7,28,34,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.19), 0 0 0 1px color-mix(in srgb, var(--roulette-accent) 12%, transparent), 0 8px 24px -9px color-mix(in srgb, var(--roulette-accent) 50%, transparent);
}
.analysis-tab.is-active::before{
  content:""; position:absolute; left:8px; right:8px; top:0; height:1px; border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
}
.analysis-tab:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.analysis-tab__glyph{
  width:23px; height:23px; display:grid; place-items:center; border:1px solid rgba(102,184,192,.14);
  border-radius:7px; background:rgba(7,28,34,.18); color:var(--teal-bright);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07); font-family:var(--font-display); font-size:7px; font-weight:750; letter-spacing:.04em;
  transition:background 300ms, color 300ms, box-shadow 340ms, transform 340ms;
}
.analysis-tab.is-active .analysis-tab__glyph{
  background:linear-gradient(145deg, color-mix(in srgb, var(--roulette-accent) 88%, white 6%), color-mix(in srgb, var(--roulette-accent) 62%, #07323a));
  border-color:rgba(255,255,255,.24); color:#f4ffff; transform:scale(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 0 18px color-mix(in srgb, var(--roulette-accent) 46%, transparent);
}
.analysis-tab__copy{ display:flex; min-width:0; flex-direction:column; gap:3px; }
.analysis-tab__name{
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-brand); font-size:8.5px; font-weight:620; line-height:1; letter-spacing:-.01em;
}
.analysis-tab__state{
  display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; color:var(--roulette-state);
  font-family:var(--font-display); font-size:5.5px; font-weight:700; line-height:1; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.analysis-tab__state i{ width:3px; height:3px; flex:0 0 3px; border-radius:50%; background:currentColor; box-shadow:0 0 0 2px color-mix(in srgb, currentColor 13%, transparent); }
.analysis-dots{ display:flex; justify-content:center; align-items:center; gap:2px; min-height:8px; margin:-1px 0 0; }
.analysis-dots button{ width:8px; height:8px; display:grid; place-items:center; padding:0; border:0; background:transparent; cursor:pointer; }
.analysis-dots button span{ width:3px; height:3px; border-radius:999px; background:var(--text-faint); transition:width 260ms var(--ease-soft), background 260ms, box-shadow 260ms; }
.analysis-dots button.is-active span{ width:7px; background:var(--cyan-bright); box-shadow:0 0 7px rgba(43,184,212,.55); }
.analysis-dots button:focus-visible{ outline:1px solid var(--cyan); outline-offset:1px; border-radius:4px; }
.regime-entry__summary{ margin:3px 2px 0; padding:5px 1px 0; border-top:1px solid rgba(102,184,192,.12); }
.regime-entry__summary .regime-entry__meta{ gap:5px; flex-wrap:nowrap; }
.regime-entry__summary .regime-status{ min-height:16px; padding:1px 5px; font-size:7px; border-radius:6px; }
.regime-entry__summary .regime-citation{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:7.5px; }
.regime-entry__summary p{ margin:7px 0 0; font-size:9.5px; line-height:1.42; color:var(--text-dim); }
.regime-entry__summary details{ margin-top:3px; }
.regime-entry__summary summary{ cursor:pointer; width:max-content; max-width:100%; font-size:8.5px; font-weight:600; color:var(--teal-bright); }
.regime-entry__summary .regime-shell__list{ margin-top:6px; }
.regime-entry__detail{ margin-top:8px; }
.regime-entry__detail > b{ display:block; font-family:var(--font-display); font-size:8px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.regime-entry__summary--parcial .regime-status{ color:#d6a64b; border-color:rgba(214,166,75,.42); background:rgba(214,166,75,.1); }
.regime-entry__summary--por_construir .regime-status{ color:var(--text-dim); border-color:var(--border-strong); background:var(--surface-hover); }
html.theme-light .regime-entry{
  border-color:rgba(11,79,90,.15);
  background:linear-gradient(145deg, rgba(255,255,255,.72), rgba(219,237,236,.46) 52%, rgba(198,222,220,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 38px -28px rgba(7,28,34,.42);
}
html.theme-light .regime-entry__position,
html.theme-light .analysis-roulette__arrow{ background:rgba(255,255,255,.42); border-color:rgba(11,79,90,.12); }
html.theme-light .analysis-tab{
  border-color:rgba(11,79,90,.12); background:linear-gradient(145deg, rgba(255,255,255,.62), rgba(11,79,90,.055));
  color:#16383d; box-shadow:inset 0 1px 0 rgba(255,255,255,.86), 0 8px 18px -16px rgba(7,28,34,.45);
}
html.theme-light .analysis-tab.is-active{
  border-color:color-mix(in srgb, var(--roulette-accent) 52%, rgba(11,79,90,.12));
  background:linear-gradient(145deg, color-mix(in srgb, var(--roulette-accent) 15%, white), rgba(255,255,255,.72));
}
html.theme-light .analysis-tab__glyph{ background:rgba(11,79,90,.06); color:#0b7180; }
@media (prefers-reduced-motion:reduce){
  .analysis-tab, .analysis-tab__glyph, .analysis-dots button span, .analysis-roulette__arrow{ transition:none; }
}
.regime-influence-note{
  margin:0 0 9px; padding:8px 9px; border-left:2px solid var(--teal); background:var(--teal-soft);
  font-size:9.5px; line-height:1.42; color:var(--text-dim);
}
.regime-action-note{
  margin:2px 0 12px; padding:11px 12px; border:1px dashed var(--border-strong);
  border-radius:var(--radius-md); background:var(--surface); color:var(--text-dim);
}
.regime-action-note b{ display:block; margin-bottom:4px; font-family:var(--font-display); font-size:11px; color:var(--text); }
.regime-action-note span{ display:block; font-size:10px; line-height:1.45; }
#workflow-steps[hidden], #pf-save-predio[hidden]{ display:none !important; }

/* ── Topbar: el título trunca con elipsis, pero "Nacional · powered by aosenuma" siempre visible ── */
.aosenuma-topbar__title-text{ display:flex; align-items:center; min-width:0; }
.aosenuma-topbar__title-strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex-shrink:1; }
.aosenuma-topbar__tail{ display:inline-flex; align-items:center; flex-shrink:0; white-space:nowrap; }
/* título en dos líneas: marca del sistema + componente discreto debajo */
.aosenuma-topbar__title-block{ flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; }
.aosenuma-topbar__component{ font-size:9.5px; line-height:1.15; color:rgba(242,244,237,0.5); letter-spacing:0.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ── Antidesborde: nada se sale del panel estrecho (392px) ── */
.kpi{ overflow:hidden; }
.kpi-val{ font-size:23px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kpi-lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* doc-cards: el subtítulo es nowrap → la tarjeta (grid item) DEBE poder encogerse
   a su columna 1fr, si no el grid 2-col desborda el panel estrecho */
.doc-card{ min-width:0; overflow:hidden; }
.doc-tx, .deliv-pack-tx, .deliv-tx{ min-width:0; }
.doc-tx b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* el subtítulo ENVUELVE (info completa, sin recorte) → el ancho mínimo de la
   tarjeta baja a la palabra más larga y el grid 2-col cabe en el panel */
.doc-tx small{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
.doc-badge{ z-index:1; }
.misse-fs summary{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.res-area-size{ flex-shrink:0; white-space:nowrap; }
.results-head{ min-width:0; }
.results-head .section-title{ min-width:0; }

/* ═══════════════════════════════════════════════════════════════════════════
   VISTA DATOS · descargas con peso (tarjetas grandes, no chips)
   Cada formato con identidad de color de marca: Word=teal, Excel=lima, Geo=cyan.
   ═══════════════════════════════════════════════════════════════════════════ */
.dl-list-label{ display:block; font-family:var(--font-display); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); margin:18px 0 9px; }
.dl-list{ display:flex; flex-direction:column; gap:8px; }
/* Grupos de exportables por análisis (tab Datos) */
.dl-group{ margin-bottom:20px; }
.dl-group:last-child{ margin-bottom:0; }
.dl-group-h{ display:block; font-family:var(--font-display); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-dim); margin:0 0 9px; padding-bottom:7px; border-bottom:1px solid var(--border); }
.dl-group > .deliv-pack{ margin-bottom:0; }
/* Bloque de exportables inline dentro de una vista de análisis */
.export-block{ border-top:1px solid var(--border); padding-top:14px; }
.dl-card{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 13px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  cursor:pointer; color:var(--text); font-family:var(--font-sans);
  transition:transform var(--motion-fast) var(--ease-soft), border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.dl-card:hover{ border-color:var(--teal); background:var(--surface-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.dl-card:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.dl-card.is-loading{ opacity:0.6; cursor:progress; transform:none; }
.dl-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; }
.dl-ic svg{ width:20px; height:20px; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* Exportable golden en estado por_construir/no_disponible: se declara, NO es botón. */
.dl-card--soon{ cursor:default; opacity:0.72; }
.dl-card--soon:hover{ border-color:var(--border); background:var(--surface); transform:none; box-shadow:none; }
.dl-soon-tag{ flex-shrink:0; font-family:var(--font-display); font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold); background:rgba(201,169,110,0.16); border-radius:4px; padding:2px 7px; white-space:nowrap; }
.dl-ic-word{ background:var(--teal-soft); } .dl-ic-word svg{ stroke:var(--teal); }
.dl-ic-excel{ background:rgba(126,155,51,0.16); } .dl-ic-excel svg{ stroke:var(--lime); }
.dl-ic-geo{ background:var(--cyan-soft); } .dl-ic-geo svg{ stroke:var(--cyan); }
.dl-ic-kmz{ background:var(--teal-soft); } .dl-ic-kmz svg{ stroke:var(--teal-bright); fill:none; }
.dl-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.dl-tx b{ font-family:var(--font-brand); font-weight:600; font-size:14px; color:var(--text); line-height:1.15; }
.dl-tx small{ font-size:10.5px; color:var(--text-dim); line-height:1.3; }
.dl-go{ width:17px; height:17px; flex-shrink:0; stroke:var(--teal-bright); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:0.65; transition:transform var(--motion-fast) var(--ease-soft), opacity var(--motion-fast); }
.dl-card:hover .dl-go{ opacity:1; transform:translateY(2px); }
/* paquete completo: realce mayor en su nueva casa (Datos) */
.panel__view[data-v="datos"] .deliv-pack{ margin:2px 0 0; padding:14px 15px; }
.panel__view[data-v="datos"] .deliv-pack-tx b{ font-size:14.5px; }

/* ═══ Setup: pasos con círculo numerado lima (motivo del deck aosenuma) ═══ */
.step-num{
  width:23px; height:23px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center; letter-spacing:0;
  font-family:var(--font-brand); font-size:11.5px; font-weight:700; line-height:1;
  color:var(--cta-text); background:var(--cta);
  box-shadow:0 2px 7px -3px var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,0.28);
}
.section-label.step-head{ font-size:11px; color:var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   PASE TÉCNICO · densidad científica/instrumental (menos "infantil")
   Tipos y tarjetas más chicos · radios menos burbuja · números tabulares.
   Bloque final → gana por orden de cascada.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --radius-sm:6px; --radius-md:8px; --radius-card:10px; --radius-lg:13px; }

/* Datos = números técnicos: Inter Tight tabular (no display grande) */
.kpi-val, .infra-stat b, .risk-pm, .bl-val, .ranked-val{
  font-family:var(--font-display) !important; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
}
.res-area-size, .acui-bal, .preview-areas b, .deliv-pack-tx b, .dl-tx, .doc-tx,
.ai-input input, .kpi-val, .misse-row input, .field input{ font-variant-numeric:tabular-nums; }

/* Encabezados compactos */
.section-title{ font-size:15.5px; letter-spacing:-0.015em; line-height:1.18; }
.view-title{ font-size:13.5px; line-height:1.2; }
.view-sub{ font-size:10px; line-height:1.4; margin-top:3px; }
.view-head{ margin:0 0 11px; }
.sidebar-hint{ font-size:11px; line-height:1.5; }
.section-label{ font-size:9px; letter-spacing:0.1em; margin-bottom:8px; }
.res-block{ margin-top:11px; padding-top:9px; }

/* Pasos: marca técnica chica y plana (no globo lima) */
.step-num{ width:17px; height:17px; font-size:9.5px; border-radius:4px; box-shadow:none;
  font-family:var(--font-display); font-weight:700; }
.section-label.step-head{ font-size:10px; gap:7px; }

/* ── Actividad económica (DENUE) ── */
.econ-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:11px; }
.econ-total{ font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.econ-total-lbl{ font-size:9.5px; color:var(--text-dim); }

/* KPIs compactos + número instrumental */
.kpi-grid{ gap:6px; }
.kpi-val{ font-size:17px; font-weight:600; }
.kpi-lbl{ font-size:8px; }

/* doc-cards compactas */
.doc-grid{ gap:6px; }
.doc-card{ padding:8px 9px; gap:8px; }
.doc-ic{ width:25px; height:25px; border-radius:6px; }
.doc-ic svg{ width:14px; height:14px; }
.doc-tx b{ font-size:11.5px; }
.doc-tx small{ font-size:9px; }
.doc-reco{ padding:7px 9px; font-size:10.5px; }
.doc-fill{ padding:8px 10px; font-size:10px; }

/* dl-cards (Datos) compactas */
.dl-list{ gap:6px; }
.dl-card{ padding:8px 10px; gap:9px; }
.dl-ic{ width:29px; height:29px; border-radius:7px; }
.dl-ic svg{ width:16px; height:16px; }
.dl-tx b{ font-size:11.5px; }
.dl-tx small{ font-size:9.5px; }
.dl-list-label{ font-size:8.5px; margin:14px 0 8px; }
.deliv-pack{ padding:10px 12px; gap:10px; }
.deliv-pack-ic{ width:31px; height:31px; border-radius:8px; }
.deliv-pack-ic svg{ width:16px; height:16px; }
.deliv-pack-tx b{ font-size:12px; }
.panel__view[data-v="datos"] .deliv-pack{ padding:11px 12px; }
.panel__view[data-v="datos"] .deliv-pack-tx b{ font-size:12px; }

/* Botones primarios menos voluminosos */
.btn-primary{ padding:10px 14px; font-size:12px; letter-spacing:0.01em; }

/* Tablero: filas de datos más densas */
.risk-pm{ font-size:14px; }
.risk-name{ font-size:11px; line-height:1.3; }
.risk-dim{ font-size:9px; }
.chart-title{ font-size:9.5px; margin-bottom:8px; }
.bl-name, .ranked-name{ font-size:10.5px; }
.bl-val, .ranked-val{ font-size:9.5px; }
.bl-sub{ font-size:8.5px; }
.infra-stat b{ font-size:15px; }
.infra-stat span{ font-size:9px; }
.category-header .section-label{ font-size:10px; }

/* MISSE / inputs más técnicos */
.misse-fs summary{ font-size:11px; }
.misse-form input, .misse-form textarea, .misse-form select,
.field input, .field select, .ai-input input{ font-size:12px; }
.field label, .ai-input label{ font-size:9px; }

/* Badge QA — auditoría de consistencia del job (qa_report.json) */
.qa-badge { margin-left: 4px; padding: 2px 8px; border-radius: 4px; font-size: 10px;
  font-weight: 700; letter-spacing: 0.3px; cursor: help; white-space: nowrap; }
.qa-badge.qa-ok { background: rgba(77,182,172,0.16); color: var(--accent, #4db6ac);
  border: 1px solid rgba(77,182,172,0.45); }
.qa-badge.qa-warn { background: rgba(255,167,38,0.14); color: #e6952e;
  border: 1px solid rgba(255,167,38,0.5); }

/* ── Panel de análisis estilo nbs (dash-card) · Incremento 1 ── */
.dash__body{display:flex;flex-direction:column;gap:10px}
.dash-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;min-width:0;animation:dashCardIn .3s ease}
.dash-card__h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface-hover)}
.dash-card__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-dim)}
.dash-card__t{font-family:var(--font-display);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-vm{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--text-dim);background:transparent;border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 9px;cursor:pointer;white-space:nowrap;transition:.12s}
.dash-vm:hover{color:var(--cream);border-color:var(--text-dim)}
.dash-vm svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-card__b{padding:11px 12px}
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:6px}
.dash-kpis:empty{display:none}
.dash-kpis .dk{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-width:0}
.dash-kpis .dk span{display:block;font-size:8.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-kpis .dk b{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--cream);margin-top:3px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-kpis .dk i{display:block;font-style:normal;font-size:9px;color:var(--text-faint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* reservado ≠ cero: la celda indígena reservada se lee como bandera (terra),
   nunca como un valor neutro. El texto «reservado» baja de tamaño para caber. */
.dash-kpis .dk.dk-reservado b{font-size:12px;color:var(--terra);letter-spacing:0}
.dash-verdict{display:flex;gap:9px;align-items:flex-start;padding:10px 11px;border-radius:var(--radius-md);border-left:3px solid var(--text-dim);background:var(--surface);margin-top:8px}
.dash-verdict.hidden{display:none}
.dash-verdict .dv-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex:none;background:var(--text-dim)}
.dash-verdict .dv-t{font-size:12px;font-weight:600;color:var(--cream);line-height:1.3}
.dash-verdict .dv-d{font-size:10.5px;color:var(--text-mid);margin-top:2px;line-height:1.4}
.dash-verdict .dv-badge{font-size:8.5px;font-weight:700;letter-spacing:.05em;padding:1px 7px;border-radius:var(--radius-pill);background:var(--text-dim);color:#101214;margin-left:5px;vertical-align:1px}
.dash-verdict.v-alto{border-left-color:var(--terra,#c97f6b);background:rgba(201,127,107,.06)}
.dash-verdict.v-alto .dv-dot,.dash-verdict.v-alto .dv-badge{background:var(--terra,#c97f6b)}
.dash-verdict.v-alto .dv-badge{color:#fff}
.dash-verdict.v-medio{border-left-color:var(--gold,#bfa477);background:rgba(191,164,119,.05)}
.dash-verdict.v-medio .dv-dot,.dash-verdict.v-medio .dv-badge{background:var(--gold,#bfa477)}
.dash-verdict.v-bajo{border-left-color:var(--lime,#86ad99);background:rgba(134,173,153,.05)}
.dash-verdict.v-bajo .dv-dot,.dash-verdict.v-bajo .dv-badge{background:var(--lime,#86ad99)}
@keyframes dashCardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Tablero ancho + score-cards estilo Arc · Incremento 2 ── */
body.dash-wide #panel{width:640px}
/* El handle de retracción se ancla al BORDE DERECHO del panel ancho, no a un px
   absoluto. El panel ancho vive en left:calc(--mb-total + 12px) con width:640px,
   así que su borde derecho es calc(--mb-total + 652px); el botón (32px) se centra
   sobre él restando 16px → calc(--mb-total + 636px). El 624px viejo era absoluto:
   ignoraba --mb-total (con la barra maestra expandida a 252px la flecha caía ~264px
   DENTRO del panel, encimada sobre los exportables golden). */
body.dash-wide #panel-collapse{left:calc(var(--mb-total, 48px) + 636px)}
.tablero-scores{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:12px;margin-bottom:18px}
.score{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:13px 14px 11px;min-width:0}
.score.score--action{width:100%;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.score.score--action:hover{transform:translateY(-1px);border-color:var(--teal)}
.score.score--action:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
.score.score--action.active{border-color:var(--teal-bright);box-shadow:0 0 0 1px rgba(74,156,165,.24),0 8px 20px rgba(0,0,0,.12)}
.score h4{margin:0;font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--cream);letter-spacing:-.01em;line-height:1.25}
.score h4 span{float:right;color:var(--text-faint);font-size:14px}
.score .leg{display:flex;gap:12px;margin:7px 0 9px;flex-wrap:wrap}
.score .leg span{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--text-dim)}
.score .leg i{width:12px;height:3px;border-radius:2px}
.score .big{display:flex;align-items:baseline;gap:7px}
.score .big b{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
/* «reservado» (texto, no cantidad): tamaño menor y color de bandera para que no
   se confunda con un conteo y no reviente el ancho de la tarjeta. */
.score .big.big-reservado b{font-size:16px;color:var(--terra);letter-spacing:-.01em}
.score .big u{font-size:13px;color:var(--text-faint);text-decoration:none;font-weight:500}
.score .spark{width:100%;height:60px;margin-top:8px}
.score .sedge{font-size:9px;font-weight:600;font-variant-numeric:tabular-nums}
.score .cap{font-size:9.5px;color:var(--text-dim);margin-top:7px;line-height:1.4}
.score__map{display:inline-flex;margin-top:8px;color:var(--teal-bright);font-size:9px;font-weight:700;letter-spacing:.035em;text-transform:uppercase}

/* ══ Flujo de configuración y responsive transversal · UX 2026 ═══════════ */
.workflow-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:14px 0 2px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  list-style:none;
}
.workflow-steps li {
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 9px;
  color:var(--text-faint);
  background:var(--surface);
  border-right:1px solid var(--border);
  font-family:var(--font-display);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.workflow-steps li:last-child { border-right:0; }
.workflow-steps span {
  width:15px;
  height:15px;
  flex:none;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  border-radius:4px;
  font-size:8px;
}
.workflow-steps b { min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:650; }
.workflow-steps .is-current { color:var(--teal-bright); background:var(--teal-soft); }
.workflow-steps .is-done { color:var(--text-mid); }
.workflow-steps .is-done span { color:var(--bg-deep); background:var(--teal-bright); border-color:var(--teal-bright); }

.step-requirement {
  margin:-1px 0 10px 24px;
  color:var(--text-dim);
  font-size:10.5px;
  line-height:1.45;
}

.progress-persist {
  margin:12px 0 0;
  padding-top:11px;
  border-top:1px solid var(--border);
  color:var(--text-faint);
  font-size:10.5px;
  line-height:1.45;
}

html.theme-light .progress-persist { color:rgba(18,42,46,.52); border-color:rgba(18,42,46,.1); }

@media (max-width:768px) {
  /* El panel principal se convierte en hoja inferior: conserva mapa visible y
     controles táctiles sin comprimir el flujo en una columna de 312 px. */
  #panel,
  body.dash-wide #panel {
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:min(62vh,620px);
    padding:18px 18px 30px;
    border:1px solid var(--border-strong);
    border-bottom:0;
    border-radius:18px 18px 0 0;
    transform:none;
    transition:transform .26s var(--ease-soft);
  }
  #panel.is-collapsed { transform:translateY(calc(100% + 8px)); }
  #panel-collapse,
  body.dash-wide #panel-collapse {
    top:auto;
    left:calc(50% - 16px);
    bottom:calc(min(62vh,620px) - 16px);
    transform:rotate(-90deg);
  }
  body.panel-collapsed #panel-expand {
    top:auto;
    left:14px;
    bottom:14px;
    transform:rotate(-90deg);
  }
  #layers-panel {
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:min(54vh,540px);
    border:1px solid var(--border-strong);
    border-bottom:0;
    border-radius:18px 18px 0 0;
    transform:none;
    z-index:58;
  }
  #layers-panel.is-collapsed { transform:translateY(calc(100% + 8px)); }
  #layers-collapse {
    top:auto;
    right:14px;
    bottom:calc(min(54vh,540px) - 16px);
    transform:rotate(-90deg);
  }
  body.layers-collapsed #layers-expand {
    top:auto;
    right:14px;
    bottom:14px;
    transform:rotate(-90deg);
  }
  #info-panel { left:12px; right:12px; bottom:76px; width:auto; max-height:38vh; }
  .mapboxgl-ctrl-top-left { left:8px; }
  .mapboxgl-ctrl-top-right { right:8px; top:54px; }
  .mapboxgl-ctrl-bottom-left { left:8px; bottom:calc(min(62vh,620px) + 8px); }
  .mapboxgl-ctrl-bottom-right { right:8px; bottom:calc(min(62vh,620px) + 8px); }
  .ai-inputs { gap:6px; }
  .mode-tab { min-height:42px; }
}

@media (max-width:430px) {
  #header.aosenuma-topbar { padding-left:52px; padding-right:12px; }
  #header .aosenuma-topbar__component,
  #header .aosenuma-topbar__divider,
  #header .aosenuma-topbar__title-sep,
  #header .aosenuma-topbar__powered,
  #header .aosenuma-topbar__home,
  #header .aosenuma-topbar__live { display:none; }
  #header .aosenuma-topbar__title-block { gap:0; }
  #header .aosenuma-topbar__title-text { gap:6px; }
  #header .aosenuma-topbar__title-strong { font-size:10.5px; }
  #header .aosenuma-topbar__tail { gap:0; font-size:10.5px; }
  #panel, body.dash-wide #panel { height:66vh; padding-inline:14px; }
  #panel-collapse, body.dash-wide #panel-collapse { bottom:calc(66vh - 16px); }
  .workflow-steps li { justify-content:center; padding-inline:6px; }
  .workflow-steps b { display:none; }
  .mode-tabs { grid-template-columns:repeat(2,1fr); }
  .field-row { flex-direction:column; gap:0; }
  .progress-inner { width:calc(100vw - 28px); padding:20px 19px 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PULIDO POST-ANÁLISIS (v53)
   Jerarquía del diagnóstico (sitio→ámbito→indicadores→alertas→descargas),
   capas legibles sin truncado confuso, descargas escaneables, micro-
   interacciones consistentes y contraste correcto en claro/oscuro.
   Bloque final → gana por orden de cascada sin tocar la mecánica.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Cabecera de resultados: el sitio manda ─────────────────────────── */
.results-head{ flex-wrap:wrap; align-items:center; gap:4px 10px; }
.results-head .section-title{
  flex:1 1 100%; min-width:0; white-space:normal;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere; line-height:1.22; font-size:16.5px;
}
#new-analysis{
  flex:none; margin-left:0; text-decoration:none;
  font-family:var(--font-display); font-size:10.5px; font-weight:600;
  color:var(--teal-bright); background:var(--teal-soft);
  border:1px solid rgba(74,156,165,0.35); border-radius:var(--radius-pill);
  padding:4px 11px; transition:background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
#new-analysis:hover{ background:rgba(74,156,165,0.22); border-color:var(--teal-bright); }
#new-analysis:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.results-head .pf-btn{ flex:none; margin-left:auto; padding:5px 11px; font-size:11.5px; border-radius:var(--radius-pill); }
.results-head .pf-btn svg{ width:13px; height:13px; }
.res-meta{ margin:8px 0 2px; row-gap:5px; }

/* Chip QA — tokens de marca en ambos temas (antes: colores fuera de paleta) */
.qa-badge{
  font-family:var(--font-display); font-size:9.5px; letter-spacing:0.05em;
  text-transform:uppercase; border-radius:var(--radius-pill); padding:2.5px 9px;
}
.qa-badge.qa-ok{ background:var(--teal-soft); color:var(--teal-bright); border:1px solid rgba(74,156,165,0.4); }
.qa-badge.qa-warn{ background:rgba(201,169,110,0.14); color:var(--gold); border:1px solid rgba(201,169,110,0.5); }

/* Bandera CPLI: terracota con contraste real en ambos temas */
.cpli-flag{ display:flex; align-items:flex-start; gap:8px; margin-top:11px; font-weight:600; }
html.theme-light .cpli-flag{ background:rgba(181,101,86,0.10); border-color:rgba(155,73,55,0.42); color:#8a4030; }
html.theme-light .cpli-flag.ok{ background:rgba(111,143,44,0.10); border-color:rgba(111,143,44,0.42); color:#53691e; }
html.theme-light .cpli-flag.nd{ background:rgba(180,120,10,0.10); border-color:rgba(160,110,10,0.42); color:#7a5a08; }

/* ── 2 · Indicadores: etiquetas completas (2 líneas), sin recorte a ciegas ── */
.kpi-lbl{
  white-space:normal; text-overflow:clip;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Alertas clave: aire entre líneas y etiqueta alineada a la primera línea */
.exec-summary{ gap:9px; }
.exec-line{ grid-template-columns:64px 1fr; }

/* ── 3 · Panel de capas: nombre truncado con title, conteo SIEMPRE visible ── */
.layer-namerow{ display:flex; align-items:center; gap:6px; min-width:0; }
.layer-namerow .layer-name{ flex:1 1 auto; min-width:0; }
.layer-namerow .layer-count{ flex:none; margin-left:0; }
.lgh-count{
  flex:none; font-size:9.5px; color:var(--text-mid); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:1px 8px;
}
/* Relación preset ↔ toggles: nota breve + estado activo con palomita */
.layers-preset-note{ font-size:9.5px; line-height:1.45; color:var(--text-faint); margin:7px 2px 0; }
.map-preset-btn.active::before{ content:"✓"; margin-right:5px; font-weight:800; color:var(--teal-bright); }
html.theme-light .map-preset-btn.active::before{ color:var(--teal); }

/* Acciones de fila visibles también al navegar con teclado (no solo hover) */
.layer-item:focus-within .lr-zoom, .layer-item:focus-within .lr-style{ opacity:1; }

/* ── 4 · Vista Datos: grupos con la misma voz editorial que los kickers ── */
.dl-group-h{
  display:flex; align-items:center; gap:9px; color:var(--teal);
  border-bottom:none; padding-bottom:0; letter-spacing:0.12em;
}
.dl-group-h::after{ content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg, var(--teal-soft) 0%, transparent 100%); }
/* subtítulos completos: envuelven en vez de recortarse */
.dl-tx small, .deliv-pack-tx small{ white-space:normal; overflow:visible; text-overflow:clip; }

/* ── 5 · Micro-interacciones: foco visible consistente en todo el visor ── */
.layers-quick-btn:focus-visible, .map-preset-btn:focus-visible,
.layer-group-head:focus-visible, .lr-zoom:focus-visible, .lr-style:focus-visible,
.aoi-block-head:focus-visible, .dash-vm:focus-visible,
.aoi-restore:focus-visible, .aoi-apply:focus-visible,
.history-item:focus-visible, .ind-pueblo:focus-visible, .ind-pill:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}

/* ── 6 · Contraste terracota/gold en tema claro (chips de riesgo) ── */
html.theme-light .risk-chip.crit{ color:#9b3d2e; border-color:rgba(155,61,46,0.45); }
html.theme-light .risk-cat.crit{ color:#9b3d2e; }
html.theme-light .ai-pill[data-ai="AN"].active{ color:#9b3d2e; box-shadow:inset 0 0 0 1px rgba(155,61,46,0.5); }
html.theme-light .toast.err{ color:#8a4030; }
html.theme-light .ind-cpli.on{ color:#8a4030; }
html.theme-light .ind-cpli.nd{ background:rgba(180,120,10,0.09); border-color:rgba(160,110,10,0.40); color:#7a5a08; }

/* ── 6 bis · Cifra de la gráfica USV: el color es de la paleta categórica del
   mapa (usvCat), así que sobre papel cream caía a 1.28:1 en «Agricultura».
   No se cambia la paleta — el mapa y la barra de la fila la comparten y romper
   esa correspondencia sería cambiar el dato. Se oscurece SOLO el numeral,
   conservando el tono: 40% de color sobre tinta da ≥5.06:1 en las 12 clases. ── */
html.theme-light .lb-usv-row__values em{
  color: color-mix(in srgb, var(--lb-usv-color, var(--lime)) 40%, #101619);
}

/* ── 7 · Nunca scroll horizontal: todo vive dentro de su panel ── */
#panel, #layers-panel{ overflow-x:hidden; }
.layers-scroll{ overflow-x:hidden; }

/* ── 8 · Móvil: cabecera de resultados compacta y sheets sin desborde ── */
@media (max-width:768px){
  .results-head .pf-btn{ margin-left:0; }
  .results-head .section-title{ font-size:15px; }
}

/* ── 9 · Reduced motion: apaga también drawers/vistas/overlays restantes ── */
@media (prefers-reduced-motion: reduce){
  #panel, #layers-panel, .panel-toggle, #info-panel,
  .mapboxgl-ctrl-top-left, .mapboxgl-ctrl-top-right,
  .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right{ transition:none !important; }
  #results-view, #results-view > .panel__view.active, .dash-card,
  .theme-ov, .theme-card, .fname-overlay, .fname-modal, .toast, #progress{ animation:none !important; }
  .category-content, .layer-group-body{ transition:none !important; }
}

/* ── Vista MISSE · diseño golden (misse-golden.js) ─────────────────────── */
.mg-selector { margin: 4px 0 10px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); }
.mg-selector:empty { display: none; }
.mg-selector__tx { margin: 6px 0 0; font-size: 12px; color: var(--text); line-height: 1.45; }
.mg-selector__traza { margin-top: 6px; }
.mg-selector__traza summary { cursor: pointer; font-size: 11px; color: var(--text-dim); }
.mg-selector__traza ul { margin: 6px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--text-dim); }
.mg-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.mg-chip--ok { background: color-mix(in srgb, var(--teal) 18%, transparent); color: var(--teal-bright); border: 1px solid var(--teal); }
.mg-chip--exento { background: color-mix(in srgb, var(--lime, #c0ca33) 16%, transparent); color: var(--lime, #c0ca33); border: 1px solid var(--lime, #c0ca33); }
.mg-chip--bloq { background: color-mix(in srgb, var(--terra, #e07a5f) 16%, transparent); color: var(--terra, #e07a5f); border: 1px solid var(--terra, #e07a5f); }
.mg-chip--hueco, .mg-chip--pend { background: color-mix(in srgb, #d4a017 16%, transparent); color: #d4a017; border: 1px solid #d4a017; }
.mg-nota { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin: 6px 0 0; }
.mg-paquete { margin-top: 14px; }
.mg-gcard { position: relative; }
.mg-gtag { flex: 0 0 auto; font-family: var(--font-display); font-size: 10px; font-weight: 800; color: var(--teal-bright); border: 1px solid var(--teal); border-radius: var(--radius-sm); padding: 3px 6px; margin-right: 8px; }
.mg-procedencia { margin-top: 14px; }
.mg-version { font-size: 11.5px; margin: 4px 0 8px; }
.mg-agg { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.mg-agg__i { font-size: 11.5px; padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-deep); color: var(--text-dim); }
.mg-agg__i b { color: var(--text); }
.mg-ptable { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 6px; }
.mg-ptable th { text-align: left; font-family: var(--font-display); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); padding: 5px 6px; border-bottom: 1px solid var(--border-strong); }
.mg-ptable td { padding: 5px 6px; border-bottom: 1px solid var(--border, rgba(255,255,255,.06)); vertical-align: top; }

/* ── Procedencia compartida del chasis (regimen-procedencia.js) ──────────────
   Clases que emiten pintaCampo (pg-val/pg-nd/pg-sd), las etiquetas de clase
   de procedencia (pg-clase--*) y la CPLI tri-estado (mg-cpli--cpli-*). Toda
   vista que herede el bloque de procedencia usa estas reglas; no se copian. */
.mg-cpli { margin: 8px 0; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.4; border: 1px solid var(--border-strong); background: var(--surface); }
.mg-cpli--cpli-nd { border-color: #d4a017; }
.mg-cpli--cpli-si { border-color: var(--terra, #e07a5f); }
.pg-clase { font-family: var(--font-display); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--border-strong); }
.pg-clase--motor { color: var(--teal-bright); border-color: var(--teal); }
.pg-clase--promovente { color: var(--lime, #c0ca33); border-color: var(--lime, #c0ca33); }
.pg-clase--consultor { color: var(--terra, #e07a5f); border-color: var(--terra, #e07a5f); }
.pg-nd { color: #d4a017; font-style: italic; }
.pg-sd { color: var(--text-dim); font-style: italic; }
.pg-val { color: var(--text); }

/* ── §9 del G4 golden · Límites y advertencias (renderLimites, app.js) ───────
   «qué no cubre, qué exige campo, qué no se pudo calcular». No es un descargo
   legal: cierra el diagnóstico distinguiendo una línea base de una MISSE. */
.limites-body { display: flex; flex-direction: column; gap: 12px; }
.lim-sec { display: flex; flex-direction: column; gap: 6px; }
.lim-h { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mid); margin: 0; }
.lim-intro { font-size: 11.5px; line-height: 1.45; color: var(--text-mid); margin: 0; }
.lim-line { font-size: 12px; line-height: 1.45; color: var(--text-mid); margin: 0; display: flex; gap: 7px; align-items: baseline; }
.lim-line b { color: var(--text); font-weight: 600; }
.lim-dot { flex: none; width: 7px; height: 7px; border-radius: 999px; margin-top: 4px; background: var(--text-dim); }
.lim-dot.ok { background: var(--lime, #b4c96f); }
.lim-ok { color: var(--text-mid); }
.lim-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lim-list li { position: relative; padding-left: 13px; font-size: 12px; line-height: 1.45; color: var(--text-mid); }
.lim-list li b { color: var(--text); font-weight: 600; }
.lim-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 999px; background: var(--border-strong); }
.lim-list li.lim-warn::before { background: var(--gold, #d4a017); }
.lim-list li.lim-ok::before { background: var(--lime, #b4c96f); }
.lim-list--cons li { padding-left: 0; }
.lim-list--cons li::before { display: none; }
.lim-list--cons .pg-clase { margin-right: 6px; }
.lim-list--leng li::before { background: var(--teal-bright, #4a9ca5); }
.lim-dof { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); white-space: nowrap; }
.lim-encuadre { font-size: 12px; line-height: 1.5; color: var(--text-mid); margin: 4px 0 0; padding: 10px 12px; border-left: 2px solid var(--teal, #4a9ca5); background: rgba(74, 156, 165, 0.07); border-radius: 0 6px 6px 0; }

/* ── Gobierno entre bloques del setup (regimen-chassis.js) ─────────────────
   Un bloque propio del régimen puede restringir otro (p. ej. el formato MISSE
   restringe qué anillos ofrece el bloque de áreas de influencia). La razón y
   su cita son visibles: una restricción sin fundamento es una arbitrariedad. */
.setup-gobierno {
  display: flex; flex-direction: column; gap: 3px;
  margin: 8px 0 10px; padding: 8px 10px;
  border-left: 2px solid var(--gold, #d4a017);
  background: rgba(212, 160, 23, 0.08);
  border-radius: 0 6px 6px 0;
  font-size: 11px; line-height: 1.45; color: var(--text-mid);
}
.setup-gobierno b { color: var(--text); font-weight: 600; }
.setup-gobierno__cita {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint);
}
.setup-gobierno--run { margin-top: 10px; }

/* Anillo bloqueado por el gobierno: se ve apagado y no se edita. */
.ai-input.is-locked { opacity: 0.45; }
.ai-input.is-locked input { cursor: not-allowed; }
.ai-preset:disabled { opacity: 0.4; cursor: not-allowed; }

/* Bloque propio del régimen dentro del panel de setup. */
.setup-own-block .misse-row { margin-bottom: 8px; }
.setup-own-block .mg-selector { margin-top: 10px; }

/* Eco del formato en la vista de resultados: dice qué gobernó la corrida y
   dónde se decidió — la decisión ya no vive en resultados. */
.mg-formato-eco {
  display: flex; flex-direction: column; gap: 3px;
  margin: 10px 0; padding: 9px 11px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 8px; font-size: 11px; line-height: 1.45; color: var(--text-mid);
}
.mg-formato-eco b { color: var(--text); font-size: 12px; }
.mg-formato-eco small { color: var(--text-faint); font-size: 9.5px; }

/* ── Compuerta de perfil ─────────────────────────────────────────────────────
   Sin nombre y área declarados no se corre un análisis (app/perfil_gate.py).
   El tono es de recordatorio, no de error: quien lo ve no hizo nada mal, solo
   le falta firmar. Por eso ámbar y no rojo — el rojo del resto de la interfaz
   significa "algo se rompió", y esto no está roto. */
.perfil-aviso {
  display: flex; flex-direction: column; gap: 5px;
  margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid rgba(255, 183, 77, 0.38);
  border-left: 3px solid #ffb74d;
  border-radius: 8px;
  background: rgba(255, 183, 77, 0.08);
  font-size: 11px; line-height: 1.45; color: var(--text-mid);
}
.perfil-aviso b { color: var(--text); font-size: 12px; }
.perfil-aviso-cta {
  align-self: flex-start; margin-top: 3px;
  color: #ffb74d; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(255, 183, 77, 0.5);
}
.perfil-aviso-cta:hover { border-bottom-color: #ffb74d; }

/* Se usan las variables de tema REALES (--bg-mid / --text), no un color fijo con
   fallback: `--panel` no existe en esta hoja, así que un fallback oscuro se
   quedaba puesto en tema claro y el diálogo salía con texto oscuro sobre fondo
   oscuro — ilegible justo en el momento en que hay algo que leer.
   `margin:auto` es lo que centra un <dialog> abierto con showModal(). */
.perfil-gate-dlg {
  border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 0; max-width: 420px; width: calc(100% - 32px);
  margin: auto;
  background: var(--bg-mid); color: var(--text);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}
.perfil-gate-dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.perfil-gate-dlg .pg-box { padding: 20px 22px; }
.perfil-gate-dlg h3 { margin: 0 0 8px; font-size: 15px; }
.perfil-gate-dlg p { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--text-mid); }
.perfil-gate-dlg .pg-falta {
  margin: 0 0 10px; padding-left: 18px; font-size: 12px; color: var(--text);
}
.perfil-gate-dlg .pg-falta li { margin-bottom: 2px; }
.perfil-gate-dlg .pg-nota { font-size: 11px; color: var(--text-faint); }
.perfil-gate-dlg .pg-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.perfil-gate-dlg .pg-luego {
  padding: 8px 14px; border-radius: 8px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-mid);
}
.perfil-gate-dlg .pg-ir {
  padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
  text-decoration: none; background: #ffb74d; color: #1a1207;
}

/* ── Línea Base · censo en formato DOF y espejo del G3 (renderLineaBaseGolden)
   Dos convenciones visibles en las reglas de abajo:
   · .lb-sup pinta el «—» de la supresión INEGI. NUNCA se sustituye por 0.
   · .lb-col-nd marca la columna que el motor no expuso en la corrida. La
     columna SIGUE en la tabla: el esquema no se encoge según los datos.
   El bloque de procedencia reutiliza pg-* del chasis; aquí no se redefinen. */
.lb-area-nav{margin:0 0 15px;padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius-card);background:linear-gradient(145deg,rgba(74,156,165,.08),var(--surface))}
.lb-area-nav__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:9px}
.lb-area-nav__head span small,.lb-area-nav__head span b{display:block}
.lb-area-nav__head span small{color:var(--teal-bright);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lb-area-nav__head span b{margin-top:2px;color:var(--text);font-size:11px}
.lb-area-nav__head>em{padding:3px 7px;border:1px solid rgba(74,156,165,.35);border-radius:999px;color:var(--teal-bright);font-size:8px;font-style:normal;font-weight:700;white-space:nowrap}
.lb-area-nav__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.lb-area-btn{min-width:0;padding:9px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.lb-area-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--teal)}
.lb-area-btn:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
.lb-area-btn.active{transform:translateY(-1px);border-color:var(--teal-bright);background:rgba(74,156,165,.12);box-shadow:0 5px 14px rgba(0,0,0,.13)}
.lb-area-btn:disabled{cursor:not-allowed;opacity:.45}
.lb-area-btn__top{display:flex;align-items:center;justify-content:space-between}
.lb-area-btn__top b{font-size:14px;letter-spacing:.04em}
.lb-area-btn__top i{color:var(--text-faint);font-size:14px;font-style:normal}
.lb-area-btn>strong{display:block;margin-top:2px;overflow:hidden;color:var(--text-mid);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.lb-area-btn__measure{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.lb-area-btn__measure em{padding:2px 5px;border:1px solid var(--border);border-radius:999px;color:var(--text-dim);font-size:8px;font-style:normal;white-space:nowrap}
.lb-area-btn>small{display:block;margin-top:6px;color:var(--text-faint);font-size:8px;line-height:1.35}
/* Recorte en curso: el botón declara que está trabajando. El recorte troceado
   ya no bloquea, así que sin esta señal el primer segundo se leería como «no
   pasó nada» — lo que el bucle síncrono disimulaba congelando la pestaña. */
.lb-area-btn[aria-busy="true"]{border-color:var(--teal-bright);background:rgba(74,156,165,.08)}
.lb-area-btn[aria-busy="true"] .lb-area-btn__top i{animation:lb-area-busy 1.1s ease-in-out infinite}
@keyframes lb-area-busy{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.lb-area-btn[aria-busy="true"] .lb-area-btn__top i{animation:none;opacity:1}}
.lb-area-nav__scope{margin:9px 0 0;color:var(--text-dim);font-size:9px;line-height:1.4}
.lb-area-nav__absent{margin:8px 0 0;padding:7px 9px;border-left:2px solid var(--gold);color:var(--text-mid);font-size:9.5px;line-height:1.4;background:rgba(201,169,110,.08)}
.ai-pill[hidden]{display:none !important}
.lb-export-note{margin:0 0 8px;color:var(--text-dim);font-size:10px;line-height:1.45}
.lb-priority,.lb-secondary,.lb-charts{margin:0 0 18px}
.lb-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0 0 9px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.lb-section-head small,.lb-section-head b{display:block}
.lb-section-head small{color:var(--teal-bright);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lb-section-head b{margin-top:2px;color:var(--text);font-size:12px}
.lb-section-head>span{max-width:118px;color:var(--text-faint);font-size:8px;line-height:1.3;text-align:right}
.lb-evidence-group{margin-bottom:11px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.lb-evidence-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.lb-evidence-group__head b{color:var(--text);font-size:10.5px}
.lb-evidence-group__head small{color:var(--text-faint);font-size:7.5px;line-height:1.25;text-align:right}
.lb-evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.lb-evidence-card{min-width:0;padding:9px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-hover);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.lb-evidence-card:hover:not(:disabled){transform:translateY(-1px);border-color:var(--teal)}
.lb-evidence-card:focus-visible,.lb-usv-row:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
.lb-evidence-card.active{border-color:var(--teal-bright);box-shadow:0 0 0 1px rgba(74,156,165,.2)}
.lb-evidence-card.is-nd,.lb-evidence-card.is-static{cursor:not-allowed;opacity:.65}
.lb-evidence-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.lb-evidence-card__top b{font-size:9px;line-height:1.25}
.lb-evidence-card__top i{color:var(--text-faint);font-size:12px;font-style:normal}
.lb-evidence-card>strong{display:block;margin-top:7px;color:var(--teal-bright);font-size:15px;line-height:1.1}
.lb-evidence-card>span:not(.lb-evidence-card__top){display:block;margin-top:4px;color:var(--text-dim);font-size:8px;line-height:1.35}
.lb-evidence-card>small{display:block;margin-top:6px;color:var(--text-faint);font-size:7.5px;line-height:1.3}
.lb-evidence-card>em{display:block;margin-top:7px;color:var(--teal-bright);font-size:7.5px;font-style:normal;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.lb-secondary>.dash-cat{margin-bottom:7px}
.lb-charts .tablero-scores{margin-top:10px;margin-bottom:0}
.lb-usv-chart{padding:11px;border:1px solid var(--border-strong);border-radius:var(--radius-card);background:var(--surface)}
.lb-usv-chart__head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:9px}
.lb-usv-chart__head small,.lb-usv-chart__head b{display:block}
.lb-usv-chart__head small{color:var(--lime);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.lb-usv-chart__head b{margin-top:2px;color:var(--text);font-size:11px}
.lb-usv-chart__head em{color:var(--lime);font-size:9px;font-style:normal;font-weight:700;text-align:right}
.lb-usv-fallback{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.lb-usv-rows{display:flex;flex-direction:column;gap:5px}
.lb-usv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;min-width:0;padding:7px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-hover);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.lb-usv-row:hover{border-color:var(--lb-usv-color,var(--lime))}
.lb-usv-row.active{border-color:var(--lb-usv-color,var(--lime));background:color-mix(in srgb,var(--lb-usv-color,var(--lime)) 11%,transparent)}
.lb-usv-row.is-static{cursor:not-allowed;opacity:.72}
.lb-usv-row__name{overflow:hidden;font-size:8.5px;line-height:1.3;text-overflow:ellipsis}
.lb-usv-row__values{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.lb-usv-row__values b{font-size:8.5px}
.lb-usv-row__values em{color:var(--lb-usv-color,var(--lime));font-size:8px;font-style:normal}
.lb-usv-row__track{grid-column:1/-1;height:3px;overflow:hidden;border-radius:999px;background:var(--surface-track)}
.lb-usv-row__track i{display:block;height:100%;border-radius:inherit;background:var(--lb-usv-color,var(--lime))}
.lb-usv-source,.lb-usv-empty{margin:9px 0 0;color:var(--text-faint);font-size:8px;line-height:1.4}
.lb-usv-empty{color:var(--text-dim);font-size:9px}
.lb-block { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.lb-h { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mid); margin: 0 0 2px; }
.lb-h small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.lb-line { font-size: 11.5px; line-height: 1.45; color: var(--text-mid); margin: 0; }
.lb-note { font-size: 10.5px; line-height: 1.45; color: var(--text-dim); margin: 4px 0 0; }
.lb-aviso { font-size: 11px; line-height: 1.45; color: var(--text-mid); margin: 2px 0; padding: 6px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); }
.lb-aviso--nd { border-color: #d4a017; }
.lb-aviso--ok { border-color: var(--teal); }
.lb-sup-inline { color: var(--text); font-weight: 700; }
.lb-tablewrap { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.lb-table { border-collapse: collapse; font-size: 10.5px; white-space: nowrap; min-width: 100%; }
.lb-table th, .lb-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.lb-table thead th { position: sticky; top: 0; background: var(--surface); vertical-align: bottom; border-bottom: 1px solid var(--border-strong); }
.lb-th-dof { display: block; font-weight: 600; color: var(--text); white-space: normal; max-width: 190px; }
.lb-th-cve { display: block; margin-top: 2px; font-size: 9.5px; color: var(--teal-bright); letter-spacing: 0.02em; }
.lb-table th.lb-col-nd .lb-th-dof, .lb-table th.lb-col-nd .lb-th-cve { color: #d4a017; }
/* Supresión por confidencialidad: se pinta, no se rellena. */
.lb-table td.lb-sup { color: var(--text); font-weight: 700; text-align: center; }
.lb-table td.lb-empty { white-space: normal; color: var(--text-dim); font-style: italic; text-align: left; }
.lb-more { align-self: flex-start; margin-top: 6px; padding: 5px 10px; font-size: 11px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: transparent; color: var(--text-mid); cursor: pointer; }
.lb-more:hover { color: var(--text); border-color: var(--teal); }
.lb-espejo-table, .lb-ptable { width: 100%; border-collapse: collapse; font-size: 11px; }
.lb-espejo-table th, .lb-espejo-table td, .lb-ptable th, .lb-ptable td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.lb-espejo-table thead th, .lb-ptable thead th { color: var(--text-mid); font-weight: 600; border-bottom: 1px solid var(--border-strong); }
.lb-espejo-table code, .lb-ptable code { font-size: 10.5px; color: var(--teal-bright); }
.lb-hoja-nota { display: block; margin-top: 2px; font-size: 10px; color: var(--text-dim); font-style: italic; }
.lb-hoja-nota--espejo { color: var(--teal-bright); font-style: normal; }
@media (max-width: 520px){
  .lb-area-nav__grid,.lb-evidence-grid{grid-template-columns:1fr}
  .lb-area-btn{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px}
  .lb-area-btn__top{grid-row:1 / 4;display:block}
  .lb-area-btn>strong,.lb-area-btn__measure,.lb-area-btn>small{grid-column:2}
}
/* ══ MIA social · medidor de cobertura del cap. IV.3 ═══════════════════════
   Markup de mia-cobertura.js, colocado por regimen-chassis.js dentro de la
   cáscara del régimen. Tres estados con color propio: cubierta (teal),
   fuente-sin-cablear (ámbar — existe, falta el cable) y vacía (neutro). El
   ámbar NO es rojo a propósito: «sin cablear» es una brecha de esfuerzo bajo,
   no una ausencia. */
.mia-cob{ border-color:rgba(74,156,165,.28); }
.mia-cob .regime-citation{ display:block; margin-top:5px; }
.mia-cob__nota{ margin:7px 0 0; font-size:9.5px; line-height:1.45; color:var(--text-faint); }

.mia-cob__encuadre{ margin-top:2px; padding:9px 10px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-hover); }
.mia-cob__capitulo{ margin:0; font-size:10.5px; line-height:1.4; font-weight:600; color:var(--text); }
.mia-cob__subsecs{ margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; counter-reset:none; }
.mia-cob__subsec{ padding:4px 7px; border-left:2px solid var(--border-strong); font-size:10px; line-height:1.4; color:var(--text-faint); }
.mia-cob__subsec b{ color:var(--text-dim); font-family:var(--font-display); letter-spacing:.03em; }
.mia-cob__subsec.is-propia{ border-left-color:var(--teal); background:rgba(74,156,165,.09); color:var(--text-dim); }
.mia-cob__subsec.is-propia b{ color:var(--teal-bright); }
.mia-cob__alcance{ display:block; margin-top:2px; font-size:9px; color:var(--text-faint); }

.mia-cob__estimacion{ margin-top:10px; padding:10px; border:1px dashed rgba(214,166,75,.45); border-radius:var(--radius-md); background:rgba(214,166,75,.06); }
.mia-cob__pct{ font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1; color:#d6a64b; }
.mia-cob__pct-tag{
  display:inline-flex; align-items:center; margin-left:8px; padding:2px 7px; border-radius:var(--radius-pill);
  border:1px solid rgba(214,166,75,.42); background:rgba(214,166,75,.12); color:#d6a64b;
  font-family:var(--font-display); font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.mia-cob__estimacion p{ margin:8px 0 0; font-size:10.5px; line-height:1.45; color:var(--text-dim); }
.mia-cob__estimacion .mia-cob__nota{ color:var(--text-faint); }

.mia-cob__conteo{ margin:11px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:7px; }
.mia-cob__cuenta{
  flex:1 1 96px; padding:7px 9px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); display:flex; flex-direction:column; gap:2px;
}
.mia-cob__cuenta b{ font-family:var(--font-display); font-size:17px; line-height:1; color:var(--text); }
.mia-cob__cuenta span{ font-size:9px; line-height:1.3; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }
.mia-cob__cuenta--cubierta{ border-color:rgba(74,156,165,.4); }
.mia-cob__cuenta--cubierta b{ color:var(--teal-bright); }
.mia-cob__cuenta--sin_cablear{ border-color:rgba(214,166,75,.4); }
.mia-cob__cuenta--sin_cablear b{ color:#d6a64b; }

.mia-cob__glosario{ margin:11px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px; }
.mia-cob__glosario li{ font-size:9.5px; line-height:1.45; color:var(--text-faint); }

.mia-cob__badge{
  display:inline-flex; align-items:center; padding:2px 6px; border-radius:var(--radius-pill);
  border:1px solid var(--border-strong); background:var(--surface-hover); color:var(--text-dim);
  font-family:var(--font-display); font-size:8.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap;
}
.mia-cob__badge--cubierta{ border-color:rgba(74,156,165,.42); background:rgba(74,156,165,.12); color:var(--teal-bright); }
.mia-cob__badge--sin_cablear{ border-color:rgba(214,166,75,.45); background:rgba(214,166,75,.12); color:#d6a64b; white-space:normal; text-align:center; }
.mia-cob__badge--vacia{ border-color:var(--border-strong); background:var(--surface-hover); color:var(--text-faint); }

/* El panel del régimen es angosto (~340px, y su ancho NO sigue al del viewport
   — una media query lo resuelve mal). Una tabla de tres columnas ahí recorta
   justo la columna de citas, que es la razón de ser del medidor. Así que cada
   fila se APILA siempre como ficha: insumo, estado, y fuente con su etiqueta.
   El <table> se conserva porque la semántica sí es tabular; sólo cambia cómo
   se pinta, y el <thead> queda accesible para lector de pantalla. */
.mia-cob__scroll{ margin-top:11px; }
.mia-cob__table{ width:100%; border-collapse:collapse; font-size:10px; }
.mia-cob__table thead{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.mia-cob__table tr{
  display:block; margin-bottom:8px; padding:9px 10px;
  border:1px solid var(--border); border-left-width:2px; border-radius:var(--radius-md);
  background:var(--surface);
}
.mia-cob__table tbody tr:last-child{ margin-bottom:0; }
.mia-cob__table td{ display:block; padding:0; border:0; }
.mia-cob__insumo{ line-height:1.45; color:var(--text-dim); }
.mia-cob__estado{ margin-top:7px; }
.mia-cob__fuente{ margin-top:7px; padding-top:7px; border-top:1px solid var(--border); }
.mia-cob__fuente::before{
  content:"Fuente y módulo del motor"; display:block; margin-bottom:4px;
  font-family:var(--font-display); font-size:8px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-faint);
}
.mia-cob__src{ display:block; line-height:1.45; color:var(--text-dim); }
.mia-cob__mod{
  display:block; margin-top:4px; font-family:var(--font-mono, ui-monospace, monospace);
  font-size:9px; line-height:1.4; color:var(--text-faint); overflow-wrap:anywhere;
}
.mia-cob__cita{ line-height:1.45; }
.mia-cob__row--cubierta{ border-left-color:rgba(74,156,165,.55); }
.mia-cob__row--sin_cablear{ border-left-color:rgba(214,166,75,.6); }
.mia-cob__row--vacia{ border-left-color:var(--border-strong); }

.mia-cob__salvedad{
  margin:12px 0 0; padding:9px 10px; border-left:2px solid #d6a64b;
  background:rgba(214,166,75,.06); font-size:10px; line-height:1.45; color:var(--text-dim);
}

/* ══ Exención · tamizaje interactivo de la compuerta 1 (art. 9) ════════════
   Markup de exencion-tamizaje.js, colocado por regimen-chassis.js dentro de
   la cáscara del régimen (`medidor: { modulo: "ExencionTamizaje" }`).

   El color carga la distinción que es el corazón de la vista y que un
   binario destruiría:
     · EXENTO         → lima, el único veredicto afirmativo del art. 9.
     · sin supuesto   → ÁMBAR, no rojo y no neutro: es «no evaluable», no
                        «no exento». Un rojo lo leería como negativa.
     · sujeta / no sujeta / bloqueado → teal, gris y terracota, los mismos
                        del selector MISSE para que un mismo estado no cambie
                        de color al cambiar de vista.                         */
.ex-tamizaje{ border-color:rgba(74,156,165,.28); }
.ex-tamizaje .regime-citation{ display:block; margin-top:5px; }
.ex-tamizaje__intro{ margin:6px 0 0; font-size:10.5px; line-height:1.45; color:var(--text-dim); }
.ex-tamizaje__intro code{ font-size:10px; color:var(--teal-bright); }

/* Aviso de alcance: SIEMPRE visible, no condicionado al resultado. */
.ex-aviso{
  margin:9px 0 0; padding:9px 10px; border-left:2px solid #d6a64b;
  background:rgba(214,166,75,.07); font-size:10px; line-height:1.5; color:var(--text-dim);
}

.ex-form{ display:flex; flex-direction:column; gap:8px; margin:11px 0 0; }
.ex-row{ display:flex; gap:8px; }
.ex-row > *{ flex:1; min-width:0; }
.ex-row label{ display:flex; flex-direction:column; font-size:9.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.ex-form input, .ex-form select{
  width:100%; margin-top:6px; padding:8px 10px; background:var(--bg-deep);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--font-sans); font-size:12px;
}
.ex-form input{ font-variant-numeric:tabular-nums; }
.ex-form input:focus, .ex-form select:focus{ outline:none; border-color:var(--teal); }
.ex-form input::placeholder{ color:var(--text-faint); }
.ex-form select:disabled{ opacity:.55; }

.ex-resultado{ margin-top:11px; }
.ex-veredicto{ padding:10px 12px; border:1px solid var(--border-strong); border-left-width:2px; border-radius:var(--radius-md); background:var(--surface); }
.ex-veredicto__tx{ margin:7px 0 0; font-size:11.5px; line-height:1.5; color:var(--text); }
.ex-veredicto--exento{ border-left-color:var(--lime, #c0ca33); }
.ex-veredicto--sujeta{ border-left-color:var(--teal); }
.ex-veredicto--no_sujeta{ border-left-color:var(--border-strong); }
.ex-veredicto--bloqueado{ border-left-color:var(--terra, #e07a5f); }
.ex-veredicto--hueco, .ex-veredicto--pendiente{ border-left-color:#d4a017; }

.ex-chip{ display:inline-block; padding:3px 10px; border-radius:999px; font-family:var(--font-display); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.ex-chip--exento{ background:color-mix(in srgb, var(--lime, #c0ca33) 16%, transparent); color:var(--lime, #c0ca33); border:1px solid var(--lime, #c0ca33); }
.ex-chip--sujeta{ background:color-mix(in srgb, var(--teal) 18%, transparent); color:var(--teal-bright); border:1px solid var(--teal); }
.ex-chip--no_sujeta{ background:var(--surface-hover); color:var(--text-dim); border:1px solid var(--border-strong); }
.ex-chip--bloqueado{ background:color-mix(in srgb, var(--terra, #e07a5f) 16%, transparent); color:var(--terra, #e07a5f); border:1px solid var(--terra, #e07a5f); }
.ex-chip--hueco, .ex-chip--pendiente{ background:color-mix(in srgb, #d4a017 16%, transparent); color:#d4a017; border:1px solid #d4a017; }

/* La compuerta 1, siempre desglosada aparte del veredicto: es lo que esta
   vista tamiza, y su «ningún supuesto activado» necesita su propia voz. */
.ex-gate{ margin-top:9px; padding:9px 10px; border:1px dashed var(--border-strong); border-radius:var(--radius-md); background:var(--bg-deep); }
.ex-gate__label{ display:block; font-family:var(--font-display); font-size:9px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-faint); }
.ex-gate b{ display:block; margin-top:4px; font-size:11.5px; line-height:1.4; color:var(--text); }
.ex-gate__supuesto{ margin:6px 0 0; font-size:11px; line-height:1.45; color:var(--text-dim); }
.ex-gate__nota{ margin:6px 0 0; font-size:10px; line-height:1.5; color:var(--text-faint); }
.ex-gate--exento{ border-style:solid; border-color:var(--lime, #c0ca33); background:color-mix(in srgb, var(--lime, #c0ca33) 7%, transparent); }
.ex-gate--exento b{ color:var(--lime, #c0ca33); }
.ex-gate--sin_supuesto_documentado{ border-color:#d6a64b; background:rgba(214,166,75,.07); }
.ex-gate--sin_supuesto_documentado b{ color:#d6a64b; }
.ex-gate--no_evaluada{ border-color:var(--border-strong); background:var(--surface-hover); }
.ex-gate--no_evaluada b{ color:var(--text-dim); }

.ex-traza{ margin-top:8px; }
.ex-traza summary{ cursor:pointer; font-size:10.5px; color:var(--text-dim); }
.ex-traza ul{ margin:6px 0 0; padding-left:16px; font-size:10.5px; line-height:1.5; color:var(--text-dim); }

.ex-art9{ margin-top:13px; padding-top:11px; border-top:1px solid var(--border); }
.ex-art9__recuento{ margin:6px 0 0; font-size:10.5px; line-height:1.5; color:var(--text-dim); }
.ex-sups{ margin:9px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.ex-sup{ padding:7px 9px; border-left:2px solid var(--border-strong); background:var(--surface-hover); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:10.5px; line-height:1.45; color:var(--text-dim); }
.ex-sup__badge{
  display:inline-block; margin-right:6px; padding:2px 6px; border-radius:var(--radius-sm);
  font-family:var(--font-display); font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.ex-sup__badge--evaluado{ border:1px solid rgba(74,156,165,.42); background:rgba(74,156,165,.12); color:var(--teal-bright); }
.ex-sup__badge--sin-evaluar{ border:1px solid rgba(214,166,75,.45); background:rgba(214,166,75,.12); color:#d6a64b; }
.ex-sup--evaluado{ border-left-color:rgba(74,156,165,.55); }
.ex-sup--sin-evaluar{ border-left-color:rgba(214,166,75,.6); }
.ex-sup__donde{ display:block; margin-top:4px; font-size:9.5px; color:var(--teal-bright); }
.ex-sup__nota{ margin:5px 0 0; font-size:9.5px; line-height:1.5; color:var(--text-faint); }

.ex-constancia{
  margin:12px 0 0; padding:9px 10px; border-left:2px solid var(--border-strong);
  background:var(--surface-hover); font-size:10px; line-height:1.5; color:var(--text-dim);
}
/* ═══════════════════════════════════════════════════════════════════════════
   EIS minero · intake declarado y paquete del régimen (eis-minero.js)

   Dos zonas: el bloque propio del SETUP (`.eis-form`, `.eis-tipo-estado`) y la
   ficha que el chasis coloca vía `medidor` (`.eis-min`). Ninguna pinta un
   botón: el dictamen G1 no existe y la vista no puede prometerlo.
   ═══════════════════════════════════════════════════════════════════════════ */
.eis-form{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.eis-form label{
  display:flex; flex-direction:column; gap:4px;
  font-family:var(--font-display); font-size:9px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
}
.eis-form select{
  padding:7px 8px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface); color:var(--text); font-size:11px; letter-spacing:0;
  font-family:inherit; text-transform:none; font-weight:400;
}
.eis-tipo-estado{
  display:flex; flex-direction:column; gap:3px; margin-top:8px;
  padding:8px 9px; border-left:2px solid var(--border-strong);
  background:var(--surface); font-size:10px; line-height:1.45; color:var(--text-dim);
}
.eis-tipo__ok{ color:var(--teal-bright); font-size:11px; }
.eis-tipo__limite{ color:var(--text-faint); font-size:9px; line-height:1.4; }
.eis-lote-nota{
  margin:8px 0 0; font-size:10px; line-height:1.45; color:var(--text-dim);
}

.eis-min{ display:flex; flex-direction:column; gap:12px; }
.eis-blk{
  display:flex; flex-direction:column; gap:6px;
  padding:9px 10px; border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface);
}
.eis-blk__t{
  font-family:var(--font-display); font-size:8px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint);
}
.eis-nota{ margin:0; font-size:10px; line-height:1.45; color:var(--text-dim); }
.eis-literal{
  margin:0; padding:7px 9px; border-left:2px solid var(--teal);
  background:rgba(74,156,165,.06); font-size:10px; line-height:1.5; color:var(--text-mid);
}
.eis-limite{
  margin:0; padding:9px 10px; border-left:2px solid #d6a64b;
  background:rgba(214,166,75,.06); font-size:10px; line-height:1.45; color:var(--text-dim);
}

.eis-tipos, .eis-paquete, .eis-proc, .eis-vars, .eis-bloqueos{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;
}
.eis-tipo{
  padding:7px 9px; border:1px solid var(--border); border-left-width:2px;
  border-radius:var(--radius-md); font-size:10px; line-height:1.45; color:var(--text-dim);
}
.eis-tipo b{ display:block; color:var(--text-mid); font-size:11px; }
.eis-tipo.is-sel{ border-left-color:var(--teal); background:rgba(74,156,165,.06); }
.eis-tipo__sel{
  display:block; margin-top:3px; font-style:normal; font-size:9px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--teal-bright);
}

.eis-pieza{
  display:flex; gap:8px; padding:8px 9px;
  border:1px solid var(--border); border-left-width:2px; border-radius:var(--radius-md);
}
.eis-pieza__tag{
  flex:0 0 auto; font-family:var(--font-display); font-size:9px; font-weight:700;
  letter-spacing:.06em; color:var(--text-faint);
}
.eis-pieza__tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.eis-pieza__tx b{ font-size:11px; color:var(--text-mid); }
.eis-pieza__verdad{ font-style:normal; font-size:10px; line-height:1.4; }
/* Las tres verdades se pintan distinto o la distinción muere en pantalla. */
.eis-pieza--por_construir{ border-left-color:var(--terra); }
.eis-pieza--por_construir .eis-pieza__verdad{ color:var(--terra); }
.eis-pieza--segun_motor{ border-left-color:#d6a64b; }
.eis-pieza--segun_motor .eis-pieza__verdad{ color:#d6a64b; }
.eis-pieza--base{ border-left-color:var(--teal); }
.eis-pieza--base .eis-pieza__verdad{ color:var(--teal-bright); }

.eis-proc li{
  display:flex; flex-direction:column; gap:3px; padding:7px 9px;
  border:1px solid var(--border); border-left-width:2px; border-radius:var(--radius-md);
  font-size:10px; line-height:1.45;
}
.eis-proc li b{ color:var(--text-mid); font-size:10px; font-weight:600; }

.eis-vars li{ display:flex; gap:8px; align-items:baseline; font-size:10px; line-height:1.45; }
.eis-vars code{
  flex:0 0 92px; font-family:var(--font-mono, ui-monospace, monospace);
  font-size:9px; color:var(--text-faint);
}
.eis-vars span{ color:var(--text-dim); }

.eis-blk--bloqueo{ border-left:2px solid var(--terra); }
.eis-bloqueos li{
  display:flex; flex-direction:column; gap:3px; padding:8px 9px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  font-size:10px; line-height:1.45; color:var(--text-dim);
}
.eis-q{
  font-family:var(--font-display); font-size:9px; font-weight:700;
  letter-spacing:.06em; color:var(--terra);
}
.eis-bloqueos li b{ color:var(--text-mid); font-size:10px; }
.eis-bloquea{
  font-style:normal; margin-top:2px; font-size:9px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════════
   OLEADA 1 · PULIDO A PROFUNDIDAD DEL PANEL DE SETUP
   Bloque final: gana la cascada sobre los overrides técnicos previos.
   Reglas de color aplicadas · chartreuse SOLO el botón Generar · teal =
   interacción/selección (absorbe al cyan) · gold = severidad/AII.
   Brecha de profundidad · hero/CTA = nivel-2, formulario = nivel-1, nada en
   el limbo del 2.5%. La ruleta baja su drama; el formulario sube su presencia.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cyan fundido en teal: se elimina como acento aparte de la interfaz ── */
:root{
  --cyan:        var(--teal);
  --cyan-bright: var(--teal-bright);
  --cyan-soft:   var(--teal-soft);
}

/* ── C · Ruleta: menos vidrio agresivo, más sobria (Apple Action button) ── */
.regime-entry{
  border-radius:var(--radius-lg);
  border-color:rgba(102,184,192,.16);
  background:linear-gradient(145deg, rgba(242,244,237,.085), rgba(38,85,96,.06) 48%, rgba(7,28,34,.10));
  box-shadow:var(--elev-2);
  -webkit-backdrop-filter:blur(14px) saturate(130%); backdrop-filter:blur(14px) saturate(130%);
}
.regime-entry::before{
  right:-58px; top:-68px; filter:blur(6px); opacity:.5;
  background:radial-gradient(circle, rgba(74,156,165,.16), rgba(38,85,96,.04) 48%, transparent 72%);
}
.analysis-roulette__arrow:hover{ color:var(--teal-bright); border-color:rgba(74,156,165,.32); background:rgba(38,85,96,.18); }
.analysis-tab{
  --roulette-accent:var(--teal); --roulette-state:var(--teal-bright);
  border-radius:var(--radius-md);
  grid-template-columns:23px minmax(0,1fr);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px -14px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(12px) saturate(118%); backdrop-filter:blur(12px) saturate(118%);
}
.analysis-tab--vivo{ --roulette-accent:var(--teal); --roulette-state:var(--teal-bright); }
.analysis-tab--parcial{ --roulette-accent:#c9a96e; --roulette-state:#d8b877; }
.analysis-tab--por_construir{ --roulette-accent:#60777d; --roulette-state:var(--text-dim); }
.analysis-tab.is-active{
  transform:translateY(-1px) scale(1.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px color-mix(in srgb, var(--roulette-accent) 14%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--roulette-accent) 42%, transparent);
}
.analysis-tab.is-active .analysis-tab__glyph{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 0 10px color-mix(in srgb, var(--roulette-accent) 34%, transparent);
}
.analysis-tab:focus-visible{ outline:2px solid var(--teal); }
.analysis-dots button.is-active span{ background:var(--teal-bright); box-shadow:0 0 6px rgba(74,156,165,.5); }
.analysis-dots button:focus-visible{ outline:1px solid var(--teal); }

/* ── C · La tira es una RUEDA (carrusel circular), no un scroll ──
   Cada tab se posiciona en absoluto por su «slot» radial (JS · layoutStrip).
   Se conserva la máscara de bordes: el tab que teletransporta en el wrap queda
   oculto tras el degradado, así el bucle infinito no muestra costura. */
.analysis-strip{
  position:relative; display:block; height:56px; overflow:hidden;
  padding:6px 0; gap:0; scroll-snap-type:none; touch-action:pan-y;
}
.analysis-tab{
  position:absolute; top:6px; left:50%; margin:0 0 0 -46px;
  flex:none; scroll-snap-align:none; opacity:.42; will-change:transform;
  transition:transform 380ms var(--ease-soft), opacity 300ms var(--ease-soft),
             border-color 280ms, background 280ms, box-shadow 340ms;
}
.analysis-tab.is-near{ opacity:.7; }
.analysis-tab.is-active{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .analysis-tab{ transition:opacity 300ms, border-color 280ms, background 280ms; }
}

/* ── C · Un SVG por régimen en la tira (reemplaza los glifos de 2 letras) ── */
.analysis-tab__glyph svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.analysis-tab__glyph svg [fill="currentColor"]{ fill:currentColor; stroke:none; }

/* ── QW3/QW5 · Estado por chip = un punto de color (no texto minúsculo) ── */
/* OJO: el tab YA es position:absolute (la rueda, ~línea 2665) y eso mismo ancla
   el punto de estado. NO poner position:relative aquí — sobreescribía el absolute
   y rompía el centrado del carrusel (se veía un solo tab). */
.analysis-tab__status{
  position:absolute; top:5px; right:6px; width:6px; height:6px; border-radius:50%;
  background:var(--roulette-state);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--roulette-state) 22%, transparent);
}
.analysis-tab__status--por_construir{ box-shadow:0 0 0 2px rgba(96,119,125,.28); }
.analysis-tab__state{ display:none; }   /* muere el texto a 5.5px; el punto gobierna */

/* ── QW3 · Mini-leyenda accesible del estado ── */
.analysis-legend{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 9px;
  margin:5px 2px 0; font-family:var(--font-display); font-size:9px; font-weight:600;
  letter-spacing:.04em; color:var(--text-dim);
}
.analysis-legend__q{
  display:inline-grid; place-items:center; width:13px; height:13px; border-radius:50%;
  border:1px solid var(--border-strong); color:var(--text-mid);
  font-size:8px; font-weight:700; cursor:help;
}
.analysis-legend__q:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.analysis-legend__item{ display:inline-flex; align-items:center; gap:4px; }
.analysis-legend .lg-dot{ width:6px; height:6px; border-radius:50%; }
.analysis-legend .lg-vivo{ background:var(--teal-bright); }
.analysis-legend .lg-parcial{ background:#d8b877; }
.analysis-legend .lg-constr{ background:#60777d; }

/* ── QW1 · La Fuente es la NORMA pública; la ref interna es un tag secundario ── */
.regime-citation{ font-size:9px; color:var(--text-dim); }
.regime-citation b{ color:var(--text-mid); font-weight:650; }
.regime-refint{
  margin-left:5px; padding:0 4px; border-radius:4px; cursor:help;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-faint); font-family:var(--font-display); font-weight:700;
}
.regime-entry__summary .regime-citation{ font-size:9px; }

/* ── QW4 · Piso tipográfico: nada por debajo de 9px en el hero/tarjeta ── */
.analysis-hero__eyebrow{ font-size:9px; letter-spacing:.11em; }
.regime-entry__position{ font-size:9px; }
.analysis-tab__name{ font-size:10px; }
.regime-entry__summary .regime-status{ font-size:9px; min-height:17px; padding:1px 6px; }
.regime-entry__summary p{ font-size:10px; }
.regime-entry__summary summary{ font-size:9.5px; }
.regime-entry__detail > b{ font-size:9px; }

/* ── B · Formulario a nivel-1: presencia sobria, fuera del limbo ──
   Se eleva a los CONTENEDORES de control (no a los inputs directamente, para no
   pisar el anillo de foco). El bump de --surface/--border ya subió los campos. */
#setup-view .mode-tabs,
#setup-view .misse-form,
#setup-view .eis-form,
#setup-view .site-status{
  box-shadow:var(--elev-1);
}
/* Los radios AN/AID/AII: la caja de unidad conserva su anillo de foco propio;
   sólo se eleva su contenedor visible sin pisar :focus-within. */
.ai-inputs .input-unit{ box-shadow:var(--shadow-sm); }
.ai-inputs .input-unit:focus-within{ box-shadow:0 0 0 2px rgba(74,156,165,0.14); }

/* ── B · El CTA «Generar» es el elemento con más peso de la tarjeta ── */
.btn-primary{
  box-shadow:0 10px 26px -10px var(--cta-shadow), 0 2px 0 rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-primary:hover:not(:disabled){
  box-shadow:0 14px 32px -10px var(--cta-shadow), 0 2px 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,0.34);
}

/* ── QW6 · Una sola numeración y un solo color:
   el stepper (workflow-steps) es la numeración viva; el marcador de sección deja
   de ser un globo lima y pasa a una barra teal fina (sin dígito, sin chartreuse). */
.step-num{
  width:3px; height:15px; min-width:3px; border-radius:2px;
  background:var(--teal); color:transparent; font-size:0; box-shadow:none;
  place-items:stretch;
}
.workflow-steps .is-current{ color:var(--teal-bright); background:var(--teal-soft); }
.workflow-steps .is-current span, .workflow-steps .is-done span{ font-size:8px; }

/* ── QW7 · Barras ámbar vacías colapsan: el ámbar solo para advertencia real ── */
.perfil-aviso:empty,
.setup-gobierno:empty,
.regime-action-note:empty,
.regime-influence-note:empty{ display:none !important; }

/* Las fuentes y sus limitaciones viven junto a cada evidencia, no como
   doctrina repetida antes del embudo de tres pasos. */
.src-vintage{
  border-bottom:1px dotted var(--border-strong); cursor:help;
  color:var(--text-mid); white-space:nowrap;
}

/* ── QW2 · Bajo «Generar»: qué falta, con enlaces al campo ── */
.run-missing{
  margin:7px 2px 0; font-family:var(--font-display); font-size:10px; line-height:1.5;
  color:var(--text-dim);
}
.run-missing[hidden]{ display:none; }
.run-missing b{ color:var(--gold); font-weight:700; }
.run-missing a{
  color:var(--teal-bright); text-decoration:none;
  border-bottom:1px solid rgba(74,156,165,.4); cursor:pointer;
}
.run-missing a:hover{ border-bottom-color:var(--teal-bright); }
.run-missing a:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* Campo señalado por un enlace de «qué falta» (destello sobrio) */
.setup-flash{ animation:setupFlash 1.2s var(--ease-soft); }
@keyframes setupFlash{
  0%,100%{ box-shadow:0 0 0 0 transparent; }
  25%{ box-shadow:0 0 0 3px rgba(74,156,165,.35); }
}

/* ── QW10 · «Guardar predio» como acción secundaria (no gemelo del primario) ── */
#pf-save-predio{
  width:auto; align-self:flex-start; justify-content:center;
  margin-top:8px; padding:6px 12px; font-size:11.5px; font-weight:600;
  border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:transparent; color:var(--text-mid); box-shadow:none;
}
#pf-save-predio:hover:not(:disabled){ color:var(--teal-bright); border-color:var(--teal); background:var(--teal-soft); }
#pf-save-predio svg{ width:13px; height:13px; opacity:.85; }
.pf-predio-sub{
  display:block; margin:3px 2px 0; font-family:var(--font-display);
  font-size:9.5px; line-height:1.4; color:var(--text-faint);
}
.pf-predio-sub[hidden]{ display:none; }
#pf-save-predio[hidden] + .pf-predio-sub{ display:none !important; }

/* ── Tema claro: la ruleta y la leyenda respiran igual ── */
html.theme-light .analysis-tab__status{ box-shadow:0 0 0 2px color-mix(in srgb, var(--roulette-state) 26%, transparent); }
html.theme-light .step-num{ background:var(--teal); }

/* ══════════════════════════════════════════════════════════════════════════
   OLEADA 2 · COMPORTAMIENTO — sector arriba, forma por geometría, promovente,
   ficha honesta en su slot. Estética heredada (glass/oscuro); sin colores nuevos.
   ══════════════════════════════════════════════════════════════════════════ */

/* CHANGE 1 · El sector forma parte de la identificación del proyecto. */
#setup-identify-section .field--sector select { width: 100%; }

/* CHANGE 2 · Preset «derecho» = derecho de vía (AN 100 m, AID/AII ausentes).
   Visible en setup radial; en modo corredor de régimen DDV los presets se
   ocultan abajo (.ai-corridor .ai-presets). */

/* Geometría LÍNEA/TRAZO → modo CORREDOR: el corredor en metros es EL control y el
   ÚNICO buffer; los tres anillos radiales AN/AID/AII no aplican a un trazo y se
   ATENÚAN (no se borran: sus valores siguen ahí, sólo dejan de gobernar la forma). */
.ai-corridor .ai-presets { display: none; }
.ai-corridor .ai-inputs .ai-input[data-ring="AN"],
.ai-corridor .ai-inputs .ai-input[data-ring="AID"],
.ai-corridor .ai-inputs .ai-input[data-ring="AII"] {
  opacity: .34; filter: grayscale(.35); pointer-events: none;
}
.ai-corridor .ai-inputs::after {
  content: "Un trazo se bufferea como corredor: los anillos AN/AID/AII radiales no aplican.";
  grid-column: 1 / -1; margin-top: 2px;
  font-size: 9.5px; line-height: 1.3; color: var(--text-dim);
}
.ai-corridor #line-corridor {
  display: block; margin-top: 12px; padding: 11px 12px;
  border: 1px solid var(--teal); border-radius: var(--radius-sm);
  background: var(--teal-soft);
}
.ai-corridor #line-corridor label { color: var(--text); }
.ai-corridor #line-corridor label small { color: var(--teal-bright); }

/* CHANGE 4 · Promovente ≠ Cliente: marcador de requerido + hint de procedencia. */
.field .field-req {
  color: var(--terra); font-weight: 700; font-size: 9px; letter-spacing: .04em;
}
.field .field-hint {
  display: block; margin-top: 4px; font-size: 9px; line-height: 1.3;
  color: var(--text-faint); text-transform: none; letter-spacing: 0; font-weight: 400;
}
.field.is-required input { border-color: rgba(181, 101, 86, .38); }
.field.is-required input:focus { border-color: var(--teal); }

/* CHANGE 5 · Ficha honesta EN SU SLOT del setup (por_construir / parcial):
   se pinta dentro del flujo, sobre el footer — nunca como cola bajo el logo. */
#setup-regime-ficha:empty { display: none !important; }
#setup-regime-ficha { margin-top: 2px; }
#setup-regime-ficha.regime-shell { padding-bottom: 14px; }

/* ── Régimen · Derecho de Vía (vista de producción) ──────────────────────────
   Padrón parcelario predio-por-predio. Hereda el sistema (glass/oscuro, tipografía
   de display, chartreuse solo CTA): identidad viva, KPIs .dk nativos, tabla dura
   del padrón y auditoría de capas RAN con reservado ≠ cero. */
.ddv-identity { margin: 2px 0 12px; }
.ddv-id-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.ddv-id-cell { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; min-width: 0; }
.ddv-id-k { display: block; font-size: 8.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.ddv-id-v { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--cream); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ddv-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 4px; }
.ddv-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ddv-table thead th { position: sticky; top: 0; background: var(--surface); color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 8.5px; text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--border); }
.ddv-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); color: var(--cream); font-variant-numeric: tabular-nums; }
.ddv-table td.num, .ddv-table th.num { text-align: right; }
.ddv-table tbody tr:last-child td { border-bottom: 0; }
.ddv-note { margin: 7px 2px 0; font-size: 10.5px; color: var(--text-faint); }
.ddv-capas-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.ddv-capas-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface); }
.ddv-capas-list li > span { color: var(--cream); font-size: 11.5px; }
.ddv-capas-list li code { color: var(--teal); font-weight: 600; font-variant-numeric: tabular-nums; }
.ddv-capas-list li[data-state="no_disponible"] { opacity: .72; }
.ddv-capas-list li[data-state="no_disponible"] code { color: var(--terra); font-weight: 500; font-size: 10px; }
.ddv-limits { margin-top: 16px; border: 1px solid var(--border); border-left: 3px solid var(--cta); border-radius: 10px; padding: 14px 16px; background: var(--surface); }
.ddv-limits h4 { margin: 12px 0 4px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.ddv-limits ul { margin: 0; padding-left: 18px; }
.ddv-limits li { font-size: 12px; color: var(--cream); margin: 4px 0; line-height: 1.5; }
.ddv-limits cite { color: var(--teal); font-style: normal; }
.ddv-limits strong { display: block; margin-top: 12px; font-size: 12px; color: var(--cream); line-height: 1.55; }

/* ══ Fase 2 · Obj. 1 — Encabezado de contexto persistente (sticky) ══ */
/* Pegado al borde superior del scroll de #panel (compensa su padding de 20px)
   y a lo ancho completo (compensa el padding lateral de 22px). Fondo del panel
   para que el contenido pase por debajo sin transparentarse. */
.ctx-header {
  position: sticky; top: -20px; z-index: 30;
  margin: -6px -22px 12px; padding: 12px 22px 10px;
  background: rgba(11, 21, 24, 0.96);
  backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border-bottom: 1px solid var(--border-strong);
}
html.theme-light .ctx-header { background: rgba(249, 251, 245, 0.97); }
.ctx-territorio { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--text-mid); }
.ctx-terr-pin { flex: 0 0 auto; color: var(--teal); }
.ctx-terr-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctx-terr-tx--nd { color: var(--text-faint); font-style: italic; }
.ctx-terr-more {
  flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface);
  color: var(--teal); border-radius: 999px; font-size: 9.5px; font-weight: 650;
  padding: 1px 7px; cursor: pointer;
}
.ctx-terr-more:hover { background: var(--surface-hover); }
.ctx-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ctx-chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-mid); font-size: 10px; font-weight: 600; padding: 2.5px 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctx-chip--id { border-color: var(--teal-soft); color: var(--teal); }
.ctx-chip--legacy { color: var(--text-faint); font-style: italic; font-weight: 500; }
.ctx-site-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.ctx-chip--site { cursor: pointer; }
.ctx-chip--site:hover { background: var(--surface-hover); }
.ctx-chip--site.is-active { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.ctx-chip-estado { font-style: normal; font-weight: 500; font-size: 8.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.ctx-chip--corriendo .ctx-chip-estado { color: var(--gold); }
.ctx-chip--error .ctx-chip-estado { color: var(--terra, #c75c4f); }
/* «+ otro análisis» = ACCESO PRIMARIO a la ruleta de análisis derivados. Antes era
   un chip tenue (dashed, 10px, sin relleno) perdido entre los chips de identidad:
   el dueño no lo encontraba. Ahora es un botón primario legible, en su PROPIA fila
   dentro del panel izquierdo (flex-basis:100%), con los tokens --cta del sistema
   (tema claro/oscuro correcto). El comportamiento no cambia: abre abrirOtroAnalisis. */
.ctx-add-analysis {
  flex: 1 0 100%; margin-top: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: 9px; cursor: pointer;
  background: var(--cta); color: var(--cta-text);
  font-family: var(--font-accent, inherit);
  font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 9px 14px;
  box-shadow: 0 4px 16px var(--cta-shadow);
  transition: background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.ctx-add-analysis:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 6px 20px var(--cta-shadow); }
.ctx-add-analysis:active { transform: translateY(0); background: var(--cta-active); }
.ctx-add-analysis:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; }

/* ══ Fase 2 · Obj. 2 — densidad: vista global de datos + acordeones cerrados ══ */
.datos-globales { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--border); }
.datos-globales .category-content { padding-top: 4px; }
/* `hidden` es estado de contrato, no una pista visual: algunos componentes
   legacy declaran display propio y pueden ganar a la hoja del user-agent.
   Acotamos el refuerzo a los dos catálogos de exportables para garantizar una
   sola acción G3 visible dentro del flujo Línea Base. */
#results-view .datos-globales[hidden],
#results-view #mg-paquete[hidden] { display: none !important; }
/* El §9 de DDV usa el patrón compacto de cita del chasis (QW1); el <cite> legacy
   ya no se emite, pero se conserva su estilo por si un job viejo lo trae cacheado. */
.ddv-limits .regime-citation { margin-left: 4px; }

/* ══ Fase 2 · Obj. 3 — «+ otro análisis» (modal) e historial por proyecto ══ */
.otro-analisis .fname-sub b { color: var(--text-mid); }
/* «Otro análisis» reusa LA RULETA del setup (mismo .analysis-strip / .analysis-tab /
   .analysis-roulette / .analysis-dots, montada por RegimenChassis.mountRuleta): sólo
   el contenedor necesita su respiro dentro del modal. */
.oa-ruleta { margin: 12px 0 10px; }
.oa-ruleta__pos { display: block; text-align: center; font-size: 9px; margin-bottom: 4px; color: var(--text-dim); }
.oa-buffers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
/* Cada celda de la rejilla es un track de 1fr; el <input type=number> impone su
   ancho intrínseco (~ tamaño del spinner + texto) y sin min-width:0 NO encoge, así
   que las 3 celdas AN/AID/AII desbordaban el modal por la derecha. min-width:0 en la
   fila y en el input deja que el track de 1fr mande; el input arranca en 0 (flex:1 1 0)
   y se reparte parejo. gap más ceñido para que «km» quepa dentro de min(440px,90vw). */
.oa-buffers .aoi-row { min-width: 0; gap: 6px; }
.oa-buffers .aoi-row > span:first-child { width: auto; flex: 0 0 auto; }
.oa-buffers .aoi-row input { min-width: 0; flex: 1 1 0; }
.oa-buffers .aoi-u { flex: 0 0 auto; }
.oa-buffers .aoi-row input:disabled { opacity: .45; }
.oa-gob { font-size: 11px; color: var(--text-dim); margin: 2px 0 8px; line-height: 1.5; }
.oa-gob--veto { color: var(--terra, #c75c4f); }
.history-group { border: 1px solid var(--border); border-radius: 10px; padding: 4px 6px 6px; margin: 6px 0; }
.history-group-h { font-size: 10px; font-weight: 650; color: var(--text-dim); padding: 4px 6px 2px; }
.history-group-h i { font-style: normal; font-weight: 500; color: var(--text-faint); margin-left: 5px; }

/* ===== PESTAÑA «UNIDAD»: elegir un AOI que ya existe ===== */
.unidad-box { margin-bottom: 12px; }
.unidad-label {
  display: block; font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mid);
  margin: 0 0 4px;
}
.unidad-label + .unidad-label { margin-top: 10px; }
.unidad-select, .unidad-search {
  width: 100%; box-sizing: border-box; padding: 8px 9px;
  font-family: var(--font-body); font-size: 12px;
  background: var(--surface); color: var(--cream);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.unidad-select:focus-visible, .unidad-search:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px;
}
.unidad-search:disabled { opacity: 0.5; cursor: not-allowed; }
.unidad-estado { font-size: 11px; color: var(--text-mid); margin-top: 8px; min-height: 1em; }
/* El motivo por el que la pestaña no está disponible se LEE: no se esconde la
   pestaña ni se finge una lista vacía. */
.unidad-estado.error { color: var(--danger, #d98a7a); }
.unidad-results {
  list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto;
  border-radius: var(--radius-sm);
}
.unidad-results:not(:empty) { border: 1px solid var(--border); }
.unidad-item {
  padding: 7px 9px; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background var(--motion-fast) var(--ease-soft);
}
.unidad-item:last-child { border-bottom: none; }
.unidad-item:hover, .unidad-item:focus-visible { background: var(--surface-hover); outline: none; }
.unidad-item[aria-selected="true"] { background: var(--teal-soft); }
.unidad-item-name {
  display: block; font-size: 12px; font-weight: 600; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El discriminador va SIEMPRE: el nombre por sí solo no identifica a la unidad. */
.unidad-item-meta { display: block; font-size: 10.5px; color: var(--text-mid); margin-top: 2px; }