:root {
      /* ── Tokens base (Fase U2: sistema consolidado) ─────────────── */
      /* Layout (perdidos en la extraccion U2 — hotfix auditoria) */
      --header-height: 110px;
      --header-current-height: var(--header-height);
      --map-panel-height: clamp(520px, 62vh, 700px);
      --bg: #0f1117;
      --surface: #1a1d2e;
      --surface2: #242740;
      --border: #2e3150;
      --text: #e2e8f0;
      /* U2: muted subio de #8892a4 (4.6:1 borde AA) a 7.4:1 sobre surface;
         el gris viejo pasa a --text-dim para labels/hints cortos. */
      --text-muted: #a3adbf;
      --text-dim: #8892a4;
      /* Paleta semantica. U2: --rojo era #e74c3c (4.37:1 sobre surface,
         fallaba AA); #ff5f66 pasa (5.6:1) y su componente azul lo hace
         distinguible del naranja tambien para deuteranopes. */
      --verde: #2ecc71;
      --amarillo: #f1c40f;
      --naranja: #e67e22;
      --rojo: #ff5f66;
      --accent: #4a90d9;
      --accent-soft: #8cb8e6;
      --accent-strong: #1f78d1;
      --rojo-soft: #ff9489;
      --verde-soft: #7ee7a3;
      /* Tripletes RGB para rgba(var(--x-rgb), alpha) — var() no interpola
         dentro de un hex. */
      --accent-rgb: 74, 144, 217;
      --accent-soft-rgb: 140, 184, 230;
      --bg-rgb: 15, 17, 23;
      --surface-rgb: 26, 29, 46;
      --surface2-rgb: 36, 39, 64;
      --border-rgb: 46, 49, 80;
      --verde-rgb: 46, 204, 113;
      --rojo-rgb: 255, 95, 102;
      --amarillo-rgb: 241, 196, 15;
      --text-dim-rgb: 136, 146, 164;
      /* Escala tipografica (10 pasos; colapsa ~40 valores ad-hoc). */
      --fs-3xs: 0.56rem;
      --fs-2xs: 0.64rem;
      --fs-xs: 0.72rem;
      --fs-sm: 0.8rem;
      --fs-md: 0.9rem;
      --fs-base: 1rem;
      --fs-lg: 1.2rem;
      --fs-xl: 1.45rem;
      --fs-2xl: 1.9rem;
      --fs-3xl: 2.4rem;
      /* Escala de radios (7 pasos; colapsa 13 valores). */
      --r-2xs: 4px;
      --r-xs: 6px;
      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 14px;
      --r-xl: 22px;
      --r-pill: 999px;
      /* Elevacion (3 niveles: card / popover / modal). */
      --elev-1: 0 10px 26px rgba(0, 0, 0, 0.22);
      --elev-2: 0 18px 40px rgba(0, 0, 0, 0.34);
      --elev-3: 0 30px 80px rgba(0, 0, 0, 0.55);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ── HEADER ── */
    header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      height: var(--header-current-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: height 0.22s ease, padding 0.22s ease;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 20px;
      height: 100%;
    }

    .logo img {
      height: 88px;
      width: auto;
      display: block;
    }

    .logo img.logo-principal {
      height: 72px;
    }

    .logo img.logo-secundario {
      height: 58px;
      opacity: 0.9;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 16px;
      /* U6 a11y/UX: permitir que las chips/botones bajen de línea en lugar de
         empujar el ancho y provocar scroll horizontal en pantallas angostas. */
      flex-wrap: wrap;
      justify-content: flex-end;
      min-width: 0;
    }

    .header-collapse-toggle {
      padding: 6px 12px;
      border-radius: var(--r-sm);
      border: 1px solid rgba(var(--accent-soft-rgb), 0.32);
      background: rgba(15, 23, 38, 0.55);
      color: var(--text);
      cursor: pointer;
      font-size: var(--fs-sm);
      font-family: Inter, sans-serif;
      font-weight: 700;
      white-space: nowrap;
    }

    .header-collapse-toggle:hover,
    .header-collapse-toggle:focus-visible {
      background: rgba(15, 23, 38, 0.8);
      border-color: rgba(var(--accent-soft-rgb), 0.52);
    }

    body.header-collapsed {
      --header-current-height: 0px;
    }

    body.header-collapsed header {
      padding: 0;
      min-height: 0;
      height: 0;
      border-bottom-color: transparent;
      overflow: hidden;
      pointer-events: none;
    }

    body.header-collapsed .logo,
    body.header-collapsed .header-right {
      display: none !important;
    }

    .hidden {
      display: none !important;
    }

    /* U6 a11y: contenido solo para lectores de pantalla (resumen textual del
       chart y del mapa, que son puramente visuales — canvas/tiles). Visible al
       foco por teclado para que también sirva de "skip summary". */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .sr-only:focus,
    .sr-only:focus-within {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip: auto;
      white-space: normal;
    }

    .badge-area {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-xs);
      padding: 4px 12px;
      font-size: var(--fs-sm);
      color: var(--text-muted);
    }

    .badge-area span {
      color: var(--accent);
      font-weight: 600;
    }

    .last-update {
      font-size: var(--fs-xs);
      color: var(--text-muted);
    }

    .auth-user-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 10px;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.03);
      min-width: 0;
      max-width: 280px;
      cursor: pointer;
    }

    .auth-user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.08);
    }

    .auth-user-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .auth-user-name {
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .auth-user-subtitle {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .auth-header-btn {
      padding: 6px 12px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      background: #141828;
      color: var(--text);
      cursor: pointer;
      font-size: var(--fs-sm);
      font-family: Inter, sans-serif;
      font-weight: 600;
    }

    .auth-header-btn.primary {
      border-color: var(--accent);
      color: var(--accent-soft);
    }

    /* U6 a11y/UX: header responsive en la pantalla principal. Hasta ahora, en
       mobile, la fila de badges/select/botones desbordaba horizontal y hacía
       scrollear toda la página. Replica el patrón de profile.html (flex-wrap +
       media query): el header crece en alto y las chips bajan de línea. Se sube
       --header-height para que los overlays sticky (app-preload-mini,
       timeline-dock) sigan anclados al borde inferior real del header. */
    @media (max-width: 768px) {
      :root {
        --header-height: 140px;
      }
      header {
        height: auto;
        min-height: var(--header-current-height);
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px 12px;
        padding: 10px 16px;
      }
      .logo {
        gap: 12px;
        height: auto;
      }
      .logo img.logo-principal { height: 44px; }
      .logo img.logo-secundario { height: 36px; }
      .header-right {
        width: 100%;
        justify-content: flex-start;
        gap: 8px 10px;
      }
      #department-select {
        max-width: 100%;
        flex: 1 1 160px;
      }
      .auth-user-badge {
        max-width: 100%;
      }
    }

    /* Pantallas muy angostas: apila y evita cualquier desborde residual. */
    @media (max-width: 480px) {
      :root {
        --header-height: 168px;
      }
      .badge-area {
        flex: 1 1 100%;
      }
    }

    .auth-gate {
      position: fixed;
      inset: 0;
      z-index: 2200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(5, 8, 14, 0.74);
      backdrop-filter: blur(4px);
    }

    .auth-gate-card {
      width: min(520px, 100%);
      border-radius: var(--r-xl);
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(160deg, rgba(var(--surface-rgb), 0.98) 0%, rgba(var(--bg-rgb), 0.98) 100%);
      box-shadow: var(--elev-3);
      padding: 32px 30px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .auth-gate-kicker {
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--accent);
    }

    .auth-gate-title {
      font-size: var(--fs-2xl);
      line-height: 1.08;
      font-weight: 700;
      color: var(--text);
    }

    .auth-gate-copy {
      font-size: var(--fs-base);
      line-height: 1.6;
      color: var(--text-muted);
    }

    .auth-gate-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .auth-gate-btn {
      padding: 12px 18px;
      border-radius: var(--r-md);
      border: 1px solid var(--accent);
      background: linear-gradient(135deg, #1d4f86 0%, var(--accent-strong) 100%);
      color: var(--text);
      cursor: pointer;
      font-size: var(--fs-md);
      font-family: Inter, sans-serif;
      font-weight: 700;
    }

    .auth-gate-note {
      font-size: var(--fs-sm);
      color: var(--text-muted);
    }

    body.auth-blocked {
      overflow: hidden;
    }

    .preload-blocked {
      overflow: hidden;
    }

    .app-preload-overlay {
      position: fixed;
      inset: 0;
      z-index: 2400;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(5, 8, 14, 0.82);
      backdrop-filter: blur(6px);
    }

    .app-preload-card {
      width: min(620px, 100%);
      padding: 28px 28px 24px;
      border-radius: var(--r-xl);
      border: 1px solid rgba(var(--accent-rgb), 0.28);
      background: linear-gradient(160deg, rgba(var(--surface-rgb), 0.98) 0%, rgba(var(--bg-rgb), 0.98) 100%);
      box-shadow: var(--elev-3);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .app-preload-kicker {
      font-size: var(--fs-xs);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .app-preload-title {
      font-size: var(--fs-xl);
      font-weight: 700;
      color: var(--text);
    }

    .app-preload-copy {
      font-size: var(--fs-md);
      line-height: 1.5;
      color: var(--text-muted);
    }

    .app-preload-progressbar {
      width: 100%;
      height: 10px;
      border-radius: var(--r-pill);
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
      border: 1px solid rgba(var(--accent-rgb), 0.18);
    }

    .app-preload-progressfill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.95) 0%, rgba(var(--verde-rgb), 0.95) 100%);
      transition: width 0.28s ease;
    }

    .app-preload-headrow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: var(--fs-sm);
      color: var(--text-muted);
    }

    .app-preload-stage-list {
      display: grid;
      gap: 10px;
    }

    .app-preload-stage {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 16px;
      padding: 10px 12px;
      border-radius: var(--r-md);
      border: 1px solid rgba(var(--accent-rgb), 0.14);
      background: rgba(19, 27, 40, 0.72);
    }

    .app-preload-stage-name {
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--text);
    }

    .app-preload-stage-detail {
      font-size: var(--fs-xs);
      color: var(--text-muted);
    }

    .app-preload-stage-status {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--accent-soft);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .app-preload-stage.is-done {
      border-color: rgba(var(--verde-rgb), 0.28);
      background: rgba(var(--verde-rgb), 0.08);
    }

    .app-preload-stage.is-running {
      border-color: rgba(var(--accent-rgb), 0.34);
      background: rgba(var(--accent-rgb), 0.08);
    }

    .app-preload-footnote {
      font-size: var(--fs-xs);
      color: var(--text-muted);
    }

    .app-preload-mini {
      position: sticky;
      top: calc(var(--header-current-height) + 72px);
      z-index: 950;
      margin: 0 16px;
      padding: 9px 12px;
      border-radius: var(--r-md);
      border: 1px solid rgba(var(--accent-rgb), 0.25);
      background: rgba(var(--bg-rgb), 0.92);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .app-preload-mini-copy {
      min-width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .app-preload-mini-title {
      font-size: var(--fs-xs);
      font-weight: 700;
    }

    .app-preload-mini-detail {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .app-preload-mini-bar-track {
      margin-top: 6px;
      height: 4px;
      width: 100%;
      background: rgba(var(--accent-rgb), 0.18);
      border-radius: var(--r-2xs);
      overflow: hidden;
    }
    .app-preload-mini-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--verde));
      border-radius: var(--r-2xs);
      transition: width 280ms ease-out;
    }

    /* ── ALERTA BANNER ── */
    #alerta-banner {
      padding: 10px 24px;
      font-size: var(--fs-md);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: all 0.3s;
    }

    /* ── Alerta cerrable ── */
    .alerta-banner-wrap { position: relative; }
    .alerta-banner-wrap.dismissed { display: none; }
    .alerta-banner-wrap > #alerta-banner { padding-right: 50px; }
    .alert-close-btn {
      position: absolute;
      top: 50%;
      right: 14px;
      transform: translateY(-50%);
      z-index: 4;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--r-xs);
      background: rgba(0, 0, 0, 0.18);
      color: var(--text-muted);
      font-size: var(--fs-base);
      line-height: 1;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .alert-close-btn:hover { color: var(--text); border-color: var(--text-muted); }

    .banner-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(1.3); }
    }

    /* ── LAYOUT ── */
    .main-grid {
      display: grid;
      grid-template-columns: 1fr 340px;
      grid-template-rows: auto auto var(--map-panel-height);
      gap: 0;
      flex: 1;
      min-height: 0;
      /* Sin este start, las filas `auto` se estiran (align-content:normal ≈
         stretch) para llenar el alto: las barras plegadas (align-self:start)
         quedaban ancladas arriba de una fila alta => gap fantasma de ~60px
         entre metricas y paneles. Con start las filas miden su contenido. */
      align-content: start;
    }

    /* ── KPI BAR ── */
    .dashboard-top-strip {
      grid-column: 1 / -1;
      display: flex;
      align-items: stretch;
      gap: 0;
      width: calc(100% - 16px);
      margin-left: 16px;
      align-self: start;
      position: relative;
    }

    /* ── KPI strip plegable ── */
    .kpi-collapse-toggle {
      position: absolute;
      top: -11px;
      right: 8px;
      z-index: 6;
      width: 34px;
      height: 18px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--r-xs);
      background: var(--surface);
      color: var(--text-muted);
      font-size: var(--fs-xs);
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .kpi-collapse-toggle:hover {
      color: var(--text);
      border-color: var(--text-muted);
    }
    .kpi-collapsed-hint {
      display: none;
      margin-left: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 4px 15px;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--surface) 96%, #fff),
        color-mix(in srgb, var(--surface) 90%, #000));
      color: var(--text-muted);
      font-size: var(--fs-2xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
      transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .kpi-collapsed-hint:hover {
      color: var(--text);
      border-color: var(--text-muted);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    .dashboard-top-strip.collapsed .kpi-bar,
    .dashboard-top-strip.collapsed .weather-strip-panel { display: none; }
    .dashboard-top-strip.collapsed .kpi-collapsed-hint { display: block; }
    /* Plegado: barra fina alineada (mismo left/ancho que overview) + sin toggle flotante */
    .dashboard-top-strip.collapsed { display: block; margin-left: 16px; width: calc(100% - 32px); }
    .dashboard-top-strip.collapsed .kpi-collapse-toggle,
    .overview-grid.collapsed .kpi-collapse-toggle { display: none; }

    .kpi-bar {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 1px;
      background: var(--border);
      /* Pill: la barra de metricas + el panel de meteo van pegados (gap:0);
         se redondean las esquinas EXTERNAS de cada uno para formar un solo
         rectangulo redondeado sin costura en la union. */
      border: 1px solid var(--border);
      border-top-left-radius: 11px;
      border-bottom-left-radius: 11px;
      overflow: hidden;
      width: min(1080px, calc(100% - 340px));
      flex: 0 0 auto;
    }

    .kpi-card {
      background: var(--surface);
      min-width: 0;
      padding: 11px 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      position: relative;
      overflow: visible;
    }

    .kpi-label {
      font-size: var(--fs-2xs);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.42px;
      line-height: 1.25;
    }

    .kpi-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .metric-tooltip-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
    }

    .metric-info-btn {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1px solid rgba(var(--text-dim-rgb), 0.45);
      background: rgba(255,255,255,0.04);
      color: var(--text-muted);
      font-size: var(--fs-xs);
      font-weight: 700;
      cursor: help;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0;
    }

    .metric-info-btn:hover,
    .metric-info-btn:focus-visible {
      border-color: var(--accent);
      color: var(--accent);
    }

    .metric-tooltip-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      min-width: 280px;
      max-width: 340px;
      padding: 12px 13px;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      background: rgba(var(--bg-rgb), 0.97);
      box-shadow: var(--elev-2);
      color: var(--text);
      font-size: var(--fs-xs);
      line-height: 1.45;
      z-index: 1200;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
      pointer-events: none;
      text-transform: none;
      letter-spacing: normal;
    }

    .metric-tooltip-wrap:hover .metric-tooltip-panel,
    .metric-tooltip-wrap.is-open .metric-tooltip-panel,
    .metric-tooltip-wrap:focus-within .metric-tooltip-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .metric-tooltip-title {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }

    .metric-tooltip-unit {
      color: var(--accent);
      margin-bottom: 6px;
    }

    .metric-tooltip-copy {
      color: var(--text-muted);
      margin-bottom: 6px;
    }

    .metric-tooltip-copy:last-child {
      margin-bottom: 0;
    }

    .metric-tooltip-panel a {
      color: var(--accent-soft);
      text-decoration: none;
    }

    .metric-tooltip-panel a:hover {
      text-decoration: underline;
    }

    .kpi-value {
      font-size: var(--fs-lg);
      font-weight: 700;
      line-height: 1.02;
    }

    .kpi-sub {
      font-size: var(--fs-2xs);
      color: var(--text-muted);
      line-height: 1.25;
    }

    .weather-strip-panel {
      min-width: 360px;
      flex: 1 1 380px;
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      border-top-right-radius: 11px;
      border-bottom-right-radius: 11px;
      overflow: hidden;
      background: var(--border);
    }

    .weather-strip-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 10px;
      background: var(--surface);
      border-left: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .weather-strip-title {
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      line-height: 1.15;
    }

    .weather-strip-meta {
      margin-top: 3px;
      font-size: var(--fs-xs);
      color: var(--text);
      line-height: 1.25;
    }

    .weather-strip-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .weather-filter-select {
      min-width: 170px;
      max-width: 220px;
      padding: 6px 10px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      background: #111723;
      color: var(--text);
      font-size: var(--fs-xs);
      font-family: 'Inter', sans-serif;
    }

    .weather-kpi-bar {
      min-width: 0;
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      background: var(--border);
      border-left: 1px solid var(--border);
    }

    .weather-kpi-bar .kpi-card {
      padding: 10px 9px;
    }

    .weather-kpi-bar .kpi-label {
      font-size: var(--fs-3xs);
      letter-spacing: 0.06em;
    }

    .weather-kpi-bar .kpi-value {
      font-size: var(--fs-base);
      line-height: 1.05;
    }

    .weather-kpi-bar .kpi-sub {
      font-size: var(--fs-3xs);
      line-height: 1.25;
    }

    .overview-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1.05fr 1fr 1.45fr 1.05fr;
      gap: 12px;
      width: calc(100% - 24px);
      margin: 12px auto 0;
      align-self: start;
      position: relative;
    }
    .overview-grid.collapsed { display: block; margin: 8px 0 0 16px; width: calc(100% - 32px); }
    .overview-grid.collapsed .overview-card { display: none; }
    .overview-grid.collapsed .kpi-collapsed-hint { display: block; }

    .overview-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 14px 16px;
      min-width: 0;
      box-shadow: var(--elev-1);
    }

    .overview-card .panel-title {
      margin-bottom: 10px;
    }

    .overview-card.overview-card-series {
      min-width: 0;
    }

    .overview-card.overview-card-alerts {
      min-width: 0;
    }

    .overview-card #alertas-recientes {
      max-height: 168px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .overview-card #alertas-recientes::-webkit-scrollbar {
      width: 4px;
    }

    .overview-card #alertas-recientes::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: var(--r-pill);
    }

    /* ── MAPA ── */
    .map-container {
      position: relative;
      background: var(--surface);
      border-right: 1px solid var(--border);
      height: var(--map-panel-height);
      min-height: var(--map-panel-height);
      overflow: hidden;
    }

    #map {
      height: 100%;
      min-height: 0;
    }

    .map-legend {
      position: absolute;
      bottom: 20px;
      left: 10px;
      z-index: 500;
      background: rgba(var(--bg-rgb), 0.93);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 10px 13px;
      font-size: var(--fs-xs);
      backdrop-filter: blur(6px);
      min-width: 155px;
      max-width: 200px;
    }

    .map-legend-title {
      font-weight: 700;
      margin-bottom: 7px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-size: var(--fs-2xs);
    }

    /* Gradient legend for index layers */
    .legend-gradient {
      height: 9px;
      border-radius: var(--r-xs);
      margin: 5px 0 2px;
    }
    .legend-scale-labels {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-2xs);
      color: var(--text-muted);
      margin-bottom: 3px;
    }
    .legend-formula {
      font-size: var(--fs-2xs);
      color: var(--text-dim);
      font-family: monospace;
      margin-top: 3px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 5px;
    }

    .legend-dot {
      width: 12px;
      height: 12px;
      border-radius: var(--r-2xs);
      flex-shrink: 0;
    }

    /* LAYER MENU */
    .map-layer-menu {
      position: absolute;
      top: 12px;
      right: 12px;
      left: auto;
      z-index: 700;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: min(360px, calc(100% - 24px));
    }
    .map-layer-menu-toggle {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      border-radius: var(--r-md);
      border: 1px solid rgba(88, 103, 136, 0.7);
      background: rgba(var(--bg-rgb), 0.92);
      color: var(--text);
      font-size: var(--fs-sm);
      font-weight: 700;
      cursor: pointer;
      backdrop-filter: blur(8px);
      box-shadow: var(--elev-1);
    }
    .map-layer-menu-toggle:hover {
      border-color: rgba(var(--accent-soft-rgb), 0.65);
      background: rgba(18, 23, 32, 0.96);
    }
    .map-layer-menu-panel {
      background: rgba(10, 14, 20, 0.94);
      border: 1px solid rgba(58, 75, 104, 0.85);
      border-radius: var(--r-lg);
      padding: 12px;
      backdrop-filter: blur(10px);
      box-shadow: var(--elev-2);
      max-height: min(74vh, 760px);
      overflow: auto;
    }
    .map-layer-menu-panel[hidden] {
      display: none;
    }
    .map-layer-menu-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .map-layer-menu-title {
      font-size: var(--fs-sm);
      font-weight: 800;
      color: var(--text);
    }
    .map-layer-menu-subtitle {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      margin-top: 3px;
    }
    .map-layer-menu-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }
    .map-layer-action {
      padding: 6px 9px;
      border-radius: var(--r-sm);
      border: 1px solid rgba(70, 88, 118, 0.8);
      background: rgba(20, 26, 36, 0.9);
      color: var(--text);
      font-size: var(--fs-2xs);
      font-weight: 700;
      cursor: pointer;
    }
    .map-layer-action:hover {
      border-color: rgba(var(--accent-soft-rgb), 0.65);
    }
    .map-layer-groups {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .map-layer-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .map-layer-group-title {
      margin: 0;
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(191, 208, 233, 0.88);
    }
    .map-layer-category-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 2px;
      margin: 0;
      background: none;
      border: none;
      cursor: pointer;
      color: inherit;
      text-align: left;
      width: 100%;
      user-select: none;
    }
    .map-layer-category-header:hover .map-layer-group-title {
      color: var(--text);
    }
    .map-layer-category-header:focus-visible {
      outline: 2px solid rgba(var(--accent-rgb), 0.55);
      outline-offset: 2px;
      border-radius: var(--r-2xs);
    }
    .map-layer-category-chevron {
      display: inline-block;
      font-size: var(--fs-xs);
      color: rgba(191, 208, 233, 0.7);
      transition: transform 150ms ease;
      transform: rotate(0deg);
    }
    .map-layer-group.is-collapsed .map-layer-category-chevron {
      transform: rotate(-90deg);
    }
    .map-layer-category-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .map-layer-category-body.collapsed {
      display: none;
    }
    .map-layer-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 9px 10px;
      border: 1px solid rgba(44, 58, 78, 0.92);
      border-radius: var(--r-md);
      background: rgba(16, 21, 30, 0.86);
    }
    .map-layer-item.is-active {
      border-color: rgba(var(--accent-rgb), 0.6);
      background: rgba(17, 28, 43, 0.92);
      box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.14);
    }
    .map-layer-item-main {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .map-layer-checkbox {
      margin-top: 2px;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .map-layer-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .map-layer-name {
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--text);
    }
    .map-layer-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: var(--fs-2xs);
      color: var(--text-muted);
    }
    .map-layer-source,
    .map-layer-zoom {
      padding: 2px 6px;
      border-radius: var(--r-pill);
      background: rgba(86, 102, 132, 0.18);
    }
    .map-layer-error {
      font-size: var(--fs-2xs);
      color: var(--rojo-soft);
    }
    .map-layer-opacity {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: 28px;
      color: var(--text-muted);
      font-size: var(--fs-2xs);
    }
    .map-layer-opacity input[type=range] {
      flex: 1;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .map-layer-opacity-inline {
      display: inline-flex;
      align-items: center;
      margin-left: auto;
      padding-left: 8px;
      flex-shrink: 0;
    }
    .map-layer-item-main {
      align-items: center;
    }
    input[type=range].layer-opacity {
      width: 72px;
      height: 14px;
      accent-color: var(--accent);
      cursor: pointer;
      margin: 0;
      padding: 0;
      background: transparent;
    }
    input[type=range].layer-opacity:focus-visible {
      outline: 2px solid rgba(var(--accent-rgb), 0.55);
      outline-offset: 2px;
      border-radius: var(--r-2xs);
    }
    .map-layer-item .map-layer-copy {
      flex: 1 1 auto;
      min-width: 0;
    }
    .map-timeline {
      position: absolute;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%);
      z-index: 710;
      width: min(900px, calc(100% - 28px));
      padding: 10px 14px;
      border: 1px solid rgba(58, 75, 104, 0.88);
      border-radius: var(--r-lg);
      background: rgba(10, 14, 20, 0.94);
      backdrop-filter: blur(10px);
      box-shadow: var(--elev-2);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .map-timeline.is-disabled {
      opacity: 0.72;
    }
    .map-timeline-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .map-timeline-head-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-left: auto;
    }
    .map-timeline-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: var(--fs-sm);
      font-weight: 800;
      color: var(--text);
    }
    .map-timeline-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      color: var(--text-muted);
      font-size: var(--fs-2xs);
    }
    .map-timeline-pill {
      padding: 3px 8px;
      border-radius: var(--r-pill);
      background: rgba(86, 102, 132, 0.18);
      border: 1px solid rgba(58, 75, 104, 0.45);
      color: var(--text);
    }
    .map-timeline-controls {
      display: grid;
      grid-template-columns: auto minmax(120px, 170px) minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }
    .map-timeline-button,
    .map-timeline-speed,
    .map-timeline-header-toggle {
      border: 1px solid rgba(var(--accent-rgb), 0.52);
      background: rgba(19, 27, 40, 0.96);
      color: var(--text);
      border-radius: var(--r-md);
      font-family: Inter, sans-serif;
      font-size: var(--fs-xs);
      font-weight: 700;
      padding: 8px 12px;
    }
    .map-timeline-button {
      cursor: pointer;
    }
    .map-timeline-header-toggle {
      cursor: pointer;
      white-space: nowrap;
    }
    .map-timeline-button:disabled,
    .map-timeline-speed:disabled,
    .map-timeline-slider:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .map-timeline-datecopy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .map-timeline-date {
      font-size: var(--fs-sm);
      font-weight: 800;
      color: var(--text);
    }
    .map-timeline-source {
      font-size: var(--fs-2xs);
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .map-timeline-slider {
      width: 100%;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .leaflet-officialOverlay-pane .leaflet-tile,
    .leaflet-satellite-pane .leaflet-tile {
      mix-blend-mode: normal !important;
    }

    .map-controls {
      display: none !important;
    }

    .map-opacity-wrap {
      display: none !important;
    }

    .timeline-dock {
      position: sticky;
      top: var(--header-current-height);
      z-index: 960;
      padding: 10px 16px 0;
      background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.98) 0%, rgba(var(--bg-rgb), 0.88) 74%, rgba(var(--bg-rgb), 0) 100%);
      transition: top 0.22s ease, padding 0.22s ease;
    }

    body.header-collapsed .timeline-dock {
      top: 0;
      padding: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    body.header-collapsed .timeline-dock .map-timeline {
      border-radius: 0;
      border-left: none;
      border-right: none;
      border-top: none;
      box-shadow: none;
      background: var(--surface);
    }

    body.header-collapsed .timeline-dock .map-timeline-title {
      font-size: var(--fs-sm);
    }

    body.header-collapsed .map-timeline-header-toggle {
      background: rgba(15, 23, 38, 0.55);
    }

    body.header-collapsed .app-preload-mini {
      top: 72px;
    }

    body.header-collapsed .timeline-dock {
      padding-top: 4px;
    }

    .timeline-dock .map-timeline {
      position: static;
      left: auto;
      bottom: auto;
      transform: none;
      width: 100%;
      margin: 0 auto;
      max-width: none;
    }

    /* Tile loading indicator */
    .map-tile-loading {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(var(--bg-rgb), 0.9);
      border: 1px solid var(--accent);
      border-radius: var(--r-xl);
      padding: 5px 14px;
      font-size: var(--fs-xs);
      color: var(--accent);
      display: none;
      z-index: 600;
      white-space: nowrap;
      animation: pulse 1.5s infinite;
    }
    @media (max-width: 920px) {
      .map-timeline-controls {
        grid-template-columns: 1fr;
      }
      .timeline-dock {
        padding: 8px 12px 0;
      }
      .map-tile-loading {
        bottom: 16px;
      }
    }

    /* ── SIDEBAR PANEL ── */
    .side-panel {
      background: var(--surface);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 0;
      height: var(--map-panel-height);
      min-height: 0;
    }

    .panel-section {
      border-bottom: 1px solid var(--border);
      padding: 16px;
    }

    .panel-title {
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-muted);
      margin-bottom: 12px;
      font-weight: 600;
    }

    .sidebar-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 3;
    }

    .sidebar-tab {
      border: 0;
      padding: 12px 14px;
      background: var(--surface2);
      color: var(--text-muted);
      font-family: inherit;
      font-size: var(--fs-sm);
      font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .sidebar-tab.active {
      background: rgba(var(--accent-rgb), 0.16);
      color: var(--accent);
    }

    .fields-toolbar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: end;
      margin-bottom: 12px;
    }

    .fields-grid {
      display: grid;
      gap: 10px;
    }

    .fields-grid.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fields-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .fields-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .fields-list-item {
      width: 100%;
      text-align: left;
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      background: rgba(255,255,255,0.03);
      padding: 10px 12px;
      cursor: pointer;
      color: var(--text);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .fields-list-item.compact {
      padding: 8px 10px;
    }

    .fields-list-item.active {
      border-color: var(--accent);
      background: rgba(var(--accent-rgb), 0.12);
    }

    .fields-list-title {
      font-size: var(--fs-sm);
      font-weight: 700;
    }

    .fields-list-copy {
      font-size: var(--fs-xs);
      color: var(--text-muted);
    }

    .fields-empty {
      padding: 12px;
      border: 1px dashed rgba(255,255,255,0.08);
      border-radius: var(--r-md);
      color: var(--text-muted);
      font-size: var(--fs-xs);
      line-height: 1.5;
    }

    .fields-list-clear {
      width: 100%;
      padding: 8px 12px;
      margin-bottom: 8px;
      background: rgba(255, 80, 80, 0.12);
      color: var(--rojo-soft);
      border: 1px solid rgba(255, 80, 80, 0.35);
      border-radius: var(--r-sm);
      font-size: var(--fs-xs);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .fields-list-clear:hover {
      background: rgba(255, 80, 80, 0.22);
      color: var(--rojo-soft);
    }

    .field-video-btn {
      width: 100%;
      padding: 8px 12px;
      margin-bottom: 8px;
      background: rgba(90, 140, 255, 0.14);
      color: var(--accent-soft);
      border: 1px solid rgba(90, 140, 255, 0.35);
      border-radius: var(--r-sm);
      font-size: var(--fs-xs);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .field-video-btn:hover {
      background: rgba(90, 140, 255, 0.25);
      color: var(--accent-soft);
    }

    .field-backfill-btn {
      width: 100%; padding: 8px 12px; margin-bottom: 8px;
      background: rgba(80, 200, 160, 0.14); color: var(--verde-soft);
      border: 1px solid rgba(80, 200, 160, 0.35); border-radius: var(--r-sm);
      font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
    }
    .field-backfill-btn:hover { background: rgba(80, 200, 160, 0.25); color: var(--verde-soft); }

    .field-video-modal-backdrop {
      position: fixed; inset: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 10000;
      display: flex; align-items: center; justify-content: center;
    }

    .field-video-modal {
      position: relative;
      background: #14181f;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--r-md);
      padding: 20px 22px 16px;
      max-width: 80vw; max-height: 80vh; min-width: 480px;
      box-shadow: var(--elev-3);
    }

    .field-video-title {
      font-size: var(--fs-md); font-weight: 700;
      color: #fff; margin-bottom: 12px;
    }

    .field-video-close {
      position: absolute; top: 8px; right: 10px;
      background: transparent; border: none;
      color: var(--text-muted); cursor: pointer;
      font-size: var(--fs-lg); line-height: 1;
    }
    .field-video-close:hover { color: #fff; }

    .field-video-body {
      display: flex; flex-direction: column;
      align-items: center; gap: 10px;
      min-height: 180px; justify-content: center;
    }

    .field-video-progress-text { font-size: var(--fs-sm); color: var(--text-muted); }

    .field-video-spinner {
      width: 38px; height: 38px;
      border: 3px solid rgba(255, 255, 255, 0.15);
      border-top-color: var(--accent-soft);
      border-radius: 50%;
      animation: field-video-spin 0.9s linear infinite;
    }
    @keyframes field-video-spin { to { transform: rotate(360deg); } }

    .field-video-player {
      max-width: 72vw; max-height: 60vh;
      border-radius: var(--r-sm); background: #000;
    }

    .field-video-meta { font-size: var(--fs-xs); color: var(--text-muted); }

    .field-video-error {
      color: var(--rojo-soft); font-size: var(--fs-sm);
      max-width: 420px; text-align: center;
    }

    .field-video-config-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      width: 100%;
      font-size: var(--fs-sm);
      color: var(--text);
    }

    .field-video-config-row label {
      min-width: 80px;
      font-weight: 600;
      color: var(--accent-soft);
    }

    .field-video-config-row select {
      flex: 1;
      padding: 6px 8px;
      background: #1b2230;
      color: var(--text);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--r-xs);
      font-size: var(--fs-sm);
      cursor: pointer;
    }

    .field-video-config-row select:focus {
      border-color: rgba(90, 140, 255, 0.6);
      box-shadow: 0 0 0 2px rgba(90, 140, 255, 0.25);
    }

    .field-video-config-actions {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin-top: 12px;
      width: 100%;
      justify-content: flex-end;
    }

    .field-video-config-submit {
      width: auto;
      margin-bottom: 0;
      padding: 8px 18px;
    }

    .field-video-config-submit:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .field-video-config-cancel {
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-muted);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--r-sm);
      font-size: var(--fs-xs);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .field-video-config-cancel:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text);
    }

    .fields-result-box {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--r-md);
      background: rgba(255,255,255,0.03);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .fields-result-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: var(--fs-xs);
    }

    .fields-note {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      line-height: 1.45;
    }

    .fields-analytics-card {
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--r-md);
      background: rgba(255,255,255,0.03);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 10px;
    }

    .fields-analytics-card.hidden {
      display: none;
    }

    .fields-analytics-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
    }

    .fields-analytics-title {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .fields-analytics-title strong {
      font-size: var(--fs-sm);
      color: var(--text);
    }

    .fields-analytics-copy {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      line-height: 1.45;
    }

    .fields-inline-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: var(--r-pill);
      font-size: var(--fs-2xs);
      font-weight: 700;
      letter-spacing: 0.02em;
      border: 1px solid rgba(255,255,255,0.12);
      color: var(--text);
      background: rgba(255,255,255,0.06);
      white-space: nowrap;
    }

    .fields-metrics-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .fields-metric {
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-md);
      background: rgba(10, 12, 18, 0.44);
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .fields-metric-label {
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }

    .fields-metric-value {
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--text);
    }

    .fields-list-analytics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px 10px;
      margin-top: 8px;
    }

    .fields-list-analytics span {
      font-size: var(--fs-2xs);
      color: var(--text-muted);
    }

    .fields-dialog-overlay {
      position: fixed;
      inset: 0;
      z-index: 2400;
      /* No bloquear clicks fuera del dialog: el usuario debe poder seguir
         interactuando con el mapa para validar el potrero. El dialog
         interno SI captura clicks. */
      pointer-events: none;
      padding: 18px;
      background: transparent;
    }

    .fields-dialog {
      position: absolute;
      top: 80px;
      right: 24px;
      width: min(420px, calc(100vw - 32px));
      border: 1px solid rgba(var(--accent-rgb), 0.45);
      border-radius: var(--r-lg);
      background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.98) 0%, rgba(var(--bg-rgb), 0.98) 100%);
      color: var(--text);
      box-shadow: var(--elev-3);
      pointer-events: auto;
      /* Animacion sutil al aparecer */
      transition: opacity 0.15s ease;
    }

    .fields-dialog-card {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 20px;
    }

    .fields-dialog-title {
      font-size: var(--fs-base);
      font-weight: 700;
      color: var(--text);
      cursor: move;
      user-select: none;
      /* Indicador visual de que es draggable */
      padding-right: 24px;
      position: relative;
    }
    .fields-dialog-title::after {
      content: "⋮⋮";
      position: absolute;
      right: 0;
      top: 0;
      color: rgba(255, 255, 255, 0.35);
      font-size: var(--fs-lg);
      letter-spacing: -2px;
    }
    .fields-dialog.is-dragging {
      transition: none;
      opacity: 0.92;
    }

    .fields-dialog-copy {
      font-size: var(--fs-sm);
      line-height: 1.45;
      color: var(--text-muted);
    }

    .fields-dialog-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .farm-label-marker {
      background: transparent;
      border: 0;
    }

    .farm-label-chip {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: 8px 10px;
      text-align: left;
      white-space: normal;
      min-width: 140px;
      border-radius: var(--r-md);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: var(--elev-1);
      transform: translate(-50%, -50%) scale(var(--farm-label-scale, 1));
      transform-origin: center center;
      cursor: grab;
      user-select: none;
    }

    .farm-label-chip:active {
      cursor: grabbing;
    }

    .farm-label-chip strong {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text);
      line-height: 1.15;
    }

    .farm-label-chip span {
      font-size: var(--fs-2xs);
      color: var(--text);
    }

    .farm-label-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2px 8px;
      width: 100%;
    }

    .farm-label-metric {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .farm-label-metric-label {
      font-size: var(--fs-3xs);
      color: rgba(220, 230, 244, 0.65);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.05;
    }

    .farm-label-metric-value {
      font-size: var(--fs-2xs);
      color: var(--text);
      line-height: 1.1;
      font-weight: 600;
    }

    .farm-label-chip[data-density="compact"] .farm-label-metrics {
      display: none;
    }

    .farm-label-chip[data-density="medium"] .farm-label-metric.detail-only {
      display: none;
    }

    .farm-label-chip-field {
      background: rgba(28, 59, 92, 0.84);
      border-color: rgba(93, 183, 255, 0.35);
    }

    .farm-label-chip-paddock {
      background: rgba(19, 55, 35, 0.86);
      border-color: rgba(140, 240, 190, 0.32);
    }

    .sidebar-view {
      display: flex;
      flex-direction: column;
    }

    .sidebar-view.hidden {
      display: none;
    }

    .settings-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 12px;
      background: rgba(var(--surface2-rgb), 0.72);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
    }

    .settings-toolbar {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .settings-meta {
      display: grid;
      gap: 6px;
      font-size: var(--fs-sm);
      color: var(--text-muted);
      line-height: 1.4;
    }

    .settings-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .settings-btn {
      padding: 9px 12px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      background: rgba(var(--bg-rgb), 0.92);
      color: var(--text);
      font-family: inherit;
      font-size: var(--fs-sm);
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }

    .settings-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(var(--accent-rgb), 0.45);
      background: rgba(var(--surface-rgb), 0.96);
    }

    .settings-btn.primary {
      border-color: rgba(var(--accent-rgb), 0.4);
      background: rgba(var(--accent-rgb), 0.14);
      color: var(--accent-soft);
    }

    .settings-btn.warn {
      border-color: rgba(var(--rojo-rgb), 0.35);
      background: rgba(var(--rojo-rgb), 0.12);
      color: var(--rojo-soft);
    }

    .settings-input {
      width: 100%;
      padding: 9px 10px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      background: rgba(var(--bg-rgb), 0.92);
      color: var(--text);
      font-family: inherit;
      font-size: var(--fs-sm);
    }

    .settings-input.invalid {
      border-color: var(--rojo);
      box-shadow: 0 0 0 1px rgba(var(--rojo-rgb), 0.2);
    }

    .settings-json {
      min-height: 124px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: var(--fs-xs);
      line-height: 1.45;
    }

    .settings-status {
      min-height: 40px;
      padding: 9px 10px;
      border-radius: var(--r-sm);
      background: rgba(var(--bg-rgb), 0.72);
      border: 1px dashed rgba(var(--text-dim-rgb), 0.25);
      font-size: var(--fs-sm);
      color: var(--text-muted);
      line-height: 1.45;
    }

    .settings-status[data-tone="success"] { color: var(--verde-soft); border-color: rgba(var(--verde-rgb), 0.4); }
    .settings-status[data-tone="error"] { color: var(--rojo-soft); border-color: rgba(var(--rojo-rgb), 0.4); }
    .settings-status[data-tone="info"] { color: var(--accent-soft); border-color: rgba(var(--accent-rgb), 0.4); }

    .settings-section-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
      background: rgba(var(--bg-rgb), 0.44);
      border: 1px solid rgba(var(--border-rgb), 0.9);
      border-radius: var(--r-md);
    }

    .settings-section-title {
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--text);
    }

    .settings-section-copy {
      font-size: var(--fs-sm);
      color: var(--text-muted);
      line-height: 1.45;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .settings-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .settings-field-wide {
      grid-column: 1 / -1;
    }

    .settings-field-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--text);
    }

    .settings-field-help {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      line-height: 1.4;
    }

    .profile-completion-banner {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 16px;
      margin: 0 16px;
      border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
      background: rgba(var(--accent-rgb), 0.08);
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease;
    }

    .profile-completion-banner:hover,
    .profile-completion-banner:focus-visible {
      background: rgba(var(--accent-rgb), 0.12);
      border-bottom-color: rgba(98, 176, 255, 0.5);
    }

    .profile-completion-copy {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      font-size: var(--fs-sm);
      color: var(--accent-soft);
    }

    .profile-completion-pill {
      padding: 3px 8px;
      border-radius: var(--r-pill);
      border: 1px solid rgba(var(--accent-soft-rgb), 0.35);
      background: rgba(var(--accent-soft-rgb), 0.12);
      color: var(--accent-soft);
      font-size: var(--fs-xs);
      font-weight: 700;
      flex-shrink: 0;
    }

    .profile-completion-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .profile-completion-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(var(--accent-soft-rgb), 0.28);
      background: rgba(15, 23, 38, 0.4);
      color: var(--accent-soft);
      cursor: pointer;
      font-size: var(--fs-base);
      font-weight: 700;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .profile-completion-close:hover,
    .profile-completion-close:focus-visible {
      background: rgba(15, 23, 38, 0.7);
      border-color: rgba(var(--accent-soft-rgb), 0.48);
    }

    .profile-identity-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .profile-identity-avatar {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      font-weight: 700;
    }

    .profile-identity-avatar-fallback {
      font-size: var(--fs-lg);
    }

    .profile-identity-name {
      font-size: var(--fs-base);
      font-weight: 700;
      color: var(--text);
    }

    .profile-identity-email {
      margin-top: 3px;
      font-size: var(--fs-sm);
      color: var(--text-muted);
    }

    .profile-identity-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      font-size: var(--fs-sm);
    }

    .profile-identity-grid div {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 9px 10px;
      border-radius: var(--r-sm);
      border: 1px solid rgba(var(--border-rgb), 0.9);
      background: rgba(var(--bg-rgb), 0.44);
      min-width: 0;
    }

    .profile-identity-grid strong {
      color: var(--text-muted);
      font-size: var(--fs-xs);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .profile-identity-grid span {
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .profile-summary-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      font-size: var(--fs-sm);
    }

    .profile-progress {
      width: 100%;
      height: 8px;
      border-radius: var(--r-pill);
      overflow: hidden;
      background: rgba(255,255,255,0.06);
      margin-bottom: 10px;
    }

    .profile-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--accent-strong) 0%, var(--accent-soft) 100%);
    }

    .profile-summary-copy {
      font-size: var(--fs-sm);
      line-height: 1.45;
      color: var(--text-muted);
    }

    .profile-checkbox-group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .profile-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 9px 10px;
      border-radius: var(--r-sm);
      border: 1px solid rgba(var(--border-rgb), 0.9);
      background: rgba(var(--bg-rgb), 0.44);
      font-size: var(--fs-sm);
      line-height: 1.4;
      color: var(--text);
    }

    .profile-checkbox input {
      margin-top: 2px;
    }

    .profile-multiselect {
      min-height: 160px;
    }

    .profile-scope-note {
      padding: 10px 12px;
      border-radius: var(--r-sm);
      border: 1px dashed rgba(var(--text-dim-rgb), 0.24);
      background: rgba(var(--bg-rgb), 0.44);
      font-size: var(--fs-sm);
      color: var(--text-muted);
    }

    .profile-form-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 4px;
    }

    .profile-form-meta {
      font-size: var(--fs-xs);
      color: var(--text-muted);
    }

    .settings-inherited,
    .settings-override {
      padding: 2px 7px;
      border-radius: var(--r-pill);
      font-size: var(--fs-2xs);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .settings-inherited {
      color: var(--text-muted);
      background: rgba(var(--text-dim-rgb), 0.14);
      border: 1px solid rgba(var(--text-dim-rgb), 0.18);
    }

    .settings-override {
      color: var(--accent);
      background: rgba(var(--accent-rgb), 0.14);
      border: 1px solid rgba(var(--accent-rgb), 0.2);
    }

    .settings-audit-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .settings-audit-item {
      padding: 10px 12px;
      border-radius: var(--r-sm);
      background: rgba(var(--bg-rgb), 0.48);
      border: 1px solid rgba(var(--border-rgb), 0.8);
    }

    .settings-audit-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 4px;
      font-size: var(--fs-sm);
      color: var(--text);
    }

    .settings-audit-meta,
    .settings-audit-empty {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      line-height: 1.4;
    }

    /* ── ALERTA CARD ── */
    .alerta-card {
      border-radius: var(--r-sm);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      border: 1px solid;
    }

    .alerta-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .alerta-nivel {
      font-size: var(--fs-base);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .alerta-badge {
      font-size: var(--fs-xs);
      padding: 2px 8px;
      border-radius: var(--r-md);
      background: rgba(255,255,255,0.1);
    }

    /* SPEC 4: badge de advertencia cuando la alerta corre sobre datos simulados. */
    .alerta-badge--simulated {
      background: rgba(var(--amarillo-rgb), 0.18);
      border: 1px solid var(--naranja);
      color: var(--naranja);
      font-weight: 700;
      letter-spacing: 0.03em;
    }
    /* Estado intermedio: dato interpolado/derivado (menos severo). */
    .alerta-badge--interpolated {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(var(--amarillo-rgb), 0.4);
      color: var(--text-muted);
    }

    .alerta-descripcion {
      font-size: var(--fs-sm);
      color: var(--text-muted);
      line-height: 1.5;
    }

    .alerta-accion {
      font-size: var(--fs-sm);
      font-weight: 500;
      padding: 6px 10px;
      background: rgba(255,255,255,0.07);
      border-radius: var(--r-xs);
      border-left: 3px solid currentColor;
    }

    /* ── INDICADORES ── */
    .indicador-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: var(--fs-sm);
    }

    .indicador-row:last-child { border-bottom: none; }

    .indicador-label { color: var(--text-muted); }

    .indicador-valor {
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    .import-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
      background: rgba(var(--surface2-rgb), 0.75);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
    }

    .import-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: var(--fs-sm);
      color: var(--text-muted);
    }

    .import-badge {
      min-width: 34px;
      padding: 4px 8px;
      border-radius: var(--r-pill);
      border: 1px solid rgba(var(--accent-rgb), 0.35);
      background: rgba(var(--accent-rgb), 0.12);
      color: var(--accent);
      text-align: center;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .import-help {
      font-size: var(--fs-sm);
      color: var(--text-muted);
      line-height: 1.45;
    }

    .import-select,
    .import-file {
      width: 100%;
      padding: 9px 10px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      background: rgba(var(--bg-rgb), 0.92);
      color: var(--text);
      font-family: inherit;
      font-size: var(--fs-sm);
    }

    .import-actions {
      display: flex;
      gap: 8px;
    }

    .import-btn {
      flex: 1;
      padding: 9px 12px;
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      background: rgba(var(--bg-rgb), 0.92);
      color: var(--text);
      font-family: inherit;
      font-size: var(--fs-sm);
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    }

    .import-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: rgba(var(--accent-rgb), 0.45);
      background: rgba(var(--surface-rgb), 0.96);
    }

    .import-btn:disabled {
      opacity: 0.6;
      cursor: wait;
    }

    .import-btn.primary {
      border-color: rgba(var(--verde-rgb), 0.35);
      background: rgba(var(--verde-rgb), 0.12);
      color: var(--verde-soft);
    }

    .import-status {
      min-height: 36px;
      padding: 8px 10px;
      border-radius: var(--r-sm);
      background: rgba(var(--bg-rgb), 0.72);
      border: 1px dashed rgba(var(--text-dim-rgb), 0.2);
      font-size: var(--fs-sm);
      color: var(--text-muted);
      line-height: 1.45;
    }

    /* Barra de humedad */
    .humedad-bar-wrap {
      margin-top: 4px;
    }

    .humedad-bar-label {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-xs);
      color: var(--text-muted);
      margin-bottom: 4px;
    }

    .humedad-bar {
      height: 8px;
      background: var(--surface2);
      border-radius: var(--r-2xs);
      overflow: hidden;
    }

    .humedad-bar-fill {
      height: 100%;
      border-radius: var(--r-2xs);
      transition: width 1s ease;
    }

    /* ── CHART ── */
    .chart-wrap {
      position: relative;
      height: 160px;
    }

    /* ── ALERTAS RECIENTES ── */
    .alerta-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      font-size: var(--fs-sm);
      border-bottom: 1px solid var(--border);
    }

    .alerta-item:last-child { border-bottom: none; }

    .alerta-item-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .alerta-item-fecha {
      color: var(--text-muted);
      font-size: var(--fs-xs);
      margin-left: auto;
    }

    /* ── SPI GAUGE ── */
    .spi-gauge {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 0;
    }

    .spi-value-big {
      font-size: var(--fs-3xl);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .spi-label {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .spi-bar-wrap {
      width: 100%;
      position: relative;
      margin-top: 6px;
    }

    .spi-scale {
      display: flex;
      height: 10px;
      border-radius: var(--r-xs);
      overflow: hidden;
    }

    .spi-scale-seg {
      flex: 1;
    }

    .spi-marker {
      position: absolute;
      top: -4px;
      width: 4px;
      height: 18px;
      background: white;
      border-radius: 2px;
      transform: translateX(-50%);
      transition: left 1s ease;
    }

    .spi-ticks {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-2xs);
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* ── SCROLL ── */
    .side-panel::-webkit-scrollbar { width: 4px; }
    .side-panel::-webkit-scrollbar-track { background: transparent; }
    .side-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* ── FOOTER ── */
    footer {
      grid-column: 1 / -1;
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 8px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--fs-xs);
      color: var(--text-muted);
    }

    .footer-sources {
      display: flex;
      gap: 16px;
    }

    .source-tag {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-2xs);
      padding: 2px 8px;
      font-size: var(--fs-xs);
    }

    @media (max-width: 1280px) {
      .dashboard-top-strip {
        width: calc(100% - 32px);
        margin-left: 16px;
      }

      .kpi-bar { width: min(1080px, calc(100% - 360px)); }

      .overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .kpi-card {
        padding: 10px 11px;
      }

      .kpi-value {
        font-size: var(--fs-lg);
      }
    }

    @media (max-width: 900px) {
      /* U1: el grid tenía columna fija de 340px que nunca colapsaba — en
         375px dejaba ~35px para el mapa. Ahora todo apila: strip, overview,
         mapa y panel en una sola columna. */
      .main-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto var(--map-panel-height) auto;
      }
      .side-panel {
        height: auto;
        max-height: none;
        border-top: 1px solid var(--border);
      }

      .dashboard-top-strip {
        display: grid;
        width: calc(100% - 20px);
        margin-left: 10px;
      }

      .kpi-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
      }

      .weather-strip-head {
        flex-direction: column;
        align-items: stretch;
      }

      .weather-strip-controls {
        width: 100%;
      }

      .weather-filter-select {
        width: 100%;
        max-width: none;
      }

      .weather-kpi-bar {
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .overview-grid {
        width: calc(100% - 20px);
      }

      .kpi-card {
        padding: 10px;
      }

      .map-controls {
        right: 10px;
        top: 58px;
      }

      .map-opacity-wrap {
        top: 10px;
        right: 10px;
      }

      .settings-toolbar,
      .settings-actions,
      .settings-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .kpi-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .weather-kpi-bar { grid-template-columns: 1fr; }

      .overview-grid {
        grid-template-columns: 1fr;
      }

      .kpi-value {
        font-size: var(--fs-base);
      }

      /* U1 — sidebar como drawer: rail visible por default, y al expandirse
         es un overlay que NO tapa todo el mapa (arranca colapsada en mobile
         desde initSidebar). `body .app-sidebar` sube especificidad para ganarle
         al bloque @media(max-width:960px) que viene después en el fuente. */
      body .app-sidebar {
        top: 60px;
        bottom: 12px;
        left: 8px;
        width: 52px;
      }
      body .app-sidebar:not(.is-collapsed) {
        width: min(320px, calc(100vw - 16px));
      }
      body.sidebar-collapsed { padding-left: 60px; }

      /* U1 — touch targets ≥44px (piso AA 24px) en controles críticos que
         eran de 14-18px e inoperables con el dedo. */
      .kpi-collapse-toggle { min-width: 44px; min-height: 26px; }
      .alert-close-btn { min-width: 40px; min-height: 40px; }
      .metric-info-btn { min-width: 26px; min-height: 26px; }
      .sb-scope-reset { min-width: 32px; min-height: 32px; }
      .sb-rail-btn { min-height: 44px; }
      .map-timeline-button, .map-timeline-toggle { min-height: 40px; }
      /* Agrandar el área táctil de los checkboxes de capas vía su label. */
      .sb-layer-row, .map-layer-item { min-height: 40px; }
      .sb-layer-checkbox, .map-layer-checkbox { min-width: 22px; min-height: 22px; }
    }

    /* U1 — mobile real (<400px): los min-width fijos desbordaban el viewport
       y forzaban scroll horizontal. */
    @media (max-width: 400px) {
      .weather-strip-panel { min-width: min(360px, 100%); }
      .field-video-modal { min-width: min(480px, calc(100vw - 24px)); }
      .metric-tooltip-panel { min-width: min(280px, calc(100vw - 32px)); max-width: calc(100vw - 24px); }
      .kpi-bar { grid-template-columns: 1fr; }
    }

    /* U1 — respeta prefers-reduced-motion: mata animaciones/transiciones para
       usuarios sensibles al movimiento (pulse infinito del banner, spinners,
       crossfades). WCAG 2.3.3. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ── SIDEBAR LATERAL MODERNA ──────────────────────────────────────
       Rail de íconos fijo (56px) + panel contenido (312px) que se colapsa.
       Inspirada en Mapbox Studio / Figma / Google Earth Engine dark mode. */
    .app-sidebar {
      position: fixed;
      left: 16px;
      top: 84px;
      bottom: 24px;
      width: 368px;           /* 56 rail + 312 contenido */
      z-index: 1100;
      display: flex;
      border-radius: var(--r-lg);
      border: 1px solid rgba(var(--accent-rgb), 0.22);
      background: linear-gradient(180deg, rgba(13, 18, 28, 0.98) 0%, rgba(8, 11, 18, 0.98) 100%);
      box-shadow: var(--elev-3);
      backdrop-filter: blur(10px);
      transition: width 180ms ease-out;
      overflow: hidden;
    }
    .app-sidebar.is-collapsed { width: 56px; }
    /* ── Rail de íconos ──────────────────────────────────────────── */
    .sb-rail {
      flex: 0 0 56px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 0;
      gap: 4px;
      background: rgba(4, 7, 12, 0.8);
      border-right: 1px solid rgba(var(--accent-rgb), 0.14);
    }
    .sb-rail-brand {
      width: 36px; height: 36px;
      border-radius: var(--r-md);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 6px;
    }
    .sb-rail-brand-dot {
      width: 14px; height: 14px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--verde));
      box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55);
    }
    .sb-rail-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; width: 100%; padding: 0 6px; }
    .sb-rail-foot { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0 6px; }
    .sb-rail-btn {
      appearance: none;
      width: 44px; height: 40px;
      margin: 0 auto;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-muted);
      border-radius: var(--r-md);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 140ms ease-out;
    }
    .sb-rail-btn:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--text); }
    .sb-rail-btn.is-active {
      background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--verde-rgb), 0.16));
      border-color: rgba(var(--accent-rgb), 0.36);
      color: #fff;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    .sb-rail-btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.6); outline-offset: 2px; }
    .sb-icon { width: 20px; height: 20px; display: block; }
    .sb-rail-collapse { color: var(--text-dim); }
    .app-sidebar.is-collapsed .sb-rail-collapse .sb-icon { transform: rotate(180deg); transition: transform 180ms ease-out; }
    .sb-rail-collapse .sb-icon { transition: transform 180ms ease-out; }

    /* ── Panel de contenido ─────────────────────────────────────── */
    .sb-content {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-width: 0;
      opacity: 1;
      transition: opacity 120ms ease-out 60ms;
    }
    .app-sidebar.is-collapsed .sb-content { opacity: 0; pointer-events: none; }
    .sb-content-head {
      padding: 16px 18px 12px;
      border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
    }
    .sb-content-title {
      font-size: var(--fs-base);
      font-weight: 600;
      color: var(--text);
      letter-spacing: 0.02em;
    }
    .sb-content-body {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .sb-content-body::-webkit-scrollbar { width: 6px; }
    .sb-content-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.28); border-radius: var(--r-2xs); }
    .sb-content-foot { padding: 8px 14px; color: var(--text-dim); font-size: var(--fs-2xs); border-top: 1px solid rgba(var(--accent-rgb), 0.08); }
    .sb-scope-chip { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
    .sb-scope-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: 0 0 auto; }
    .sb-scope-chip[data-scope="departamento"] .sb-scope-dot { background: var(--accent); }
    .sb-scope-chip[data-scope="seccion"] .sb-scope-dot { background: var(--amarillo); }
    .sb-scope-chip[data-scope="field"] .sb-scope-dot { background: var(--naranja); }
    .sb-scope-label { flex: 1; color: var(--accent-soft); font-size: var(--fs-xs); letter-spacing: 0.02em; }
    .sb-scope-reset { appearance: none; border: 1px solid rgba(var(--accent-rgb), 0.32); background: transparent; color: var(--accent-soft); width: 22px; height: 22px; border-radius: var(--r-xs); cursor: pointer; font-size: var(--fs-sm); line-height: 1; }
    .sb-scope-reset:hover { background: rgba(var(--accent-rgb), 0.14); }

    /* ── Tarjetas genéricas ─────────────────────────────────────── */
    .sb-card {
      display: flex; flex-direction: column; gap: 10px;
      padding: 12px;
      border-radius: var(--r-md);
      background: rgba(17, 23, 35, 0.55);
      border: 1px solid rgba(var(--accent-rgb), 0.14);
    }
    .sb-card-copy { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
    .sb-card-actions { display: flex; flex-direction: column; gap: 6px; }
    .sb-btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 8px 12px;
      border-radius: var(--r-sm);
      background: transparent;
      border: 1px solid rgba(var(--accent-rgb), 0.32);
      color: var(--accent-soft);
      font-size: var(--fs-sm);
      font-family: inherit;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: all 140ms ease-out;
    }
    .sb-btn:hover { background: rgba(var(--accent-rgb), 0.14); color: var(--text); border-color: rgba(var(--accent-rgb), 0.48); }
    .sb-btn.primary {
      background: linear-gradient(135deg, var(--accent), var(--verde));
      border-color: transparent;
      color: #0a0e16;
      font-weight: 600;
    }
    .sb-btn.primary:hover { filter: brightness(1.1); color: #0a0e16; }
    .sb-btn.ghost { border-style: dashed; color: var(--text-dim); }

    /* ── Capas ──────────────────────────────────────────────────── */
    .sb-layer-group { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: rgba(17, 23, 35, 0.55); border: 1px solid rgba(var(--accent-rgb), 0.14); }
    .sb-layer-group-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 0 6px; }
    .sb-layer-group-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); letter-spacing: 0.02em; }
    .sb-layer-group-hint { font-size: var(--fs-2xs); color: var(--text-dim); }
    .sb-layer-group-body { display: flex; flex-direction: column; gap: 2px; }
    .sb-layer-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 8px;
      border-radius: var(--r-sm);
      cursor: pointer;
      transition: background 140ms ease-out;
    }
    .sb-layer-row:hover { background: rgba(var(--accent-rgb), 0.08); }
    .sb-layer-row.is-active { background: rgba(var(--verde-rgb), 0.1); }
    .sb-layer-checkbox {
      appearance: none;
      width: 14px; height: 14px;
      border-radius: var(--r-2xs);
      border: 1.5px solid rgba(var(--accent-rgb), 0.5);
      cursor: pointer;
      position: relative;
      flex: 0 0 auto;
      background: transparent;
    }
    .sb-layer-checkbox:checked { background: var(--verde); border-color: var(--verde); }
    .sb-layer-checkbox:checked::after {
      content: '';
      position: absolute;
      left: 3px; top: 0px;
      width: 4px; height: 8px;
      border: solid #0a0e16;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .sb-layer-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
    .sb-layer-label { font-size: var(--fs-sm); color: var(--text); font-weight: 500; }
    .sb-layer-hint { font-size: var(--fs-2xs); color: var(--text-dim); }

    /* ── Alerta actual ──────────────────────────────────────────── */
    .sb-alerts-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-md); background: rgba(17, 23, 35, 0.55); border: 1px solid rgba(var(--accent-rgb), 0.14); }
    .sb-alerts-scope { font-size: var(--fs-xs); color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.08em; }
    .sb-alerts-level { font-size: var(--fs-lg); font-weight: 700; color: var(--amarillo); letter-spacing: 0.02em; }
    .sb-alerts-level[data-level="Emergencia"], .sb-alerts-level[data-level="ROJO"] { color: var(--rojo); }
    .sb-alerts-level[data-level="Alerta"], .sb-alerts-level[data-level="NARANJA"] { color: var(--naranja); }
    .sb-alerts-level[data-level="Vigilancia"], .sb-alerts-level[data-level="AMARILLO"] { color: var(--amarillo); }
    .sb-alerts-level[data-level="Normal"], .sb-alerts-level[data-level="VERDE"] { color: var(--verde); }
    .sb-alerts-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .sb-alerts-metric { display: flex; flex-direction: column; padding: 8px 10px; background: rgba(var(--accent-rgb), 0.08); border-radius: var(--r-sm); }
    .sb-alerts-metric-label { font-size: var(--fs-2xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
    .sb-alerts-metric-value { font-size: var(--fs-base); color: var(--text); font-weight: 600; }

    /* ── Perfil ─────────────────────────────────────────────────── */
    .sb-profile-name { font-size: var(--fs-base); color: var(--text); font-weight: 600; }
    .sb-profile-sub { font-size: var(--fs-sm); color: var(--text-muted); }

    /* ── Diagnóstico ────────────────────────────────────────────── */
    .sb-diag-header { display: flex; flex-wrap: wrap; gap: 6px; }
    .sb-diag-pill { padding: 3px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; background: rgba(var(--accent-rgb), 0.14); color: var(--accent-soft); }
    .sb-diag-pill-error { background: rgba(var(--rojo-rgb), 0.18); color: var(--rojo-soft); }
    .sb-diag-pill-fetch { background: rgba(var(--amarillo-rgb), 0.14); color: #f4d76b; }
    .sb-diag-pill-action { background: rgba(var(--verde-rgb), 0.18); color: var(--verde-soft); }
    .sb-diag-copy { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
    .sb-diag-status { font-size: var(--fs-xs); color: var(--text-dim); min-height: 14px; }
    .sb-diag-status[data-tone="success"] { color: var(--verde-soft); }
    .sb-diag-status[data-tone="error"] { color: var(--rojo-soft); }
    .sb-diag-status[data-tone="info"] { color: var(--accent-soft); }

    /* Modal de diagnóstico */
    .sb-diag-modal {
      position: fixed; inset: 0; z-index: 3000;
      display: flex; align-items: center; justify-content: center;
    }
    .sb-diag-backdrop { position: absolute; inset: 0; background: rgba(5,8,14,0.75); backdrop-filter: blur(6px); }
    .sb-diag-dialog {
      position: relative;
      width: min(1100px, 92vw);
      height: min(700px, 85vh);
      background: linear-gradient(180deg, rgba(13, 18, 28, 0.98) 0%, rgba(8, 11, 18, 0.98) 100%);
      border: 1px solid rgba(var(--accent-rgb), 0.24);
      border-radius: var(--r-lg);
      box-shadow: var(--elev-3);
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .sb-diag-dialog-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.16); }
    .sb-diag-dialog-title { font-weight: 600; color: var(--text); flex: 0 0 auto; }
    .sb-diag-filters { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
    .sb-diag-filter { appearance: none; border: 1px solid rgba(var(--accent-rgb), 0.24); background: transparent; color: var(--accent-soft); padding: 5px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-xs); }
    .sb-diag-filter:hover { background: rgba(var(--accent-rgb), 0.1); }
    .sb-diag-filter.is-active { background: rgba(var(--accent-rgb), 0.22); color: var(--text); border-color: rgba(var(--accent-rgb), 0.4); }
    .sb-diag-close { appearance: none; border: 1px solid rgba(var(--accent-rgb), 0.24); background: transparent; color: var(--accent-soft); width: 34px; height: 34px; border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .sb-diag-close:hover { background: rgba(var(--rojo-rgb), 0.18); color: var(--rojo-soft); }
    .sb-diag-table-wrap { flex: 1; overflow: auto; padding: 4px 16px 16px; }
    .sb-diag-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); color: var(--text); }
    .sb-diag-table thead { position: sticky; top: 0; background: rgba(5,8,14,0.96); z-index: 1; }
    .sb-diag-table th { text-align: left; font-weight: 600; color: var(--accent-soft); padding: 8px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.18); letter-spacing: 0.02em; }
    .sb-diag-table td { padding: 6px 8px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.06); vertical-align: top; }
    .sb-diag-row-error td { background: rgba(var(--rojo-rgb), 0.08); color: var(--rojo-soft); }
    .sb-diag-row-warn td { background: rgba(var(--amarillo-rgb), 0.06); color: #f4d76b; }
    .sb-diag-row-action td { color: var(--verde-soft); }
    .sb-diag-t { white-space: nowrap; color: var(--text-dim); font-family: 'SF Mono', Menlo, monospace; font-size: var(--fs-xs); }
    .sb-diag-level { text-transform: uppercase; font-weight: 600; font-size: var(--fs-xs); }
    .sb-diag-type { color: var(--text-muted); font-size: var(--fs-xs); }
    .sb-diag-msg { min-width: 280px; word-break: break-word; }
    .sb-diag-meta { max-width: 380px; color: var(--text-dim); font-family: 'SF Mono', Menlo, monospace; font-size: var(--fs-xs); word-break: break-all; }
    .sb-diag-dialog-foot { padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(var(--accent-rgb), 0.16); font-size: var(--fs-xs); color: var(--accent-soft); }

    /* El sidebar flota por encima del contenido (overlay arrastrable); el
       contenido arranca desde el borde izquierdo, sin desplazamiento. */
    body { padding-left: 0; }
    body.sidebar-collapsed { padding-left: 0; }
    /* Handle de arrastre del sidebar: el brand (punto verde arriba del rail). */
    .sb-rail-brand { cursor: move; }
    .sb-rail-brand::after {
      content: "⠿";
      display: block;
      margin-top: 4px;
      font-size: var(--fs-xs);
      line-height: 1;
      color: rgba(120, 150, 190, 0.55);
    }
    .app-sidebar.sb-dragging { transition: none !important; user-select: none; }
    @media (max-width: 960px) {
      .app-sidebar { top: 72px; bottom: 16px; left: 8px; width: 320px; }
      body { padding-left: 0; }
      body.sidebar-collapsed { padding-left: 72px; }
      body:not(.sidebar-collapsed) .app-sidebar {
        box-shadow: var(--elev-3);
      }
    }

    /* Timeline event dots */
    .timeline-events-track {
      position: relative;
      height: 14px;
      margin-top: 6px;
      pointer-events: none;
    }
    .timeline-event {
      position: absolute;
      top: 3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      transform: translateX(-50%);
      pointer-events: auto;
      cursor: pointer;
      box-shadow: 0 0 0 2px rgba(10, 14, 22, 0.7);
      transition: transform 0.14s ease;
    }
    .timeline-event:hover { transform: translateX(-50%) scale(1.45); }
    .timeline-event[data-severity="Normal"] { background: var(--verde); }
    .timeline-event[data-severity="Vigilancia"] { background: var(--amarillo); }
    .timeline-event[data-severity="Alerta"] { background: var(--naranja); }
    .timeline-event[data-severity="Emergencia"] { background: var(--rojo); }
    .timeline-event-tooltip {
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%);
      padding: 6px 9px;
      background: rgba(5, 8, 14, 0.95);
      border: 1px solid rgba(var(--accent-rgb), 0.32);
      border-radius: var(--r-xs);
      font-size: var(--fs-xs);
      color: var(--text);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.14s ease;
    }
    .timeline-event:hover .timeline-event-tooltip { opacity: 1; }

    /* ── ML Predicciones ────────────────────────────────────────── */
    .ml-panel { display: flex; flex-direction: column; gap: 10px; }
    .ml-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 4px 2px;
      font-size: var(--fs-xs); color: var(--accent-soft); letter-spacing: 0.04em;
    }
    .ml-panel-header-field {
      color: var(--text); font-weight: 600; font-size: var(--fs-xs);
      max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ml-panel-header-empty { color: var(--text-dim); font-style: italic; }
    /* SPEC 3: badge "Experimental" del panel ML (modelos no calibrados). */
    .ml-experimental-badge {
      display: inline-block;
      margin-left: 4px;
      padding: 1px 6px;
      border-radius: var(--r-md);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--naranja);
      background: rgba(var(--amarillo-rgb), 0.16);
      border: 1px solid rgba(var(--amarillo-rgb), 0.45);
      vertical-align: middle;
    }
    .ml-empty-hint {
      padding: 12px; border-radius: var(--r-md);
      background: rgba(17, 23, 35, 0.45);
      border: 1px dashed rgba(var(--accent-rgb), 0.18);
      font-size: var(--fs-sm); color: var(--text-muted); text-align: center; line-height: 1.4;
    }
    .ml-panel-error {
      padding: 8px 10px; border-radius: var(--r-sm);
      background: rgba(var(--rojo-rgb), 0.14);
      border: 1px solid rgba(var(--rojo-rgb), 0.32);
      color: var(--rojo-soft); font-size: var(--fs-xs);
    }
    .ml-models-list {
      display: flex; flex-direction: column; gap: 2px;
      padding: 6px; border-radius: var(--r-md);
      background: rgba(17, 23, 35, 0.55);
      border: 1px solid rgba(var(--accent-rgb), 0.14);
    }
    .ml-models-list.is-disabled { opacity: 0.55; pointer-events: none; }
    .ml-model-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px;
      border-radius: var(--r-sm);
      cursor: pointer;
      transition: background 140ms ease-out;
    }
    .ml-model-row:hover { background: rgba(var(--accent-rgb), 0.08); }
    .ml-model-row.is-selected { background: rgba(var(--verde-rgb), 0.06); }
    .ml-model-checkbox {
      appearance: none;
      width: 14px; height: 14px;
      border-radius: var(--r-2xs);
      border: 1.5px solid rgba(var(--accent-rgb), 0.5);
      cursor: pointer;
      position: relative; flex: 0 0 auto;
      background: transparent;
    }
    .ml-model-checkbox:checked { background: var(--verde); border-color: var(--verde); }
    .ml-model-checkbox:checked::after {
      content: '';
      position: absolute;
      left: 3px; top: 0px;
      width: 4px; height: 8px;
      border: solid #0a0e16;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    .ml-model-emoji { font-size: var(--fs-base); flex: 0 0 auto; }
    .ml-model-label { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text); font-weight: 500; }
    .ml-pill {
      flex: 0 0 auto;
      padding: 2px 8px;
      border-radius: var(--r-pill);
      font-size: var(--fs-2xs);
      font-weight: 600;
      letter-spacing: 0.02em;
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(var(--accent-rgb), 0.14);
      color: var(--accent-soft);
      white-space: nowrap;
    }
    .ml-pill[data-status="queued"] { background: rgba(120, 130, 150, 0.18); color: var(--text-muted); }
    .ml-pill[data-status="running"] { background: rgba(var(--accent-rgb), 0.22); color: var(--accent-soft); }
    .ml-pill[data-status="done"] { background: rgba(var(--verde-rgb), 0.18); color: var(--verde-soft); }
    .ml-pill[data-status="failed"] { background: rgba(var(--rojo-rgb), 0.18); color: var(--rojo-soft); }
    .ml-pill[data-status="idle"] { background: transparent; color: var(--text-dim); }
    .ml-elapsed {
      font-family: 'SF Mono', Menlo, monospace;
      font-size: var(--fs-2xs); color: var(--accent-soft);
      margin-left: 4px;
    }
    .ml-spinner-mini {
      width: 10px; height: 10px;
      border: 1.5px solid rgba(var(--accent-soft-rgb), 0.25);
      border-top-color: var(--accent-soft);
      border-radius: 50%;
      animation: field-video-spin 0.9s linear infinite;
      flex: 0 0 auto;
    }
    .ml-result-summary {
      padding: 4px 10px 6px 36px;
      font-size: var(--fs-xs); color: var(--text-muted);
      line-height: 1.4;
      word-break: break-word;
    }
    .ml-retry-link {
      background: transparent; border: none;
      color: var(--accent-soft); font-size: var(--fs-2xs);
      text-decoration: underline; cursor: pointer;
      padding: 0; margin-left: 4px;
      font-family: inherit;
    }
    .ml-retry-link:hover { color: var(--text); }
    .ml-crop-form {
      display: flex; flex-direction: column; gap: 6px;
      padding: 8px 10px 10px 36px;
      font-size: var(--fs-xs); color: var(--text-muted);
    }
    .ml-crop-form label { display: flex; flex-direction: column; gap: 3px; }
    .ml-crop-form select,
    .ml-crop-form input {
      appearance: none;
      padding: 5px 8px;
      border-radius: var(--r-xs);
      border: 1px solid rgba(var(--accent-rgb), 0.32);
      background: rgba(8, 11, 18, 0.7);
      color: var(--text);
      font-family: inherit;
      font-size: var(--fs-xs);
    }
    .ml-run-btn { margin-top: 4px; }
    .ml-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Fase 3a: pantalla de planes / suscripción ──────────────────── */
    .billing-panel { display: flex; flex-direction: column; gap: 12px; }
    .billing-loading {
      padding: 14px; border-radius: var(--r-md);
      background: rgba(17, 23, 35, 0.45);
      border: 1px dashed rgba(var(--accent-rgb), 0.18);
      color: var(--text-muted); font-size: var(--fs-sm); text-align: center;
    }
    .billing-status {
      display: flex; flex-direction: column; gap: 6px;
      padding: 10px 12px; border-radius: var(--r-md);
      background: rgba(17, 23, 35, 0.55);
      border: 1px solid rgba(var(--accent-rgb), 0.14);
    }
    .billing-status-badge {
      align-self: flex-start;
      padding: 2px 8px; border-radius: var(--r-pill);
      font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.03em;
      color: var(--verde-soft);
      background: rgba(var(--verde-rgb), 0.16);
      border: 1px solid rgba(var(--verde-rgb), 0.4);
    }
    .billing-status-copy { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
    .billing-error {
      display: flex; flex-direction: column; gap: 8px;
      padding: 12px; border-radius: var(--r-md);
      background: rgba(var(--rojo-rgb), 0.1);
      border: 1px solid rgba(var(--rojo-rgb), 0.3);
    }
    .billing-error-title { font-size: var(--fs-sm); font-weight: 600; color: var(--rojo-soft); }
    .billing-error-copy { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
    .billing-plan-list { display: flex; flex-direction: column; gap: 12px; }
    .billing-plan-card {
      display: flex; flex-direction: column; gap: 10px;
      padding: 14px; border-radius: var(--r-md);
      background: rgba(17, 23, 35, 0.55);
      border: 1px solid rgba(var(--accent-rgb), 0.14);
    }
    .billing-plan-card.is-current {
      border-color: rgba(var(--verde-rgb), 0.55);
      box-shadow: inset 0 0 0 1px rgba(var(--verde-rgb), 0.3);
    }
    .billing-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .billing-plan-name { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
    .billing-plan-badge {
      padding: 2px 8px; border-radius: var(--r-pill);
      font-size: var(--fs-3xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--verde-soft);
      background: rgba(var(--verde-rgb), 0.16);
      border: 1px solid rgba(var(--verde-rgb), 0.4);
    }
    .billing-price { display: flex; flex-direction: column; gap: 2px; }
    .billing-price-usd { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
    .billing-price-amount { color: var(--accent-soft); }
    .billing-price-period { font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim); }
    .billing-price-uyu { font-size: var(--fs-xs); color: var(--text-muted); }
    .billing-price-annual { font-size: var(--fs-2xs); color: var(--text-dim); }
    .billing-features { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
    .billing-feature {
      display: grid; grid-template-columns: 16px 1fr auto; align-items: baseline; gap: 8px;
      font-size: var(--fs-xs); color: var(--text);
    }
    .billing-feature-mark { color: var(--verde); font-weight: 700; text-align: center; }
    .billing-feature-value { color: var(--accent-soft); font-weight: 600; }
    .billing-feature.is-off { color: var(--text-dim); }
    .billing-feature.is-off .billing-feature-mark { color: var(--text-dim); font-weight: 400; }
    .billing-feature.is-off .billing-feature-value { color: var(--text-dim); font-weight: 400; }
    .billing-cta { width: 100%; margin-top: 2px; }
    .billing-cta:disabled { opacity: 0.55; cursor: not-allowed; }
    .billing-note { font-size: var(--fs-2xs); color: var(--text-dim); line-height: 1.4; min-height: 0; }
    .billing-note[data-tone="info"] { color: var(--accent-soft); }
    .billing-footnote {
      font-size: var(--fs-2xs); color: var(--text-dim); line-height: 1.45;
      padding: 8px 10px; border-radius: var(--r-sm);
      background: rgba(17, 23, 35, 0.4);
      border: 1px dashed rgba(var(--accent-rgb), 0.16);
    }

    /* U2: foco visible GLOBAL (WCAG 2.4.7). Las reglas especificas por
       componente lo refinan; el select del modal de video mantiene su
       anillo box-shadow propio. */
    :focus-visible {
      outline: 2px solid rgba(var(--accent-rgb), 0.65);
      outline-offset: 2px;
    }
    .field-video-config-row select:focus { outline: none; }

    /* ── U3b: breadcrumb de scope sobre el mapa ─────────────────────── */
    .scope-breadcrumb {
      position: absolute;
      top: 12px;
      left: 56px;
      z-index: 850;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      max-width: min(70%, 640px);
      pointer-events: none;
    }
    .scope-crumb {
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: var(--r-pill);
      border: 1px solid var(--border);
      background: rgba(var(--bg-rgb), 0.88);
      color: var(--text);
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.3px;
      cursor: pointer;
      box-shadow: var(--elev-1);
      transition: border-color 0.15s, color 0.15s;
    }
    .scope-crumb:hover { border-color: var(--accent); }
    .scope-crumb.is-current {
      border-color: rgba(var(--accent-rgb), 0.55);
      color: var(--accent-soft);
      cursor: default;
    }
    .scope-crumb-sep { color: var(--text-dim); font-size: var(--fs-xs); pointer-events: none; }
    .scope-crumb.ghost {
      border-style: dashed;
      color: var(--text-dim);
      background: rgba(var(--bg-rgb), 0.65);
      box-shadow: none;
      font-weight: 500;
    }
    .scope-crumb.ghost:hover { color: var(--accent-soft); border-color: rgba(var(--accent-rgb), 0.5); }
    @media (max-width: 640px) {
      /* Debajo de la fila de controles (zoom izq / Capas der) para no
         taparlos; el z queda por debajo del menu de capas. */
      .scope-breadcrumb { left: 8px; right: 8px; top: 56px; max-width: none; z-index: 650; }
      .scope-crumb { padding: 3px 10px; }
    }

    /* U3c: header plegable de grupos de capas (button sin chrome nativo). */
    .sb-layer-group-head-toggle {
      background: none;
      border: 0;
      width: 100%;
      text-align: left;
      font: inherit;
      color: inherit;
      cursor: pointer;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }
    .sb-layer-group-chevron { color: var(--text-dim); font-size: var(--fs-2xs); }

    /* ── U4: estados vacios con causa + fade del overlay de precarga ── */
    .empty-state {
      color: var(--text-muted);
      font-size: var(--fs-sm);
      padding: 12px 14px;
      border: 1px dashed var(--border);
      border-radius: var(--r-md);
      background: rgba(var(--bg-rgb), 0.35);
      line-height: 1.45;
    }
    .app-preload-overlay { transition: opacity 0.35s ease; }
    .app-preload-overlay.is-fading { opacity: 0; pointer-events: none; }

    /* Barras plegadas ACOPLADAS: cuando metricas Y paneles estan plegadas,
       se fusionan en un solo acordeon — sin gap, esquinas compartidas y un
       unico borde en la union (pedido: "perfectamente acopladas"). */
    .dashboard-top-strip.collapsed:has(+ .overview-grid.collapsed) .kpi-collapsed-hint {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: 0;
    }
    .dashboard-top-strip.collapsed + .overview-grid.collapsed {
      margin-top: 0;
    }
    .dashboard-top-strip.collapsed + .overview-grid.collapsed .kpi-collapsed-hint {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }