/* ─────────────────────────────────────────────────────────────
   pages/presupuesto_ejecutivo.py — estilos.
   TODO selector va prefijado con .pe-root: los archivos de assets/ los
   carga Dash en TODAS las páginas, así que sin el prefijo estas reglas
   (muchas sobre selectores genéricos: table, td, select, label...)
   romperían el resto del portal. Paleta y componentes son una réplica
   1:1 de docs/presupuesto/Presupuesto_2026_0409026.html (mockup
   aprobado por el usuario, 2026-09-03).
   ───────────────────────────────────────────────────────────── */

.pe-root {
  --pe-navy-900:#0a1f3d; --pe-navy-800:#0f2b52; --pe-navy-700:#173a68; --pe-navy-600:#1f4a82;
  --pe-gold:#e0a83e; --pe-gold-light:#f2c877;
  --pe-surface-1:#ffffff; --pe-surface-2:#f6f8fb;
  --pe-border:#e2e6ee; --pe-border-strong:#c7cede;
  --pe-text-primary:#101828; --pe-text-secondary:#5a6b8c; --pe-text-muted:#8b96ad; --pe-text-inverse:#ffffff;
  --pe-text-success:#1e7d4a; --pe-text-warning:#a8710a; --pe-text-danger:#a3241f;
  --pe-bg-success:#e5f3ea; --pe-bg-warning:#fbeed4; --pe-bg-danger:#f6e2e0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color: var(--pe-text-primary);
}

.pe-topbar { background: linear-gradient(135deg,var(--pe-navy-900),var(--pe-navy-700)); padding: 1.5rem 2.5rem 0; }
.pe-topbar h1 { color: var(--pe-text-inverse); font-size: 20px; font-weight: 600; margin: 0 0 2px; letter-spacing: .2px; }
.pe-topbar .pe-accent { color: var(--pe-gold-light); }
.pe-topbar .pe-subtitle { color: #b9c6e0; font-size: 12.5px; margin: 0 0 1.25rem; }

.pe-tabbar.nav-tabs {
  display: flex; gap: 0; flex-wrap: wrap; border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.pe-tabbar.nav-tabs .nav-link {
  padding: 12px 18px !important; border: none !important; background: transparent !important;
  cursor: pointer; font-size: 13px !important; font-weight: 500 !important; color: #a9b8d6 !important;
  border-bottom: 2px solid transparent !important; border-radius: 0 !important;
}
.pe-tabbar.nav-tabs .nav-link.active {
  color: var(--pe-text-inverse) !important; border-bottom: 2px solid var(--pe-gold) !important;
}

.pe-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 2.5rem 3rem; }

.pe-root select,
.pe-root .Select-control,
.pe-root .pe-select .Select-control {
  height: 34px; border-radius: 6px; border: 1px solid var(--pe-border-strong);
  background: var(--pe-surface-1); font-size: 13px; color: var(--pe-text-primary);
}
.pe-root label.pe-label { font-size: 12.5px; color: var(--pe-text-secondary); font-weight: 500; }

.pe-root table { width: 100%; border-collapse: collapse; background: var(--pe-surface-1); }
.pe-root thead th {
  text-align: right; padding: 10px 8px; font-size: 11px; color: var(--pe-text-inverse);
  font-weight: 600; background: var(--pe-navy-800); letter-spacing: .3px; text-transform: uppercase;
}
.pe-root thead th:first-child { text-align: left; }
.pe-root td { padding: 9px 8px; font-size: 13px; text-align: right; border-bottom: 1px solid var(--pe-border); color: var(--pe-text-primary); }
.pe-root td:first-child { text-align: left; }
.pe-root tbody tr:nth-child(even) td { background: var(--pe-surface-2); }
.pe-root td.pe-sub { font-size: 12px; color: var(--pe-text-secondary); border-bottom: none; }

.pe-badge { padding: 3px 10px; border-radius: 20px; font-weight: 600; display: inline-block; font-size: 12px; }

.pe-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 14px; }
.pe-kpi-card { background: linear-gradient(160deg,var(--pe-navy-800),var(--pe-navy-700)); border-radius: 10px; padding: 1.1rem 1.2rem; }
.pe-kpi-label { font-size: 11.5px; color: #a9b8d6; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.pe-kpi-value { font-size: 23px; font-weight: 700; margin: 0; color: var(--pe-gold-light); }
.pe-kpi-sub { font-size: 12px; color: #c3ccdf; margin: 6px 0 0; }

.pe-note { font-size: 13px; color: var(--pe-text-secondary); margin: 0 0 1.1rem; }
.pe-footer-note { font-size: 11px; color: var(--pe-text-muted); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--pe-border); }
.pe-card-panel { background: var(--pe-surface-1); border-radius: 10px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(16,24,40,0.06); }
.pe-area-header td { font-size: 12px; font-weight: 700; color: var(--pe-navy-800); padding-top: 16px; text-transform: uppercase; letter-spacing: .3px; background: transparent !important; border-bottom: 2px solid var(--pe-navy-700) !important; }
.pe-section-title { font-size: 12px; font-weight: 700; color: var(--pe-navy-800); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .3px; }
.pe-warn-note { font-size: 12px; color: var(--pe-text-muted); margin: 0 0 8px; }

.pe-filters-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pe-filters-row .pe-select-wrap { min-width: 220px; }

.pe-clickable-btn {
  background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.pe-clickable-btn:hover { text-decoration: underline; color: var(--pe-navy-700); }