/* ==========================================================================
   AUDITAVISIÓN — SISTEMA CÍVICO DE AUDITORÍA E INTELIGENCIA PRESUPUESTARIA
   Estilo Editorial Formal de Alta Densidad Informativa ("Inspector Meteoro")
   ========================================================================== */

:root {
  --bg-void: transparent;
  --bg-surface: rgba(12, 14, 21, 0.72);
  --bg-card: rgba(18, 21, 32, 0.62);
  --bg-card-alt: rgba(23, 27, 41, 0.52);
  --bg-card-hover: rgba(28, 33, 51, 0.80);
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-accent: rgba(255, 255, 255, 0.18);
  --border-gold: rgba(201, 168, 76, 0.40);
  
  --gold: #c9a84c;
  --gold-bright: #f3cf65;
  --gold-glow: rgba(201, 168, 76, 0.18);
  --gold-gradient: linear-gradient(135deg, #e8c86a 0%, #c9a84c 50%, #9a7828 100%);
  
  --crimson: #8b1a1a;
  --crimson-bright: #e74c3c;
  --crimson-glow: rgba(231, 76, 60, 0.18);
  
  --emerald: #1e824c;
  --emerald-bright: #2ecc71;
  --emerald-glow: rgba(46, 204, 113, 0.18);
  
  --cyan: #4ecdc4;
  --blue: #3498db;
  --orange: #e67e22;
  --amber: #f39c12;
  
  --text-main: #f0ede6;
  --text-secondary: #a8a59e;
  --text-dim: #6d6b66;
  --text-gold: #e8c86a;
  
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

[data-theme="light"] {
  /* Azul institucional del tema claro: titulos, botones y enlaces que
     antes la leian sin valor y heredaban el color del padre. */
  --navy: #0b3a6e;
  --bg-void: transparent;
  --bg-surface: rgba(255, 255, 255, 0.78);
  --bg-card: rgba(255, 255, 255, 0.65);
  --bg-card-alt: rgba(246, 244, 238, 0.55);
  --bg-card-hover: rgba(255, 255, 255, 0.90);
  --border-subtle: rgba(0, 0, 0, 0.10);
  --border-accent: rgba(0, 0, 0, 0.16);
  --border-gold: rgba(160, 120, 30, 0.38);
  
  --gold: #967420;
  --gold-bright: #7c5c16;
  --gold-glow: rgba(160, 120, 30, 0.15);
  --gold-gradient: linear-gradient(135deg, #967420 0%, #7c5c16 50%, #5d440c 100%);
  
  --crimson: #942020;
  --crimson-bright: #ba2828;
  --crimson-glow: rgba(186, 40, 40, 0.15);
  
  --emerald: #196f3d;
  --emerald-bright: #1e824c;
  --emerald-glow: rgba(30, 130, 76, 0.15);
  
  --cyan: #167a73;
  --blue: #1f618d;
  --orange: #b95c0c;
  --amber: #b7791f;
  
  --text-main: #14171f;
  --text-secondary: #575d6e;
  --text-dim: #8b92a2;
  --text-gold: #7c5c16;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: transparent;
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.65;
  /* 'clip' recorta el desborde horizontal igual que 'hidden' pero NO
     convierte al cuerpo en contenedor de desplazamiento. Con 'hidden',
     position:sticky quedaba inerte en toda la plataforma: ni la barra
     de pestanas se anclaba, pese a tener la regla desde el principio. */
  overflow-x: hidden;
  overflow-x: clip;
  background-image:
    linear-gradient(180deg, rgba(6, 7, 10, 0.35) 0%, rgba(10, 12, 18, 0.50) 45%, rgba(6, 7, 10, 0.68) 100%);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  transition: background-image 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}

[data-theme="light"] body {
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(246, 244, 238, 0.35) 0%, rgba(255, 255, 255, 0.50) 45%, rgba(236, 232, 220, 0.68) 100%);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Sutil textura de papel/ruido analógico */
.noise-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   MARQUEE TELEMETRÍA FISCAL EN VIVO
   ========================================================================== */
.telemetry-bar {
  background: #090a10;
  border-bottom: 1px solid var(--border-subtle);
  padding: 7px 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.telemetry-badge {
  background: var(--crimson);
  color: #fff;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 10px;
  border-radius: 2px;
  margin: 0 15px;
  display: inline-flex;
  /* Se mantiene por encima de la cinta y no se encoge: antes el texto
     en movimiento se le encimaba y ambos quedaban ilegibles. */
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 8px var(--crimson-glow);
}

.telemetry-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulseDot 1.4s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.telemetry-track {
  display: inline-flex;
  gap: 30px;
  flex: 0 0 auto;
  will-change: transform;
  animation: scrollTicker 60s linear infinite;
}

.telemetry-track:hover {
  animation-play-state: paused;
}

@keyframes scrollTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tel-item {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tel-item strong {
  color: var(--text-main);
}

.tel-item .gold { color: var(--gold-bright); }
.tel-item .red { color: var(--crimson-bright); }
.tel-item .green { color: var(--emerald-bright); }
.tel-item .cyan { color: var(--cyan); }

/* ==========================================================================
   HEADER & NAVEGACIÓN
   ========================================================================== */
.site-header {
  position: relative;
  background: rgba(6, 7, 10, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-gold);
  padding: 24px 32px 18px;
  z-index: 1000;
  transition: background-color 0.4s ease;
}

[data-theme="light"] .site-header {
  background: rgba(246, 244, 238, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-accent);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  max-width: 1560px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.brand-wrapper {
  flex: 1 1 540px;
  max-width: 760px;
}

.brand-main-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-emblem {
  width: 50px;
  height: 50px;
  border: 1.5px solid var(--border-gold);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.15) 0%, rgba(12, 14, 21, 0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-bright);
  font-size: 26px;
  box-shadow: 0 0 16px var(--gold-glow);
  flex-shrink: 0;
}

.brand-titles h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 900;
  letter-spacing: -0.5px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.05;
  margin-bottom: 3px;
}

.brand-titles .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}

.brand-wrapper .sub {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin-top: 10px;
  line-height: 1.5;
  max-width: 76ch;
}

.brand-wrapper .sub b {
  color: var(--text-main);
  font-weight: 600;
}

/* Lado Derecho: Autoría de Inspector Meteoro, Modo de Tema e Indicadores */
.top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
  text-align: right;
  /* Antes: flex-shrink:0 sin min-width. El bloque no podia encogerse y
     empujaba el documento a 1026px en pantallas de telefono. */
  flex: 1 1 400px;
  min-width: 0;
  max-width: 100%;
}

.creator-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.creator-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.28);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.creator-badge b {
  color: var(--gold-bright);
}

.creator-seal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: var(--bg-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: default;
}

.creator-seal .cs-ico {
  font-size: 17px;
  line-height: 1;
}

.creator-seal .cs-tx {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: right;
}

.creator-seal .cs-name {
  font-family: var(--font-serif);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: -0.01em;
}

.creator-seal .cs-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  white-space: nowrap;
}

.creator-subtitle {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: right;
}

.iconbtn {
  appearance: none;
  height: 30px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--border-accent);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.iconbtn:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
}

.prov {
  display: flex;
  gap: 12px;
  font-size: 10.5px;
  color: var(--text-secondary);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-family: var(--font-mono);
  margin-top: 2px;
}

.prov span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mark {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9.5px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  flex-shrink: 0;
}

.mark.v {
  background: rgba(46, 204, 113, 0.15);
  color: var(--emerald-bright);
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.mark.s {
  background: rgba(201, 168, 76, 0.15);
  color: var(--gold-bright);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

/* Barra de Búsqueda Global Integrada */
.search-command-bar {
  max-width: 480px;
  width: 100%;
  position: relative;
  margin-top: 6px;
}

.search-input-box {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: 30px;
  padding: 8px 18px 8px 40px;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 11.5px;
  outline: none;
  transition: all 0.3s;
}

.search-input-box:focus {
  border-color: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow);
  background: var(--bg-card-alt);
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 13px;
  pointer-events: none;
}

.search-results-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  max-height: 380px;
  overflow-y: auto;
  z-index: 10000;
  box-shadow: 0 12px 30px rgba(0,0,0,0.8);
  display: none;
}

.search-results-dropdown.active {
  display: block;
}

.search-item {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.search-item:hover {
  background: var(--bg-card-hover);
}

.search-item .name {
  font-family: var(--font-serif);
  font-size: 13.5px;
  color: var(--text-main);
}

.search-item .badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
}

.search-item .badge {
  background: rgba(201,168,76,0.15);
  color: var(--gold-bright);
  flex-shrink: 0;
  margin-left: 10px;
}

.search-item.search-item-activo {
  background: var(--bg-card-hover);
  box-shadow: inset 3px 0 0 var(--gold-bright);
}

.search-item-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

.search-aviso {
  padding: 12px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  overflow-wrap: anywhere;
}

.search-aviso-mas {
  font-size: 11px;
  font-style: italic;
}

/* ==========================================================================
   BARRA DE PESTAÑAS PRINCIPALES (TABBAR FORMATO FORTUVISIÓN)
   ========================================================================== */
nav.tabbar {
  display: flex;
  /* Antes: justify-content:space-between y los botones con flex:1 1 auto.
     Entre ~880 y ~1130 px de ancho los botones se encogian por debajo del
     ancho de su propio texto y, como el texto no puede partirse
     (white-space:nowrap), se salia de la caja y se encimaba con el rotulo
     vecino. Ahora la fila baja a un segundo renglon antes de comprimir. */
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 3px;
  row-gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  position: sticky;
  top: 10px;
  z-index: 990;
  max-width: 1560px;
  margin: 18px auto 0;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE y Edge */
}

nav.tabbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge Chromium */
  width: 0;
  height: 0;
}

nav.tabbar button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  transition: all 0.2s ease;
  /* flex-shrink en 0: el boton crece para repartir el espacio sobrante,
     pero nunca se hace mas angosto que su propio rotulo. */
  flex: 1 0 auto;
  min-width: -moz-fit-content;
  min-width: fit-content;
  /* Tope de crecimiento: evita que los dos o tres rotulos que caen en el
     segundo renglon se estiren a lo ancho de media barra. */
  max-width: 22%;
  text-align: center;
}

nav.tabbar button:hover {
  background: var(--bg-card-alt);
  color: var(--text-main);
}

nav.tabbar button[aria-selected="true"],
nav.tabbar button.active {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.2) 0%, rgba(28, 24, 16, 0.85) 100%);
  color: var(--gold-bright);
  border-color: var(--border-gold);
  box-shadow: 0 0 12px var(--gold-glow);
}

[data-theme="light"] nav.tabbar button[aria-selected="true"],
[data-theme="light"] nav.tabbar button.active {
  background: linear-gradient(135deg, rgba(160, 120, 30, 0.15) 0%, rgba(240, 235, 220, 0.95) 100%);
  color: var(--gold-bright);
  border-color: var(--gold);
}

nav.tabbar button .num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  flex-shrink: 0;
}

nav.tabbar button[aria-selected="true"] .num,
nav.tabbar button.active .num {
  background: var(--gold);
  color: #06070a;
}

[data-theme="light"] nav.tabbar button[aria-selected="true"] .num,
[data-theme="light"] nav.tabbar button.active .num {
  background: var(--gold);
  color: #ffffff;
}

@media (max-width: 1360px) {
  nav.tabbar button {
    font-size: 11px;
    padding: 6px 7px;
    gap: 4px;
  }
  nav.tabbar button .num {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }
}

@media (max-width: 1080px) {
  nav.tabbar button {
    font-size: 10.5px;
    padding: 5px 6px;
    gap: 3px;
  }
}

@media (max-width: 860px) {
  nav.tabbar {
    /* En telefono si conviene la pista horizontal: una sola fila que se
       desliza. Para eso hay que desactivar el salto de renglon. */
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  nav.tabbar button {
    flex: 0 0 auto;
    max-width: none;
    font-size: 11.5px;
    padding: 6px 10px;
  }
}

/* Banner de Introducción Dinámica de Pestaña (#tabintro) */
.tabintro {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.tabintro h2 {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--gold-bright);
  margin-bottom: 5px;
}

.tabintro p {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 80ch;
  margin: 0;
}

/* PANELES DE PESTAÑA (.tab-panel) */
.tab-panel {
  display: none;
  animation: tabFadeIn 0.22s ease-out;
}

.tab-panel.active {
  display: block;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   ESTRUCTURA PRINCIPAL Y CONTENEDORES
   ========================================================================== */
.main-wrapper {
  max-width: 1560px;
  margin: 0 auto;
  padding: 30px 24px 80px;
}

.section-hero {
  text-align: center;
  margin-bottom: 36px;
}

.hero-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--border-gold);
  padding: 4px 16px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 12px;
  background: rgba(201, 168, 76, 0.05);
}

.section-hero h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 8px;
}

.section-hero p {
  color: var(--text-secondary);
  max-width: 820px;
  margin: 0 auto;
  font-size: 15px;
}

/* ==========================================================================
   METRIC SWITCHER / LENTES DE AUDITORÍA
   ========================================================================== */
.audit-lens-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.lens-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lens-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lens-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-accent);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.25s;
}

.lens-btn:hover {
  border-color: var(--gold);
  color: var(--text-main);
}

.lens-btn.active {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.2) 0%, rgba(201, 168, 76, 0.05) 100%);
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: 0 0 10px var(--gold-glow);
  font-weight: 700;
}

.map-view-toggle {
  display: flex;
  background: var(--bg-surface);
  border: 1px solid var(--border-accent);
  border-radius: 6px;
  overflow: hidden;
}

.view-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.view-btn.active {
  background: var(--gold);
  color: #000;
  font-weight: 700;
}

/* ==========================================================================
   SECCIÓN DEL MAPA INTERACTIVO & TABLERO DUAL
   ========================================================================== */
.map-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  margin-bottom: 48px;
}

@media (max-width: 1100px) {
  .map-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.map-viewport-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}

.map-viewport-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 3px;
  background: var(--gold-gradient);
}

.map-header-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.map-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-instruction {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* Contenedores de vistas de mapa */
#geoMapContainer {
  width: 100%;
  height: 540px;
  border-radius: 8px;
  background: #090a12;
  border: 1px solid var(--border-subtle);
  z-index: 1;
}

#cartogramContainer {
  width: 100%;
  height: 540px;
  border-radius: 8px;
  background: #090a12;
  border: 1px solid var(--border-subtle);
  display: none;
  padding: 20px;
  align-items: center;
  justify-content: center;
}

/* Cartograma mosaico */
.cartogram-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 780px;
  aspect-ratio: 11/8;
}

.state-cell {
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  user-select: none;
}

.state-cell:hover {
  transform: scale(1.1);
  z-index: 20;
  border-color: var(--gold-bright);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.4);
}

.state-cell .abbr {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(9px, 1.1vw, 13px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.state-cell .val {
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.8vw, 10px);
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
}

.empty-cell {
  background: transparent !important;
  border: none !important;
  cursor: default;
}

/* Escala cromática coroplética */
.c-scale-1 { background: #151824; }
.c-scale-2 { background: #1c233a; }
.c-scale-3 { background: #233454; }
.c-scale-4 { background: #1b4965; }
.c-scale-5 { background: #1e6079; }
.c-scale-6 { background: #257b8c; }
.c-scale-7 { background: #2f969b; }
.c-scale-8 { background: #3fae99; }
.c-scale-9 { background: #8da352; }
.c-scale-10 { background: #d4a017; }
.c-scale-alert { background: #8b1a1a; }

/* Barra de leyenda del mapa */
.map-legend-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.legend-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.legend-clases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-secondary);
}

.legend-clase {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.legend-clase i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.legend-clase em {
  font-style: normal;
  color: var(--text-dim);
}

/* ==========================================================================
   PANEL LATERAL: TELEMETRÍA Y RANKINGS
   ========================================================================== */
.side-analytics-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.panel-stat-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--gold);
}

.panel-stat-box.alert-box::before {
  background: var(--crimson-bright);
}

.box-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

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

.metric-lbl {
  font-size: 12px;
  color: var(--text-secondary);
}

.metric-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-main);
}

.metric-val.gold { color: var(--gold-bright); }
.metric-val.red { color: var(--crimson-bright); }
.metric-val.cyan { color: var(--cyan); }
.metric-val.green { color: var(--emerald-bright); }

/* Ranking bars */
.rank-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rank-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  width: 65px;
}

.rank-bar-bg {
  flex: 1;
  height: 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.rank-bar-fill {
  height: 100%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: #000;
  transition: width 0.35s ease;
}
/* Quien pide menos movimiento recibe el dato, no la animacion: el motor de
   conteo ya lo respeta, y la transicion de CSS lo desmentiria. */
@media (prefers-reduced-motion: reduce) { .rank-bar-fill { transition: none; } }

/* --- Las 32 entidades, bajo el mapa de la 1.1 -----------------------------

   El mapa colorea y la columna lateral resume los cinco extremos de cada
   lado; entre el quinto y el vigesimoctavo quedaban veintidos entidades que
   nadie podia leer. Este cuadro las pone las treinta y dos, de mayor a menor
   por la lente vigente. En pantalla ancha van en dos columnas: treinta y dos
   renglones en fila unica obligarian a rodar media pantalla para llegar al
   ultimo. */
.entidades-panel { margin-top: 28px; }

.ent-cab { margin-bottom: 14px; }
.ent-tit {
  margin: 0 0 5px; font-family: var(--font-serif); font-size: 19px;
  font-weight: 700; color: var(--gold-bright);
}
.ent-sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); max-width: 82ch; }

.ent-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px; margin: 14px 0;
}
.ent-res-caja {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 12px 14px;
}
.ent-res-rot {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary);
}
.ent-res-cif {
  display: block; margin-top: 6px; font-family: var(--font-mono);
  font-size: 16px; font-weight: 700; color: var(--gold-bright);
}
.ent-res-pie { display: block; margin-top: 7px; }

.ent-cuadre {
  margin: 0 0 16px; padding: 11px 15px;
  border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
  background: var(--bg-card-alt);
  font-size: 12.8px; line-height: 1.7; color: var(--text-secondary); max-width: 92ch;
}
.ent-cuadre[hidden] { display: none; }
.ent-cuadre b { color: var(--text-main); }

.ent-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 1px 26px;
}
.ent-lista.con-sem { grid-template-columns: repeat(auto-fit, minmax(475px, 1fr)); }
.ent-lista.con-sem .ent-btn { grid-template-columns: 1.9rem 12.6rem 1fr 7.4rem; }
.ent-fila { margin: 0; }
.ent-btn {
  display: grid; grid-template-columns: 1.9rem 9.2rem 1fr 7.4rem;
  align-items: center; gap: 10px; width: 100%;
  padding: 5px 8px; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ent-btn:hover { background: var(--bg-card-hover); }
.ent-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.ent-pos {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-dim); text-align: right;
}
.ent-ident { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ent-abbr { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--gold); }
.ent-nom {
  font-size: 12.5px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ent-sem {
  flex: none; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; border: 1px solid;
}
.ent-sem.sem-verde { color: #4ec07a; border-color: rgba(78,192,122,0.45); }
.ent-sem.sem-amarillo { color: #e2a53c; border-color: rgba(226,165,60,0.45); }
.ent-sem.sem-rojo { color: var(--crimson-bright); border-color: rgba(212,56,44,0.5); }

.ent-barra-bg {
  height: 13px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.ent-barra { display: block; height: 100%; border-radius: 3px; }
.ent-val {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text-main); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 980px) {
  .ent-lista { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* En telefono la barra baja a su propio renglon: con el nombre, la cifra y
     la barra en la misma linea no queda ancho para ninguno de los tres. */
  .ent-btn { grid-template-columns: 1.7rem 1fr auto; row-gap: 5px; padding: 8px; }
  .ent-pos { grid-column: 1; grid-row: 1; }
  .ent-ident { grid-column: 2; grid-row: 1; }
  .ent-val { grid-column: 3; grid-row: 1; }
  .ent-barra-bg { grid-column: 1 / -1; grid-row: 2; height: 10px; }
  .ent-res-cif { font-size: 15px; }
  .ent-tit { font-size: 17px; }
}

/* ==========================================================================
   DRAWER / EXPEDIENTE DE AUDITORÍA ESTATAL Y MUNICIPAL
   ========================================================================== */
.audit-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 5, 8, 0.85);
  backdrop-filter: blur(8px);
  z-index: 99990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.audit-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.audit-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 740px;
  /* Antes se ocultaba con right:-750px, lo que ensanchaba el documento y
     generaba desplazamiento lateral. Con transform no ocupa espacio. */
  transform: translateX(calc(100% + 60px));
  height: 100vh;
  background: var(--bg-card);
  border-left: 1px solid var(--border-gold);
  z-index: 99995;
  box-shadow: -15px 0 40px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.audit-drawer.active {
  right: 0;
  transform: none;
}

.drawer-header {
  padding: 24px 30px;
  background: linear-gradient(180deg, #181c2b 0%, #121520 100%);
  border-bottom: 1px solid var(--border-accent);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.drawer-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 2px;
  background: var(--gold-gradient);
}

.drawer-close-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-accent);
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.drawer-close-btn:hover {
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson-bright);
}

.drawer-state-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.drawer-state-name {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.15;
}

.drawer-gov-info {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.party-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.drawer-body {
  padding: 26px 30px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Tarjeta de Fiscalización ASF */
.asf-alert-banner {
  background: linear-gradient(135deg, rgba(139, 26, 26, 0.25) 0%, rgba(139, 26, 26, 0.08) 100%);
  border: 1px solid var(--crimson-bright);
  border-radius: 10px;
  padding: 16px 20px;
}

.asf-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.asf-badge {
  background: var(--crimson);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 1px;
}

.asf-amount {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 900;
  color: var(--crimson-bright);
}

.asf-desc {
  font-size: 13px;
  color: #e0d8d8;
  line-height: 1.6;
}

/* Grilla de métricas clave del estado */
.state-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.s-metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
}

.s-metric-card .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.s-metric-card .val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 4px;
}

/* Sección de Desglose Municipal */
.drawer-muni-section h4 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 4px;
}

.drawer-muni-section p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.muni-cards-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.muni-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.25s;
}

.muni-card:hover {
  border-color: var(--border-gold);
  background: var(--bg-card-alt);
}

.muni-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.muni-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.muni-mayor {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.muni-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin: 10px 0;
}

.muni-stat {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.muni-stat strong {
  display: block;
  font-size: 12px;
  color: var(--text-main);
  margin-top: 2px;
}

.muni-audit-status {
  font-size: 11px;
  color: #d69e9e;
  background: rgba(139, 26, 26, 0.15);
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 8px;
  border-left: 3px solid var(--crimson-bright);
}

.muni-projects {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}

.project-tag {
  display: inline-block;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  margin: 2px 4px 2px 0;
  color: var(--cyan);
}

/* ==========================================================================
   ENCICLOPEDIA DEL FLUJO DEL DINERO (LIF -> PEF -> MUNICIPIOS)
   ========================================================================== */
.flow-container {
  margin: 60px 0;
}

.flow-step-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 30px;
  margin-bottom: 24px;
  position: relative;
}

.flow-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--gold-gradient);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: #000;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-titles h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--gold-bright);
}

.step-titles p {
  font-size: 13px;
  color: var(--text-secondary);
}

.taxes-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.tax-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.25s;
}

.tax-item-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.tax-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tax-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.tax-level {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(201, 168, 76, 0.15);
  color: var(--gold-bright);
}

.tax-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-bright);
}

.tax-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   SIMULADOR / CALCULADORA DEL CONTRIBUYENTE
   ========================================================================== */
.calc-btn {
  background: var(--gold-gradient);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  transition: all 0.2s;
}

.calc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px var(--gold-glow);
}

/* --- 2.4 Calculadora civica ------------------------------------------- */

.cc-bloque {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px 26px 26px;
  margin-bottom: 26px;
}
.cc-bloque.ce-destaca { border-color: var(--gold); }

.cc-cab { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.cc-cab-n {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-gold); color: var(--gold-bright);
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
}
.cc-cab-tx { flex: 1; min-width: 0; }
.cc-cab-tit {
  font-family: var(--font-serif); font-size: 22px; line-height: 1.25;
  color: var(--gold-bright); margin: 0;
}
.cc-cab-sub { margin: 6px 0 0; font-size: 14.4px; line-height: 1.6; color: var(--text-secondary); }

/* --- formulario --- */
.cc-campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin-bottom: 22px;
}
.cc-campo { min-width: 0; }
.cc-campo-et {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary);
}
.cc-caja {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-surface); border: 1px solid var(--border-accent);
  border-radius: 8px; padding: 0 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-caja:focus-within { border-color: var(--gold-bright); box-shadow: 0 0 14px var(--gold-glow); }
.cc-caja-sig { font-family: var(--font-mono); font-size: 20px; color: var(--gold); }
.cc-input {
  flex: 1; min-width: 0; width: 100%;
  background: none; border: 0; outline: none; color: var(--text-main);
  font-family: var(--font-mono); font-size: 24px; font-weight: 700;
  padding: 12px 0;
}
.cc-caja-chica .cc-input { font-size: 17px; padding: 9px 0; }
.cc-campo-pista { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }

.cc-seg { display: flex; flex-wrap: wrap; gap: 7px; }
.cc-seg-b {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 10px 14px; cursor: pointer;
  color: var(--text-secondary); font-family: var(--font-sans); font-size: 13.2px;
  transition: all 0.15s ease;
}
.cc-seg-b:hover { background: var(--bg-card-hover); color: var(--text-main); }
.cc-seg-b.activo {
  border-color: var(--border-gold); background: var(--gold-glow);
  color: var(--gold-bright); font-weight: 600;
}
.cc-seg-b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-seg-ico { font-size: 15px; }

.cc-reg-et {
  margin: 4px 0 10px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary);
}
.cc-regimenes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.cc-reg {
  display: grid; grid-template-columns: 1.9rem 1fr; grid-template-rows: auto auto;
  gap: 2px 11px; text-align: left; cursor: pointer;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 13px 15px; transition: all 0.15s ease;
}
.cc-reg:hover { background: var(--bg-card-hover); border-color: var(--border-accent); }
.cc-reg.activo { border-color: var(--border-gold); background: var(--gold-glow); }
.cc-reg:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-reg-ico { grid-row: 1 / 3; align-self: center; font-size: 25px; line-height: 1; }
.cc-reg-nom { font-size: 14.4px; font-weight: 600; color: var(--text-main); line-height: 1.3; }
.cc-reg.activo .cc-reg-nom { color: var(--gold-bright); }
.cc-reg-corto { font-size: 12.4px; color: var(--text-dim); line-height: 1.4; }

.cc-opcion { margin: 0 0 18px; max-width: 460px; }
.cc-opcion .cc-seg { max-width: none; }

/* --- resumen de cuatro cajas --- */
.cc-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 26px;
}
.cc-caja-res {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-accent);
  border-radius: 9px; padding: 15px 17px;
}
.cc-res-et {
  font-family: var(--font-mono); font-size: 10.6px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-secondary);
}
.cc-res-v {
  font-family: var(--font-mono); font-size: 25px; font-weight: 700;
  color: var(--text-main); line-height: 1.15; overflow-wrap: anywhere;
}
.cc-res-sub { font-size: 12.2px; line-height: 1.45; color: var(--text-dim); }
.cc-res-sub b { color: var(--text-secondary); }
.cc-r-bruto { border-left-color: var(--blue); }
.cc-r-isr { border-left-color: var(--crimson-bright); }
.cc-r-isr .cc-res-v { color: var(--crimson-bright); }
.cc-r-imss { border-left-color: var(--amber); }
.cc-r-imss .cc-res-v { color: var(--amber); }
.cc-r-neto { border-left-color: var(--emerald-bright); }
.cc-r-neto .cc-res-v { color: var(--emerald-bright); }
.cc-r-nula { opacity: 0.55; }

.cc-sub-tit {
  font-family: var(--font-serif); font-size: 17.5px; color: var(--text-gold);
  margin: 26px 0 12px;
}

/* --- cascada renglon por renglon --- */
.cc-cascada { list-style: none; margin: 0; padding: 0; }
.cc-casc-fila {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(70px, 1fr) 9.4rem;
  grid-template-areas: "k riel v" "d d d";
  align-items: center; gap: 4px 14px;
  padding: 11px 0; border-bottom: 1px solid var(--border-subtle);
}
.cc-casc-k { grid-area: k; font-size: 13.8px; color: var(--text-main); line-height: 1.35; }
.cc-casc-sig {
  display: inline-block; width: 0.85rem; margin-right: 3px;
  font-family: var(--font-mono); color: var(--text-dim);
}
.cc-casc-subtotal .cc-casc-k { font-weight: 600; }
.cc-casc-subtotal .cc-casc-barra { background: var(--blue); }
.cc-casc-subtotal .cc-casc-v { color: var(--text-secondary); }
/* El renglon que no toca el bolsillo se ve distinto de los que si. */
.cc-casc-fiscal .cc-casc-k,
.cc-casc-fiscal .cc-casc-v { color: var(--text-dim); font-style: italic; }
.cc-casc-fiscal .cc-casc-barra { background: var(--border-accent); }
.cc-casc-leyenda {
  margin: 11px 0 0; font-size: 12.4px; line-height: 1.6; color: var(--text-dim);
}
.cc-casc-leyenda b { color: var(--text-secondary); font-family: var(--font-mono); }
.cc-casc-riel {
  grid-area: riel; height: 7px; border-radius: 4px;
  background: var(--bg-surface); overflow: hidden;
}
.cc-casc-barra { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--border-accent); }
.cc-casc-v {
  grid-area: v; text-align: right;
  font-family: var(--font-mono); font-size: 15.5px; font-weight: 700; color: var(--text-main);
}
.cc-casc-d { grid-area: d; font-size: 12.2px; line-height: 1.5; color: var(--text-dim); }
.cc-casc-base .cc-casc-barra { background: var(--blue); }
.cc-casc-base .cc-casc-k { font-weight: 600; }
.cc-casc-resta .cc-casc-barra,
.cc-casc-suma .cc-casc-barra { background: var(--cyan); }
.cc-casc-suma .cc-casc-v { color: var(--cyan); }
.cc-casc-resta .cc-casc-v { color: var(--cyan); }
.cc-casc-impuesto .cc-casc-barra { background: var(--crimson-bright); }
.cc-casc-impuesto .cc-casc-v { color: var(--crimson-bright); }
.cc-casc-cuota .cc-casc-barra { background: var(--amber); }
.cc-casc-cuota .cc-casc-v { color: var(--amber); }
.cc-casc-neto {
  border-bottom: 0; border-top: 2px solid var(--border-gold);
  margin-top: 4px; padding-top: 15px;
}
.cc-casc-neto .cc-casc-k { font-weight: 700; color: var(--gold-bright); }
.cc-casc-neto .cc-casc-barra { background: var(--emerald-bright); }
.cc-casc-neto .cc-casc-v { color: var(--emerald-bright); font-size: 19px; }

/* --- el cuadro de la tarifa --- */
/* Un cuadro legal no se recorta para que quepa: se le deja al lector la
   barra de desplazamiento y las columnas intactas. */
.cc-tabla-caja { overflow-x: auto; margin-bottom: 10px; }
.cc-tabla {
  width: 100%; border-collapse: collapse; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 12.8px;
}
.cc-tabla th {
  text-align: right; padding: 8px 10px; color: var(--text-secondary);
  border-bottom: 1px solid var(--border-accent);
  font-size: 10.8px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
}
.cc-tabla th:first-child, .cc-tabla td:first-child { text-align: left; }
.cc-tabla td { text-align: right; padding: 8px 10px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); }
.cc-tabla .cc-tr-suyo td { background: var(--gold-glow); color: var(--gold-bright); font-weight: 700; }
.cc-fuente { margin: 8px 0 0; font-size: 12.2px; line-height: 1.55; color: var(--text-dim); }

/* --- escenario del IVA: se distingue a proposito de todo lo demas --- */
.cc-escenario {
  margin: 26px 0 0; padding: 18px 20px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-accent); border-radius: 10px;
}
.cc-esc-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.cc-esc-tit { font-family: var(--font-serif); font-size: 17.5px; color: var(--text-gold); margin: 0; }
.cc-esc-sello {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange); border: 1px solid var(--orange); border-radius: 4px; padding: 3px 8px;
}
.cc-esc-nota, .cc-esc-pie { margin: 0 0 12px; font-size: 13.2px; line-height: 1.6; color: var(--text-secondary); }
.cc-esc-pie { margin: 12px 0 0; color: var(--text-dim); font-size: 12.5px; }
.cc-esc-mando { display: block; margin-bottom: 14px; font-size: 13.4px; color: var(--text-main); }
.cc-esc-mando b { color: var(--gold-bright); font-family: var(--font-mono); }
.cc-rango { display: block; width: 100%; margin-top: 9px; accent-color: var(--gold); cursor: pointer; }
.cc-esc-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.cc-esc-c {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 11px 13px;
}
.cc-esc-k { font-size: 11.6px; color: var(--text-dim); line-height: 1.35; }
.cc-esc-v { font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--orange); }

/* --- avisos --- */
.cc-aviso {
  margin: 16px 0 0; padding: 13px 16px;
  background: var(--bg-surface); border-left: 3px solid var(--border-gold); border-radius: 0 8px 8px 0;
  font-size: 13.4px; line-height: 1.65; color: var(--text-secondary);
}
.cc-aviso strong { color: var(--text-main); }
.cc-aviso-suave { border-left-color: var(--blue); margin-top: 0; margin-bottom: 18px; }
.cc-aviso-error { border-left-color: var(--crimson-bright); color: var(--crimson-bright); }
.cc-aviso-bueno { border-left-color: var(--emerald-bright); }
.cc-aviso-ciego { display: flex; gap: 12px; align-items: flex-start; }
.cc-aviso-ico { font-size: 20px; line-height: 1.2; }
.cc-pie { margin: 18px 0 0; font-size: 12.8px; line-height: 1.6; color: var(--text-dim); font-style: italic; }

/* --- bloque 3: el reparto --- */
.cc-reparto { list-style: none; margin: 0 0 20px; padding: 0; }
.cc-rep-fila {
  display: grid;
  grid-template-columns: 1.6rem 1.9rem minmax(0, 15rem) minmax(60px, 1fr) 3.6rem 8.4rem;
  grid-template-areas: "n ico nom riel pct v" ". . que que que que";
  align-items: center; gap: 3px 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
}
.cc-rep-n { grid-area: n; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.cc-rep-ico { grid-area: ico; font-size: 20px; }
.cc-rep-nom { grid-area: nom; display: flex; flex-direction: column; gap: 1px; font-size: 13.8px; color: var(--text-main); line-height: 1.3; }
.cc-rep-grupo { font-family: var(--font-mono); font-size: 10.4px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
.cc-rep-riel { grid-area: riel; height: 8px; border-radius: 4px; background: var(--bg-surface); overflow: hidden; }
.cc-rep-barra { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--gold-gradient); }
.cc-rep-pct { grid-area: pct; text-align: right; font-family: var(--font-mono); font-size: 12.6px; color: var(--text-secondary); }
.cc-rep-v { grid-area: v; text-align: right; font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--gold-bright); }
.cc-rep-que { grid-area: que; font-size: 12.2px; line-height: 1.5; color: var(--text-dim); }

.cc-aparte {
  margin: 20px 0 0; padding: 16px 19px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--emerald-bright); border-radius: 0 9px 9px 0;
}
.cc-aparte-tit { font-family: var(--font-serif); font-size: 17px; color: var(--emerald-bright); margin: 0 0 8px; }
.cc-aparte p { margin: 0; font-size: 13.4px; line-height: 1.65; color: var(--text-secondary); }

/* --- bloque 4: los relojes --- */
.cc-bloque-reloj { border-color: var(--border-gold); }
.cc-reloj-mandos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-bottom: 20px;
}

.cc-vivo-tira {
  display: flex; flex-direction: column; gap: 5px; align-items: center; text-align: center;
  padding: 18px 20px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(231,76,60,0.10) 0%, var(--bg-surface) 70%);
  border: 1px solid var(--crimson); border-radius: 11px;
}
.cc-vivo-et { font-family: var(--font-mono); font-size: 11.4px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); }
.cc-vivo-num {
  font-family: var(--font-mono); font-size: clamp(26px, 6vw, 42px); font-weight: 700;
  color: var(--crimson-bright); line-height: 1.1; overflow-wrap: anywhere;
}
.cc-vivo-sub { font-size: 12.6px; line-height: 1.55; color: var(--text-dim); }
.cc-vivo-sub b { color: var(--text-secondary); font-family: var(--font-mono); }

.cc-relojes {
  list-style: none; margin: 0 0 18px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px;
}
.cc-rel-card {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--border-accent); border-radius: 9px; padding: 15px 17px;
}
.cc-rel-culpa { border-top-color: var(--crimson-bright); }
.cc-rel-cab { display: flex; align-items: flex-start; gap: 9px; }
.cc-rel-ico { font-size: 21px; line-height: 1.1; }
.cc-rel-nom { flex: 1; font-size: 13.4px; font-weight: 600; color: var(--text-main); line-height: 1.35; }
.cc-rel-cif { font-family: var(--font-mono); font-size: 27px; font-weight: 700; color: var(--gold-bright); line-height: 1.15; overflow-wrap: anywhere; }
.cc-rel-cad { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
.cc-rel-riel { height: 6px; border-radius: 3px; background: var(--bg-card); overflow: hidden; margin: 4px 0 2px; }
.cc-rel-barra { display: block; height: 100%; border-radius: 3px; background: var(--gold); }
.cc-rel-culpa .cc-rel-barra { background: var(--crimson-bright); }
.cc-rel-ano { font-size: 11.8px; color: var(--text-secondary); font-family: var(--font-mono); line-height: 1.45; }
.cc-rel-que { margin: 6px 0 0; font-size: 12.6px; line-height: 1.55; color: var(--text-dim); }
.cc-rel-fte { margin: 6px 0 0; font-size: 11.4px; line-height: 1.45; color: var(--text-dim); font-style: italic; }

.cc-rel-total {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: 17px 20px; margin-bottom: 16px;
  background: var(--bg-card-alt); border: 1px solid var(--border-gold); border-radius: 10px;
}
.cc-rel-total-k { font-family: var(--font-mono); font-size: 11.2px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); }
.cc-rel-total-v { font-family: var(--font-mono); font-size: clamp(28px, 5vw, 38px); font-weight: 700; color: var(--gold-bright); line-height: 1.1; }
.cc-rel-total-s { font-size: 12.4px; color: var(--text-dim); }

.cc-rel-personal {
  margin: 0 0 16px; padding: 15px 18px;
  background: var(--bg-surface); border-left: 3px solid var(--gold); border-radius: 0 9px 9px 0;
  font-size: 14px; line-height: 1.7; color: var(--text-secondary);
}
.cc-rel-personal strong { color: var(--gold-bright); }
.cc-rel-personal-vacia { border-left-color: var(--border-accent); font-style: italic; color: var(--text-dim); }
.cc-rel-personal-vacia strong { color: inherit; }

.cc-sobrecosto {
  padding: 15px 18px; margin-bottom: 14px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 9px;
}
.cc-sob-tit { font-family: var(--font-serif); font-size: 16.5px; color: var(--text-gold); margin: 0 0 7px; }
.cc-sobrecosto p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-secondary); }

/* --- puntos ciegos de cierre --- */
.cc-ciegos { margin-bottom: 26px; }
.cc-ciegos-tit { font-family: var(--font-serif); font-size: 21px; color: var(--gold-bright); margin: 0 0 14px; }
.cc-ciegos-reja { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.cc-ciego {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--orange); border-radius: 0 10px 10px 0; padding: 16px 18px;
}
.cc-ciego-tit { font-size: 15px; font-weight: 600; color: var(--text-main); margin: 0 0 8px; line-height: 1.35; }
.cc-ciego-tx { margin: 0; font-size: 13.2px; line-height: 1.65; color: var(--text-secondary); }
.cc-ciego-exc { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-size: 12.6px; line-height: 1.6; color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .cc-casc-barra, .cc-rep-barra, .cc-rel-barra { transition: none; }
}

@media (max-width: 760px) {
  .cc-bloque { padding: 19px 16px 21px; }
  .cc-casc-fila {
    grid-template-columns: 1fr 8.6rem;
    grid-template-areas: "k v" "riel riel" "d d";
    gap: 6px 10px;
  }
  .cc-rep-fila {
    grid-template-columns: 1.5rem 1.8rem 1fr 7.6rem;
    grid-template-areas: "n ico nom v" ". . riel pct" ". . que que";
    gap: 5px 10px;
  }
  .cc-rep-pct { text-align: left; }
  .cc-input { font-size: 21px; }
  .cc-cab-tit { font-size: 19px; }
}

/* ==========================================================================
   NOTICIAS Y BITÁCORA DE FISCALIZACIÓN
   ========================================================================== */
.news-section {
  margin-bottom: 60px;
}

.news-filter-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}

.news-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.news-card.urgent {
  border-left: 4px solid var(--crimson-bright);
}

.news-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.news-cat {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.news-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
  margin-bottom: 10px;
}

.news-lead {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 14px;
}

.news-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.news-amount-tag {
  color: var(--crimson-bright);
  font-weight: 700;
}

.news-source {
  color: var(--text-dim);
  font-size: 10px;
}

/* ==========================================================================
   GLOSARIO Y PREGUNTAS FRECUENTES (FAQ)
   ========================================================================== */
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto 60px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-question {
  padding: 16px 20px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.faq-question:hover {
  color: var(--gold-bright);
}

.faq-answer {
  padding: 0 20px 18px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  display: none;
  border-top: 1px solid rgba(255,255,255,0.03);
  padding-top: 14px;
}

.faq-item.active {
  border-color: var(--border-gold);
}

.faq-item.active .faq-answer {
  display: block;
}

/* Glosario */
.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 60px;
}

.glossary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 18px;
}

.term-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
}

.term-def {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}

.term-law {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
}

/* ==========================================================================
   PIE DE PÁGINA Y REFERENCIAS FORMALES
   ========================================================================== */
.site-footer {
  background: #040508;
  border-top: 1px solid var(--border-subtle);
  padding: 50px 24px 30px;
  font-size: 13px;
  color: var(--text-dim);
}

.footer-inner {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}

.footer-col h4 {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--gold);
  margin-bottom: 12px;
}

.footer-sources-list {
  list-style: decimal;
  padding-left: 20px;
  line-height: 1.8;
  font-size: 12px;
}

.footer-bottom {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Sello de version a la vista. Sin el no hay modo de saber si el lector esta
   viendo lo que acabamos de publicar o una copia que su navegador guardo hace
   rato: basta con mirar el pie para salir de dudas. */
.footer-sello { display: block; margin-top: 7px; color: var(--text-dim); letter-spacing: 0.04em; }
.footer-sello b { color: var(--gold); font-weight: 700; }
/* Aviso de privacidad (26-10-2026): enlace del pie con area de toque de 44 px. */
.footer-aviso { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-top: 7px; font-family: var(--font-sans); font-size: 16px; color: var(--gold); }

/* ==========================================================================
   DIVISIÓN DE PODERES: SELECTOR MAESTRO
   ========================================================================== */
.power-switcher-container {
  max-width: 1560px;
  margin: 0 auto 26px;
  padding: 0 24px;
}

.power-switcher-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  gap: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  overflow-x: auto;
}

.power-tab-btn {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 18px;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.power-tab-btn:hover {
  background: var(--bg-card-alt);
  color: var(--text-main);
  border-color: var(--border-accent);
}

.power-tab-btn.active {
  background: linear-gradient(135deg, rgba(201,168,76,0.22) 0%, rgba(201,168,76,0.06) 100%);
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: 0 0 16px var(--gold-glow);
}

.power-tab-btn .badge-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}

.power-tab-btn.active .badge-pill {
  background: var(--gold);
  color: #000;
  font-weight: 700;
}

.power-section-panel {
  display: none;
  animation: fadeInPower 0.35s ease forwards;
}

.power-section-panel.active {
  display: block;
}

@keyframes fadeInPower {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PODER LEGISLATIVO: TABLERO Y CONGRESOS ESTATALES
   ========================================================================== */
.legis-macro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.legis-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.legis-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 3px;
  background: var(--gold-gradient);
}

.legis-card.asf-card::before {
  background: var(--crimson-bright);
}

.legis-card-title {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--gold-bright);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.legis-card-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.legis-stats-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}

.legis-stats-table td {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.legis-stats-table td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-main);
}

/* Cuadrícula de 2 Columnas (compatibilidad) y 3 Columnas Verticales (Bloques 4, 5 y 6) */
.legis-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
  align-items: stretch;
}

.legis-three-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
  align-items: start;
}

@media (max-width: 1200px) {
  .legis-two-col-grid,
  .legis-three-col-grid {
    grid-template-columns: 1fr;
  }
}

/* Tabla de los 32 Congresos Estatales (Bloque 4) */
.congresos-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.congresos-table-scroll {
  flex: 1 1 auto;
  min-height: 520px;
  max-height: 540px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
}

/* Bloque 5: Geografía Electoral & Distritos INE */
.electoral-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.electoral-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-gold);
}

.electoral-map-wrapper {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  margin-bottom: 12px;
  background: #0d1117;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

#electoralMapContainer {
  width: 100%;
  height: 100%;
  background: #0a0d14;
}

.electoral-circ-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.electoral-circ-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.electoral-circ-btn:hover,
.electoral-circ-btn.active {
  background: rgba(201,168,76,0.18);
  border-color: var(--gold);
  color: var(--gold-bright);
}

.distritos-list-scroll {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  padding: 8px;
  background: var(--bg-surface);
}

/* ==========================================================================
   BLOQUE 6: JERARQUÍA SALARIAL Y REPRESENTATIVA DESCENDENTE
   ========================================================================== */
.jerarquia-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  box-sizing: border-box;
}

.jerarquia-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.jerarquia-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.jerarquia-kpi-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.jerarquia-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-gold);
}

.jerarquia-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-subtle);
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.jerarquia-metric-toggle,
.jerarquia-cat-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.jerarquia-btn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.jerarquia-btn:hover,
.jerarquia-btn.active {
  background: rgba(201,168,76,0.18);
  border-color: var(--gold);
  color: var(--gold-bright);
}

.jerarquia-chart-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jerarquia-bar-row {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.jerarquia-bar-row:hover {
  background: rgba(255,255,255,0.035);
  border-color: var(--gold);
  transform: translateX(4px);
}

.jerarquia-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.jerarquia-bar-track {
  height: 22px;
  background: rgba(255,255,255,0.06);
  border-radius: 11px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.jerarquia-bar-fill {
  height: 100%;
  border-radius: 11px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.jerarquia-bar-desc {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.jerarquia-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5,7,12,0.88);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.jerarquia-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  position: relative;
  padding: 28px;
}

.congresos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.congresos-search {
  max-width: 340px;
  width: 100%;
}

.table-responsive {
  overflow-x: auto;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.audit-table th {
  background: var(--bg-surface);
  color: var(--gold);
  font-family: var(--font-serif);
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid var(--border-gold);
  white-space: nowrap;
}

.audit-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: middle;
}

.audit-table tr:hover {
  background: var(--bg-card-hover);
}

.table-num {
  font-family: var(--font-mono);
  text-align: right;
}

/* ==========================================================================
   PODER JUDICIAL (MÓDULO RESERVADO)
   ========================================================================== */
.judicial-reserved-container {
  background: linear-gradient(135deg, rgba(23, 27, 41, 0.95) 0%, rgba(12, 14, 21, 0.95) 100%);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 40px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}

.judicial-reserved-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--amber) 0%, var(--gold) 50%, var(--cyan) 100%);
}

.reserved-badge {
  background: rgba(243, 156, 18, 0.15);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.judicial-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.judicial-metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.judicial-metric-card .j-val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-bright);
  margin: 6px 0;
}

.judicial-metric-card .j-lbl {
  font-size: 12px;
  color: var(--text-secondary);
}

.reform-points-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.reform-points-box h4 {
  font-family: var(--font-serif);
  color: var(--gold);
  margin-bottom: 12px;
}

.reform-points-box ul {
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ==========================================================================
   FINANZAS PÚBLICAS, DEUDA & MERCADO (BANXICO, CETES, BONOS M)
   ========================================================================== */
.finanzas-macro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.finanzas-eje-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}

.finanzas-eje-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.fin-eje-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.finanzas-eje-card h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--text-main);
  margin-bottom: 10px;
}

.finanzas-eje-card p.eje-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.eje-items-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.eje-item-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eje-item-row strong {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--gold-bright);
}

.eje-item-row span {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Tablero de Instrumentos de Deuda y Mercado */
.deuda-instruments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 24px 0 36px;
}

.deuda-instrument-card {
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 22px;
  position: relative;
}

.deuda-instrument-card.featured {
  border-color: var(--border-gold);
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.08) 0%, rgba(18, 21, 32, 0.95) 100%);
}

.deuda-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.deuda-clave {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--gold-bright);
}

.deuda-tipo-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.deuda-full-name {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--text-main);
  font-weight: 600;
  margin-bottom: 10px;
}

.deuda-specs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
  margin-top: 10px;
}

.deuda-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.deuda-spec-row span.k {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
}

.deuda-spec-row span.v {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-main);
  text-align: right;
}

/* Caja de Banco de México (Banxico) */
.banxico-box {
  background: linear-gradient(135deg, rgba(14, 18, 28, 0.95) 0%, rgba(24, 20, 14, 0.9) 100%);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 32px;
  margin-bottom: 40px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.banxico-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.banxico-ico {
  font-size: 38px;
}

.banxico-title h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--gold-bright);
}

.banxico-title p {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.banxico-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.banxico-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
}

.banxico-card h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 6px;
}

.banxico-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   CASILLAS DE PREGUNTAS Y GLOSARIO (FORMATO CASILLAS FORTUVISIÓN)
   ========================================================================== */
.casillas-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.casilla-bloque {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.casilla-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: var(--bg-card-alt);
  border-bottom: 1px solid var(--border-subtle);
}

.casilla-header h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--gold-bright);
}

.casilla-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.casilla-item {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
}

.casilla-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.casilla-q {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.casilla-a {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.casilla-a strong {
  color: var(--text-main);
}

/* ==========================================================================
   REFERENCIAS APA 7 NUMERADAS & FILTROS (FORMATO FORTUVISIÓN)
   ========================================================================== */
.presets-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 20px;
}

.chip {
  appearance: none;
  border: 1px solid var(--border-accent);
  background: var(--bg-surface);
  color: var(--text-secondary);
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.chip:hover {
  border-color: var(--gold);
  color: var(--text-main);
}

.chip.active, .chip.on {
  background: var(--gold);
  color: #06070a;
  border-color: var(--gold);
  font-weight: 700;
}

[data-theme="light"] .chip.active, [data-theme="light"] .chip.on {
  background: var(--gold);
  color: #ffffff;
}

.refs-ordered-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ref-row-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.2s;
}

.ref-row-item:hover {
  border-color: var(--border-gold);
}

.ref-num-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  width: 32px;
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ref-content-body {
  flex: 1;
}

.ref-citation-apa {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 6px;
}

.ref-citation-apa a {
  color: var(--cyan);
  text-decoration: none;
  word-break: break-all;
}

.ref-citation-apa a:hover {
  text-decoration: underline;
}

.ref-note {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ref-tag-pill {
  font-family: var(--font-mono);
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  align-self: flex-start;
  white-space: nowrap;
}

/* ==========================================================================
   COMUNIDAD & CONTRALORÍA CÍVICA (FORMATO FORTUVISIÓN)
   ========================================================================== */
.comunidad-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}

@media (max-width: 950px) {
  .comunidad-layout {
    grid-template-columns: 1fr;
  }
}

.com-card-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.com-card-panel h3 {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

.com-card-panel p.sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.com-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.com-form-row label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
}

.com-form-row input, .com-form-row select, .com-form-row textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.com-form-row input:focus, .com-form-row select:focus, .com-form-row textarea:focus {
  border-color: var(--gold);
}

.com-form-row textarea {
  min-height: 110px;
  resize: vertical;
}

.canales-denuncia-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.canal-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all 0.2s;
}

.canal-item-card:hover {
  border-color: var(--border-gold);
}

.canal-ico {
  font-size: 24px;
  flex-shrink: 0;
}

.canal-info h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

.canal-info p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 8px;
}

.canal-info a {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  text-decoration: none;
}

.canal-info a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   REFINAMIENTOS ESPECÍFICOS DE TEMA CLARO (EDITORIAL ARCHIVO FISCAL)
   ========================================================================== */
[data-theme="light"] .telemetry-bar {
  background: #1c2130;
  color: #f0ede6;
  border-bottom-color: #ded7c6;
}

[data-theme="light"] .tel-item {
  color: #c4c9d6;
}

[data-theme="light"] .tel-item strong.gold {
  color: #ffd166;
}

[data-theme="light"] #geoMapContainer,
[data-theme="light"] #cartogramContainer {
  background: #eae5d7;
  border-color: #c9c1ae;
}

[data-theme="light"] .site-footer {
  background: #1e222d;
  color: #c4c9d6;
  border-top-color: #8b7330;
}

[data-theme="light"] .site-footer h4 {
  color: #ffd166;
}

[data-theme="light"] .footer-bottom {
  border-top-color: rgba(255,255,255,0.08);
  color: #9aa2b4;
}

/* ==========================================================================
   SUBPESTAÑAS (FORMATO FORTUVISIÓN & DIAGNÓSTICO COMPARATIVO)
   ========================================================================== */
.subtabs-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
  align-items: center;
}

.subtab-btn {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.subtab-btn:hover {
  border-color: var(--border-gold);
  color: var(--text-main);
  background: var(--bg-card-hover);
}

.subtab-btn.active,
.subtab-btn[aria-selected="true"] {
  background: var(--gold-gradient);
  border-color: var(--gold-bright);
  color: #0d0f17;
  font-weight: 700;
  box-shadow: 0 4px 14px var(--gold-glow);
}

.subtab-panel {
  display: none;
  animation: fadeIn 0.3s ease forwards;
}

.subtab-panel.active {
  display: block;
}

.subtab-panel .congresos-box,
.subtab-panel .electoral-box,
.subtab-panel .jerarquia-box {
  height: auto;
  min-height: 100%;
  width: 100%;
}

.subtab-panel .electoral-map-wrapper {
  height: 380px;
}

.subtab-panel .distritos-list-scroll {
  max-height: 340px;
}

.subtab-panel .congresos-table-scroll {
  max-height: 640px;
}

/* ==========================================================================
   ENLACES INTERNOS A GLOSARIO Y NOTAS AL PIE / REFERENCIAS
   ========================================================================== */
.glos-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed var(--cyan);
  cursor: pointer;
  transition: all 0.2s;
  padding: 0 1px;
}

.glos-link:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.08);
  border-radius: 2px;
}

.ref-link {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.78em;
  vertical-align: super;
  text-decoration: none;
  font-weight: 700;
  padding: 0 2px;
  cursor: pointer;
}

.ref-link:hover {
  color: var(--gold-bright);
  text-shadow: 0 0 6px var(--gold);
  text-decoration: underline;
}

/* ==========================================================================
   GRÁFICAS VISUALES DE BARRAS (FORMATO DIAGNÓSTICO COMPARATIVO)
   ========================================================================== */
.bar-chart-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
}

.chart-title-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 10px;
}

.chart-title-header h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--gold-bright);
}

.bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.bar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  width: 130px;
  flex-shrink: 0;
  line-height: 1.3;
}

.bar-track {
  flex: 1;
  height: 26px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #fff;
  font-weight: 700;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}

.bar-fill.pri {
  background: linear-gradient(90deg, #006847 0%, #2e8b57 100%);
}

.bar-fill.pan {
  background: linear-gradient(90deg, #0055a5 0%, #2e7dd1 100%);
}

.bar-fill.morena {
  background: linear-gradient(90deg, #8b1a1a 0%, #b5363a 100%);
}

.bar-fill.red-alert {
  background: linear-gradient(90deg, #942020 0%, #ba2828 100%) !important;
}

/* ==========================================================================
   BARRA DE EVALUACIÓN INTERACTIVA DE MANDATARIOS (SUBPESTAÑA 5.1)
   ========================================================================== */
.evaluacion-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: linear-gradient(135deg, rgba(20, 24, 33, 0.95), rgba(12, 14, 21, 0.98));
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 22px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.eval-info-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.eval-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.18);
  border: 1px solid var(--gold);
  padding: 3px 8px;
  border-radius: 4px;
}

.eval-status-text {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.eval-actions-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.eval-btn-primary {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #0a0c10;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 12px;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.35);
}

.eval-btn-primary:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.5);
}

.eval-btn-primary:active {
  transform: translateY(0);
}

.eval-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.eval-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: var(--border-gold);
}

.eval-toggle-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  margin-left: 4px;
}

.eval-toggle-label input[type="checkbox"] {
  accent-color: var(--gold-bright);
  cursor: pointer;
}

.bar-val-text {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  transition: color 0.3s ease;
}

.bar-fill.bar-zero {
  width: 0% !important;
  padding-left: 0 !important;
}

.bar-fill.bar-zero .bar-val-text {
  margin-left: 10px;
  color: var(--text-dim);
}

.comparativa-sexenal-grid {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  border-radius: 12px;
}

.bar-leader-highlight {
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.5);
  border-color: var(--gold-bright) !important;
}

/* ==========================================================================
   FICHAS PRESIDENCIALES EN COLUMNAS & PUNTOS CLAVE
   ========================================================================== */
.presidents-nav-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pres-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.pres-chip:hover {
  border-color: var(--border-gold);
  color: var(--text-main);
}

.pres-chip.active {
  border-color: var(--gold);
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold-bright);
  font-weight: 700;
}

.sexenio-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 30px;
  position: relative;
}

.card-header-pres {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
}

.party-stripe {
  width: 7px;
  flex-shrink: 0;
}

.party-stripe.pri { background: #006847; }
.party-stripe.pan { background: #0055a5; }
.party-stripe.morena { background: #8b1a1a; }

.card-header-main {
  flex: 1;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pres-titles h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--text-main);
  margin-bottom: 3px;
}

.pres-period {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}

.party-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.party-badge.badge-pri { background: rgba(0, 104, 71, 0.2); color: #4caf7a; border: 1px solid rgba(0, 104, 71, 0.4); }
.party-badge.badge-pan { background: rgba(0, 85, 165, 0.2); color: #5b9bd5; border: 1px solid rgba(0, 85, 165, 0.4); }
.party-badge.badge-morena { background: rgba(139, 26, 26, 0.2); color: #e07a7a; border: 1px solid rgba(139, 26, 26, 0.4); }

.card-body-pres {
  padding: 24px;
}

.pres-model-banner {
  background: var(--bg-surface);
  border-left: 3px solid var(--gold);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 20px;
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary);
}

.data-grid-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.data-block-col {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-gold);
  border-radius: 6px;
  padding: 14px;
}

.data-block-col.red-accent { border-left-color: var(--crimson-bright); }
.data-block-col.cyan-accent { border-left-color: var(--cyan); }
.data-block-col.green-accent { border-left-color: var(--emerald-bright); }

.data-col-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.data-col-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-main);
}

.desfalcos-box {
  background: rgba(139, 26, 26, 0.05);
  border: 1px solid rgba(139, 26, 26, 0.2);
  border-radius: 8px;
  padding: 18px;
  margin-bottom: 20px;
}

.desfalcos-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--crimson-bright);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.desfalco-item-row {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12.5px;
  line-height: 1.5;
}

.desfalco-item-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.officials-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.official-pill {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
}

.official-pill strong {
  color: var(--gold-bright);
}

/* ==========================================================================
   EXPEDIENTE JUDICIAL: GENARO GARCÍA LUNA (SUBPESTAÑA 5.3)
   ========================================================================== */
.garcia-luna-dossier {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 30px;
  margin-bottom: 30px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.garcia-luna-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.gl-title h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

.gl-sentence-badge {
  background: var(--crimson);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  box-shadow: 0 0 14px var(--crimson-glow);
}

.quote-cogan-box {
  background: rgba(201, 168, 76, 0.05);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 22px 0;
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-main);
}

.quote-author {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  text-align: right;
}

.witness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.witness-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
}

.witness-card h4 {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--crimson-bright);
  margin-bottom: 6px;
}

.witness-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   TABLA COMPARATIVA CONSOLIDADA (SEXENIOS 1988–2026)
   ========================================================================== */
.consolidated-table-wrap {
  overflow-x: auto;
  margin: 24px 0;
}

.consolidated-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.consolidated-table th {
  background: var(--bg-surface);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 14px;
  border-bottom: 2px solid var(--border-gold);
  white-space: nowrap;
}

.consolidated-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.consolidated-table tr:hover td {
  background: rgba(201, 168, 76, 0.04);
}

/* ==========================================================================
   SCJN: CONTENEDOR DIVIDIDO (TABLA + BLOQUES DERECHOS UNIFORMES)
   ========================================================================== */
.scjn-split-container {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 25px;
}

@media (max-width: 1100px) {
  .scjn-split-container {
    grid-template-columns: 1fr;
  }
}

.scjn-right-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.scjn-chart-card,
.scjn-calculos-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.scjn-chart-header {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.scjn-metric-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.scjn-metric-pill:hover {
  border-color: var(--gold);
  color: var(--text-main);
  background: rgba(201, 168, 76, 0.08);
}

.scjn-metric-pill.active {
  background: rgba(201, 168, 76, 0.18);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  font-weight: 700;
}

.scjn-chart-benchmark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(46, 204, 113, 0.08);
  border: 1px dashed rgba(46, 204, 113, 0.4);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 14px;
}

.scjn-chart-bars-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}

.scjn-chart-bars-list::-webkit-scrollbar {
  width: 5px;
}
.scjn-chart-bars-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}
.scjn-chart-bars-list::-webkit-scrollbar-thumb {
  background: var(--border-gold);
  border-radius: 4px;
}

.scjn-chart-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}

.scjn-chart-row:hover {
  background: rgba(201, 168, 76, 0.07);
  border-color: rgba(201, 168, 76, 0.35);
  transform: translateX(2px);
}

.scjn-chart-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}

.scjn-chart-row-name {
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
}

.scjn-chart-row-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.scjn-chart-track {
  width: 100%;
  height: 11px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.scjn-chart-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scjn-chart-bar-fill.emerald {
  background: linear-gradient(90deg, #1e824c, #2ecc71);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.3);
}

.scjn-chart-bar-fill.gold {
  background: linear-gradient(90deg, #c9a84c, #f3cf65);
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.3);
}

.scjn-chart-bar-fill.crimson {
  background: linear-gradient(90deg, #8b1a1a, #e74c3c);
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.3);
}

.scjn-chart-bar-fill.cyan {
  background: linear-gradient(90deg, #0077b6, #00b4d8);
  box-shadow: 0 0 8px rgba(0, 180, 216, 0.3);
}

.scjn-chart-ref-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
}

.scjn-metric-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

.scjn-metric-pill:hover {
  border-color: var(--gold);
  color: var(--text-main);
  background: rgba(201, 168, 76, 0.08);
}

.scjn-metric-pill.active {
  background: rgba(201, 168, 76, 0.18);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  font-weight: 700;
}

.scjn-chart-benchmark {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(46, 204, 113, 0.08);
  border: 1px dashed rgba(46, 204, 113, 0.4);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  margin-bottom: 14px;
}

.scjn-chart-bars-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}

.scjn-chart-bars-list::-webkit-scrollbar {
  width: 5px;
}
.scjn-chart-bars-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}
.scjn-chart-bars-list::-webkit-scrollbar-thumb {
  background: var(--border-gold);
  border-radius: 4px;
}

.scjn-chart-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
}

.scjn-chart-row:hover {
  background: rgba(201, 168, 76, 0.07);
  border-color: rgba(201, 168, 76, 0.35);
  transform: translateX(2px);
}

.scjn-chart-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}

.scjn-chart-row-name {
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
}

.scjn-chart-row-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.scjn-chart-track {
  width: 100%;
  height: 11px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.scjn-chart-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scjn-chart-bar-fill.emerald {
  background: linear-gradient(90deg, #1e824c, #2ecc71);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.3);
}

.scjn-chart-bar-fill.gold {
  background: linear-gradient(90deg, #c9a84c, #f3cf65);
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.3);
}

.scjn-chart-bar-fill.crimson {
  background: linear-gradient(90deg, #8b1a1a, #e74c3c);
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.3);
}

.scjn-chart-bar-fill.cyan {
  background: linear-gradient(90deg, #0077b6, #00b4d8);
  box-shadow: 0 0 8px rgba(0, 180, 216, 0.3);
}

.scjn-chart-ref-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #2ecc71;
  z-index: 2;
  box-shadow: 0 0 4px #2ecc71;
}

.scjn-chart-footer-note {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  line-height: 1.45;
}

/* ==========================================================================
   PESTAÑA 5: SPOTLIGHT BANNER DE EXPEDIENTES DESTACADOS & REDES FAMILIARES
   ========================================================================== */
.politicos-spotlight-dossiers {
  margin: 0 0 24px 0;
  background: linear-gradient(135deg, rgba(20, 24, 33, 0.98) 0%, rgba(35, 25, 20, 0.95) 100%);
  border: 1.5px solid var(--gold-bright);
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.55), inset 0 0 18px rgba(201,168,76,0.12);
  position: relative;
  overflow: hidden;
}

.politicos-spotlight-dossiers::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--crimson-bright) 0%, var(--gold-bright) 50%, var(--gold) 100%);
}

.spotlight-dossier-btn {
  cursor: pointer;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text-main);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.spotlight-dossier-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.spotlight-btn-salinas:hover {
  border-color: var(--crimson-bright) !important;
  background: rgba(139, 26, 26, 0.35) !important;
}

.spotlight-btn-verde:hover {
  border-color: #2ecc71 !important;
  background: rgba(46, 125, 50, 0.3) !important;
}

.spotlight-btn-andy:hover {
  border-color: var(--gold-bright) !important;
  background: rgba(201, 168, 76, 0.25) !important;
}

@keyframes pulseGoldenBorder {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.9);
    border-color: var(--gold-bright) !important;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 32px 10px rgba(201, 168, 76, 0.55);
    border-color: #ffffff !important;
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(201, 168, 76, 0);
    border-color: var(--gold-bright) !important;
    transform: scale(1);
  }
}

.card-highlight-pulse {
  animation: pulseGoldenBorder 1.2s ease-in-out 3 !important;
  border-color: var(--gold-bright) !important;
}

@keyframes pulseRedDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
  70% { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.pulse-red-indicator {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e74c3c;
  box-shadow: 0 0 8px #e74c3c;
  animation: pulseRedDot 1.6s infinite ease-in-out;
}

.card-destacado-familiar {
  border: 2px solid var(--gold-bright) !important;
  background: linear-gradient(135deg, rgba(30,34,48,0.95) 0%, rgba(20,24,33,0.98) 100%) !important;
  box-shadow: 0 0 22px rgba(201,168,76,0.28) !important;
}

/* ==========================================================================
   MONITOR CÍVICO ELECTORAL & PERIODOS LEGISLATIVOS (+19,600 CARGOS)
   ========================================================================== */
.electoral-civic-hub {
  background: linear-gradient(135deg, rgba(16, 20, 30, 0.98) 0%, rgba(11, 14, 22, 0.98) 100%);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.electoral-civic-hub::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e67e22, #c9a84c, #3498db, #2ecc71);
}

.civic-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.civic-hub-header .hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
}

.civic-hub-header h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: #ffffff;
  margin: 6px 0 4px 0;
}

.civic-hub-header p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 900px;
  line-height: 1.5;
}

/* Tira de Métricas Clave (4 Chips) */
.civic-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0;
}

.civic-kpi-chip {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.civic-kpi-chip:hover {
  transform: translateY(-2px);
  border-color: var(--gold-bright);
}

.civic-kpi-val {
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 800;
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  gap: 8px;
}

.civic-kpi-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 5px;
}

.civic-kpi-sub {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-top: 3px;
  line-height: 1.35;
}

/* Barra de Pestañas Cívicas */
.civic-nav-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.civic-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 9px 16px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
}

.civic-tab-btn:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

.civic-tab-btn.active {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.24) 0%, rgba(201, 168, 76, 0.08) 100%);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.25);
  font-weight: 700;
}

.civic-tab-content {
  animation: fadeInPower 0.3s ease forwards;
}

/* Tarjetas de Niveles de Gobierno (Pestaña 1) */
.civic-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.civic-tier-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.civic-tier-card:hover {
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.civic-tier-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.civic-tier-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.civic-tier-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.civic-tier-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.civic-tier-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}

/* Comparativa Mayoría Relativa vs. Plurinominales (Pestaña 2) */
.civic-versus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.civic-versus-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 22px;
}

.civic-versus-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.civic-versus-header h4 {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--gold-bright);
  margin: 0;
}

.civic-versus-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.civic-versus-item {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.civic-versus-item strong {
  color: var(--text-main);
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
  font-family: var(--font-mono);
}

.civic-versus-alert {
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid var(--gold-bright);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-main);
  line-height: 1.45;
}

/* Periodos Constitucionales & Calendario (Pestaña 3) */
.civic-calendar-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 22px;
}

.civic-timeline-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 20px;
}

.civic-timeline-title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gold-bright);
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.civic-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.civic-timeline-row {
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--gold-bright);
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
}

.civic-timeline-row.active-period {
  border-left-color: var(--cyan);
  background: rgba(0, 195, 255, 0.04);
}

.civic-timeline-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  min-width: 110px;
  flex-shrink: 0;
}

.civic-timeline-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.civic-timeline-content b {
  color: #ffffff;
  display: block;
  font-size: 12.5px;
  margin-bottom: 2px;
}

/* Guía de Auditoría de Perfiles (Pestaña 4) */
.civic-profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.civic-profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.civic-profile-card:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.civic-profile-icon {
  font-size: 26px;
  margin-bottom: 8px;
}

.civic-profile-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.civic-profile-req {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cyan);
  background: rgba(0, 195, 255, 0.08);
  border: 1px solid rgba(0, 195, 255, 0.2);
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}

.civic-profile-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Adaptación Responsiva para Pantallas Medianas y Móviles */
@media (max-width: 1100px) {
  .civic-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .civic-tier-grid {
    grid-template-columns: 1fr;
  }
  .civic-versus-grid {
    grid-template-columns: 1fr;
  }
  .civic-calendar-grid {
    grid-template-columns: 1fr;
  }
  .civic-profiles-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .civic-kpi-strip {
    grid-template-columns: 1fr;
  }
  .civic-profiles-grid {
    grid-template-columns: 1fr;
  }
  .civic-nav-tabs {
    flex-direction: column;
  }
  .civic-tab-btn {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ==========================================================================
   SUBPESTAÑA 6.3: MARCO LEGAL HACENDARIO & PRECEPTOS JURÍDICOS (LIF & CPEUM)
   ========================================================================== */
.preceptos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.precepto-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.22s ease;
  position: relative;
}

.precepto-card:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

.precepto-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.precepto-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(0, 195, 255, 0.08);
  border: 1px solid rgba(0, 195, 255, 0.25);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.precepto-title {
  font-family: var(--font-serif);
  font-size: 16.5px;
  color: #ffffff;
  margin: 4px 0 6px 0;
  line-height: 1.35;
}

.precepto-resumen {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
  flex-grow: 1;
}

.precepto-footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 10px;
  margin-top: auto;
  gap: 8px;
  flex-wrap: wrap;
}

.precepto-btn {
  cursor: pointer;
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid var(--gold-bright);
  color: var(--gold-bright);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.precepto-btn:hover {
  background: var(--gold-bright);
  color: #0d0f17;
}

.precepto-btn-sec {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  text-decoration: underline;
  transition: color 0.2s;
}

.precepto-btn-sec:hover {
  color: var(--cyan);
}

/* ==========================================================================
   SUBPESTAÑA 5.4: VERSUS GENERAL DON PORFIRIO DÍAZ (1876–1911)
   ========================================================================== */

.versus-porfirio-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.versus-hero-box {
  background: linear-gradient(135deg, rgba(20, 24, 33, 0.95), rgba(12, 14, 21, 0.98));
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.versus-hero-box::before {
  content: "";
  width: 120px;
  height: 120px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z' /%3E %3Cpath d='M5 21h14' /%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z' /%3E %3Cpath d='M5 21h14' /%3E%3C/svg%3E") center / contain no-repeat;
  position: absolute;
  right: -10px;
  bottom: -20px;
  opacity: 0.05;
  pointer-events: none;
}

.versus-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.versus-kpi-card {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  transition: all 0.25s ease;
  position: relative;
}

.versus-kpi-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.15);
}

.versus-kpi-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  display: block;
}

.versus-kpi-val {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

.versus-kpi-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Toolbar de Métricas y Modos de Gráfica */
.versus-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
}

.versus-metric-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.versus-metric-btn {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-family: var(--font-mono);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.versus-metric-btn:hover {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold-bright);
  border-color: var(--gold);
}

.versus-metric-btn.active {
  background: rgba(201, 168, 76, 0.22);
  color: var(--gold-bright);
  border-color: var(--gold-bright);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.25);
}

.versus-chart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.versus-action-btn {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.versus-action-btn:hover {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--gold);
  color: var(--gold-bright);
}

.versus-action-btn.active {
  background: var(--gold);
  color: #0d0f17;
  font-weight: 700;
  border-color: var(--gold-bright);
}

/* Contenedor de la Gráfica */
.versus-chart-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 24px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.versus-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.versus-chart-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--gold-bright);
  margin: 0;
}

.versus-chart-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* Gráfica de Barras Verticales Interactiva */
.versus-bars-stage {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 8px;
  min-height: 280px;
  /* El canal derecho de 104 px aloja el rótulo de la línea guía «Nivel Díaz»
     para que no quede encima de la última barra. */
  padding: 24px 132px 10px 8px;
  position: relative;
  overflow-x: auto;
}

@media (max-width: 860px) {
  .versus-bars-stage { padding-right: 8px; }
  .versus-linea-diaz-rotulo {
    right: auto;
    left: 0;
    top: -17px;
  }
}

.versus-bar-item {
  flex: 1;
  max-width: 84px;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
}

.versus-bar-item:hover {
  transform: translateY(-4px);
}

.versus-bar-item.selected .versus-bar-col {
  box-shadow: 0 0 18px var(--gold-bright);
  border-color: #fff;
}

.versus-bar-val-bubble {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  text-align: center;
  white-space: nowrap;
}

.versus-bar-col {
  width: 100%;
  border-radius: 6px 6px 0 0;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15);
  min-height: 8px;
}

.versus-bar-porfirio .versus-bar-col {
  background: linear-gradient(180deg, #f5d77f, #c9a84c, #856a21);
  border: 1px solid #ffd700;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}

.versus-bar-col.versus-bar-zero {
  height: 6px !important;
  opacity: 0.35 !important;
  box-shadow: none !important;
}

.versus-bar-val-bubble.bubble-zero {
  color: var(--text-dim) !important;
}

.versus-bar-lbl {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  line-height: 1.25;
}

.versus-bar-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 3px;
  display: inline-block;
}

/* Gráfica Lineal SVG */
.versus-line-container {
  width: 100%;
  overflow-x: auto;
  padding: 10px 0;
}

/* Barra de Selección de Mandatarios: 5 y 5 en Dos Renglones Fijos (Sin Desplazamiento) */
.versus-presidents-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  overflow: visible;
  padding: 8px 2px 14px;
}

@media (max-width: 1050px) {
  .versus-presidents-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.versus-pres-btn {
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.versus-pres-btn:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  background: rgba(201, 168, 76, 0.08);
}

.versus-pres-btn.active {
  border-color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.18);
  box-shadow: 0 0 14px rgba(201, 168, 76, 0.25);
}

.versus-pres-btn-avatar {
  font-size: 20px;
  flex-shrink: 0;
}

.versus-pres-btn-info {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
  overflow: hidden;
}

.versus-pres-btn-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.versus-pres-btn-period {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tablero Cara a Cara / Scorecard Bilateral */
.versus-scorecard-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  animation: versusScorecardFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes versusScorecardFadeIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.versus-scorecard-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .versus-scorecard-grid {
    grid-template-columns: 1fr;
  }
}

.versus-fighter-card {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.versus-fighter-card.porfirio {
  border-color: rgba(201, 168, 76, 0.5);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.08), rgba(12, 14, 21, 0.8));
}

.versus-verdict-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.versus-verdict-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}

.versus-box-supero {
  background: rgba(46, 204, 113, 0.08);
  border-left: 4px solid #2ecc71;
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: var(--text-main);
  line-height: 1.5;
}

.versus-box-perjudico {
  background: rgba(231, 76, 60, 0.08);
  border-left: 4px solid #e74c3c;
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: var(--text-main);
  line-height: 1.5;
}

.versus-box-sintesis {
  background: rgba(201, 168, 76, 0.08);
  border-left: 4px solid var(--gold-bright);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: var(--text-main);
  line-height: 1.55;
  font-style: italic;
}

/* Barra de Control de Simulador Hacendario en 3 Líneas Fijas (Cero Saltos de Layout) */
.versus-health-ctrls-3lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box;
}

.versus-ctrl-line-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.versus-ctrl-line-2 {
  width: 100%;
  min-height: 48px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 8px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.versus-ctrl-line-2 .eval-status-text {
  margin: 0;
  width: 100%;
  line-height: 1.45;
  font-size: 12px;
}

.versus-ctrl-line-3 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 2px;
}

.versus-health-console {
  background: linear-gradient(145deg, rgba(20, 24, 36, 0.95), rgba(12, 15, 24, 0.98));
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.versus-health-console::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e74c3c 0%, #f39c12 30%, #f1c40f 50%, #2ecc71 80%, #00b894 100%);
}

.versus-health-layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 24px;
  align-items: center;
}

@media (max-width: 900px) {
  .versus-health-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Tacómetro / Medidor Circular */
.versus-gauge-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.versus-gauge-svg-container {
  position: relative;
  width: 260px;
  height: 150px;
  margin: 0 auto;
}

.versus-gauge-score-display {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.versus-gauge-big-num {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.versus-gauge-denom {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.versus-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-top: 10px;
  border: 1px solid currentColor;
}

/* Selector rápido en consola de salud */
.versus-health-chips-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.versus-hchip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.versus-hchip:hover {
  border-color: var(--gold);
  color: var(--text-main);
  transform: translateY(-1px);
}

.versus-hchip.active {
  background: rgba(201, 168, 76, 0.18);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  font-weight: 700;
}

/* Panel Diagnóstico y Pilares */
.versus-health-detail-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px 18px;
}

.versus-health-leader-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border-subtle);
  padding-bottom: 10px;
}

.versus-health-diag-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

/* Pilares de salud */
.versus-pillar-row {
  margin-bottom: 8px;
}

.versus-pillar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 3px;
  font-family: var(--font-mono);
}

.versus-pillar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.versus-pillar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Selector de Vistas Multidimensional */
.versus-view-switcher {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: center;
}

.versus-view-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.versus-view-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: rgba(201, 168, 76, 0.4);
}

.versus-view-btn.active {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.15);
}

/* Vista 1: Cuadrícula de Tarjetas Ejecutivas (100% libre de scroll) */
.versus-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
  width: 100%;
}

.versus-exec-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.versus-exec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border-color: var(--border-gold);
}

.versus-exec-card.active-card {
  border-color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.06);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.2);
}

.versus-exec-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.versus-exec-avatar {
  font-size: 26px;
  line-height: 1;
}

.versus-exec-name {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
}

.versus-exec-period {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

.versus-mini-gauge-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
}

.versus-mini-gauge-inner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.versus-exec-metrics-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px;
}

.versus-m2-item {
  display: flex;
  flex-direction: column;
}

.versus-m2-label {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  text-transform: uppercase;
}

.versus-m2-val {
  font-size: 12.5px;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-top: 1px;
}

.versus-exec-verdict-snippet {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.versus-exec-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle);
}

.versus-exec-btn {
  flex: 1;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
}

.versus-exec-btn:hover {
  background: rgba(201, 168, 76, 0.15);
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* Vista 2: Tabla Optimizada (100% responsiva sin scroll horizontal forzado) */
.versus-table-wrapper {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  margin-top: 10px;
  overflow-x: auto;
}

.versus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}

.versus-table th {
  background: var(--bg-card-alt);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-gold);
}

.versus-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: middle;
}

.versus-table tr:hover {
  background: rgba(201, 168, 76, 0.06);
}

.versus-table tr.row-porfirio {
  background: rgba(201, 168, 76, 0.12);
  font-weight: 700;
}

/* Vista 3: Ranking Hacendario de Rojo a Verde */
.versus-ranking-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
}

.versus-ranking-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.versus-ranking-item:hover {
  border-color: var(--border-gold);
  transform: translateX(4px);
  background: rgba(201, 168, 76, 0.05);
}

.versus-ranking-pos {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}

.versus-ranking-info {
  width: 180px;
  flex-shrink: 0;
}

.versus-ranking-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.versus-ranking-period {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
}

.versus-ranking-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.versus-ranking-bar-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  overflow: hidden;
}

.versus-ranking-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.versus-ranking-score-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid currentColor;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .versus-ranking-item {
    flex-wrap: wrap;
  }
  .versus-ranking-info {
    width: auto;
    flex: 1;
  }
  .versus-ranking-bar-wrapper {
    width: 100%;
    order: 3;
  }
}

/* ==========================================================================
   DRAWERS LATERALES: ARGUMENTOS PARTICULARES (GARCÍA LUNA, DÍAZ, SANTA ANNA, JUÁREZ)
   ========================================================================== */
#garciaLunaArgumentoDrawer,
#porfirioDiazArgumentoDrawer,
#santaAnnaArgumentoDrawer,
#juarezArgumentoDrawer,
#ayudanosFiscalizarDrawer {
  max-width: 780px;
}

#garciaLunaArgumentoDrawer.active,
#porfirioDiazArgumentoDrawer.active,
#santaAnnaArgumentoDrawer.active,
#juarezArgumentoDrawer.active,
#ayudanosFiscalizarDrawer.active {
  right: 0;
  transform: none;
}

@media (max-width: 820px) {
  #garciaLunaArgumentoDrawer,
  #porfirioDiazArgumentoDrawer,
  #santaAnnaArgumentoDrawer,
  #juarezArgumentoDrawer,
  #ayudanosFiscalizarDrawer {
    max-width: 100%;
  }
}

/* ==========================================================================
   SUBPESTAÑA 2.2: SIMULADOR DE INVERSIONES, MEGAOBRAS & PÉRDIDAS EN TIEMPO REAL
   ========================================================================== */
.simulador-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.simulador-kpis-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

/* La clase existia en el HTML desde el principio pero nunca tuvo regla:
   las cuatro tarjetas se apilaban a lo alto en cualquier pantalla. */
/* ===== 2.2 - BLOQUES DE LECTURA =====================================
   La subpestana se lee en tres tiempos: el pulso del conjunto, la puerta
   de entrada por sector o sexenio, y el inventario obra por obra. Cada
   bloque va en su propia caja para que la vista sepa donde esta parada. */
.sim-bloque {
  position: relative;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
  border-radius: 16px;
  padding: 20px 18px 24px;
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.015);
}
.sim-bloque-cab {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.sim-bloque-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--bg-void, #0b0e13);
  background: var(--accent-gold, #c9a227);
}
.sim-bloque-tit {
  margin: 0 0 4px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sim-bloque-sub {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-dim, #9aa3b2);
  max-width: 78ch;
}
@media (max-width: 560px) {
  .sim-bloque { padding: 16px 12px 18px; border-radius: 12px; }
  .sim-bloque-num { width: 28px; height: 28px; font-size: 0.9rem; }
  .sim-bloque-tit { font-size: 1rem; }
}

/* Contador flotante. La tira del bloque 1 deja de verse en cuanto se
   avanza; el acumulado en vivo no debe perderse, asi que se reduce a una
   pastilla anclada a la esquina mientras se recorre la subpestana. */
.sim-tel-flota {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 940;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--rojo, #c0504d);
  border-radius: 999px;
  background: rgba(12, 15, 20, 0.94);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.85);
  font-size: 0.8rem;
  backdrop-filter: blur(5px);
}
.sim-tel-flota[hidden] { display: none; }
.sim-tel-punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rojo, #c0504d);
  animation: simTelLatido 1.4s ease-in-out infinite;
}
@keyframes simTelLatido { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.sim-tel-lbl { color: var(--text-dim, #9aa3b2); }
.sim-tel-val {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--rojo, #c0504d);
}
@media (max-width: 560px) {
  .sim-tel-flota { right: 10px; bottom: 10px; padding: 7px 12px; font-size: 0.72rem; }
  .sim-tel-lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sim-tel-punto { animation: none; } }

/* Partes A y B dentro del bloque 2: dos puertas a la misma informacion. */
.sim-parte-panel { margin-bottom: 0; }
.sim-parte-panel[hidden] { display: none; }
.sim-parte-et {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, #9aa3b2);
}
.sim-parte-let {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--border-accent, rgba(201, 162, 39, 0.4));
  color: var(--gold, #c9a227);
  font-size: 0.78rem;
  letter-spacing: 0;
}

/* Pie de cada renglon de la comparativa: quien mandaba y en que periodo. */
.sim-comp-pres {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim, #9aa3b2);
}
/* Vista «en contexto»: las obras que el filtro no señala siguen en la
   lista, para no perder la escala, pero ceden el primer plano. */
.sim-comp-fuera { opacity: 0.42; }
.sim-comp-fuera:hover { opacity: 0.85; }
/* La barra la conduce requestAnimationFrame: una transicion propia
   competiria con el conteo. */
.sim-rank-filtro .sim-rank-barra { transition: none; }
.sim-rank-filtro .evaluacion-controls-bar { margin: 10px 0 14px; }
.sim-rank-enlace {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--gold-bright, #d4af37);
  text-decoration: underline;
  cursor: pointer;
}

/* Aviso de valor cero legitimo en la lista comparativa. */
.sim-rank-cero {
  margin: 10px 0 0;
  padding: 11px 14px;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.24);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-soft, #c9d1d9);
}

/* Aclaracion de conteo (bloque 2 de la 2.2): por que 12 y no 13. */
.sim-conteo {
  border-left: 3px solid var(--gold-bright, #d4af37);
  padding: 2px 0 2px 16px;
  margin: 12px 0 4px;
}
.sim-conteo-p {
  margin: 0 0 11px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--text-soft, #c9d1d9);
}
.sim-conteo-caso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 14px 0;
  padding: 13px 15px;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.07);
  border: 1px solid rgba(212, 175, 55, 0.22);
}
.sim-conteo-caso .sim-conteo-p { margin: 0; }
.sim-conteo-ico { font-size: 21px; line-height: 1.2; }
.sim-conteo-ol {
  margin: 0 0 12px;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft, #c9d1d9);
}
.sim-conteo-ol li { margin-bottom: 6px; }
.sim-conteo-regla {
  margin: 14px 0 0;
  padding: 12px 15px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary, #e6edf3);
}
/* La cabecera que abre las subpestanas no lleva cuerpo debajo: solo
   anuncia el bloque, asi que no necesita el aire inferior habitual. */
.sim-bloque-abre { padding-bottom: 6px; margin-bottom: 8px; }
@media (max-width: 640px) {
  .sim-conteo { padding-left: 12px; }
  .sim-conteo-caso { flex-direction: column; gap: 7px; }
}

.sim-sex-barra { margin: 4px 0 14px; }

/* ===== 2.2 - SUBPESTANAS A / B / C ==================================
   Las tres partes dejan de apilarse y pasan a ser subpestanas: una sola
   a la vista, con el filtro compartido entre todas. Lo elegido en A
   sigue senalado en B y sigue rigiendo las mesas de C. */
.sim-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 20px;
}
.sim-tab-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-card-alt);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.sim-tab-btn:hover { transform: translateY(-2px); border-color: var(--border-accent); }
.sim-tab-btn.active {
  border-color: var(--border-gold);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.14), rgba(201, 168, 76, 0.02));
  color: var(--text-main);
}
.sim-tab-let {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border-accent);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--gold, #c9a227);
}
.sim-tab-btn.active .sim-tab-let {
  background: var(--gold, #c9a227);
  border-color: var(--gold, #c9a227);
  color: var(--bg-void, #0b0e13);
}
.sim-tab-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim-tab-tx strong { font-size: 0.9rem; line-height: 1.25; }
.sim-tab-tx small { font-size: 0.72rem; line-height: 1.3; color: var(--text-dim, #9aa3b2); }

@media (max-width: 900px) {
  .sim-tabs { grid-template-columns: 1fr; gap: 8px; }
  .sim-tab-tx small { display: none; }
}

/* Pastillas de mandato dentro de la parte A: la fusion de industria y
   mandato sobre una misma lista de fichas. */
.sim-mandato { margin: 14px 0 16px; }
.sim-pill-n {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.72em;
}
/* Un mandato sin obras dentro de la industria elegida se atenua, pero
   sigue siendo pulsable: antes se desactivaba y el filtro parecia roto. */
.sim-pill-cero { opacity: 0.5; }
.sim-pill-cero:hover { opacity: 1; }

.sim-rank-filtro { margin: 0 0 18px; }

/* Combinacion sin obras: se dice con claridad y se ofrece la salida. */
.sim-vacio {
  grid-column: 1 / -1;
  padding: 26px 22px;
  border: 1px dashed var(--border-accent, rgba(201, 162, 39, 0.4));
  border-radius: 14px;
  background: var(--bg-card-alt);
  text-align: center;
}
.sim-vacio-t { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; color: var(--text-main); }
.sim-vacio-s { margin: 0 auto 16px; max-width: 64ch; font-size: 0.88rem; line-height: 1.6; color: var(--text-secondary); }
.sim-vacio-b { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.sim-kpis-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin-bottom: 22px;
  /* Anclada bajo la barra de pestanas (sticky en top:10px, 38px de alto):
     los cuatro bloques y el contador en vivo quedan siempre a la vista
     mientras se exploran los filtros y las mesas de calculo. */
  position: sticky;
  top: 0;
  z-index: 880;
  /* Sin hueco por arriba: el relleno llega al borde de la ventana para
     que el contenido no asome por detras de la tira anclada. */
  padding: 12px 10px 13px;
  margin: -12px -10px 22px;
  background: var(--bg-void);
  box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.75);
}
@media (max-width: 1080px) { .sim-kpis-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .sim-kpis-strip { grid-template-columns: 1fr; } }

.sim-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.sim-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: var(--gold-gradient);
}

.sim-kpi-card.alert-kpi::before {
  background: linear-gradient(180deg, var(--crimson-bright), #ff4d4d);
}

.sim-kpi-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sim-kpi-val {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 900;
  color: var(--gold-bright);
  margin: 6px 0 2px;
  letter-spacing: -0.5px;
}

.sim-kpi-val.loss-val {
  color: #ff6b6b;
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.3);
}

.sim-kpi-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
}

/* Barra de Controles y Filtros */
.sim-controls-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.sim-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.sim-control-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sim-pills-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sim-pill-btn {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sim-pill-btn:hover {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold-bright);
  border-color: var(--gold);
}

.sim-pill-btn.active {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.25), rgba(184, 134, 11, 0.18));
  color: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.35);
  font-weight: 800;
}

.sim-pill-periodo.active {
  background: linear-gradient(135deg, rgba(192, 57, 43, 0.3), rgba(231, 76, 60, 0.2));
  color: #ff8585;
  border-color: var(--crimson-bright);
  box-shadow: 0 0 12px var(--crimson-glow);
}

/* Grilla de Megaobras */
.sim-obras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}

.sim-obra-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sim-obra-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-color: var(--gold-bright);
}

.sim-obra-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.sim-obra-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sim-obra-ico {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.sim-obra-name {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--gold-bright);
  margin: 0;
  line-height: 1.25;
}

.sim-obra-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
}

.sim-status-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(192, 57, 43, 0.18);
  border: 1px solid rgba(192, 57, 43, 0.4);
  color: var(--crimson-bright);
  white-space: nowrap;
}

/* Caja de Pérdida Continua en Vivo */
.sim-loss-box {
  background: linear-gradient(135deg, rgba(139, 26, 26, 0.35) 0%, rgba(20, 20, 30, 0.6) 100%);
  border: 1px solid var(--crimson-bright);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: 0 0 16px rgba(192, 57, 43, 0.25);
}

.sim-loss-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #ff9999;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sim-loss-amount {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
}

.sim-live-ticker-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #ffd166;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pulsing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4d;
  display: inline-block;
  animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 8px #ff4d4d; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* Comparador de Inversión y Sobrecosto */
.sim-inversion-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
}

.sim-inv-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sim-inv-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.sim-inv-val {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
}

/* Desglose de Costos de Operación */
.sim-operacion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sim-op-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sim-op-chip strong {
  color: var(--gold-bright);
  font-family: var(--font-mono);
}

/* Caja de Proyección / Amortización */
.sim-proyeccion-box {
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.sim-proyeccion-box strong {
  color: var(--gold-bright);
}

.sim-proyeccion-box.deficit-box {
  background: rgba(192, 57, 43, 0.1);
  border-left-color: var(--crimson-bright);
}

.sim-proyeccion-box.deficit-box strong {
  color: #ff8585;
}

/* Hallazgo ASF / Observación */
.sim-asf-finding {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.45;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
/* Lo que dicen los documentos oficiales de cada megaobra (2.2). */
.sim-ver { margin-top: 12px; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px 12px; background: var(--bg-card); font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.sim-ver summary { cursor: pointer; font-weight: 700; color: var(--gold-bright); }
.sim-ver-sub { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.sim-ver-tabla { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11.5px; }
.sim-ver-tabla th, .sim-ver-tabla td { padding: 4px 6px; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.sim-ver-tabla td:nth-child(2) { text-align: right; white-space: nowrap; }
.sim-ver-total td { font-weight: 700; }
.sim-ver-p { margin: 8px 0; }
.sim-ver-asf { margin: 4px 0 0; padding-left: 18px; }
.sim-ver-asf li { margin-bottom: 3px; }
.sim-ver-dim { color: var(--text-dim); }
.sim-ver-inc { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--crimson-bright); background: rgba(231, 76, 60, 0.07); border-radius: 4px; }
.sim-ver-inc p { margin: 6px 0 0; }
.sim-ver-fuentes { margin: 10px 0 0; padding-left: 18px; font-size: 11.5px; }
.sim-ver-nada { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); }

/* ==========================================================================
   APARATO CRÍTICO & NOTAS AL PIE: SUPREMA CORTE DE JUSTICIA DE LA NACIÓN
   ========================================================================== */
.scjn-footnotes-card {
  margin-top: 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.scjn-footnotes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--border-gold);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.scjn-footnotes-title h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--gold-bright);
  margin: 3px 0 0 0;
}

.scjn-footnotes-title p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 0 0;
}

.scjn-footnotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.scjn-fn-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.scjn-fn-item:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.scjn-fn-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.scjn-fn-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: #000;
  background: var(--gold);
  padding: 2px 7px;
  border-radius: 4px;
}

.scjn-fn-name {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--text-main);
  font-weight: 700;
}

.scjn-fn-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 10px 0;
}

.scjn-fn-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   NOTAS AL PIE NUMERADAS & APARATO CRÍTICO LIMPIO (SCJN)
   ========================================================================== */
.scjn-footnotes-numbered {
  margin-top: 28px;
  border-top: 1px solid var(--border-gold);
  padding: 20px 24px;
  background: rgba(14, 18, 28, 0.55);
  border-radius: 10px;
  border-left: 3px solid var(--gold);
}

.scjn-fn-clean-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.scjn-fn-clean-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--gold-bright);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scjn-fn-clean-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.scjn-fn-clean-list li {
  padding-left: 4px;
}

.scjn-fn-clean-list strong {
  color: var(--text-main);
}

/* ==========================================================================
   PROTOCOLO ARQUITECTÓNICO DE CITACIÓN Y CENTRALIZACIÓN APA 7
   ========================================================================== */
.banner-protocolo-citacion {
  transition: all 0.3s ease;
}
.banner-protocolo-citacion:hover {
  border-color: var(--gold-bright) !important;
  box-shadow: 0 6px 24px rgba(201, 168, 76, 0.18) !important;
}

/* ==========================================================================
   PORTAL PÚBLICO DIGITAL · ÁGORA CÍVICA & RED SOCIAL DE DIÁLOGO (PESTAÑA 8)
   ========================================================================== */
.portal-digital-block {
  margin-top: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: fadeInPower 0.4s ease forwards;
}

.portal-banner-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-gold);
  margin-bottom: 24px;
}

.portal-title-group h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--gold-bright);
  margin: 4px 0 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-title-group p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 820px;
  margin: 0;
}

.portal-privacy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.privacy-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.privacy-pill.gold {
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
}
.privacy-pill.green {
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.35);
  color: #2ecc71;
}
.privacy-pill.cyan {
  background: rgba(0, 180, 216, 0.12);
  border: 1px solid rgba(0, 180, 216, 0.35);
  color: var(--cyan);
}

/* Formulario creador de nuevo debate */
.portal-creator-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.portal-creator-card h4 {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gold-bright);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  .creator-form-grid {
    grid-template-columns: 1fr;
  }
}

.stance-selector-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stance-btn-radio {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.stance-btn-radio:hover {
  border-color: var(--gold);
  color: var(--text-main);
}

.stance-btn-radio.active[data-stance="a_favor"] {
  background: rgba(46, 204, 113, 0.2);
  border-color: #2ecc71;
  color: #2ecc71;
}

.stance-btn-radio.active[data-stance="en_contra"] {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ef4444;
}

.stance-btn-radio.active[data-stance="matiz"] {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #f59e0b;
}

.stance-btn-radio.active[data-stance="aporte"] {
  background: rgba(0, 180, 216, 0.2);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Feed social de debates */
.portal-debates-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.debate-post-card {
  background: rgba(14, 18, 28, 0.6);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 22px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

.debate-post-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

.debate-post-card.stance-a_favor {
  border-left-color: #2ecc71;
}
.debate-post-card.stance-en_contra {
  border-left-color: #ef4444;
}
.debate-post-card.stance-matiz {
  border-left-color: #f59e0b;
}
.debate-post-card.stance-aporte {
  border-left-color: var(--cyan);
}

.debate-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.debate-author-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  font-family: var(--font-mono);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  text-transform: uppercase;
}

.user-nick-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-bright);
}

.debate-time-text {
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.debate-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stance-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stance-badge.a_favor {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.3);
}
.stance-badge.en_contra {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.stance-badge.matiz {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.stance-badge.aporte {
  background: rgba(0, 180, 216, 0.15);
  color: var(--cyan);
  border: 1px solid rgba(0, 180, 216, 0.3);
}

.topic-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 3px 8px;
  border-radius: 4px;
}

.debate-title-h4 {
  font-family: var(--font-serif);
  font-size: 17px;
  color: #ffffff;
  margin: 6px 0 10px 0;
  line-height: 1.4;
}

.debate-content-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 12px;
}

.debate-source-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed var(--border-subtle);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.debate-actions-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

.action-civic-btn {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.action-civic-btn:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--gold);
  color: var(--gold-bright);
}

.action-civic-btn.liked {
  background: rgba(201, 168, 76, 0.25);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}

/* Hilos de réplicas */
.debate-replies-thread {
  margin-top: 16px;
  padding-left: 20px;
  border-left: 2px solid rgba(201, 168, 76, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reply-item-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.6;
}

.reply-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.reply-form-wrapper {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed var(--border-gold);
  border-radius: 8px;
  animation: fadeInPower 0.3s ease;
}

/* Hover y animaciones para Radiografía de Irregularidades ASF (Bloque 3) */
.asf-irreg-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.asf-bar-fill.bar-zero {
  width: 0% !important;
  transition: none !important;
}

/* ==========================================================================
   SIMULADOR COMPARATIVO DE PRESTACIONES SCJN (SUBPESTAÑA 4.2)
   ========================================================================== */
.prest-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.prest-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.prest-kpi-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.prest-kpi-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.prest-kpi-val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--gold-bright);
  line-height: 1.2;
}

.prest-kpi-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.prest-bar-item {
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 6px;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
}

.prest-bar-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border-color: var(--border-gold);
}

.prest-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.prest-bar-fill.bar-zero {
  width: 0% !important;
  transition: none !important;
}

.prest-card-minibar {
  background: rgba(255, 255, 255, 0.06);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0;
}

.prest-card-minibar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.prest-card-minibar-fill.bar-zero {
  width: 0% !important;
  transition: none !important;
}

/* ==========================================================================
   SIMULADOR COMPARATIVO DE ASESORES SCJN (SUBPESTAÑA 4.3)
   ========================================================================== */
.asesores-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.asesores-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.asesores-kpi-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.asesores-kpi-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.asesores-kpi-val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: #38bdf8;
  line-height: 1.2;
}

.asesores-kpi-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.asesores-bar-item {
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 6px;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
}

.asesores-bar-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border-color: var(--cyan);
}

.asesores-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.asesores-bar-fill.bar-zero {
  width: 0% !important;
  transition: none !important;
}

.asesores-card-minibar {
  background: rgba(255, 255, 255, 0.06);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0;
}

.asesores-card-minibar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.asesores-card-minibar-fill.bar-zero {
  width: 0% !important;
  transition: none !important;
}

/* ==========================================================================
   SIMULADOR COMPARATIVO, SALUD FINANCIERA & CHOQUE SALARIAL (SUBPESTAÑA 4.4)
   ========================================================================== */
.globales-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.globales-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.globales-kpi-card:hover {
  border-color: var(--crimson-bright);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.globales-kpi-lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--crimson-bright);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.globales-kpi-val {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--gold-bright);
  line-height: 1.2;
}

.globales-kpi-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

.globales-bar-item {
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 6px;
  transition: all 0.2s ease;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
}

.globales-bar-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border-color: var(--gold);
}

.globales-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.globales-bar-fill.bar-zero {
  width: 0% !important;
  transition: none !important;
}

/* Selector Interactivo de Choque Laboral */
.choque-controls-container {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choque-row-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.choque-group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  min-width: 140px;
}

.choque-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.choque-pill-btn:hover {
  border-color: var(--gold);
  color: var(--text-main);
}

.choque-pill-btn.active {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.choque-contrast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.choque-contrast-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
}

.choque-contrast-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.choque-contrast-val {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.choque-contrast-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

/* ==========================================================================
   PESTAÑA 6: VERIFICADOR & DESACREDITADOR FORENSE DE NOTICIAS
   ========================================================================== */
.factcheck-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.factcheck-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 980px) {
  .factcheck-input-grid {
    grid-template-columns: 1fr;
  }
}

.factcheck-card-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.factcheck-dropzone {
  border: 2px dashed rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.03);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.factcheck-dropzone:hover,
.factcheck-dropzone.dragover {
  border-color: var(--gold-bright);
  background: rgba(212, 175, 55, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15);
}

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

.factcheck-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.factcheck-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.factcheck-input:focus {
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.factcheck-select {
  background: #111420;
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.factcheck-select:focus {
  border-color: var(--gold);
}

.factcheck-presets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 600px) {
  .factcheck-presets-grid {
    grid-template-columns: 1fr;
  }
}

.factcheck-preset-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.factcheck-preset-card:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.factcheck-preset-card.active {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--gold-bright);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

.factcheck-preset-dep {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-bright);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.factcheck-preset-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.35;
}

.factcheck-preset-preview {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Semáforo de Veracidad & Banner de Veredicto */
.factcheck-verdict-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.factcheck-verdict-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.factcheck-badge-verdict {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 6px;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.verdict-falso {
  background: rgba(231, 76, 60, 0.18);
  border: 1px solid var(--crimson-bright);
  color: var(--crimson-bright);
}

.verdict-enganoso {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

.verdict-impreciso {
  background: rgba(234, 179, 8, 0.18);
  border: 1px solid #eab308;
  color: #fde047;
}

.verdict-veridico {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid #10b981;
  color: #34d399;
}

.verdict-reposo {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-dim);
}

/* Medidor Tacométrico de Veracidad */
.factcheck-meter-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.factcheck-meter-track {
  height: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.factcheck-meter-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
}

.factcheck-meter-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* Grilla de los 4 Pilares Hacendarios */
.factcheck-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.factcheck-pillar-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.factcheck-pillar-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--gold);
}

.factcheck-pillar-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.factcheck-pillar-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
}

.factcheck-pillar-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Caja del Dictamen Pericial */
.factcheck-dictamen-box {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.factcheck-dictamen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px dashed var(--border-subtle);
  padding-bottom: 10px;
}

.factcheck-dictamen-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--gold-bright);
}

.factcheck-dictamen-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-main);
}

.factcheck-dictamen-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.factcheck-copy-btn {
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.factcheck-copy-btn:hover {
  background: var(--gold);
  color: #0c0f16;
}

/* ==========================================================================
   SUBPESTAÑA 4.1: ESTRUCTURA ORGÁNICA Y TERRITORIAL DEL PODER JUDICIAL
   ========================================================================== */
.pj-views-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.pj-view-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pj-view-pill-btn:hover {
  border-color: var(--gold);
  color: var(--text-main);
  background: rgba(212, 175, 55, 0.08);
}

.pj-view-pill-btn.active {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

/* Diagrama de Organigrama Jerárquico */
.pj-org-tree {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}

.pj-org-level {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pj-level-header {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pj-nodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.pj-node-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.pj-node-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.pj-node-card.active {
  border-color: var(--gold-bright);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
}

/* Clases para Tribunales Especializados y Auxiliares */
.pj-node-card.pj-specialized {
  border-left: 4px solid var(--cyan);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.06), rgba(0, 0, 0, 0.3));
}

.pj-node-card.pj-specialized:hover {
  border-color: var(--cyan);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25);
}

.pj-node-card.pj-auxiliar {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(0, 0, 0, 0.3));
}

.pj-node-card.pj-auxiliar:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
}

.pj-node-card.pj-reforma {
  border-left: 4px solid var(--crimson-bright);
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.08), rgba(0, 0, 0, 0.3));
}

.pj-node-card.pj-reforma:hover {
  border-color: var(--crimson-bright);
  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.25);
}

.pj-node-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.pj-node-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.pj-node-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  /* Antes: white-space:nowrap. Las insignias largas se salian de la tarjeta
     y quedaban cortadas a la mitad. Ahora se acomodan en varias lineas. */
  white-space: normal;
  line-height: 1.4;
  letter-spacing: 0.5px;
  align-self: flex-start;
  max-width: 100%;
}

.badge-gold {
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold-bright);
  border: 1px solid var(--border-gold);
}

.badge-cyan {
  background: rgba(56, 189, 248, 0.15);
  color: var(--cyan);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-crimson {
  background: rgba(231, 76, 60, 0.15);
  color: var(--crimson-bright);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.pj-node-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pj-node-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--border-subtle);
  padding-top: 6px;
  margin-top: 2px;
}

/* Área Territorial: Mapa y Partidos Judiciales */
.pj-territorial-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 980px) {
  .pj-territorial-layout {
    grid-template-columns: 1fr;
  }
}

.pj-state-picker-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pj-states-chips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.pj-state-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pj-state-chip:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: rgba(212, 175, 55, 0.1);
}

.pj-state-chip.active {
  background: var(--gold);
  color: #0c0f16;
  border-color: var(--gold-bright);
  font-weight: 800;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}

/* Panel de Detalle Territorial */
.pj-territorial-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pj-circuit-hero {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.1), rgba(0, 0, 0, 0.4));
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pj-circuit-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 800;
  color: var(--gold-bright);
}

.pj-partidos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.pj-partidos-table th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.pj-partidos-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  line-height: 1.45;
}

.pj-partidos-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
}

/* Tarjeta de Detalle Seleccionado */
.pj-interactive-detail-box {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 18px 22px;
  margin-top: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   SUBPESTAÑA 4.1: MAPA GEOGRÁFICO, CARTOGRAMA Y DRAWER DE CIRCUITOS JUDICIALES
   ========================================================================== */
.pj-map-view-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}

.pj-map-view-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  font-size: 11.5px;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pj-map-view-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  border-color: var(--border-accent);
}

.pj-map-view-btn.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(184, 134, 11, 0.12) 100%);
  border-color: var(--border-gold);
  color: var(--gold-bright);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}

.leaflet-pj-circuit-tooltip {
  background: #0b0e17 !important;
  border: 1px solid var(--border-gold) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: var(--font-sans) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.85) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.leaflet-pj-circuit-tooltip::before {
  border-top-color: var(--border-gold) !important;
}

.pj-cartogram-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 11/8;
}

.pj-cartogram-grid .state-cell {
  background: rgba(18, 22, 34, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 4px 2px;
}

.pj-cartogram-grid .state-cell:hover {
  transform: scale(1.12);
  z-index: 35;
  border-color: var(--gold-bright);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  background: rgba(30, 36, 54, 0.95);
}

.pj-cartogram-grid .state-cell.active {
  border-color: var(--cyan);
  background: rgba(56, 189, 248, 0.18);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}

.pj-cartogram-grid .state-cell .abbr {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: clamp(9px, 1.1vw, 13px);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.pj-cartogram-grid .state-cell .circuit-tag {
  font-family: var(--font-mono);
  font-size: clamp(6.5px, 0.75vw, 9.5px);
  color: var(--gold-bright);
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.pj-drawer-table-wrapper {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}

.pj-drawer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}

.pj-drawer-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-accent);
  text-align: left;
}

.pj-drawer-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  vertical-align: top;
  line-height: 1.4;
}

.pj-drawer-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* ==========================================================================
   MAPA CONCEPTUAL JERÁRQUICO INTERACTIVO: SCJN & PODER JUDICIAL FEDERAL
   ========================================================================== */
.pj-concept-map-container {
  position: relative;
  padding: 10px 0 25px;
}

.pj-concept-spine {
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-bright) 0%, rgba(56, 189, 248, 0.7) 40%, rgba(212, 175, 55, 0.8) 75%, var(--gold) 100%);
  transform: translateX(-50%);
  z-index: 1;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
  pointer-events: none;
}

.pj-concept-level-block {
  position: relative;
  z-index: 2;
  margin-bottom: 28px;
  transition: all 0.3s ease;
}

.pj-concept-level-block.hidden-by-filter {
  display: none !important;
}

.pj-level-badge-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
}

.pj-level-pill-badge {
  background: #0b0e17;
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 18px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.8), 0 0 10px rgba(212, 175, 55, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pj-concept-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  position: relative;
}

.pj-concept-card {
  background: linear-gradient(135deg, rgba(20, 24, 38, 0.96) 0%, rgba(12, 14, 22, 0.96) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.pj-concept-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 8px 25px rgba(0,0,0,0.7), 0 0 16px rgba(212, 175, 55, 0.35);
  transform: translateY(-3px);
}

.pj-concept-card.active {
  border-color: var(--gold-bright);
  background: linear-gradient(135deg, rgba(32, 38, 58, 0.98) 0%, rgba(18, 22, 34, 0.98) 100%);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.5), inset 0 0 15px rgba(212, 175, 55, 0.12);
  transform: translateY(-2px);
}

.pj-concept-card.pj-specialized {
  border-left: 4px solid var(--cyan);
}

.pj-concept-card.pj-auxiliar {
  border-left: 4px solid var(--amber);
}

.pj-concept-card.pj-reforma {
  border-left: 4px solid var(--crimson-bright);
}

.pj-concept-card-top {
  /* Titulo arriba, insignia debajo: en una rejilla de dos columnas las
     insignias largas invadian el titulo vecino. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 11px;
}

.pj-concept-card-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--gold-bright);
  line-height: 1.35;
  font-weight: 700;
}

.pj-concept-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.pj-concept-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 8px;
}

.pj-concept-card-action {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.pj-concept-card-btn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cyan);
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.pj-concept-card:hover .pj-concept-card-btn {
  background: rgba(56, 189, 248, 0.16);
  border-color: var(--cyan);
  color: #fff;
}

.pj-level-pills-bar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pj-level-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pj-level-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: var(--border-accent);
}

.pj-level-pill.active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(184, 134, 11, 0.12) 100%);
  border-color: var(--border-gold);
  color: var(--gold-bright);
  font-weight: 700;
}

/* ==========================================================================
   ACORDEÓN INLINE: DESGLOSE Y COMPETENCIAS DENTRO DE LA TARJETA CONCEPTUAL
   ========================================================================== */
.pj-concept-card.is-expanded {
  border-color: var(--gold-bright) !important;
  background: linear-gradient(135deg, rgba(26, 32, 50, 0.98) 0%, rgba(13, 16, 25, 0.98) 100%) !important;
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.45), inset 0 0 16px rgba(212, 175, 55, 0.12) !important;
}

.pj-concept-accordion-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: pjAccordionFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pjAccordionFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.pj-accordion-section {
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 12px 14px;
}

.pj-accordion-section-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.pj-accordion-section-text {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Cajas de Especialización (Especializados vs Mixtos) */
.pj-specialty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .pj-specialty-grid {
    grid-template-columns: 1fr;
  }
}

.pj-specialty-col {
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
}

.pj-specialty-col.especializado {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #cbeafe;
}

.pj-specialty-col.mixto {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #fef08a;
}

.pj-specialty-col-header {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pj-specialty-col.especializado .pj-specialty-col-header {
  color: var(--cyan);
}

.pj-specialty-col.mixto .pj-specialty-col-header {
  color: var(--gold-bright);
}

/* Lista de Artículos y Citas Legales */
.pj-legal-cite-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pj-legal-cite-list li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gold);
  line-height: 1.45;
  background: rgba(212, 175, 55, 0.04);
  border-left: 2px solid var(--gold);
  padding: 5px 9px;
  border-radius: 0 4px 4px 0;
}

.pj-cite-bullet {
  color: var(--gold-bright);
  font-weight: 700;
  margin-right: 4px;
}

/* Botones de Barra de Herramientas Jerárquica */
.pj-hierarchical-btn {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.28) 0%, rgba(184, 134, 11, 0.16) 100%);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.pj-hierarchical-btn:hover {
  background: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%);
  color: #0b0e17;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.55);
  transform: translateY(-1px);
}

.pj-toggle-all-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pj-toggle-all-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: var(--border-accent);
}

/* ==========================================================================
   MODAL: VISUALIZADOR DEL MAPA JERÁRQUICO PIRAMIDAL DEL PODER JUDICIAL
   ========================================================================== */
#pjHierarchicalModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 6, 12, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9998;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#pjHierarchicalModalOverlay.open {
  display: block;
  opacity: 1;
}

#pjHierarchicalModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 95vw;
  max-width: 1360px;
  height: 92vh;
  background: #0b0e17;
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.95), 0 0 35px rgba(212, 175, 55, 0.4);
  z-index: 9999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#pjHierarchicalModal.open {
  display: flex;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.pj-modal-header {
  padding: 16px 24px;
  background: linear-gradient(90deg, rgba(20, 24, 38, 0.98), rgba(13, 16, 26, 0.98));
  border-bottom: 1px solid var(--border-gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.pj-modal-title {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--gold-bright);
  margin: 0;
}

.pj-modal-subtitle {
  font-size: 11.5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  margin-top: 3px;
}

.pj-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: radial-gradient(circle at 50% 10%, rgba(212,175,55,0.06) 0%, transparent 60%);
}

/* Diagrama Piramidal Jerárquico */
.pj-pyramid-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  width: 100%;
}

.pj-tree-level-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.pj-tree-level-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 16px;
  border-radius: 20px;
  background: #090c14;
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.pj-tree-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.pj-tree-node {
  background: rgba(18, 22, 34, 0.94);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  min-width: 260px;
  max-width: 320px;
  flex: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  transition: all 0.2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pj-tree-node:hover {
  border-color: var(--gold-bright);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.8), 0 0 14px rgba(212, 175, 55, 0.35);
}

.pj-tree-node.node-gold {
  border-top: 3px solid var(--gold-bright);
}

.pj-tree-node.node-cyan {
  border-top: 3px solid var(--cyan);
}

.pj-tree-node.node-crimson {
  border-top: 3px solid var(--crimson-bright);
}

.pj-tree-node.node-amber {
  border-top: 3px solid var(--amber);
}

.pj-tree-node.node-emerald {
  border-top: 3px solid #10b981;
}

.pj-tree-node-title {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--gold-bright);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  line-height: 1.3;
}

.pj-tree-node-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 6px;
  align-self: flex-start;
}

.pj-tree-node-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.pj-tree-node-law {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold);
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}

.pj-tree-connector-down {
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(212, 175, 55, 0.2) 100%);
  margin: 0 auto;
}

/* ==========================================================================
   ANEXO HISTORICO: ESTRUCTURAS DEROGADAS
   Tratamiento visual de archivo para organos que ya no operan, de modo que
   se distingan de los vigentes sin necesidad de leer el texto.
   ========================================================================== */
.pj-concept-level-block.nivel-archivo {
  margin-top: 44px;
  padding: 26px 20px 20px;
  border: 1px dashed var(--border-accent);
  border-radius: 14px;
  /* Fondo opaco y z-index superior: el anexo esta fuera del flujo jerarquico,
     asi que la espina conectora del organigrama no debe atravesarlo. */
  background: var(--bg-surface);
  position: relative;
  z-index: 5;
  opacity: 0.94;
}

[data-theme="light"] .pj-concept-level-block.nivel-archivo {
  background: var(--bg-surface);
}

/* Insignia del anexo: gris, no dorada, para romper la jerarquia visual */
.pj-level-pill-badge.badge-archivo {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-accent);
  color: var(--text-secondary);
  box-shadow: none;
}

/* Aviso de vigencia al inicio del anexo */
.pj-anexo-nota {
  max-width: 900px;
  margin: 0 auto 20px;
  padding: 11px 16px;
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  background: rgba(243, 156, 18, 0.08);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.pj-anexo-nota strong {
  color: var(--amber);
}

/* Fichas archivadas: sin realce y con borde discontinuo */
.pj-concept-card.card-archivo {
  background: rgba(255, 255, 255, 0.02);
  border-style: dashed;
  border-color: var(--border-accent);
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .pj-concept-card.card-archivo {
  background: rgba(0, 0, 0, 0.015);
}

/* El titulo pierde el realce dorado del resto del organigrama */
.pj-concept-card.card-archivo .pj-concept-card-title {
  color: var(--text-secondary);
}

.pj-concept-card.card-archivo:hover {
  border-color: var(--amber);
  transform: none;
}

/* Pildora de filtro correspondiente al anexo */
.pj-level-pill.pill-archivo {
  border-style: dashed;
  color: var(--text-dim);
}

.pj-level-pill.pill-archivo.active {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(243, 156, 18, 0.12);
  box-shadow: none;
}

/* Equivalentes de archivo dentro de la piramide jerarquica */
.pj-tree-level-wrapper.nivel-archivo {
  margin-top: 10px;
  padding: 22px 18px 18px;
  border: 1px dashed var(--border-accent);
  border-radius: 14px;
  background: var(--bg-surface);
  position: relative;
  z-index: 5;
  opacity: 0.94;
}

[data-theme="light"] .pj-tree-level-wrapper.nivel-archivo {
  background: var(--bg-surface);
}

.pj-tree-level-wrapper.nivel-archivo .pj-tree-level-label {
  color: var(--text-secondary);
}

.pj-tree-node.card-archivo {
  border-style: dashed;
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .pj-tree-node.card-archivo {
  background: rgba(0, 0, 0, 0.015);
}

.pj-tree-node.card-archivo .pj-tree-node-title {
  color: var(--text-secondary);
}

/* ====================================================================
   SUBPESTANA 4.5 - SELECTOR DE PARTES Y LINEA DE TIEMPO DE LA REFORMA
   ==================================================================== */

.calculos-parte-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.calculos-parte-btn {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  font-family: inherit;
}

.calculos-parte-btn:hover {
  border-color: var(--border-gold);
  transform: translateY(-1px);
}

.calculos-parte-btn.active {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.18);
}

.calculos-parte-btn .cp-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.calculos-parte-btn.active .cp-num {
  color: var(--crimson-bright);
}

.calculos-parte-btn .cp-txt {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.calculos-parte-btn.active .cp-txt {
  color: var(--gold-bright);
}

.reforma-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.reforma-hito-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  position: relative;
  padding: 11px 12px 11px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.reforma-hito-pill:hover {
  border-color: var(--border-gold);
  border-left-color: var(--gold);
  transform: translateY(-1px);
}

.reforma-hito-pill.active {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--gold);
  border-left-color: var(--crimson-bright);
}

.reforma-hito-pill .rh-step {
  position: absolute;
  top: 8px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.7;
}

.reforma-hito-pill .rh-icono {
  font-size: 15px;
  line-height: 1;
}

.reforma-hito-pill .rh-fecha {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--crimson-bright);
}

.reforma-hito-pill .rh-titulo {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.reforma-hito-pill.active .rh-titulo {
  color: var(--text-main);
}

.reforma-hito-detalle {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .calculos-parte-btn {
    flex: 1 1 100%;
  }
}

/* Vinculacion automatica: nota al pie pegada a su palabra */
.ref-link.auto-ref {
  margin-left: 1px;
}

.glos-link.auto-glos {
  border-bottom-style: dotted;
}

/* ==========================================================================
   PASADA DE ACCESIBILIDAD, ADAPTACION MOVIL E IMPRESION
   Anadida tras la auditoria integral de la plataforma. No sustituye reglas
   previas: solo corrige defectos medidos y cubre lo que faltaba.
   ========================================================================== */

/* --- 1. Contencion horizontal -------------------------------------------
   Red de seguridad. Las causas se corrigieron en origen (.top-right y los
   cajones laterales); esto impide que un bloque nuevo vuelva a romperlo. */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

*, *::before, *::after {
  min-width: 0;
}

img, svg, video, canvas, table {
  max-width: 100%;
}

/* --- 2. Encabezado adaptable --------------------------------------------
   Debajo de 1100px el bloque derecho deja de competir por el ancho y se
   acomoda; debajo de 720px se alinea a la izquierda como el resto. */
@media (max-width: 1100px) {
  .site-header { padding: 18px 20px 14px; }
  .top-right { flex: 1 1 100%; align-items: flex-start; text-align: left; margin-left: 0; }
  .creator-row, .prov { justify-content: flex-start; }
  .creator-box { align-items: flex-start; }
  .search-command-bar { max-width: 100%; }
}

/* En telefono el encabezado ocupaba 610px: el 77% de la primera pantalla
   antes de que se vieran las pestanas. Se compacta sin quitar nada: los
   sellos de procedencia pasan a una fila deslizable y el credito de autoria
   a una sola linea. */
@media (max-width: 900px) {
  .header-top { gap: 12px; }
  .top-right { gap: 6px; }
  .creator-box { gap: 4px; width: 100%; }
  .creator-row { gap: 6px; width: 100%; }
  .creator-badge { font-size: 10px; padding: 3px 8px; }
  .creator-seal { padding: 3px 8px; }
  .creator-seal .cs-ico { font-size: 14px; }
  .creator-seal .cs-tag { display: none; }
  .creator-subtitle { display: none; }
  .prov {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding-bottom: 2px;
    gap: 10px;
  }
  .prov::-webkit-scrollbar { display: none; }
  .prov > span { flex: 0 0 auto; white-space: nowrap; }
  .search-command-bar { margin-top: 2px; }
}

@media (max-width: 720px) {
  .site-header { padding: 14px 16px 12px; }
  .brand-wrapper { flex: 1 1 100%; max-width: 100%; }
  .brand-titles h1 { font-size: 30px; }
  .eyebrow { font-size: 10px; letter-spacing: 0.08em; }
  .header-top .sub { font-size: 13px; }
  .prov { font-size: 9.5px; gap: 8px; }
  .creator-subtitle { font-size: 10px; }
  nav.tabbar { margin: 12px auto 0; border-radius: 10px; }
  .main-wrapper { padding-left: 14px; padding-right: 14px; }
  .tabintro { padding: 14px 16px; }
  .tabintro h2 { font-size: 18px; }
}

/* En telefono el mosaico del cartograma y la columna lateral del mapa
   se apilan; el grid en linea 1fr 340px no cabe. */
@media (max-width: 860px) {
  .map-workspace { grid-template-columns: 1fr !important; }
}

/* --- 3. Foco visible -----------------------------------------------------
   Antes de esta pasada no existia ninguna regla de foco: quien navega con
   teclado no podia saber donde estaba parado. */
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

nav.tabbar button:focus-visible,
.subtab-btn:focus-visible,
.lens-btn:focus-visible,
.view-btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: -2px;
}

.glos-link:focus-visible,
.ref-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}

/* --- 4. Enlace para saltar al contenido ---------------------------------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100000;
  background: var(--gold);
  color: #0a0b0f;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 0;
}

/* --- 5. Respeto a quien pide menos movimiento ----------------------------
   La plataforma tiene nueve animaciones y una cinta en marcha continua.
   Para personas con vertigo o sensibilidad vestibular eso es un obstaculo
   real, no un detalle estetico. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .telemetry-track {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap;
    white-space: normal;
  }
  .telemetry-bar {
    overflow-x: auto;
  }
}

/* --- 6. Aviso sin JavaScript --------------------------------------------- */
.noscript-aviso {
  max-width: 760px;
  margin: 40px auto;
  padding: 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-left: 4px solid var(--crimson-bright);
  border-radius: 12px;
  font-family: var(--font-body);
  color: var(--text-main);
  line-height: 1.7;
}

.noscript-aviso h2 {
  font-family: var(--font-serif);
  color: var(--gold-bright);
  font-size: 22px;
  margin-bottom: 10px;
}

/* --- 7. Contraste en tema claro ------------------------------------------
   Varias fichas llevan fondo rgba(0,0,0,0.3) escrito en linea. En tema
   oscuro se lee bien; en tema claro produce texto atenuado sobre gris.
   Se neutraliza sin tocar el HTML, que es donde vive el contenido. */
[data-theme="light"] [style*="rgba(0,0,0,0.3)"],
[data-theme="light"] [style*="rgba(0, 0, 0, 0.3)"],
[data-theme="light"] [style*="rgba(0,0,0,0.25)"],
[data-theme="light"] [style*="rgba(0,0,0,0.35)"],
[data-theme="light"] [style*="rgba(0,0,0,0.4)"] {
  background-color: rgba(120, 100, 55, 0.07) !important;
}

[data-theme="light"] [style*="var(--text-dim)"] {
  color: #6a6558 !important;
}

/* --- 8. Impresion y guardado en PDF --------------------------------------
   Una plataforma de fiscalizacion tiene que poder imprimirse: es la forma
   en que una ficha se anexa a una solicitud de transparencia o a una queja.
   Se imprime el contenido, no la interfaz. */
@media print {
  .telemetry-bar,
  nav.tabbar,
  .site-header .top-right,
  .noise-overlay,
  .audit-drawer,
  .audit-drawer-overlay,
  .search-command-bar,
  .skip-link,
  button {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #111 !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.45;
  }

  .site-header {
    position: static;
    background: none !important;
    border-bottom: 2px solid #000;
    padding: 0 0 12pt;
    backdrop-filter: none;
  }

  .brand-titles h1 { color: #000 !important; font-size: 24pt; }

  /* Se imprime la pestana visible; el resto no se arrastra al papel. */
  .tab-panel { display: none !important; }
  .tab-panel.active { display: block !important; }

  .main-wrapper { padding: 0 !important; max-width: none !important; }

  .card, .panel-stat-box, .casilla-bloque, .tabintro {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #bbb !important;
    background: #fff !important;
  }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; color: #000 !important; }

  /* Las notas al pie conservan su numero, y los enlaces del glosario
     dejan de parecer enlaces porque en papel no lo son. */
  .glos-link, .ref-link {
    color: #111 !important;
    text-decoration: none !important;
    border-bottom: none !important;
  }

  .ref-link::after { content: ""; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }

  /* Pie de pagina de procedencia en cada impresion. */
  .main-wrapper::after {
    content: "Auditavision - Fiscalizacion ciudadana del gasto publico en Mexico. Consultado el documento en linea para verificar cifras y fuentes.";
    display: block;
    margin-top: 18pt;
    padding-top: 8pt;
    border-top: 1px solid #999;
    font-size: 8.5pt;
    color: #555;
  }
}

/* ==========================================================================
   MEDIDA DE LECTURA
   Varios parrafos corrian a 204 caracteres por linea. El intervalo comodo
   para leer texto seguido esta entre 45 y 75 caracteres; pasados los 90 el
   ojo pierde el renglon al regresar a la izquierda. Se limita la medida sin
   tocar el ancho de tarjetas, tablas ni graficas.
   ========================================================================== */
.section-hero p,
.banxico-box p,
.reply-item-card p,
.com-card-panel p.sub,
.portal-title-group p,
.tab-panel .card > p,
.tab-panel .casilla-bloque > p,
.civic-hub-header p,
.sexenio-card p,
.banner-protocolo-citacion p {
  max-width: 78ch;
}

/* El parrafo de entrada de cada seccion va centrado por diseno: se conserva
   centrado, pero como bloque estrecho y no como linea de borde a borde. */
.section-hero p {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  .section-hero p,
  .banxico-box p,
  .reply-item-card p,
  .com-card-panel p.sub,
  .portal-title-group p,
  .tab-panel .card > p,
  .tab-panel .casilla-bloque > p,
  .civic-hub-header p,
  .sexenio-card p,
  .banner-protocolo-citacion p {
    max-width: none;
  }
  /* En telefono el texto centrado largo es especialmente dificil de seguir. */
  .section-hero p { text-align: left; }
}

/* ==========================================================================
   PISTA DE DESPLAZAMIENTO LATERAL
   La barra de pestanas y la fila de sellos se deslizan en pantallas
   estrechas, pero nada lo indicaba: el contenido cortado parecia un error
   de maquetacion. Un degradado en el borde derecho avisa que hay mas.
   ========================================================================== */
@media (max-width: 900px) {
  nav.tabbar,
  .prov {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }

  /* Al llegar al final del recorrido se retira el degradado. */
  nav.tabbar:not([data-scroll="mas"]),
  .prov:not([data-scroll="mas"]) {
    -webkit-mask-image: none;
    mask-image: none;
  }

  nav.tabbar[data-scroll="mas"],
  .prov[data-scroll="mas"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
  }
}

/* ==========================================================================
   PESTANA 1 - PANORAMICA DEL ERARIO
   Vista de conjunto: circuito, origenes, destinos, pisos de la hacienda.
   ========================================================================== */

.erario-bloque { margin: 0 0 34px; }

.erario-bloque-head { margin-bottom: 16px; }

.erario-bloque-head h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-bright);
  margin: 0 0 6px;
}

.erario-bloque-sub {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 78ch;
  margin: 0;
}

/* --- Los tres capitulos plegables: de donde sale, en que se va, a donde baja ---

   La subpestana abria con las dos graficas y el mapa desplegados a la vez:
   media docena de pantallas antes de que el lector supiera que habia dentro.
   Ahora cada capitulo anuncia su nombre y espera el clic. Se pliegan por
   separado -no es un acordeon-, de modo que se pueden tener los tres
   abiertos para compararlos.

   A diferencia de los pilares de la 1.4, el cuerpo no se repinta: se oculta.
   Dentro viven un mapa de Leaflet y dos simuladores con estado propio, y un
   repintado los devolveria a ceros cada vez que alguien cierra el capitulo. */
.erario-pleg-h { margin: 0; font: inherit; font-weight: inherit; }

.erario-pleg-cab {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 18px; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 12px; color: inherit; font: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.erario-pleg-cab:hover { background: var(--bg-card-hover); }
.erario-pleg-cab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.erario-pleg.abierto .erario-pleg-cab { border-color: var(--border-gold); }

.erario-pleg-n {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700;
  color: var(--gold-bright); background: var(--bg-card-alt);
  border: 1px solid var(--border-gold);
}
.erario-pleg-tx { flex: 1; min-width: 0; }
.erario-pleg-tit {
  display: block; font-family: var(--font-serif); font-size: 22px;
  font-weight: 700; color: var(--gold-bright); line-height: 1.25;
}
.erario-pleg-av {
  display: block; margin-top: 3px; font-size: 13.5px;
  line-height: 1.5; color: var(--text-secondary);
}
.erario-pleg-mas {
  flex: none; width: 1.3rem; text-align: center;
  font-family: var(--font-mono); font-size: 22px; line-height: 1;
  color: var(--text-secondary);
}
.erario-pleg-cab:hover .erario-pleg-mas,
.erario-pleg.abierto .erario-pleg-mas { color: var(--gold-bright); }

/* Sin relleno lateral a proposito: la grafica y el mapa miden lo mismo
   abiertos aqui dentro que cuando colgaban sueltos del subpanel. */
.erario-pleg-cuerpo { padding: 20px 0 0; }
.erario-pleg-cuerpo[hidden] { display: none; }
.erario-pleg-cuerpo > .erario-bloque-sub { margin-bottom: 16px; }

/* --- Las cuatro etapas --- */
.circuito-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.circuito-etapa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  padding: 16px 16px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--border-accent);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  font-family: var(--font-sans);
}

.circuito-etapa:hover { background: var(--bg-card-hover); transform: translateY(-2px); }

.circuito-etapa.active {
  border-color: var(--gold);
  border-top-color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.08);
}

.ce-num {
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--border-accent);
  line-height: 1;
}

.circuito-etapa.active .ce-num { color: var(--gold); }

.ce-ico { font-size: 22px; line-height: 1; }

.ce-tit {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
}

.ce-inst {
  font-size: 11.5px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  line-height: 1.35;
}

.circuito-detalle,
/* Antes alojaba la ficha entera y por eso pedia altura minima. Hoy la
   ficha vive en la ventana lateral y aqui solo queda la invitacion a
   abrirla: una linea que no empuja nada. */
.flujo-detalle {
  margin-top: 12px;
  padding: 11px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
}

.cd-vacio {
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
  margin: 0;
}

.cd-head, .fd-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.cd-ico, .fd-ico { font-size: 26px; line-height: 1; }
.cd-tit, .fd-tit { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--gold-bright); }
.cd-inst { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.cd-que, .fd-txt { color: var(--text-secondary); font-size: 13.5px; line-height: 1.65; margin: 0 0 12px; max-width: 78ch; }

.cd-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 12px; }
.cd-meta > div { display: flex; flex-direction: column; gap: 2px; }
.cd-lab { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-mono); }
.cd-val { font-size: 13px; color: var(--text-main); }

.cd-leyes, .fd-ley { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.cd-ley {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  background: rgba(78, 205, 196, 0.08);
  border: 1px solid rgba(78, 205, 196, 0.28);
  border-radius: 4px;
  padding: 3px 9px;
}

/* --- Cifra total --- */
/* Barra de mandos de la panorámica del erario (1.1).
   Reutiliza .evaluacion-controls-bar, que ya viste los mandos de la 2.2
   y de la 5.4; aquí sólo se le da su respiro respecto de la cuadrícula
   de cifras que gobierna. */
.erario-mandos { margin: 0 0 12px; }
.erario-mandos .evaluacion-controls-bar { margin: 0; }

/* Mientras los dígitos suben, el renglón no debe bailar. */
.ets-v[data-anim-v],
.fc-monto[data-anim-v],
.fc-pct[data-anim-v],
.fc-grupo-monto [data-anim-v] { font-variant-numeric: tabular-nums; }

.erario-total-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 12px;
}

.ets-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 15px 16px;
}

.ets-k { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 7px; }
.ets-v { font-family: var(--font-mono); font-size: 21px; font-weight: 800; line-height: 1.1; }
.ets-v.gold { color: var(--gold-bright); }
.ets-v.red { color: var(--crimson-bright); }
.ets-v.green { color: var(--emerald-bright); }
.ets-s { font-size: 11.5px; color: var(--text-secondary); margin-top: 5px; }

/* --- Barras de ingresos y egresos --- */
.flujo-chart { display: flex; flex-direction: column; gap: 3px; }

.fc-grupo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
}

.fc-grupo:first-child { margin-top: 0; }
.fc-grupo-monto { color: var(--text-dim); letter-spacing: 0.04em; }

.fc-fila {
  display: grid;
  grid-template-columns: 26px minmax(120px, 210px) 1fr auto 52px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fc-fila:hover { background: var(--bg-card); border-color: var(--border-subtle); }
.fc-fila.active { background: rgba(201, 168, 76, 0.08); border-color: var(--gold); }

.fc-ico { font-size: 15px; text-align: center; }
.fc-nom { font-size: 13px; color: var(--text-main); font-weight: 500; }

.fc-barra {
  display: block;
  height: 13px;
  background: var(--bg-surface);
  border-radius: 3px;
  overflow: hidden;
  min-width: 40px;
}

.fc-relleno {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* La transición de CSS competía con la animación por fotograma: al
   cerrar el conteo la barra seguía creciendo por su cuenta y el ancho
   final se medía contra un valor intermedio. Mismo defecto que tenían
   las torres sexenales de la 2.2. Mientras la barra la gobierne el
   motor de conteo, la transición se retira. */
.fc-relleno[data-anim-w] { transition: none; }

.fc-relleno.ing { background: linear-gradient(90deg, #1e824c, #2ecc71); }
.fc-relleno.egr { background: linear-gradient(90deg, #2980b9, #4ecdc4); }
/* Cada subpestaña con su color, para que al cambiar de una a otra se vea
   que se cambió de cuadro y no sólo de cifras. El aviso va después: si
   fuera al revés, el color de la vista ganaría por orden de hoja y la
   cifra que merece cautela se leería como una más. */
.fc-relleno.fed { background: linear-gradient(90deg, #7d6608, #d4ac0d); }
.fc-relleno.mun { background: linear-gradient(90deg, #4a235a, #9b59b6); }

.fc-relleno.alerta { background: linear-gradient(90deg, #8b1a1a, #e74c3c); }

.fc-monto { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-main); white-space: nowrap; }
.fc-pct { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); text-align: right; }

.fd-monto { font-family: var(--font-mono); font-size: 14px; color: var(--text-main); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fd-equiv { color: var(--text-dim); font-size: 12px; }

/* --- Rubros que la ley enumera y presupuesta en cero ---
   No llevan barra: una barra de cero se lee como un defecto de
   maquetación. Llevan ficha, porque la ausencia es el dato. --- */
.erario-ceros { margin-top: 14px; }

.erario-ceros-cab h4 {
  margin: 0 0 4px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--text-gold);
}

.erario-ceros-cab p { margin: 0 0 9px; font-size: 13px; line-height: 1.6; color: var(--text-dim); max-width: 78ch; }
.erario-ceros-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.ecz-item {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px dashed var(--border-subtle);
  border-radius: 6px;
  background: var(--bg-card);
}

.ecz-clave {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.ecz-nom { font-size: 13px; color: var(--text-main); }
.ecz-monto { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.ecz-que { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); max-width: 78ch; }

@media (max-width: 620px) {
  .ecz-item { grid-template-columns: auto 1fr; }
  .ecz-monto { grid-column: 2; text-align: right; }
}

/* --- Ficha de detalle del flujo: efecto jurídico, desglose y enlaces ---
   La ficha dejó de ser un párrafo con su ley al pie. Ahora responde las
   tres preguntas que se le hacen a un impuesto: qué grava, qué efecto
   jurídico produce y de dónde sale la cifra. --- */

.fd-clave {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.fd-efecto {
  margin-top: 12px;
  padding: 11px 13px;
  background: var(--bg-card-alt);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
}

.fd-efecto p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); max-width: 78ch; }

.fd-efecto-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-gold);
}

.fd-comp { margin-top: 13px; }
.fdc-lista { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.fdc-fila {
  display: grid;
  grid-template-columns: minmax(130px, 1.5fr) minmax(60px, 2fr) auto 52px;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--bg-card);
}

.fdc-nom { font-size: 12.5px; color: var(--text-main); }
.fdc-barra { height: 7px; background: var(--bg-void); border-radius: 4px; overflow: hidden; }

/* Sin transición: la anchura la gobierna el motor de conteo. */
.fdc-relleno {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #1e824c, #2ecc71);
  transition: none;
}

.fdc-monto { font-family: var(--font-mono); font-size: 12px; color: var(--text-main); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fdc-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.fdc-det { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }

/* Partidas que restan. Rayado diagonal y filo rojo, igual que en la 5.4:
   si se dibujaran lisas, una resta grande se leeria como un logro. */
.fdc-neg .fdc-relleno {
  background: repeating-linear-gradient(135deg,
    rgba(231, 76, 60, 0.85) 0 5px, rgba(139, 26, 26, 0.55) 5px 10px);
  box-shadow: inset 0 0 0 1px var(--crimson-bright);
}

.fdc-neg .fdc-monto, .fdc-neg .fdc-pct { color: var(--crimson-bright); }
.fdc-pie { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--text-dim); }

/* --- Cómo lo reparte la ley ---
   Porcentajes de la recaudación federal participable, no pesos: no se
   convierten porque convertirlos exigiría una estimación que nadie ha
   publicado. Sin barra, por lo mismo. --- */
.fdr-lista { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.fdr-fila {
  display: grid;
  grid-template-columns: minmax(150px, 1.6fr) auto;
  align-items: baseline;
  gap: 10px 14px;
  padding: 7px 10px;
  border-radius: 5px;
  background: var(--bg-card);
}

.fdr-nom { font-size: 12.5px; color: var(--text-main); }
.fdr-val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-gold);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fdr-det { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-dim); line-height: 1.55; }

/* --- Lo que falta, y por qué ---
   Un hueco declarado vale más que una cifra inventada, pero sólo si se
   declara: de ahí el borde discontinuo, que se lee como provisional. --- */
.fd-pendiente {
  padding: 11px 13px;
  background: rgba(127, 140, 141, 0.07);
  border: 1px dashed var(--border-accent);
  border-radius: 6px;
}

.fd-pendiente p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); max-width: 78ch; }

.fd-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }

.fd-enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 7px 11px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s;
}

.fd-enlace:hover { background: var(--bg-card-hover); border-color: var(--border-gold); }
.fd-enlace-glos b { color: var(--text-gold); font-weight: 600; }
.fd-enlace-n { font-family: var(--font-mono); font-size: 11px; color: var(--text-gold); }

/* ==========================================================================
   VENTANA LATERAL DE LA FICHA (1.1)

   Hereda el mecanismo de .audit-drawer —el de los argumentos particulares
   de la 5.2— con dos diferencias: va mas ancha, porque la ficha trae tabla
   de componentes y una tabla estrecha se parte en dos lineas por renglon;
   y su cuerpo lleva barra de desplazamiento visible, porque la ficha se
   lee de arriba abajo y conviene saber cuanto falta.
   ========================================================================== */
.audit-drawer.audit-drawer-ancha { max-width: 980px; }

.audit-drawer-ancha .drawer-header { padding: 20px 28px; }
.audit-drawer-ancha .fd-cab { min-width: 0; }

.audit-drawer-ancha .fd-kicker {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: var(--gold);
  margin-bottom: 3px;
}

/* .fd-tit vale 18px dentro de la caja; aqui es el titulo de la ventana. */
.audit-drawer-ancha .fd-tit {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.18;
  color: var(--gold-bright);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.audit-drawer-ancha .fd-tit .fd-ico { font-size: 25px; line-height: 1; }
.audit-drawer-ancha .fd-monto { margin-top: 7px; font-size: 15px; }

/* La cabecera de toda ventana lateral lleva un degradado oscuro fijo,
   igual en el tema claro que en el oscuro. Sus letras, por tanto, no
   pueden colgar de las variables del tema: en claro --text-main es casi
   negro y la cifra del renglon se perdia sobre el fondo oscuro. Aqui se
   fijan los tonos de esa franja, y solo de esa franja. */
.audit-drawer-ancha .drawer-header { color: #f0ede6; }
.audit-drawer-ancha .fd-kicker { color: #d7b85d; }
.audit-drawer-ancha .fd-tit { color: #f3cf65; }
.audit-drawer-ancha .fd-monto { color: #f0ede6; }
.audit-drawer-ancha .fd-equiv { color: #8e8b85; }
.audit-drawer-ancha .fd-clave { color: #a8a59e; border-color: rgba(255, 255, 255, 0.18); }
.audit-drawer-ancha .drawer-close-btn { color: #d5d2cb; }

.flujo-ficha-body {
  gap: 16px;
  scrollbar-color: var(--gold-bright) var(--bg-void);
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* El marco existe para colgar de el las dos franjas de aviso: si
   colgaran del cuerpo, viajarian con el texto en vez de quedarse en el
   borde. */
.flujo-ficha-marco {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.flujo-ficha-marco > .flujo-ficha-body { flex: 1; }

/* La barra del navegador no siempre se ve: en macOS y en el movil se
   esconde hasta que alguien la mueve, y entonces nada avisa de que la
   ficha sigue mas abajo. Estas dos franjas lo dicen, y solo aparecen
   cuando de verdad queda recorrido en esa direccion: una franja fija
   seria un aviso falso al llegar al final. */
.flujo-ficha-marco::before,
.flujo-ficha-marco::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 3;
}

.flujo-ficha-marco::before {
  top: 0;
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.34), rgba(201, 168, 76, 0));
}

.flujo-ficha-marco::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(201, 168, 76, 0.34), rgba(201, 168, 76, 0));
}

.flujo-ficha-marco.hay-arriba::before,
.flujo-ficha-marco.hay-abajo::after { opacity: 1; }

.flujo-ficha-body::-webkit-scrollbar { width: 11px; }
.flujo-ficha-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
}
.flujo-ficha-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-radius: 6px;
  border: 2px solid var(--bg-card);
}
.flujo-ficha-body::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); }

/* Los margenes propios sobran donde manda el gap del contenedor. */
.flujo-ficha-body > * { margin: 0; }
.flujo-ficha-body .fd-txt { font-size: 14px; max-width: 82ch; }
.flujo-ficha-body .fd-comp,
.flujo-ficha-body .fd-enlaces { margin-top: 0; }

@media (max-width: 620px) {
  .fdc-fila { grid-template-columns: 1fr auto 48px; }
  .fdc-barra { display: none; }
  .audit-drawer-ancha .drawer-header { padding: 16px 18px; }
  .audit-drawer-ancha .fd-tit { font-size: 19px; }
  .flujo-ficha-body { padding: 18px; }
}

/* --- Distintivo de trazabilidad del dato --- */
.est-chip {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}

.est-oficial { background: rgba(46, 204, 113, 0.12); color: var(--emerald-bright); border: 1px solid rgba(46, 204, 113, 0.35); }
.est-derivado { background: rgba(243, 156, 18, 0.12); color: var(--amber); border: 1px solid rgba(243, 156, 18, 0.35); }
.est-analisis { background: rgba(155, 89, 182, 0.12); color: #c39bd3; border: 1px solid rgba(155, 89, 182, 0.4); }
/* Ni oficial ni derivado: dato que la fuente sencillamente no publica. */
.est-pendiente { background: rgba(127, 140, 141, 0.14); color: var(--text-secondary); border: 1px dashed var(--border-accent); }
.est-contexto { background: rgba(78, 205, 196, 0.12); color: var(--cyan); border: 1px solid rgba(78, 205, 196, 0.35); }

/* --- Puntos ciegos --- */
.ciegos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.ciego-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--crimson-bright);
  border-radius: 10px;
  padding: 18px 20px;
}

.ciego-dato {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--crimson-bright);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.ciego-card h4 {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 8px;
  line-height: 1.3;
}

.ciego-card p { color: var(--text-secondary); font-size: 13px; line-height: 1.65; margin: 0; }

/* --- Fuentes de seccion --- */
.erario-fuentes {
  background: var(--bg-surface);
  border: 1px dashed var(--border-accent);
  border-radius: 10px;
  padding: 18px 22px;
  margin-top: 8px;
}

.ef-tit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.erario-fuentes ul { margin: 0 0 12px; padding-left: 20px; }
.erario-fuentes li { color: var(--text-secondary); font-size: 12.5px; line-height: 1.6; margin-bottom: 6px; max-width: 78ch; }
.ef-nota { color: var(--text-dim); font-size: 12px; line-height: 1.6; margin: 0; max-width: 78ch; }

/* --- Subpanel 1.2: los tres pisos --- */
.pisos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.piso-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--border-accent);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}

.piso-gold { border-top-color: var(--gold); }
.piso-cyan { border-top-color: var(--cyan); }
.piso-emerald { border-top-color: var(--emerald-bright); }

.piso-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pi-ico { font-size: 24px; line-height: 1; }
.piso-card h4 { font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--gold-bright); margin: 0; }

.piso-card dl { margin: 0; flex: 1; }
.piso-card dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.piso-card dd { margin: 0 0 12px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }

.piso-card footer {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--cyan);
  line-height: 1.5;
}

/* --- Gasto federalizado --- */
/* La reja .federalizado-grid / .fed-card se retiró: el gasto federalizado
   pasó a leerse con la misma gráfica de barras y la misma ficha lateral de
   la 1.1, de modo que las cuatro vistas de la pestaña 1 comparten forma. */

/* --- Fichas de facultad del municipio (1.3) ---
   Lo que el artículo 115 reconoce al municipio no lleva barra: no hay cifra
   nacional publicada, y una barra inventada valdría menos que el hueco. --- */
.mpf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.mpf-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.mpf-card:hover { background: var(--bg-card-hover); transform: translateY(-2px); }
.mpf-card.active { border-color: var(--gold-bright); border-left-color: var(--gold-bright); }

.mpf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mpf-ico { font-size: 23px; line-height: 1; }

.mpf-clave {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.mpf-nom { font-family: var(--font-serif); font-size: 16.5px; font-weight: 700; color: var(--text-main); }
.mpf-que { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }

.mpf-mas {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-gold);
  margin-top: 2px;
}

/* --- Circuito de una entidad --- */
.entidad-selector-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.entidad-selector-bar label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.entidad-selector-bar select {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-accent);
  border-radius: 7px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  min-width: 230px;
  cursor: pointer;
}

.entidad-circuito {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px 22px;
}

.ec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.ec-head h4 { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--gold-bright); margin: 0 0 3px; }
.ec-sub { font-size: 12.5px; color: var(--text-secondary); }
.ec-dep { text-align: right; }
.ec-dep-num { display: block; font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--crimson-bright); line-height: 1; font-variant-numeric: tabular-nums; }
.ec-dep-lab { font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; }

.ec-filas { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }

.ec-fila { display: grid; grid-template-columns: minmax(150px, 230px) 1fr auto; align-items: center; gap: 12px; }
.ec-nom { font-size: 13px; color: var(--text-main); display: flex; flex-direction: column; gap: 1px; }
.ec-nom em { font-style: normal; font-size: 10.5px; color: var(--text-dim); font-family: var(--font-mono); }
.ec-barra { display: block; height: 14px; background: var(--bg-surface); border-radius: 3px; overflow: hidden; min-width: 40px; }
.ec-rell { display: block; height: 100%; border-radius: 3px; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
/* Mientras la anchura la gobierne el motor de conteo, la transicion sobra:
   si no, la barra sigue creciendo por su cuenta y el ancho final se mide
   contra un valor intermedio. */
.ec-rell[data-anim-w] { transition: none; }
.ec-gold { background: linear-gradient(90deg, #9a7828, #f3cf65); }
.ec-cyan { background: linear-gradient(90deg, #2980b9, #4ecdc4); }
.ec-blue { background: linear-gradient(90deg, #1a5276, #3498db); }
.ec-green { background: linear-gradient(90deg, #1e824c, #2ecc71); }
.ec-val { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-main); white-space: nowrap; font-variant-numeric: tabular-nums; }

.ec-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
}

.ec-resumen > div { display: flex; flex-direction: column; gap: 3px; }
.ec-rk { font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-mono); }
.ec-rv { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.ec-nota { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 0; max-width: 80ch; }

/* --- Municipios: padron completo (bloque 4 de la 1.3) ---------------------
   El padron va en tabla y no en reja de tarjetas porque Oaxaca tiene 570
   municipios: en tarjetas serian veinte pantallas de desplazamiento y
   ninguna comparacion posible entre dos renglones. */

.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;
}

.mun-filtros { align-items: flex-end; gap: 14px; }
.mun-filtro { display: flex; flex-direction: column; gap: 5px; }

.entidad-selector-bar input[type="search"] {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-accent);
  border-radius: 7px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  min-width: 230px;
}

.entidad-selector-bar input[type="search"]:focus-visible,
.entidad-selector-bar select:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* --- Resumen de la entidad --- */
.mun-resumen {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 15px 18px;
  margin-bottom: 14px;
}

.mre-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 13px; }
.mre-tit { font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--text-main); }
.mre-sub { font-size: 12px; color: var(--text-dim); }
.mre-sub b { color: var(--text-secondary); }
.mre-falta { color: var(--crimson-bright); }

.mre-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 11px; }
.mre-c { display: flex; flex-direction: column; gap: 2px; }
.mre-c span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mre-c b {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.mre-dep {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.mre-dep-lab {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mre-dep-barra { display: block; height: 7px; background: var(--bg-void); border-radius: 4px; overflow: hidden; }
.mre-dep-barra > span { display: block; height: 100%; background: linear-gradient(90deg, #e67e22, #e74c3c); border-radius: 4px; }
.mre-dep-barra > span[data-anim-w] { transition: none; }
.mre-dep-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--crimson-bright);
  font-variant-numeric: tabular-nums;
}

/* --- Tabla del padron --- */
.mun-tabla-marco {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: auto;
  max-height: 680px;
  background: var(--bg-card);
  scrollbar-color: var(--gold-bright) var(--bg-void);
}

/* Ancho fijo por dos razones. La primera es de lectura: con ancho
   automatico las columnas se ensanchan mientras el contador sube, y la
   tabla entera tiembla al contabilizar. La segunda es de maquina: cada
   cifra nueva obligaria a recalcular el ancho de toda la tabla, y con
   los 570 municipios de Oaxaca eso son decimas de segundo por cuadro. */
.mun-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.mun-tabla col.c-nom { width: 25%; }
.mun-tabla col.c-num { width: 11.5%; }
.mun-tabla col.c-dep { width: 17.5%; }

.mun-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-card-alt);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: right;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-accent);
  white-space: nowrap;
}
.mun-tabla thead th.mf-c-nom { text-align: left; }
.mun-tabla thead th.mf-c-dep { text-align: left; min-width: 130px; }

/* Las filas fuera de la ventana de desplazamiento no se disponen hasta
   que asoman. Sin esto, tocar una cifra obliga a recalcular las 570 de
   Oaxaca aunque solo se vean veinticinco. */
.mun-tabla tbody tr { content-visibility: auto; contain-intrinsic-size: auto 44px; }
.mun-fila { border-bottom: 1px solid var(--border-subtle); }
.mun-fila:last-child { border-bottom: 0; }
.mun-fila[tabindex] { cursor: pointer; }
.mun-fila[tabindex]:hover { background: var(--bg-card-alt); }
.mun-fila[tabindex]:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
.mun-fila[aria-expanded="true"] { background: var(--bg-card-alt); box-shadow: inset 3px 0 0 var(--gold-bright); }

.mun-tabla th.mf-nom {
  text-align: left;
  font-weight: 600;
  color: var(--text-main);
  padding: 8px 12px;
  line-height: 1.3;
}
.mf-cve {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 400;
}

.mun-tabla td { padding: 8px 12px; }
.mf-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mf-fuerte { color: var(--text-main); font-weight: 600; }
.mf-nada { color: var(--text-dim); text-align: right; }

.mf-dep { display: flex; align-items: center; gap: 9px; min-width: 130px; }
.mf-dep-barra { flex: 1; display: block; height: 6px; background: var(--bg-void); border-radius: 3px; overflow: hidden; }
.mf-dep-barra > span { display: block; height: 100%; background: linear-gradient(90deg, #e67e22, #e74c3c); border-radius: 3px; }
.mf-dep-barra > span[data-anim-w] { transition: none; }
.mf-dep > i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--crimson-bright);
  font-variant-numeric: tabular-nums;
  min-width: 46px;
  text-align: right;
}

/* El municipio que no rindio cuenta sigue en la lista. Se marca con
   rayado y letra apagada: no es un cero, es un hueco. */
.mf-sin th.mf-nom { color: var(--text-secondary); }
.mf-sinrep {
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
  background: repeating-linear-gradient(135deg,
    rgba(127, 140, 141, 0.07) 0 6px, transparent 6px 12px);
}

.muni-sincifra { color: var(--text-dim); font-style: italic; font-weight: 400; }

/* La cifra derivada se distingue del efecto juridico: filo verde, no
   dorado, para que se vea de un golpe que es cuenta y no precepto. */
.fd-derivada { border-left-color: #2ecc71; }

.mpf-monto {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.mpf-monto i { font-size: 11.5px; font-weight: 400; color: var(--text-dim); font-family: var(--font-sans); }

.mre-aviso {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 86ch;
}
.mre-aviso b { color: var(--text-main); }

.mun-fuente-nota {
  margin: 11px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 92ch;
}
.mun-fuente-nota b { color: var(--text-secondary); }

.fd-dossier { border-left-color: var(--crimson-bright); }
.fd-proy { display: block; margin-top: 5px; font-size: 12px; color: var(--text-dim); }

@media (max-width: 720px) {
  .mun-tabla thead th:nth-child(3),
  .mun-tabla tbody td:nth-child(3),
  .mun-tabla thead th:nth-child(6),
  .mun-tabla tbody td:nth-child(6) { display: none; }
  .mun-tabla { font-size: 11.5px; }
  .entidad-selector-bar input[type="search"],
  .entidad-selector-bar select { min-width: 0; width: 100%; }
  .mun-filtro { width: 100%; }
}

/* --- Municipios --- */
.municipios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 13px;
}

.mun-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 15px 17px;
}

.mun-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 3px; }
.mun-card h5 { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--text-main); margin: 0; line-height: 1.25; }

.mun-part {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.mun-alcalde { font-size: 11.5px; color: var(--text-dim); margin-bottom: 12px; }

.mun-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.mun-cifras > div { display: flex; flex-direction: column; gap: 1px; }
.mun-cifras span { font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-mono); }
.mun-cifras b { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-main); font-weight: 600; font-variant-numeric: tabular-nums; }

.mun-dep { display: grid; grid-template-columns: 1fr; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.mun-dep-lab { font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); font-family: var(--font-mono); }
.mun-dep-barra { display: block; height: 6px; background: var(--bg-surface); border-radius: 3px; overflow: hidden; }
.mun-dep-barra > span { display: block; height: 100%; background: linear-gradient(90deg, #e67e22, #e74c3c); border-radius: 3px; }
.mun-dep-barra > span[data-anim-w] { transition: none; }
.mun-dep-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--crimson-bright); text-align: right; font-variant-numeric: tabular-nums; }

/* --- Adaptacion a pantallas estrechas --- */
@media (max-width: 860px) {
  .fc-fila { grid-template-columns: 22px 1fr auto; row-gap: 5px; }
  .fc-barra { grid-column: 1 / -1; }
  .fc-pct { display: none; }
  .ec-fila { grid-template-columns: 1fr auto; }
  .ec-barra { grid-column: 1 / -1; }
  .ec-head { flex-direction: column; }
  .ec-dep { text-align: left; }
  .erario-bloque-head h3 { font-size: 19px; }
  .erario-pleg-cab { gap: 10px; padding: 13px 14px; align-items: flex-start; }
  .erario-pleg-tit { font-size: 19px; }
  .erario-pleg-n { width: 2rem; height: 2rem; font-size: 0.85rem; }
  .erario-pleg-mas { align-self: center; }
}


/* ==========================================================================
   PESTANA 4.6 - LA FUNCION JURISDICCIONAL
   Control constitucional, ruta procesal del amparo y jurisprudencia.
   ========================================================================== */

.fj-bloque { margin: 34px 0 0; }
.fj-bloque:first-child { margin-top: 0; }

.fj-bloque-head {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle);
}
.fj-bloque-head h3 {
  font-family: var(--font-serif); font-size: 21px; line-height: 1.25;
  color: var(--gold-bright); margin: 0;
}
.fj-bloque-head .fj-kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-dim);
}
.fj-bloque-sub {
  font-size: 13.5px; color: var(--text-secondary);
  line-height: 1.65; max-width: 78ch; margin-bottom: 18px;
}

/* --- Instrumentos de control constitucional ------------------------------ */
.fj-instrumentos-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.fj-inst-card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-accent);
  border-radius: 8px; padding: 16px 16px 14px;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  font: inherit; color: inherit; width: 100%;
}
.fj-inst-card:hover { transform: translateY(-3px); background: var(--bg-card-hover); }
.fj-inst-card.active { border-color: var(--gold); background: var(--bg-card-alt); }
.fj-inst-card[data-color="gold"] { border-left-color: var(--gold); }
.fj-inst-card[data-color="cyan"] { border-left-color: var(--cyan); }
.fj-inst-card[data-color="crimson"] { border-left-color: var(--crimson-bright); }
.fj-inst-card[data-color="amber"] { border-left-color: var(--amber); }
.fj-inst-ico { font-size: 22px; line-height: 1; display: block; margin-bottom: 8px; }
.fj-inst-nom {
  display: block;
  font-family: var(--font-serif); font-size: 16.5px; line-height: 1.3;
  color: var(--text-main); margin-bottom: 4px;
}
.fj-inst-lema {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 9px;
}
.fj-inst-fund {
  display: block;
  font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
  font-family: var(--font-mono);
}
.fj-inst-card .fj-inst-mas {
  position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 15px; color: var(--text-dim);
  transition: transform 0.25s ease, color 0.25s ease;
}
.fj-inst-card.active .fj-inst-mas { transform: rotate(45deg); color: var(--gold-bright); }

.fj-inst-detalle {
  margin-top: 16px; background: var(--bg-card-alt);
  border: 1px solid var(--border-gold); border-radius: 8px; padding: 20px;
  animation: fjFadeUp 0.35s ease both;
}
@keyframes fjFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fj-idet-tit {
  font-family: var(--font-serif); font-size: 19px; color: var(--gold-bright);
  margin-bottom: 4px;
}
.fj-idet-fund {
  font-family: var(--font-mono); font-size: 11px; color: var(--cyan);
  margin-bottom: 14px; letter-spacing: 0.4px;
}
.fj-idet-filas { display: grid; gap: 11px; }
.fj-idet-fila {
  display: grid; grid-template-columns: minmax(115px, 150px) 1fr;
  gap: 12px; align-items: start;
  padding-bottom: 10px; border-bottom: 1px dashed var(--border-subtle);
}
.fj-idet-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.fj-idet-k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-dim); padding-top: 2px;
}
.fj-idet-v { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.fj-idet-dato {
  margin-top: 14px; padding: 11px 13px; border-radius: 6px;
  background: rgba(201, 168, 76, 0.07); border-left: 3px solid var(--gold);
  font-size: 13px; color: var(--text-main); line-height: 1.6;
}

/* --- Conmutador de ruta (indirecto / directo) ---------------------------- */
.fj-ruta-switch {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.fj-ruta-btn {
  flex: 1 1 220px; min-width: 0; cursor: pointer; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 12px 15px; font: inherit; color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fj-ruta-btn:hover { background: var(--bg-card-hover); }
.fj-ruta-btn.active { border-color: var(--gold); background: var(--bg-card-alt); }
.fj-ruta-btn .fj-rb-tit {
  font-family: var(--font-serif); font-size: 15.5px; color: var(--text-main);
  display: block; margin-bottom: 2px;
}
.fj-ruta-btn.active .fj-rb-tit { color: var(--gold-bright); }
.fj-ruta-btn .fj-rb-sub {
  display: block;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* --- Barra de control de la linea de tiempo ------------------------------ */
.fj-tl-controles {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.fj-tl-play {
  cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #c9a84c, #9a7828);
  color: #100d05; border: 1px solid var(--gold); border-radius: 6px;
  padding: 9px 16px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  transition: filter 0.2s ease;
}
.fj-tl-play:hover { filter: brightness(1.12); }
.fj-tl-play.playing { background: var(--bg-card-alt); color: var(--gold-bright); }
.fj-tl-estado {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.4px; flex: 1 1 200px; min-width: 0;
}
.fj-tl-barra {
  height: 4px; border-radius: 3px; background: var(--border-subtle);
  overflow: hidden; margin-bottom: 16px;
}
.fj-tl-barra span {
  display: block; height: 100%; width: 0;
  background: var(--gold-gradient);
  transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Rail de etapas ------------------------------------------------------ */
.fj-rail {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 18px;
}
.fj-nodo {
  position: relative; cursor: pointer; text-align: left; font: inherit;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 12px 12px 11px; color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.fj-nodo:hover { transform: translateY(-2px); background: var(--bg-card-hover); }
.fj-nodo.visitado { border-color: rgba(201, 168, 76, 0.4); }
.fj-nodo.active {
  border-color: var(--gold); background: var(--bg-card-alt);
  box-shadow: 0 0 0 1px var(--gold-glow), 0 6px 18px rgba(0, 0, 0, 0.28);
}
.fj-nodo-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.fj-nodo-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--border-subtle); color: var(--text-dim);
  transition: background 0.25s ease, color 0.25s ease;
}
.fj-nodo.visitado .fj-nodo-num { background: rgba(201, 168, 76, 0.22); color: var(--gold-bright); }
.fj-nodo.active .fj-nodo-num { background: var(--gold); color: #100d05; }
.fj-nodo-ico { font-size: 15px; line-height: 1; }
.fj-nodo-tit {
  display: block;
  font-size: 13px; line-height: 1.35; color: var(--text-main);
  font-family: var(--font-sans); font-weight: 600;
}
.fj-nodo.active .fj-nodo-tit { color: var(--gold-bright); }

/* --- Detalle de etapa ---------------------------------------------------- */
.fj-etapa {
  background: var(--bg-card-alt); border: 1px solid var(--border-gold);
  border-radius: 10px; padding: 22px;
  animation: fjFadeUp 0.35s ease both;
}
.fj-etapa-head {
  display: flex; gap: 14px; align-items: flex-start;
  flex-wrap: wrap; margin-bottom: 14px;
}
.fj-etapa-sello {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px;
  display: grid; place-items: center; font-size: 22px;
  background: rgba(201, 168, 76, 0.1); border: 1px solid var(--border-gold);
}
.fj-etapa-htxt { flex: 1 1 240px; min-width: 0; }
.fj-etapa-paso {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gold);
}
.fj-etapa-tit {
  font-family: var(--font-serif); font-size: 22px; line-height: 1.25;
  color: var(--gold-bright); margin: 1px 0 3px;
}
.fj-etapa-sub { font-size: 13.5px; color: var(--text-secondary); font-style: italic; }
.fj-etapa-meta { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 15px; }
.fj-em {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 9px 11px;
}
.fj-em-k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 3px;
}
.fj-em-v { display: block; font-size: 12.5px; color: var(--text-main); line-height: 1.45; }
.fj-em-v.fj-em-plazo { color: var(--cyan); font-family: var(--font-mono); font-size: 12px; }
.fj-etapa-texto {
  font-size: 14.5px; line-height: 1.75; color: var(--text-secondary);
  max-width: 78ch; margin-bottom: 16px;
}
.fj-claves-tit {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 9px;
}
.fj-claves { list-style: none; display: grid; gap: 7px; }
.fj-claves li, .erario-fuentes li,
.fj-esc-cuando, .fj-esc-filtro, .fj-idet-v, .fj-idet-dato,
.fj-det-txt, .fj-ju-txt, .fj-ju-nota, .fj-rec-txt, .ef-nota { max-width: 78ch; }
@media (max-width: 860px) {
  .fj-claves li, .erario-fuentes li, .fj-esc-cuando, .fj-esc-filtro,
  .fj-idet-v, .fj-idet-dato, .fj-det-txt, .fj-ju-txt, .fj-ju-nota,
  .fj-rec-txt, .ef-nota { max-width: none; }
}
.fj-claves li {
  position: relative; padding-left: 20px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}
.fj-claves li::before {
  content: '\25B8'; position: absolute; left: 4px; top: 0;
  color: var(--gold); font-size: 12px;
}
.fj-etapa-nav { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.fj-nav-btn {
  cursor: pointer; font: inherit; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase;
  background: var(--bg-card); border: 1px solid var(--border-accent);
  color: var(--text-secondary); border-radius: 6px; padding: 8px 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fj-nav-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-bright); }
.fj-nav-btn:disabled { opacity: 0.35; cursor: default; }

/* --- Tabla de recursos --------------------------------------------------- */
.fj-recursos-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.fj-rec-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--border-accent);
  border-radius: 8px; padding: 16px;
}
.fj-rec-card[data-color="gold"] { border-top-color: var(--gold); }
.fj-rec-card[data-color="cyan"] { border-top-color: var(--cyan); }
.fj-rec-card[data-color="amber"] { border-top-color: var(--amber); }
.fj-rec-card[data-color="crimson"] { border-top-color: var(--crimson-bright); }
.fj-rec-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 4px;
}
.fj-rec-nom { font-family: var(--font-serif); font-size: 18px; color: var(--text-main); }
.fj-rec-plazo {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--cyan); white-space: nowrap;
}
.fj-rec-fund {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim);
  margin-bottom: 10px; letter-spacing: 0.4px;
}
.fj-rec-lab {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 3px;
}
.fj-rec-txt { font-size: 12.8px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 10px; }
.fj-rec-txt:last-child { margin-bottom: 0; }

/* --- Escalera hacia la Suprema Corte ------------------------------------- */
.fj-escalera { display: grid; gap: 10px; }
.fj-esc-fila {
  display: grid; grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px; align-items: start;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 15px 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.fj-esc-fila:hover { border-color: var(--border-gold); background: var(--bg-card-hover); }
.fj-esc-ico {
  width: 42px; height: 42px; border-radius: 9px; display: grid; place-items: center;
  font-size: 19px; background: rgba(78, 205, 196, 0.08);
  border: 1px solid rgba(78, 205, 196, 0.25);
}
.fj-esc-via {
  font-family: var(--font-serif); font-size: 17px; color: var(--gold-bright);
  margin-bottom: 5px;
}
.fj-esc-cuando { font-size: 13.2px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 8px; }
.fj-esc-filtro {
  font-size: 12.5px; line-height: 1.6; color: var(--text-main);
  padding: 8px 11px; border-radius: 5px;
  background: rgba(78, 205, 196, 0.06); border-left: 2px solid var(--cyan);
  margin-bottom: 8px;
}
.fj-esc-fund {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim);
  letter-spacing: 0.4px;
}

/* --- Jurisprudencia ------------------------------------------------------ */
.fj-juris-grid {
  display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}
.fj-juris-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 9px; padding: 18px;
  display: flex; flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.fj-juris-card:hover { transform: translateY(-3px); border-color: var(--border-gold); }
.fj-ju-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fj-ju-ico { font-size: 20px; line-height: 1; }
.fj-ju-via { font-family: var(--font-serif); font-size: 17.5px; color: var(--gold-bright); line-height: 1.25; }
.fj-ju-peso {
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.8px; text-transform: uppercase;
  background: rgba(201, 168, 76, 0.1); border: 1px solid var(--border-gold);
  color: var(--gold-bright); border-radius: 4px; padding: 4px 9px; margin-bottom: 11px;
  align-self: flex-start;
}
.fj-ju-txt { font-size: 13.2px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 12px; }
.fj-ju-filas { display: grid; gap: 7px; margin-bottom: 12px; }
.fj-ju-fila {
  display: grid; grid-template-columns: minmax(78px, 92px) 1fr; gap: 10px;
  font-size: 12.3px; line-height: 1.5;
}
.fj-ju-k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-dim); padding-top: 2px;
}
.fj-ju-v { display: block; color: var(--text-main); }
.fj-ju-nota {
  margin-top: auto; padding: 10px 12px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.18); border-left: 2px solid var(--amber);
  font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); font-style: italic;
}
.fj-ju-fund {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  margin-top: 10px; letter-spacing: 0.3px;
}

/* --- Deterioro: puntos ciegos -------------------------------------------- */
.fj-deterioro-grid {
  display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}
.fj-det-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--crimson-bright); border-radius: 8px;
  padding: 17px; display: flex; flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.fj-det-card:hover { transform: translateY(-3px); }
.fj-det-card[data-estado="analisis"] { border-left-color: var(--amber); }
.fj-det-card[data-estado="derivado"] { border-left-color: var(--cyan); }
.fj-det-cifras { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.fj-det-cifra {
  font-family: var(--font-mono); font-size: 25px; font-weight: 700;
  color: var(--crimson-bright); line-height: 1;
}
.fj-det-card[data-estado="analisis"] .fj-det-cifra { color: var(--amber); font-size: 18px; }
.fj-det-card[data-estado="derivado"] .fj-det-cifra { color: var(--cyan); }
.fj-det-antes {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim);
}
.fj-det-antes.tachado {
  text-decoration: line-through; text-decoration-color: rgba(231, 76, 60, 0.55);
}
.fj-det-tit {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.3;
  color: var(--text-main); margin-bottom: 9px;
}
.fj-det-txt { font-size: 13.2px; line-height: 1.68; color: var(--text-secondary); margin-bottom: 12px; }
.fj-det-pie {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--border-subtle);
}
.fj-det-fund { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); flex: 1 1 140px; min-width: 0; }

/* --- Reflujo movil -------------------------------------------------------- */
@media (max-width: 860px) {
  .fj-bloque-head h3 { font-size: 19px; }
  .fj-idet-fila { grid-template-columns: 1fr; gap: 3px; }
  .fj-ju-fila { grid-template-columns: 1fr; gap: 1px; }
  .fj-esc-fila { grid-template-columns: 1fr; gap: 10px; }
  .fj-etapa { padding: 17px; }
  .fj-etapa-tit { font-size: 19px; }
  .fj-rail { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
}
@media (max-width: 520px) {
  .fj-rail { grid-template-columns: 1fr 1fr; }
  .fj-det-cifra { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .fj-inst-detalle, .fj-etapa { animation: none; }
  .fj-inst-card:hover, .fj-nodo:hover, .fj-juris-card:hover, .fj-det-card:hover { transform: none; }
  .fj-tl-barra span { transition: none; }
}


/* ==========================================================================
   PESTANA 4.1 - CAPA VISUAL DE ORIENTACION
   Cifras de entrada, contraste antes/despues de la reforma, selector de
   vistas en tarjetas y escalera jerarquica navegable.
   ========================================================================== */

.pjo-wrap { margin-bottom: 26px; }

/* --- Cifras de un vistazo ------------------------------------------------ */
.pjo-kpis {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.pjo-kpi {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--gold); border-radius: 9px;
  padding: 14px 13px 12px; text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.pjo-kpi:hover { transform: translateY(-3px); border-color: var(--border-gold); }
.pjo-kpi[data-tono="cyan"] { border-top-color: var(--cyan); }
.pjo-kpi[data-tono="crimson"] { border-top-color: var(--crimson-bright); }
.pjo-kpi[data-tono="emerald"] { border-top-color: var(--emerald-bright); }
.pjo-kpi-ico { font-size: 20px; line-height: 1; display: block; margin-bottom: 6px; }
.pjo-kpi-num {
  display: block; font-family: var(--font-mono); font-weight: 700;
  font-size: 26px; line-height: 1.05; color: var(--gold-bright);
  letter-spacing: -0.5px;
}
.pjo-kpi[data-tono="cyan"] .pjo-kpi-num { color: var(--cyan); }
.pjo-kpi[data-tono="crimson"] .pjo-kpi-num { color: var(--crimson-bright); }
.pjo-kpi[data-tono="emerald"] .pjo-kpi-num { color: var(--emerald-bright); }
.pjo-kpi-lab {
  display: block; font-size: 12px; color: var(--text-main);
  line-height: 1.35; margin-top: 5px; font-weight: 600;
}
.pjo-kpi-sub {
  display: block; font-family: var(--font-mono); font-size: 9.5px;
  color: var(--text-dim); line-height: 1.4; margin-top: 4px;
}

/* --- Antes / despues de la reforma --------------------------------------- */
.pjo-cambio {
  background: var(--bg-card-alt); border: 1px solid var(--border-gold);
  border-radius: 10px; padding: 18px 20px; margin-bottom: 18px;
}
.pjo-cambio-tit {
  font-family: var(--font-serif); font-size: 19px; color: var(--gold-bright);
  line-height: 1.3; margin-bottom: 4px;
}
.pjo-cambio-sub {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6;
  max-width: 78ch; margin-bottom: 16px;
}
.pjo-cambio-cols {
  display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: 1fr 44px 1fr;
}
.pjo-col {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 14px 15px;
}
.pjo-col[data-lado="antes"] { border-left: 3px solid var(--text-dim); }
.pjo-col[data-lado="hoy"] { border-left: 3px solid var(--emerald-bright); }
.pjo-col-tit {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; margin-bottom: 3px; color: var(--text-dim);
}
.pjo-col[data-lado="hoy"] .pjo-col-tit { color: var(--emerald-bright); }
.pjo-col-fecha {
  font-size: 11.5px; color: var(--text-dim); font-style: italic; margin-bottom: 11px;
}
.pjo-col ul { list-style: none; display: grid; gap: 8px; }
.pjo-col li {
  position: relative; padding-left: 19px;
  font-size: 12.8px; line-height: 1.55; color: var(--text-secondary);
}
.pjo-col[data-lado="antes"] li::before {
  content: '\2715'; position: absolute; left: 2px; top: 1px;
  color: var(--text-dim); font-size: 10px;
}
.pjo-col[data-lado="hoy"] li::before {
  content: '\2713'; position: absolute; left: 2px; top: 0;
  color: var(--emerald-bright); font-size: 11px; font-weight: 700;
}
.pjo-col li b { color: var(--text-main); font-weight: 600; }
.pjo-flecha {
  display: grid; place-items: center;
  font-size: 22px; color: var(--gold); line-height: 1;
}
.pjo-cambio-pie {
  margin-top: 14px; padding: 11px 13px; border-radius: 6px;
  background: rgba(231, 76, 60, 0.07); border-left: 3px solid var(--crimson-bright);
  font-size: 12.8px; line-height: 1.6; color: var(--text-main); max-width: 78ch;
}

/* --- Selector de vistas en tarjetas -------------------------------------- */
.pjo-modos {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pjo-modo {
  cursor: pointer; font: inherit; color: inherit; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 16px; position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.pjo-modo:hover { transform: translateY(-3px); background: var(--bg-card-hover); }
.pjo-modo.active {
  border-color: var(--gold); background: var(--bg-card-alt);
  box-shadow: 0 0 0 1px var(--gold-glow), 0 8px 22px rgba(0, 0, 0, 0.3);
}
.pjo-modo-num {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--font-mono); font-size: 30px; font-weight: 700;
  color: var(--border-accent); line-height: 1;
}
.pjo-modo.active .pjo-modo-num { color: rgba(201, 168, 76, 0.38); }
.pjo-modo-ico { font-size: 25px; line-height: 1; display: block; margin-bottom: 9px; }
.pjo-modo-tit {
  display: block; font-family: var(--font-serif); font-size: 16.5px;
  line-height: 1.3; color: var(--text-main); margin-bottom: 5px; padding-right: 34px;
}
.pjo-modo.active .pjo-modo-tit { color: var(--gold-bright); }
.pjo-modo-txt {
  display: block; font-size: 12.5px; line-height: 1.55;
  color: var(--text-secondary); margin-bottom: 9px;
}
.pjo-modo-pie {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.7px; text-transform: uppercase; color: var(--text-dim);
}
.pjo-modo.active .pjo-modo-pie { color: var(--gold); }

/* --- Escalera jerarquica navegable --------------------------------------- */
.pj-escalera-wrap {
  background: rgba(255, 255, 255, 0.015); border: 1px solid var(--border-subtle);
  border-radius: 9px; padding: 15px 17px; margin-bottom: 20px;
  position: relative; z-index: 3;
}
.pj-escalera-tit {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold-bright); margin-bottom: 3px;
}
.pj-escalera-sub {
  font-size: 12.3px; color: var(--text-secondary); line-height: 1.55;
  margin-bottom: 13px; max-width: 78ch;
}
.pj-escalera { display: grid; gap: 6px; }
.pj-peldano {
  cursor: pointer; font: inherit; color: inherit; text-align: left;
  width: var(--ancho, 100%); min-width: 0;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 11px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gold); border-radius: 7px;
  padding: 10px 13px;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.pj-peldano:hover { background: var(--bg-card-hover); border-color: var(--gold); transform: translateX(3px); }
.pj-peldano[data-anexo="si"] { border-left-color: var(--amber); opacity: 0.85; }
.pj-peldano-n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  background: rgba(201, 168, 76, 0.16); color: var(--gold-bright);
}
.pj-peldano[data-anexo="si"] .pj-peldano-n { background: rgba(243, 156, 18, 0.16); color: var(--amber); }
.pj-peldano-tit {
  font-size: 13px; line-height: 1.4; color: var(--text-main);
  font-family: var(--font-sans); font-weight: 600;
}
.pj-peldano-cta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.6px;
  color: var(--text-dim); white-space: nowrap;
}

/* --- Tarjeta de organo: jerarquia visual mas clara ----------------------- */
.pj-concept-card-title {
  display: flex; align-items: flex-start; gap: 9px;
}
.pj-concept-card-title > span:first-child {
  flex: 0 0 auto; width: 31px; height: 31px; border-radius: 8px;
  display: grid; place-items: center; font-size: 16px;
  background: rgba(201, 168, 76, 0.1); border: 1px solid var(--border-gold);
}
.pj-concept-card-meta {
  display: grid !important; gap: 7px !important;
  font-family: var(--font-sans) !important; font-size: 11.8px !important;
  color: var(--text-secondary) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding-top: 10px !important;
}
.pj-concept-card-meta > div {
  display: grid; grid-template-columns: 17px minmax(0, 1fr);
  gap: 8px; align-items: start; line-height: 1.55;
}
.pj-concept-card-meta strong {
  color: var(--text-dim); font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
  display: block; margin-bottom: 1px; font-weight: 700;
}

@media (max-width: 860px) {
  .pjo-cambio-cols { grid-template-columns: 1fr; }
  .pjo-flecha { transform: rotate(90deg); font-size: 19px; }
  .pj-peldano { width: 100% !important; }
  .pjo-kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .pjo-kpi-num { font-size: 22px; }
  .pjo-cambio-sub, .pjo-cambio-pie, .pj-escalera-sub { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pjo-kpi:hover, .pjo-modo:hover, .pj-peldano:hover { transform: none; }
}

/* Destello al saltar a un nivel desde la escalera jerarquica */
.pj-concept-level-block.pj-nivel-destacado {
  animation: pjDestello 1.4s ease-out 1;
  border-radius: 10px;
}
@keyframes pjDestello {
  0%   { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
  18%  { box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pj-concept-level-block.pj-nivel-destacado { animation: none; }
}

/* Medida de lectura en las fichas del organigrama */
.pj-concept-card-desc, .pj-concept-card-meta > div { max-width: 78ch; }
@media (max-width: 860px) {
  .pj-concept-card-desc, .pj-concept-card-meta > div { max-width: none; }
}

/* ==========================================================================
   PESTANA 4.2 - FICHAS DEL PLENO DE LA SUPREMA CORTE
   Una tarjeta cerrada por integrante. La tabla comparativa se conserva
   como vista alterna: la misma informacion, ordenada de otra forma.
   ========================================================================== */

.pleno-modo-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.pleno-modo-btn {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s ease;
}

.pleno-modo-btn:hover {
  border-color: var(--border-gold);
  color: var(--text-main);
}

.pleno-modo-btn.active {
  background: var(--gold-gradient);
  border-color: var(--gold-bright);
  color: #0d0f17;
  font-weight: 700;
  box-shadow: 0 4px 14px var(--gold-glow);
}

.min-grupo { margin: 0 0 26px; }

.min-grupo-tit {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--gold-bright);
  margin-bottom: 3px;
}

.min-grupo-pie {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 78ch;
  margin-bottom: 14px;
}

.min-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.min-ficha {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.min-ficha:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.min-ficha[data-rol="pres"] {
  border-left-color: var(--gold-bright);
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.07) 0%, var(--bg-card) 62%);
}

.min-ficha[data-estado="historico"] { border-left-color: rgba(231, 76, 60, 0.55); }


/* La presidencia va sola en su grupo: si conserva el ancho de una columna
   deja media pantalla vacia. Ocupa el renglon completo y reparte su
   contenido en dos columnas: identidad y texto a la izquierda, cifras a
   la derecha. */
.min-ficha[data-rol="pres"] { grid-column: 1 / -1; }

@media (min-width: 980px) {
  .min-ficha[data-rol="pres"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    grid-template-areas:
      "cab    datos"
      "badge  datos"
      "txt    datos"
      "salida datos"
      "pie    pie";
    column-gap: 26px;
    row-gap: 9px;
    align-items: start;
  }

  .min-ficha[data-rol="pres"] .min-ficha-top { grid-area: cab; }
  .min-ficha[data-rol="pres"] .min-badge    { grid-area: badge; justify-self: start; }
  .min-ficha[data-rol="pres"] .min-esp      { grid-area: txt; }
  .min-ficha[data-rol="pres"] .min-salida   { grid-area: salida; }
  .min-ficha[data-rol="pres"] .min-datos    { grid-area: datos; margin-top: 0; }
  .min-ficha[data-rol="pres"] .min-ficha-pie { grid-area: pie; }

  .min-ficha[data-rol="pres"] .min-avatar {
    width: 52px;
    height: 52px;
    font-size: 17px;
  }

  .min-ficha[data-rol="pres"] .min-nom { font-size: 19px; }
}

.min-ficha-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.min-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.13);
  border: 1px solid var(--border-gold);
}

.min-ficha[data-rol="pres"] .min-avatar {
  background: var(--gold-gradient);
  color: #0d0f17;
}

.min-ident {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.min-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--text-dim);
}

.min-nom {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
}

.min-cargo {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.min-badge {
  align-self: flex-start;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 3px 9px;
  border-radius: 4px;
  white-space: normal;
}

.min-badge[data-tipo="pres"]      { color: #0d0f17; background: var(--gold); }
.min-badge[data-tipo="electo"]    { color: #2ecc71; background: rgba(46, 204, 113, 0.14); border: 1px solid rgba(46, 204, 113, 0.38); }
.min-badge[data-tipo="renuncia"]  { color: #f39c12; background: rgba(243, 156, 18, 0.12); border: 1px solid rgba(243, 156, 18, 0.38); }
.min-badge[data-tipo="concluido"] { color: var(--text-dim); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-subtle); }
.min-badge[data-tipo="sigue"]     { color: var(--cyan); background: rgba(0, 180, 216, 0.12); border: 1px solid rgba(0, 180, 216, 0.35); }

.min-esp,
.min-salida {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 78ch;
  margin: 0;
}

.min-esp strong,
.min-salida strong { color: var(--text-main); }

.min-datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 2px;
}

.min-dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 10px;
}

.min-dato-lab {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.35;
}

.min-dato-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);
}

.min-dato[data-tono="ok"] .min-dato-val     { color: var(--emerald-bright); }
.min-dato[data-tono="alerta"] .min-dato-val { color: var(--crimson-bright); }

.min-dato-pie {
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--text-dim);
}

.min-ficha-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.min-chip {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
}

.min-chip[data-tono="ok"]     { color: #2ecc71; background: rgba(46, 204, 113, 0.14); border: 1px solid rgba(46, 204, 113, 0.38); }
.min-chip[data-tono="alerta"] { color: #e74c3c; background: rgba(231, 76, 60, 0.12); border: 1px solid rgba(231, 76, 60, 0.38); }

.min-ver {
  appearance: none;
  border: 1px solid var(--border-gold);
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.min-ver:hover {
  background: rgba(201, 168, 76, 0.22);
  color: var(--text-main);
}

.pleno-fuentes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 12px;
}

.pleno-fuentes-nota {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 78ch;
  margin: 12px 0 0;
}

.pleno-fuentes-nota strong { color: var(--gold-bright); }

@media (max-width: 720px) {
  .min-fichas { grid-template-columns: 1fr; }
  .min-datos { grid-template-columns: 1fr 1fr; }
  .min-esp,
  .min-salida,
  .min-grupo-pie,
  .pleno-fuentes-nota { max-width: none; }
}

@media (max-width: 420px) {
  .min-datos { grid-template-columns: 1fr; }
  .min-nom { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .min-ficha { transition: none; }
  .min-ficha:hover { transform: none; }
}

/* ==========================================================================
   PESTANA 9 - COMUNIDAD, CONTRALORIA SOCIAL Y AGORA
   Tres funciones que antes se mezclaban. La capa de orientacion las separa
   y dice a donde va a parar lo que cada persona escribe.
   ========================================================================== */

.com-rutas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.com-ruta {
  appearance: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.com-ruta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

.com-ruta[data-tono="gold"]    { border-top-color: var(--gold-bright); }
.com-ruta[data-tono="emerald"] { border-top-color: #2ecc71; }
.com-ruta[data-tono="cyan"]    { border-top-color: var(--cyan); }

.com-ruta[data-tono="gold"]:hover    { border-color: var(--gold-bright); }
.com-ruta[data-tono="emerald"]:hover { border-color: rgba(46, 204, 113, 0.6); }
.com-ruta[data-tono="cyan"]:hover    { border-color: rgba(0, 180, 216, 0.6); }

.com-ruta-num {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
}

.com-ruta-ico { font-size: 26px; line-height: 1; }

.com-ruta-tit {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-bright);
  line-height: 1.25;
}

.com-ruta-txt {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.com-ruta-efecto {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-main);
  margin-top: 2px;
}

.com-ruta-aviso {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 4px;
}

.com-ruta[data-tono="gold"] .com-ruta-aviso    { color: var(--gold-bright); background: rgba(201, 168, 76, 0.13); border: 1px solid var(--border-gold); }
.com-ruta[data-tono="emerald"] .com-ruta-aviso { color: #2ecc71; background: rgba(46, 204, 113, 0.13); border: 1px solid rgba(46, 204, 113, 0.38); }
.com-ruta[data-tono="cyan"] .com-ruta-aviso    { color: var(--cyan); background: rgba(0, 180, 216, 0.13); border: 1px solid rgba(0, 180, 216, 0.35); }

.com-destino {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 30px;
}

.com-destino-tit {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

.com-destino-sub {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 78ch;
  margin: 0 0 16px;
}

.com-destino-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.com-destino-col {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: 9px;
  padding: 13px 15px;
}

.com-destino-col[data-tono="gold"]    { border-left-color: var(--gold-bright); }
.com-destino-col[data-tono="emerald"] { border-left-color: #2ecc71; }
.com-destino-col[data-tono="cyan"]    { border-left-color: var(--cyan); }

.com-destino-k {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}

.com-destino-col p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.com-destino-pie {
  margin-top: 14px;
  padding: 12px 15px;
  background: rgba(231, 76, 60, 0.06);
  border-left: 3px solid var(--crimson-bright);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 78ch;
}

.com-destino-pie strong { color: var(--crimson-bright); }

/* --- Bloque 1: guia de lo que vuelve util un reporte --------------------- */

.com-util {
  background: rgba(201, 168, 76, 0.05);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.com-util-tit {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 9px;
}

.com-util-lista {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}

.com-util-lista li {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 78ch;
}

.com-util-lista strong { color: var(--text-main); }

.com-obs-wrap {
  margin-top: 26px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 18px;
}

.com-obs-h4 {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text-main);
  margin-bottom: 12px;
}

.com-vacio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px dashed var(--border-gold);
  border-radius: 9px;
}

.com-vacio span { font-size: 22px; line-height: 1; }

.com-vacio p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 78ch;
}

.com-obs {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.com-obs-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.com-obs-autor {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--gold-bright);
}

.com-obs-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
}

.com-obs-tipo { color: var(--cyan); }

.com-obs-txt {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 10px;
  max-width: 78ch;
  overflow-wrap: anywhere;
}

.com-obs-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

.com-obs-btn {
  appearance: none;
  border: 1px solid var(--border-gold);
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.com-obs-btn:hover { background: rgba(201, 168, 76, 0.22); color: var(--text-main); }

.com-obs-btn.borrar {
  border-color: rgba(231, 76, 60, 0.4);
  background: rgba(231, 76, 60, 0.08);
  color: var(--crimson-bright);
}

.com-obs-btn.borrar:hover { background: rgba(231, 76, 60, 0.18); }

/* --- Bloque 2: fichas de los canales oficiales --------------------------- */

.canales-denuncia-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.canal-item-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: 12px;
  padding: 17px 19px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.canal-item-card:hover { transform: translateY(-2px); border-color: var(--border-gold); }

.canal-item-card[data-tono="gold"]    { border-left-color: var(--gold-bright); }
.canal-item-card[data-tono="emerald"] { border-left-color: #2ecc71; }
.canal-item-card[data-tono="crimson"] { border-left-color: var(--crimson-bright); }
.canal-item-card[data-tono="cyan"]    { border-left-color: var(--cyan); }

.canal-top { display: flex; align-items: flex-start; gap: 12px; }

.canal-ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid var(--border-gold);
}

.canal-ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.canal-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.canal-ident h4 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
  margin: 0;
}

.canal-siglas {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.13);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}

.canal-herramienta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--cyan);
}

.canal-datos { margin: 0; display: grid; gap: 9px; }

.canal-datos > div {
  display: grid;
  gap: 2px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border-subtle);
}

.canal-datos > div:last-child { border-bottom: none; padding-bottom: 0; }

.canal-datos dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold);
}

.canal-datos dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 78ch;
}

.canal-pie { margin-top: auto; }

.canal-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  padding: 7px 14px;
  text-decoration: none;
  transition: all 0.18s ease;
}

.canal-cta:hover { background: rgba(201, 168, 76, 0.22); color: var(--text-main); }

.canal-sin-url {
  display: block;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-dim);
  background: var(--bg-surface);
  border: 1px dashed var(--border-subtle);
  border-radius: 7px;
  padding: 9px 12px;
  max-width: 78ch;
}

/* --- Decalogo ------------------------------------------------------------ */

.dec-wrap {
  margin-top: 26px;
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 20px 22px;
}

.dec-kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
}

.dec-head h4 {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--gold-bright);
  margin: 3px 0 5px;
}

.dec-head p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 78ch;
  margin: 0 0 16px;
}

.dec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.dec-punto {
  display: flex;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
}

.dec-n {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: #0d0f17;
  background: var(--gold-gradient);
}

.dec-cuerpo { min-width: 0; }

.dec-tit {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-main);
  margin: 0 0 4px;
}

.dec-txt {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 7px;
  max-width: 78ch;
}

.dec-fund {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  max-width: 78ch;
}

@media (max-width: 720px) {
  .com-rutas,
  .canales-denuncia-list,
  .dec-grid { grid-template-columns: 1fr; }
  .com-destino,
  .dec-wrap { padding: 16px; }
  .com-util-lista li,
  .com-destino-sub,
  .com-destino-pie,
  .canal-datos dd,
  .dec-txt,
  .dec-fund,
  .dec-head p,
  .com-obs-txt { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .com-ruta,
  .canal-item-card { transition: none; }
  .com-ruta:hover,
  .canal-item-card:hover { transform: none; }
}

/* ==========================================================================
   SUBPESTANA 5.4 - ORIENTACION, LINEA GUIA Y BALANCE SOCIAL
   La 5.4 ya tenia cuatro simuladores; lo que no tenia era una entrada que
   dijera como se juegan, una advertencia sobre los limites de la comparacion
   ni la contraparte social de las cifras hacendarias. Este bloque los viste.
   ========================================================================== */

.vsx-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 18px 0 22px;
}

/* --- Como se juega: los tres pasos --- */
.vsx-comojugar {
  background: linear-gradient(160deg, rgba(201, 168, 76, 0.07), rgba(0, 0, 0, 0));
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 20px 22px 22px;
}

.vsx-cj-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.vsx-cj-tit {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--gold-bright);
  margin: 5px 0 6px;
  line-height: 1.25;
}

.vsx-cj-sub {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 0 0 16px;
  max-width: 78ch;
}

.vsx-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.vsx-paso {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "n   ico"
    "tit tit"
    "txt txt"
    "pis pis";
  align-items: center;
  gap: 4px 10px;
  padding: 15px 16px 13px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--gold);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vsx-paso:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.vsx-paso[data-tono="gold"]    { border-top-color: var(--gold); }
.vsx-paso[data-tono="emerald"] { border-top-color: var(--emerald-bright); }
.vsx-paso[data-tono="cyan"]    { border-top-color: var(--cyan); }

.vsx-paso-n {
  grid-area: n;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--bg-deep, #0b0d14);
  background: var(--gold);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vsx-paso[data-tono="emerald"] .vsx-paso-n { background: var(--emerald-bright); }
.vsx-paso[data-tono="cyan"]    .vsx-paso-n { background: var(--cyan); }

.vsx-paso-ico  { grid-area: ico; font-size: 21px; justify-self: end; opacity: 0.9; }

.vsx-paso-tit {
  grid-area: tit;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text-main);
  margin-top: 6px;
}

.vsx-paso-txt {
  grid-area: txt;
  font-size: 12.8px;
  line-height: 1.58;
  color: var(--text-secondary);
  margin-top: 2px;
}

.vsx-paso-pista {
  grid-area: pis;
  justify-self: start;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.32);
  border-radius: 20px;
  padding: 3px 10px;
}

.vsx-paso[data-tono="emerald"] .vsx-paso-pista {
  color: var(--emerald-bright);
  background: var(--emerald-glow);
  border-color: rgba(46, 204, 113, 0.32);
}

.vsx-paso[data-tono="cyan"] .vsx-paso-pista {
  color: var(--cyan);
  background: rgba(78, 205, 196, 0.12);
  border-color: rgba(78, 205, 196, 0.32);
}

/* --- Cautelas metodologicas --- */
.vsx-cautelas {
  border: 1px dashed rgba(231, 76, 60, 0.4);
  border-radius: 14px;
  background: rgba(231, 76, 60, 0.05);
  padding: 18px 20px 20px;
}

.vsx-cau-tit {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--crimson-bright);
  margin-bottom: 5px;
}

.vsx-cau-sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 14px;
  max-width: 78ch;
}

.vsx-cau-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
}

.vsx-cau {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.vsx-cau-ico    { font-size: 19px; line-height: 1.2; }
.vsx-cau-cuerpo { display: flex; flex-direction: column; gap: 4px; }

.vsx-cau-h {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.35;
}

.vsx-cau-txt {
  font-size: 12.5px;
  line-height: 1.58;
  color: var(--text-secondary);
}

/* --- Procedencia del dato bajo el titulo de la grafica --- */
.versus-proc {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dotted rgba(201, 168, 76, 0.3);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 82ch;
}

.versus-proc-k {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201, 168, 76, 0.32);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 7px;
}

/* --- Linea guia del nivel Diaz sobre las barras --- */
.versus-linea-diaz {
  position: absolute;
  left: 10px;
  right: 132px;
  height: 0;
  border-top: 2px dashed rgba(201, 168, 76, 0.75);
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.35s ease;
}

.versus-linea-diaz-rotulo {
  position: absolute;
  left: 100%;
  margin-left: 8px;
  top: -10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  /* El rotulo lleva el nombre y la cifra: con nowrap se cortaba contra el
     borde de la caja en la metrica ferroviaria. Ahora se parte en dos
     lineas dentro de su propia canaleta. */
  white-space: normal;
  max-width: 114px;
  line-height: 1.35;
  text-align: center;
  color: var(--gold-bright);
  background: rgba(10, 12, 20, 0.88);
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 4px;
  padding: 2px 8px;
}

/* --- Insignia de distancia frente a Diaz --- */
.versus-delta {
  display: inline-block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.versus-bars-stage.evaluado .versus-delta { opacity: 1; }

.versus-delta[data-estado="mejor"] {
  color: var(--emerald-bright);
  background: var(--emerald-glow);
  border: 1px solid rgba(46, 204, 113, 0.38);
}

.versus-delta[data-estado="peor"] {
  color: var(--crimson-bright);
  background: var(--crimson-glow);
  border: 1px solid rgba(231, 76, 60, 0.38);
}

.versus-delta[data-estado="neutro"] {
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
}

/* --- El otro balance: indicadores sociales --- */
.vbs-wrap {
  margin: 26px 0 8px;
  padding: 24px;
  border: 1px solid rgba(231, 76, 60, 0.35);
  border-radius: 16px;
  background:
    radial-gradient(1100px 240px at 12% -12%, rgba(231, 76, 60, 0.09), transparent 62%),
    var(--bg-card);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.3);
}

.vbs-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--crimson-bright);
  background: var(--crimson-glow);
  border: 1px solid rgba(231, 76, 60, 0.35);
  border-radius: 20px;
  padding: 3px 11px;
}

.vbs-tit {
  font-family: var(--font-serif);
  font-size: 23px;
  color: var(--gold-bright);
  margin: 10px 0 7px;
  line-height: 1.25;
}

.vbs-entrada {
  font-size: 13.8px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 18px;
  max-width: 78ch;
}

.vbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}

.vbs-ind {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 17px 15px;
  border-radius: 13px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--gold);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vbs-ind:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.vbs-ind[data-tono="rojo"]  { border-left-color: var(--crimson-bright); }
.vbs-ind[data-tono="ambar"] { border-left-color: #f1c40f; }
.vbs-ind[data-tono="cian"]  { border-left-color: var(--cyan); }

.vbs-ind-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px 11px;
}

.vbs-ind-ico { font-size: 22px; grid-row: span 2; }

.vbs-ind-nom {
  font-family: var(--font-serif);
  font-size: 16.5px;
  color: var(--text-main);
  margin: 0;
  line-height: 1.25;
}

.vbs-ind-brecha {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.vbs-duelo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.vbs-lado {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
}

.vbs-lado[data-lado="antes"] { border-color: rgba(201, 168, 76, 0.28); }
.vbs-lado[data-lado="hoy"]   { border-color: rgba(78, 205, 196, 0.26); }

.vbs-lado-k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.vbs-sincomp {
  display: inline-block;
  margin-left: 4px;
  font-size: 8.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
  font-style: italic;
}

.vbs-lado-v {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--gold-bright);
}

.vbs-lado[data-lado="hoy"] .vbs-lado-v { color: var(--cyan); }

.vbs-riel {
  height: 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.vbs-barra {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #856a21, var(--gold-bright));
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.vbs-barra[data-lado="hoy"] {
  background: linear-gradient(90deg, #1e7f78, var(--cyan));
}

.vbs-lado-n {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.vbs-nota-escala {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  font-style: italic;
  border-left: 2px solid rgba(201, 168, 76, 0.35);
  padding-left: 9px;
}

.vbs-lectura {
  font-size: 13px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 0;
  padding-top: 10px;
  border-top: 1px dotted var(--border-subtle);
  max-width: 78ch;
}

.vbs-cierre {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 11px;
  background: rgba(231, 76, 60, 0.07);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.vbs-cierre-ico { font-size: 19px; }

.vbs-cierre p {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--text-secondary);
  max-width: 78ch;
}

/* --- Fuentes de la subpestana --- */
.vsx-fuentes {
  margin: 18px 0 6px;
  padding: 20px 22px;
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  background: var(--bg-card);
}

.vsx-fuentes-tit {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gold-bright);
  margin-bottom: 11px;
}

.vsx-fuentes-lista {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.vsx-fuente-b {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.vsx-fuente-b:hover {
  background: rgba(201, 168, 76, 0.08);
  border-color: rgba(201, 168, 76, 0.3);
}

.vsx-fuente-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}

.vsx-fuente-t {
  font-size: 12.3px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.vsx-fuentes-nota {
  margin: 0;
  padding-top: 11px;
  border-top: 1px dotted var(--border-subtle);
  font-size: 11.8px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 82ch;
}

/* --- Reacomodo en pantallas angostas --- */
@media (max-width: 720px) {
  .vbs-duelo      { grid-template-columns: 1fr; }
  .vbs-grid       { grid-template-columns: 1fr; }
  .vsx-cau-grid   { grid-template-columns: 1fr; }
  .vsx-pasos      { grid-template-columns: 1fr; }
  .vbs-wrap       { padding: 18px 15px; }
  .vsx-comojugar  { padding: 16px 15px 18px; }
  .vsx-fuentes    { padding: 16px 15px; }
  .vbs-tit        { font-size: 20px; }
  .versus-linea-diaz-rotulo { font-size: 9px; padding: 1px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .vsx-paso,
  .vbs-ind { transition: none; }
  .vsx-paso:hover,
  .vbs-ind:hover { transform: none; }
  .vbs-barra,
  .versus-linea-diaz,
  .versus-delta { transition: none; }
}

/* --- La cifra detras de la cifra: verificacion de las cifras estelares --- */
.vpr-wrap {
  margin: 22px 0 8px;
  padding: 24px;
  border: 1px solid rgba(78, 205, 196, 0.32);
  border-radius: 16px;
  background:
    radial-gradient(1000px 220px at 88% -14%, rgba(78, 205, 196, 0.08), transparent 60%),
    var(--bg-card);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.vpr-kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyan);
  background: rgba(78, 205, 196, 0.1);
  border: 1px solid rgba(78, 205, 196, 0.32);
  border-radius: 20px;
  padding: 3px 11px;
}

.vpr-tit {
  font-family: var(--font-serif);
  font-size: 23px;
  color: var(--gold-bright);
  margin: 10px 0 7px;
  line-height: 1.25;
}

.vpr-entrada {
  font-size: 13.8px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 18px;
  max-width: 78ch;
}

.vpr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.vpr-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 17px 15px;
  border-radius: 13px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--cyan);
}

.vpr-item-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 11px;
}

.vpr-item-ico { font-size: 22px; grid-row: span 2; }

.vpr-item-n {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--cyan);
}

.vpr-item-tit {
  font-family: var(--font-serif);
  font-size: 16.5px;
  color: var(--text-main);
  margin: 0;
  line-height: 1.28;
}

.vpr-item-cuerpo {
  font-size: 13px;
  line-height: 1.64;
  color: var(--text-secondary);
  margin: 0;
  max-width: 78ch;
}

.vpr-leccion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding: 11px 13px;
  border-radius: 9px;
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid var(--gold);
}

.vpr-leccion-k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.vpr-leccion-t {
  font-size: 12.5px;
  line-height: 1.58;
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .vpr-grid { grid-template-columns: 1fr; }
  .vpr-wrap { padding: 18px 15px; }
  .vpr-tit  { font-size: 20px; }
}

/* ============================================================================
   SUBPESTANA 5.4 - MODO DESGLOSE DE UNA SOLA VARIABLE
   Al elegir una variable, la raiz recibe .vfoco-on y todo lo que no sea esa
   variable se repliega. Los bloques no se destruyen: vuelven intactos al salir.
   ============================================================================ */

#versus54Raiz.vfoco-on > .vfoco-ocultar { display: none !important; }

.vfoco-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--border-gold);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201,168,76,0.14), rgba(201,168,76,0.04));
  animation: vfocoEntra 0.34s ease both;
}

@keyframes vfocoEntra {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vfoco-txt {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  flex: 1 1 320px;
  min-width: 0;
}

.vfoco-txt strong { color: var(--gold-bright); }

.vfoco-volver {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--gold-bright);
  background: rgba(201,168,76,0.16);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease;
}

.vfoco-volver:hover {
  background: rgba(201,168,76,0.3);
  transform: translateY(-1px);
}

/* --- Desglose: cifras de cabecera y orden de los diez mandatarios --------- */

.vdg-wrap {
  margin: 18px 0 6px;
  padding: 20px 22px;
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: vfocoEntra 0.4s ease both;
}

.vdg-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}

.vdg-tit {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--gold-bright);
  margin: 4px 0 6px;
}

.vdg-sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 78ch;
}

.vdg-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}

.vdg-tar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--text-dim);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
}

.vdg-tar[data-tono="alto"]   { border-top-color: #2ecc71; }
.vdg-tar[data-tono="bajo"]   { border-top-color: #e74c3c; }
.vdg-tar[data-tono="diaz"]   { border-top-color: var(--gold); }
.vdg-tar[data-tono="brecha"] { border-top-color: var(--cyan); }

.vdg-tar-k {
  font-family: var(--font-mono);
  font-size: 9.8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.4;
}

.vdg-tar-v {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.vdg-tar[data-tono="diaz"] .vdg-tar-v { color: var(--gold-bright); }

.vdg-tar-n {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.vdg-orden {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 14px;
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  background: rgba(0,195,255,0.06);
  margin-bottom: 14px;
}

.vdg-orden-k {
  font-family: var(--font-mono);
  font-size: 9.8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--cyan);
}

.vdg-orden-t {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 78ch;
}

.vdg-tabla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vdg-fila {
  display: grid;
  grid-template-columns: 26px 24px minmax(150px, 1.5fr) minmax(90px, 2fr) 92px 74px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: rgba(255,255,255,0.02);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.vdg-fila[data-diaz="0"] { cursor: pointer; }

.vdg-fila[data-diaz="0"]:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--gold);
  transform: translateX(3px);
}

.vdg-fila[data-diaz="1"] {
  border-color: var(--gold);
  background: linear-gradient(90deg, rgba(201,168,76,0.16), rgba(201,168,76,0.03));
}

.vdg-lugar {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
}

.vdg-medalla { font-size: 15px; text-align: center; }

.vdg-nom { display: flex; flex-direction: column; min-width: 0; }

.vdg-nom strong {
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.35;
}

.vdg-nom em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.vdg-riel {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
}

/* Marca del cero: solo aparece cuando la variable tiene cifras negativas y el
   riel deja de arrancar en el extremo izquierdo. */
.vdg-riel.con-cero::before {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--cero, 0%);
  width: 1px;
  background: rgba(255,255,255,0.4);
}

.vdg-barra {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  opacity: 0.85;
}

.vdg-barra.es-neg {
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(231,76,60,0.95);
  /* El color va en el atributo style de cada barra, asi que el rayado tiene
     que ganarle a la abreviatura «background» en linea. */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(10,12,20,0.55) 0 4px,
    rgba(10,12,20,0) 4px 9px
  ) !important;
}

.vdg-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}

.vdg-fila[data-diaz="1"] .vdg-val { color: var(--gold-bright); }

.vdg-dist {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.vdg-dist[data-estado="mejor"]  { color: #2ecc71; }
.vdg-dist[data-estado="peor"]   { color: #e74c3c; }
.vdg-dist[data-estado="neutro"] { color: var(--text-dim); }

.vdg-pista {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin: 12px 0 0;
}

.vdg-proc {
  margin-top: 12px;
  padding: 11px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: rgba(201,168,76,0.07);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 78ch;
}

.vdg-proc-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.8px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}

.vdg-salida { margin-top: 16px; }

@media (max-width: 760px) {
  .vdg-wrap { padding: 16px 14px; }
  .vdg-fila {
    grid-template-columns: 24px minmax(0, 1fr) 84px;
    grid-template-areas:
      "lugar nombre valor"
      "riel  riel   dist";
    row-gap: 7px;
  }
  .vdg-lugar   { grid-area: lugar; }
  .vdg-medalla { display: none; }
  .vdg-nom     { grid-area: nombre; }
  .vdg-riel    { grid-area: riel; }
  .vdg-val     { grid-area: valor; }
  .vdg-dist    { grid-area: dist; text-align: left; }
  .vdg-fila[data-diaz="0"]:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vfoco-bar, .vdg-wrap { animation: none; }
  .vdg-fila[data-diaz="0"]:hover { transform: none; }
}

/* --- Sin barra de desplazamiento visible ---------------------------------
   El escenario de la grafica y la matriz siguen desplazandose con el dedo o
   con la rueda, pero ya no dibujan la barra gris que partia el tablero. */

.versus-bars-stage,
.versus-line-container,
.versus-table-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.versus-bars-stage::-webkit-scrollbar,
.versus-line-container::-webkit-scrollbar,
.versus-table-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* --- Barras de valor negativo --------------------------------------------
   La altura del escenario mide magnitud absoluta, asi que -19,000 km levanta
   una barra tan alta como +19,000. El rayado diagonal y el filo rojo impiden
   que se lean como un logro; el pie de la grafica lo dice con palabras. */

.versus-bar-col[data-signo="neg"] {
  border-color: rgba(231, 76, 60, 0.95);
  box-shadow: inset 0 0 0 1px rgba(231, 76, 60, 0.6);
}

.versus-bar-col[data-signo="neg"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    rgba(10, 12, 20, 0.55) 0 5px,
    rgba(10, 12, 20, 0) 5px 11px
  );
}

.versus-bar-col.versus-bar-zero[data-signo="neg"]::after { display: none; }

.versus-nota-signo {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 3px solid #e74c3c;
  border-radius: 0 8px 8px 0;
  background: rgba(231, 76, 60, 0.08);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 78ch;
}

.versus-nota-signo strong { color: var(--text-primary); }


/* ============================================================================
   BARRA DE REGRESO ASISTIDO
   Aparece al saltar a glosario, referencias o marco legal desde cualquier
   hipervinculo, y devuelve a la persona al punto exacto del que salio.
   ============================================================================ */

body.con-regreso { padding-bottom: 96px; }
/* Con una ficha lateral abierta en pantalla ancha, la barra se corre a la
   izquierda para no tapar el pie de la ficha. */
@media (min-width: 1100px) {
  body:has(.audit-drawer.active) .nav-regreso { left: 20px; transform: none; animation: none; max-width: calc(100vw - 800px); }
}

.nav-regreso {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  /* Por encima de las fichas laterales (99995): el regreso nunca queda
     tapado por la ficha que abrio el salto. */
  z-index: 99998;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(94vw, 880px);
  padding: 10px 14px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: rgba(12, 14, 22, 0.96);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  animation: navRegresoEntra 0.28s ease both;
}

@keyframes navRegresoEntra {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.nav-regreso-txt {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 340px;
}

.nav-regreso-txt strong { color: var(--gold-bright); }

.nav-regreso-b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.nav-regreso-b:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.nav-regreso-b.principal {
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.18);
  border-color: var(--gold);
}

.nav-regreso-b.principal:hover { background: rgba(201, 168, 76, 0.32); }

.nav-regreso-x {
  font-size: 13px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 7px 9px;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.nav-regreso-x:hover { color: var(--text-primary); border-color: var(--gold); }

@media (max-width: 720px) {
  body.con-regreso { padding-bottom: 150px; }

  .nav-regreso {
    left: 8px;
    right: 8px;
    bottom: 10px;
    max-width: none;
    transform: none;
    gap: 8px;
    padding: 9px 11px;
  }
  .nav-regreso-txt { flex: 1 1 100%; max-width: none; font-size: 11.5px; }
  .nav-regreso-b { flex: 1 1 auto; font-size: 11px; padding: 8px 10px; }
  @keyframes navRegresoEntra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-regreso { animation: none; }
  .nav-regreso-b:hover { transform: none; }
}

/* ==========================================================================
   SUBPESTANA 1.3 - LA CONSTITUCION ECONOMICA
   ========================================================================== */

.ce-brujula {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 16px 20px;
  margin-bottom: 26px;
}
.ce-bru-tit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.ce-bru-fila {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ce-bru-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 13px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--tono, var(--gold));
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, transform 0.18s;
}
.ce-bru-item:hover, .ce-bru-item:focus-visible {
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}
.ce-bru-ico { font-size: 19px; line-height: 1; }
.ce-bru-art {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--tono, var(--gold-bright));
  letter-spacing: 0.4px;
}
.ce-bru-preg { font-size: 13px; color: var(--text-secondary); line-height: 1.35; }

.ce-pilar {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--tono, var(--gold));
  border-radius: 12px;
  padding: 20px 20px 18px;
  margin-bottom: 20px;
  scroll-margin-top: 90px;
}
.ce-destaca { animation: ceDestaca 1.5s ease-out; }
@keyframes ceDestaca {
  0%, 100% { box-shadow: none; }
  22%      { box-shadow: 0 0 0 3px var(--gold-glow), 0 0 26px var(--gold-glow); }
}
.ce-pil-cab-h { margin: 0; font: inherit; font-weight: inherit; }
.ce-pil-cab {
  display: flex; align-items: flex-start; gap: 13px;
  width: calc(100% + 40px); margin: -20px -20px 0; padding: 18px 20px 12px;
  background: none; border: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer; border-radius: 9px 9px 0 0;
  transition: background 0.15s ease;
}
.ce-pil-cab:hover { background: var(--bg-card-hover); }
.ce-pil-cab:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.ce-pil-cab-tx { flex: 1; min-width: 0; }
.ce-pil-mas {
  align-self: center; width: 1.2rem; text-align: center;
  font-family: var(--font-mono); font-size: 22px; line-height: 1;
  color: var(--text-secondary);
}
.ce-pil-cab:hover .ce-pil-mas,
.ce-pilar.abierto .ce-pil-mas { color: var(--tono, var(--gold)); }
.ce-pilar.abierto { border-color: var(--border-gold); }
.ce-pil-ico { font-size: 27px; line-height: 1.1; }
.ce-pil-art {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--tono, var(--gold));
  font-weight: 800;
}
.ce-pil-tit { display: block; font-family: var(--font-serif); font-size: 21px;
  margin: 2px 0 0; color: var(--text-main); font-weight: 600; line-height: 1.3; }
.ce-pil-resp { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 15px; }
.ce-pil-preg { color: var(--text-gold); font-weight: 700; }

/* Cerrado, el pilar ensena solo la pregunta que contesta: lo justo para
   decidir si vale la pena abrirlo. */
.ce-pil-avance {
  margin: 0; font-size: 14.4px; line-height: 1.5;
  color: var(--text-gold); font-weight: 700;
}
.ce-pil-cuerpo { margin-top: 10px; }

.ce-pil-ficha {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}
.ce-pil-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
}
.ce-pil-k {
  font-family: var(--font-mono);
  font-size: 9.8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ce-pil-v { font-size: 13px; line-height: 1.45; color: var(--text-main); }

.ce-pil-claves { list-style: none; margin: 0 0 15px; padding: 0; display: grid; gap: 9px; }
.ce-pil-claves li {
  font-size: 13.8px;
  line-height: 1.55;
  color: var(--text-secondary);
  padding-left: 15px;
  border-left: 2px solid var(--border-accent);
}
.ce-clave-k { color: var(--text-main); }

.ce-pil-ciego {
  background: rgba(231, 76, 60, 0.07);
  border: 1px solid rgba(231, 76, 60, 0.28);
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.ce-ciego-et {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.6px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--crimson-bright);
  margin-bottom: 5px;
}
.ce-ciego-tx { margin: 0; font-size: 13.6px; line-height: 1.58; color: var(--text-secondary); }

.ce-pil-texto {
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 12.6px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 0.18s;
}
.ce-pil-texto:hover, .ce-pil-texto:focus-visible { background: var(--gold-glow); }

.ce-cadena {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px;
  margin-top: 8px;
}
.ce-cad-tit { font-family: var(--font-serif); font-size: 20px; margin: 0 0 6px; color: var(--text-main); }
.ce-cad-sub { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 16px; }
.ce-cad-pasos {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}
.ce-cad-paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  padding: 12px 12px 13px;
}
.ce-cad-n {
  position: absolute;
  top: -9px;
  left: 11px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg-void);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}
.ce-cad-et {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 9.8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ce-cad-nom { font-size: 13.4px; color: var(--text-main); line-height: 1.35; }
.ce-cad-d { font-size: 12.4px; color: var(--text-secondary); line-height: 1.45; }
.ce-cad-pie { margin: 0; font-size: 12.4px; color: var(--text-dim); font-family: var(--font-mono); }

@media (max-width: 900px) {
  .ce-bru-fila { grid-template-columns: repeat(2, 1fr); }
  .ce-pil-ficha { grid-template-columns: 1fr; }
  .ce-cad-pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ce-bru-fila, .ce-cad-pasos { grid-template-columns: 1fr; }
  .ce-pil-tit { font-size: 18px; }
  .ce-pil-cab { gap: 10px; padding: 15px 20px 10px; width: calc(100% + 40px); }
  .ce-pil-ico { font-size: 23px; }
}

/* ==========================================================================
   SUBPESTANA 2.5 - CUENTAS ECONOMICAS Y ECOLOGICAS
   ========================================================================== */

.cee-sello {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  vertical-align: middle;
}
.cee-sello[data-estado="oficial"] {
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.42);
  color: var(--emerald-bright);
}
.cee-sello[data-estado="derivado"] {
  background: rgba(243, 156, 18, 0.1);
  border: 1px solid rgba(243, 156, 18, 0.4);
  color: var(--amber);
}

.cee-casc, .cee-sim, .cee-desg, .cee-ciegos, .cee-jur, .cee-proc {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 22px;
}
.cee-casc-tit, .cee-sim-tit, .cee-desg-tit, .cee-cie-tit, .cee-jur-tit, .cee-proc-tit {
  font-family: var(--font-serif);
  font-size: 20px;
  margin: 0 0 6px;
  color: var(--text-main);
}
.cee-casc-sub, .cee-sim-sub, .cee-jur-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 18px;
}

.cee-casc-filas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
.cee-casc-fila {
  display: grid;
  grid-template-columns: 1fr 150px 116px;
  grid-template-areas: "et cifra pct" "riel riel riel" "glosa glosa glosa";
  align-items: center;
  gap: 5px 12px;
  padding-bottom: 13px;
  border-bottom: 1px dashed var(--border-subtle);
}
.cee-casc-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.cee-casc-et { grid-area: et; font-size: 14.6px; color: var(--text-main); font-weight: 600; }
.cee-casc-fila[data-signo="resultado"] .cee-casc-et,
.cee-casc-fila[data-signo="subtotal"] .cee-casc-et { font-family: var(--font-serif); font-size: 16px; }
.cee-casc-cifra { grid-area: cifra; font-family: var(--font-mono); font-size: 13.4px; color: var(--text-gold); text-align: right; }
.cee-casc-pct { grid-area: pct; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); text-align: right; }
.cee-casc-riel {
  grid-area: riel;
  position: relative;
  display: block;
  height: 15px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
}
.cee-casc-barra { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.cee-casc-fila[data-signo="resta"] .cee-casc-barra {
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.3) 0 3px, transparent 3px 6px) !important;
}
.cee-casc-glosa { grid-area: glosa; font-size: 12.9px; line-height: 1.5; color: var(--text-secondary); }
.cee-casc-remate {
  margin: 0;
  padding: 13px 15px;
  background: rgba(63, 163, 115, 0.08);
  border: 1px solid rgba(63, 163, 115, 0.3);
  border-radius: 9px;
  font-size: 14.4px;
  line-height: 1.6;
  color: var(--text-main);
}

.cee-sim-mandos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.cee-mando { display: flex; flex-direction: column; gap: 7px; background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: 9px; padding: 12px 13px 13px; }
.cee-mando-et { font-size: 12.6px; color: var(--text-secondary); line-height: 1.35; }
.cee-mando-rango { width: 100%; accent-color: var(--gold); cursor: pointer; }
.cee-mando-val { font-family: var(--font-mono); font-size: 15px; font-weight: 800; color: var(--gold-bright); }

.cee-res-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 14px; }
.cee-res-tar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--border-accent);
  border-radius: 9px;
  padding: 13px 14px;
}
.cee-res-tar[data-tono="pib"]    { border-top-color: var(--gold); }
.cee-res-tar[data-tono="pine"]   { border-top-color: var(--emerald-bright); }
.cee-res-tar[data-tono="malo"]   { border-top-color: var(--crimson-bright); }
.cee-res-tar[data-tono="brecha"] { border-top-color: var(--amber); }
.cee-res-tar[data-tono="costo"]  { border-top-color: var(--blue); }
.cee-res-k { font-family: var(--font-mono); font-size: 9.8px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.cee-res-v { font-family: var(--font-mono); font-size: 24px; font-weight: 800; color: var(--text-main); line-height: 1.1; }
.cee-res-tar[data-tono="malo"] .cee-res-v { color: var(--crimson-bright); }
.cee-res-tar[data-tono="pine"] .cee-res-v { color: var(--emerald-bright); }
.cee-res-sub { font-size: 11.8px; color: var(--text-secondary); line-height: 1.4; }

.cee-res-veredicto {
  margin: 0;
  padding: 13px 15px;
  border-radius: 9px;
  font-size: 14.2px;
  line-height: 1.6;
  border: 1px solid var(--border-accent);
  background: var(--bg-card-alt);
  color: var(--text-secondary);
}
.cee-res-veredicto[data-tono="malo"]   { border-color: rgba(231,76,60,0.45); background: rgba(231,76,60,0.08); color: var(--text-main); }
.cee-res-veredicto[data-tono="alerta"] { border-color: rgba(243,156,18,0.42); background: rgba(243,156,18,0.07); }
.cee-res-veredicto[data-tono="bueno"]  { border-color: rgba(46,204,113,0.42); background: rgba(46,204,113,0.07); }

.cee-sim-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 15px 0 14px; }
.cee-atajo-et { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.cee-atajo {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12.4px;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.cee-atajo:hover, .cee-atajo:focus-visible { border-color: var(--border-gold); color: var(--text-gold); }
.cee-sim-honesto {
  margin: 0;
  font-size: 12.8px;
  line-height: 1.6;
  color: var(--text-dim);
  border-top: 1px solid var(--border-subtle);
  padding-top: 13px;
}
.cee-sim-honesto strong { color: var(--text-secondary); }

.cee-desg-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 18px; }
.cee-rubro { background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 16px; }
.cee-rub-cab { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; }
.cee-rub-ico { font-size: 23px; line-height: 1.1; }
.cee-rub-tit { font-family: var(--font-serif); font-size: 17px; margin: 0; color: var(--text-main); }
.cee-rub-tot { font-family: var(--font-mono); font-size: 12px; color: var(--text-gold); margin-top: 3px; }
.cee-rub-def { font-size: 13.2px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 13px; }
.cee-rub-comps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cee-comp {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  grid-template-areas: "ico nom val" "riel riel riel" "glosa glosa glosa";
  align-items: center;
  gap: 4px 8px;
}
.cee-comp-ico { grid-area: ico; font-size: 16px; }
.cee-comp-nom { grid-area: nom; font-size: 13.2px; color: var(--text-main); }
.cee-comp-val { grid-area: val; font-family: var(--font-mono); font-size: 12.2px; color: var(--text-gold); }
.cee-comp-riel { grid-area: riel; display: block; height: 7px; background: var(--bg-card); border-radius: 4px; overflow: hidden; }
.cee-comp-barra { display: block; height: 100%; background: var(--crimson-bright); border-radius: 4px; }
.cee-comp-glosa { grid-area: glosa; font-size: 12.2px; line-height: 1.45; color: var(--text-secondary); }
.cee-rub-nota { margin: 13px 0 0; font-size: 11.8px; line-height: 1.5; color: var(--text-dim); font-style: italic; }

.cee-balanza {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "gasto vs dano" "lectura lectura lectura";
  align-items: center;
  gap: 14px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 17px;
}
.cee-bal-lado { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.cee-bal-lado[data-lado="gasto"] { grid-area: gasto; }
.cee-bal-lado[data-lado="dano"] { grid-area: dano; }
.cee-bal-k { font-family: var(--font-mono); font-size: 9.8px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.cee-bal-v { font-family: var(--font-mono); font-size: 19px; font-weight: 800; color: var(--text-main); }
.cee-bal-lado[data-lado="gasto"] .cee-bal-v { color: var(--emerald-bright); }
.cee-bal-lado[data-lado="dano"] .cee-bal-v { color: var(--crimson-bright); }
.cee-bal-p { font-family: var(--font-mono); font-size: 11.6px; color: var(--text-secondary); }
.cee-bal-vs { grid-area: vs; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.cee-bal-lectura { grid-area: lectura; margin: 0; font-size: 13.6px; line-height: 1.6; color: var(--text-main); border-top: 1px solid var(--border-subtle); padding-top: 13px; }

.cee-cie-rejilla, .cee-jur-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.cee-cie-tar, .cee-jur-tar {
  position: relative;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px 16px 15px;
}
.cee-cie-tar { border-left: 3px solid var(--crimson-bright); }
.cee-jur-tar { border-left: 3px solid var(--gold); }
.cee-cie-n {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: var(--crimson-bright);
  letter-spacing: 1px;
}
.cee-cie-h, .cee-jur-h { font-family: var(--font-serif); font-size: 16px; margin: 4px 0 7px; color: var(--text-main); }
.cee-cie-tx, .cee-jur-tx { margin: 0; font-size: 13.2px; line-height: 1.58; color: var(--text-secondary); }
.cee-jur-ico { font-size: 21px; line-height: 1; }
.cee-jur-fund {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.6px;
  letter-spacing: 0.5px;
  color: var(--text-gold);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 3px 10px;
}
.cee-proc-tx { font-size: 13.4px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 12px; }
.cee-proc-lista { margin: 0; padding-left: 19px; display: grid; gap: 7px; }
.cee-proc-lista li { font-size: 12.8px; line-height: 1.5; color: var(--text-dim); }

@media (max-width: 1000px) {
  .cee-res-cifras { grid-template-columns: repeat(2, 1fr); }
  .cee-desg-rejilla, .cee-cie-rejilla, .cee-jur-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cee-sim-mandos { grid-template-columns: 1fr; }
  .cee-casc-fila { grid-template-columns: 1fr auto; grid-template-areas: "et et" "cifra pct" "riel riel" "glosa glosa"; }
  .cee-casc-cifra { text-align: left; }
  .cee-balanza { grid-template-columns: 1fr; grid-template-areas: "gasto" "vs" "dano" "lectura"; }
  .cee-bal-vs { text-align: center; }
}
@media (max-width: 480px) {
  .cee-res-cifras { grid-template-columns: 1fr; }
  .cee-casc-tit, .cee-sim-tit, .cee-desg-tit, .cee-cie-tit, .cee-jur-tit { font-size: 17.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ce-destaca { animation: none; }
  .ce-bru-item:hover { transform: none; }
}

/* ==========================================================================
   SUBPESTANA 2.2 - COMPARATIVA, ESCALA Y PROCEDENCIA
   ========================================================================== */

.sim-rank, .sim-escala, .sim-proc {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 19px 20px;
  margin: 0 0 22px;
}
.sim-rank-cab { margin-bottom: 15px; }
.sim-rank-tit, .sim-esc-tit, .sim-proc-tit {
  font-family: var(--font-serif);
  font-size: 19px;
  margin: 0 0 5px;
  color: var(--text-main);
}
.sim-rank-sub { font-size: 13px; color: var(--text-dim); }

.sim-rank-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: none; }
.sim-rank-b {
  width: 100%;
  display: grid;
  grid-template-columns: 26px 24px minmax(120px, 1.5fr) 3fr minmax(96px, auto);
  align-items: center;
  gap: 10px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s, background 0.16s;
}
.sim-rank-b:hover, .sim-rank-b:focus-visible { border-color: var(--border-gold); background: var(--bg-card-hover); }
.sim-rank-n {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dim);
  text-align: center;
}
.sim-rank-ico { font-size: 17px; }
.sim-rank-nom { font-size: 13.4px; color: var(--text-main); line-height: 1.3; }
.sim-rank-riel {
  display: block;
  height: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  overflow: hidden;
}
.sim-rank-barra { display: block; height: 100%; border-radius: 4px; }
.sim-rank-val { font-family: var(--font-mono); font-size: 12.6px; color: var(--text-gold); text-align: right; }

.sim-esc-sub { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 16px; }
.sim-esc-lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 11px; }
.sim-esc-fila {
  display: grid;
  grid-template-columns: 78px minmax(150px, 1.6fr) 2fr minmax(104px, auto);
  align-items: center;
  gap: 11px;
}
.sim-esc-veces {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 800;
  color: var(--gold-bright);
  text-align: right;
}
.sim-esc-k { font-size: 13.2px; color: var(--text-main); line-height: 1.35; }
.sim-esc-ej { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.sim-esc-riel { display: block; height: 9px; background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: 5px; overflow: hidden; }
.sim-esc-barra { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.sim-esc-v { font-family: var(--font-mono); font-size: 12.2px; color: var(--text-secondary); text-align: right; }
.sim-esc-aviso {
  margin: 0;
  padding: 13px 15px;
  background: rgba(243, 156, 18, 0.07);
  border: 1px solid rgba(243, 156, 18, 0.32);
  border-radius: 9px;
  font-size: 12.9px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.sim-esc-aviso strong { color: var(--amber); }

.sim-proc-lista { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.sim-proc-lista li { font-size: 13.2px; line-height: 1.58; color: var(--text-secondary); }
.sim-proc-lista strong { color: var(--text-main); }

@media (max-width: 860px) {
  .sim-rank-b { grid-template-columns: 24px 22px 1fr; grid-template-areas: "n ico nom" "riel riel riel" "val val val"; gap: 6px 9px; }
  .sim-rank-n { grid-area: n; } .sim-rank-ico { grid-area: ico; } .sim-rank-nom { grid-area: nom; }
  .sim-rank-riel { grid-area: riel; } .sim-rank-val { grid-area: val; text-align: left; }
  .sim-esc-fila { grid-template-columns: 70px 1fr; grid-template-areas: "veces k" "riel riel" "v v"; }
  .sim-esc-veces { grid-area: veces; } .sim-esc-k { grid-area: k; }
  .sim-esc-riel { grid-area: riel; } .sim-esc-v { grid-area: v; text-align: left; }
}
@media (max-width: 480px) {
  .sim-rank-tit, .sim-esc-tit, .sim-proc-tit { font-size: 17px; }
}

/* ====================================================================
   SUBPESTANA 2.2 - SELECTORES VISUALES Y MESAS DE CALCULO
   Los tres filtros pasan de tiras de pastillas a tableros con cifra
   propia; el desglose vive replegado hasta que el usuario lo pide.
   ==================================================================== */

.sim-sel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 13px 15px 14px;
  margin-bottom: 11px;
}

.sim-sel-cab {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}

.sim-sel-ico {
  font-size: 21px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.sim-sel-tit {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-gold);
  margin: 0 0 3px;
  letter-spacing: 0.2px;
}

.sim-sel-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
  max-width: 70ch;
}

.sim-vertodas {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-accent);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 8px 15px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.sim-vertodas:hover { background: var(--bg-card-hover); color: var(--text-main); }

.sim-vertodas.on {
  background: var(--gold-glow);
  border-color: var(--border-gold);
  color: var(--text-gold);
}

/* --- Selector de temporalidad --- */

.sim-dial {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.sim-dial-b {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 8px 8px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}

.sim-dial-b:hover { transform: translateY(-3px); border-color: var(--border-accent); }

.sim-dial-b.on {
  border-color: var(--border-gold);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.13), rgba(201, 168, 76, 0.03));
  box-shadow: 0 0 0 1px var(--gold-glow);
}

.sim-dial-ico { font-size: 17px; line-height: 1; }

.sim-dial-et {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sim-dial-b.on .sim-dial-et { color: var(--text-gold); }

.sim-dial-cif {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--crimson-bright);
}

.sim-dial-suf {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* --- Mosaico de sectores --- */

.sim-mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sim-los {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 11px 13px 10px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}

.sim-los:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--border-gold);
  background: var(--bg-card-hover);
}

.sim-los.on {
  border-color: var(--border-gold);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.12), rgba(201, 168, 76, 0.02));
}

.sim-los-vacia { opacity: 0.45; }
.sim-los-vacia:hover { opacity: 1; }

.sim-los-fila { display: flex; align-items: center; gap: 9px; }

.sim-los-ico { font-size: 21px; line-height: 1; flex-shrink: 0; }

.sim-los-nom {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.25;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sim-los-n {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.sim-los-cif {
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--gold-bright);
  white-space: nowrap;
  flex-shrink: 0;
}

.sim-los-pie { display: flex; justify-content: space-between; gap: 8px; }

.sim-los-riel {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--bg-void);
  border-radius: 3px;
  overflow: hidden;
}

.sim-los-barra {
  display: block;
  height: 100%;
  background: var(--gold-gradient);
  border-radius: 3px;
}

.sim-los-cuota {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* --- Linea del tiempo de administraciones --- */

.sim-linea {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  align-items: end;
}

.sim-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 8px 6px 9px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  cursor: pointer;
  text-align: center;
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
}

.sim-seg:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--border-accent); }

.sim-seg.on {
  border-color: var(--border-gold);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.12), rgba(201, 168, 76, 0.02));
}

.sim-seg-vacio { opacity: 0.3; cursor: not-allowed; }

.sim-seg-n {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

/* Carril de altura fija: la torre crece desde la base sin que el resto
   de la loseta se mueva. La animacion la conduce requestAnimationFrame,
   asi que la torre no lleva transicion propia: competirian. */
.sim-seg-riel {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 92px;
  margin: 2px 0 3px;
}

.sim-seg-torre {
  display: block;
  width: 62%;
  min-height: 0;
  border-radius: 4px 4px 0 0;
  opacity: 0.88;
}

.sim-seg-nom {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  margin-top: 3px;
}

.sim-seg-anios {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.sim-seg-cif {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-bright);
}

.sim-seg-vacio .sim-seg-cif { color: var(--text-dim); font-weight: 400; }

.sim-linea-eje {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
}

.sim-linea-riel {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-accent) 12%, var(--border-accent) 88%, transparent);
}

.sim-linea-nota {
  margin: 10px 0 0;
  padding: 9px 12px;
  background: rgba(231, 76, 60, 0.06);
  border-left: 3px solid var(--crimson-bright);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Cabecera del desglose --- */

.sim-desglose[hidden] { display: none; }

.sim-desg-cab {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px 17px;
  margin: 6px 0 16px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.1), transparent 70%);
  border: 1px solid var(--border-gold);
  border-radius: 13px;
}

.sim-desg-quien { display: flex; align-items: center; gap: 13px; flex: 1; min-width: 240px; }

.sim-desg-ico { font-size: 28px; line-height: 1; }

.sim-desg-tit {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--text-gold);
  margin: 0 0 2px;
}

.sim-desg-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Mandos de la cabecera del filtro: volver a contar y quitar filtros. */
.sim-desg-mandos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.sim-recontar {
  background: transparent;
  border: 1px solid var(--border-gold, rgba(201, 162, 39, 0.55));
  color: var(--text-gold, #d9b74a);
  border-radius: 999px;
  padding: 8px 15px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.sim-recontar:hover { background: rgba(201, 162, 39, 0.12); }

/* Las cifras que cuentan llevan ancho tabular para que el renglon no
   baile mientras suben los digitos. */
.sim-dc-v, .sim-dc-s, .sim-rank-val { font-variant-numeric: tabular-nums; }

.sim-replegar {
  background: transparent;
  border: 1px solid var(--border-accent);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 8px 15px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.sim-replegar:hover {
  background: rgba(231, 76, 60, 0.1);
  border-color: var(--crimson-bright);
  color: var(--crimson-bright);
}

/* --- Las tres mesas de calculo --- */

.sim-mesas { margin: 22px 0; }

.sim-mesas-cab { margin-bottom: 16px; }

.sim-mesas-tit {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--text-gold);
  margin: 0 0 6px;
}

.sim-mesas-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  max-width: 88ch;
}

.sim-mesa {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 15px;
}

.sim-mesa-puente { border-color: var(--border-gold); }

.sim-mesa-tit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px;
}

.sim-mesa-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: #100d05;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.sim-mesa-pie {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 13px;
  max-width: 88ch;
}

.sim-t-marco {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.sim-t {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  min-width: 620px;
}

.sim-t thead th {
  background: var(--bg-card-alt);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 9px 10px;
  text-align: right;
  border-bottom: 1px solid var(--border-accent);
  white-space: nowrap;
}

.sim-t thead th:nth-child(1),
.sim-t thead th:nth-child(2) { text-align: left; }

.sim-t tbody td, .sim-t tfoot td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.sim-t tbody tr:hover { background: var(--bg-card-alt); }

.sim-t-n { color: var(--text-dim); width: 34px; }

.sim-t-nom {
  color: var(--text-main);
  font-family: var(--font-sans);
  font-weight: 600;
  white-space: nowrap;
}

.sim-t-ico { margin-right: 6px; }

.sim-t-num { text-align: right; white-space: nowrap; }

.sim-t-op {
  text-align: right;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}

.sim-t-dif { color: var(--crimson-bright); font-weight: 700; }

.sim-t-acum {
  color: var(--gold-bright);
  font-weight: 800;
  background: rgba(201, 168, 76, 0.05);
}

.sim-t-cero td { color: var(--text-dim); font-style: italic; }

.sim-t-nula td { opacity: 0.55; }

.sim-t-div td { background: rgba(201, 168, 76, 0.07); }

.sim-t tfoot td {
  background: var(--bg-card-alt);
  color: var(--text-main);
  font-weight: 800;
  border-bottom: none;
  border-top: 1px solid var(--border-accent);
}

.sim-mesa-cierre {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 13px 0 0;
  max-width: 88ch;
}

.sim-mesa-cierre strong { color: var(--text-gold); }

.sim-mesa-aviso {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: rgba(78, 205, 196, 0.05);
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* --- Cadena de conversion del ano al segundo --- */

.sim-cadena {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.sim-cad-p {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.sim-cad-et {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sim-cad-op { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }

.sim-cad-v {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--crimson-bright);
}

.sim-cad-fl {
  align-self: center;
  color: var(--text-dim);
  font-size: 14px;
}

/* --- Puente a la calculadora civica --- */

.sim-puente-res {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.sim-pr-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 14px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.sim-pr-alta {
  border-color: var(--border-gold);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.11), rgba(201, 168, 76, 0.02));
}

.sim-pr-lbl {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.35;
}

.sim-pr-val {
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 800;
  color: var(--gold-bright);
  line-height: 1.1;
}

.sim-pr-alta .sim-pr-val { color: var(--crimson-bright); }

.sim-pr-sub { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; }

.sim-puente-b {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 14px 18px;
  background: var(--gold-gradient);
  border: none;
  border-radius: 11px;
  color: #100d05;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.18s, filter 0.18s;
}

.sim-puente-b:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* --- Adaptacion a pantallas menores --- */

@media (max-width: 1000px) {
  .sim-mosaico { grid-template-columns: repeat(2, 1fr); }
  .sim-puente-res { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .sim-dial { grid-template-columns: repeat(3, 1fr); }
  .sim-linea { grid-template-columns: repeat(3, 1fr); }
  .sim-vertodas { margin-left: 0; width: 100%; }
  .sim-sel-cab { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .sim-sel { padding: 15px 13px 16px; }
  .sim-dial { grid-template-columns: repeat(2, 1fr); }
  .sim-mosaico { grid-template-columns: 1fr; }
  .sim-linea { grid-template-columns: repeat(2, 1fr); }
  .sim-mesa { padding: 15px 13px; }
  .sim-mesas-tit { font-size: 18px; }
  .sim-desg-cab { padding: 13px; }
  .sim-replegar { width: 100%; }
  .sim-cad-fl { display: none; }
  .sim-cad-p { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sim-dial-b, .sim-los, .sim-seg, .sim-puente-b { transition: none; }
  .sim-seg-torre { transition: none; }
}

/* El anclaje de la tira de indicadores solo tiene sentido donde sobra
   alto. En movil las cuatro tarjetas se apilan y ocuparian la pantalla
   entera, asi que ahi vuelven al flujo normal. */
@media (max-width: 1080px) {
  .sim-kpis-strip {
    position: static;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    background: none;
  }
}

/* ====================================================================
   2.2 - INVENTARIO POR SECTOR Y CIFRAS DEL FILTRO
   ==================================================================== */

.sim-sector-tabla {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 13px 15px 15px;
  margin-bottom: 11px;
}

.sim-unidades {
  margin: 0 0 11px;
  padding: 9px 12px;
  background: rgba(78, 205, 196, 0.05);
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.sim-sec-t-tabla { min-width: 760px; }

.sim-sec-grupo + .sim-sec-grupo .sim-sec-cab td { border-top: 1px solid var(--border-accent); }

.sim-sec-cab td {
  background: var(--bg-card-alt);
  padding-top: 10px;
  padding-bottom: 10px;
}

.sim-sec-nom { white-space: nowrap; }

.sim-sec-ico { font-size: 16px; margin-right: 7px; }

.sim-sec-t {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-gold);
}

.sim-sec-n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sim-sec-obra td { padding-top: 6px; padding-bottom: 6px; }

.sim-sec-ob-ico { width: 30px; text-align: center; font-size: 14px; }

.sim-sec-ob-nom { min-width: 220px; }

.sim-sec-b {
  display: block;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  border-bottom: 1px dotted var(--border-accent);
  transition: color 0.16s, border-color 0.16s;
}

.sim-sec-b:hover { color: var(--gold-bright); border-color: var(--gold); }

.sim-sec-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

.sim-sec-pct { color: var(--amber); font-weight: 700; }

.sim-sec-cuota { color: var(--text-dim); }

.sim-sec-cab .sim-sec-pct, .sim-sec-cab .sim-sec-cuota,
.sim-sec-cab .sim-t-num { font-weight: 800; }

/* --- Cifras del filtro, en la cabecera del desglose --- */

.sim-desg-cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin: -6px 0 16px;
}

.sim-dc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
}

.sim-dc-l {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.sim-dc-v {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-bright);
}

.sim-dc-rojo { color: var(--crimson-bright); }

.sim-dc-s { font-size: 11px; color: var(--text-secondary); line-height: 1.4; }

@media (max-width: 860px) {
  .sim-desg-cifras { grid-template-columns: 1fr; margin-top: 0; }
  .sim-sector-tabla { padding: 12px 11px 13px; }
}

/* ==========================================================================
   MODO INSPECTOR (pestana 6): mision, explorador de tres niveles y
   circulo de salud financiera. El circulo es SVG generado por codigo:
   sin imagenes, sin peticiones de red y nitido en cualquier pantalla.
   ========================================================================== */
.insp-mision {
  background: linear-gradient(135deg, rgba(201,168,76,0.07), rgba(255,255,255,0.02));
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.insp-mision-cab { display: flex; gap: 14px; align-items: flex-start; }
.insp-mision-ico { flex: 0 0 auto; font-size: 30px; line-height: 1; }
.insp-mision-tit {
  margin: 0 0 5px; font-family: var(--font-serif);
  font-size: 21px; color: var(--gold-bright);
}
.insp-mision-sub {
  margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-secondary);
}
.insp-pasos {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.insp-paso {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 9px; padding: 12px 13px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}
.insp-paso-n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-gradient); color: #0c0f16;
  font-family: var(--font-mono); font-size: 12px; font-weight: 800;
}
.insp-mision-pie {
  margin: 14px 0 0; padding-top: 13px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px; line-height: 1.65; color: var(--text-secondary);
}

/* --- Explorador --- */
.insp-explorador {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 18px;
}
.insp-exp-tit {
  margin: 0 0 4px; font-family: var(--font-serif);
  font-size: 18px; color: var(--text-main);
}
.insp-exp-sub { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); }
.insp-niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.insp-nivel {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle);
  border-radius: 9px; padding: 11px 13px; cursor: pointer;
  text-align: left; color: var(--text-secondary);
  transition: border-color .18s ease, background .18s ease;
}
.insp-nivel:hover { border-color: var(--border-gold); background: var(--bg-card-hover); }
.insp-nivel.active { border-color: var(--gold); background: rgba(201,168,76,0.1); }
.insp-nivel-ico { font-size: 19px; }
.insp-nivel-tx { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.insp-nivel-tx strong { font-size: 14px; color: var(--text-main); }
.insp-nivel-tx small { font-size: 11px; color: var(--text-dim); }
.insp-nivel-n {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--gold-bright); background: rgba(201,168,76,0.12);
  border-radius: 20px; padding: 2px 9px;
}

.insp-buscador {
  display: flex; align-items: center; gap: 9px; margin: 14px 0 4px;
  background: var(--bg-void); border: 1px solid var(--border-accent);
  border-radius: 9px; padding: 3px 12px;
}
.insp-buscador:focus-within { border-color: var(--gold); }
.insp-buscador-ico { font-size: 14px; opacity: .75; }
.insp-buscador-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text-main); font-family: var(--font-sans);
  font-size: 14px; padding: 10px 0;
}
.insp-buscador-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 14px; padding: 4px 6px;
}
.insp-buscador-x:hover { color: var(--crimson-bright); }

.insp-conteo {
  margin: 12px 0 9px; font-family: var(--font-mono);
  font-size: 11.5px; color: var(--text-dim);
}
.insp-tarjetas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 9px; max-height: 340px; overflow-y: auto; padding-right: 4px;
}
.insp-tarjeta {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle);
  border-radius: 9px; padding: 10px 13px; cursor: pointer; text-align: left;
  transition: border-color .16s ease, transform .16s ease;
}
.insp-tarjeta:hover { border-color: var(--border-gold); transform: translateX(2px); }
.insp-tarjeta.active { border-color: var(--gold); background: rgba(201,168,76,0.09); }
.insp-t-ico { font-size: 18px; }
.insp-t-tx { display: flex; flex-direction: column; line-height: 1.35; flex: 1; min-width: 0; }
.insp-t-tx strong { font-size: 13.5px; color: var(--text-main); }
.insp-t-tx small {
  font-size: 11px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.insp-t-idx {
  font-family: var(--font-mono); font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.insp-t-idx-na { font-size: 10px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; }
.insp-vacio { margin: 14px 0 0; font-size: 13.5px; color: var(--text-secondary); }

/* --- Expediente --- */
.insp-expediente { margin-bottom: 20px; }
.insp-exp-vacio {
  display: flex; gap: 14px; align-items: center;
  border: 1px dashed var(--border-accent); border-radius: 11px;
  padding: 20px 22px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.65;
}
.insp-exp-vacio-ico { font-size: 30px; }
.insp-exp-vacio p { margin: 0; }
.insp-exp-marco {
  /* Mas opaco y con desenfoque: sobre la fotografia de fondo, el gris
     tenue de las formulas y las fuentes no se leia. */
  background: var(--bg-surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border-gold);
  border-radius: 12px; padding: 20px 22px;
}
.insp-exp-head { display: flex; gap: 14px; align-items: flex-start; }
.insp-exp-ico { font-size: 28px; }
.insp-exp-head > div { flex: 1; }
.insp-exp-nivel {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold-bright);
}
.insp-exp-nom {
  margin: 2px 0 3px; font-family: var(--font-serif);
  font-size: 22px; color: var(--text-main);
}
.insp-exp-sub { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.insp-exp-cerrar {
  background: none; border: 1px solid var(--border-subtle); border-radius: 6px;
  color: var(--text-dim); cursor: pointer; padding: 4px 9px; font-size: 13px;
}
.insp-exp-cerrar:hover { border-color: var(--crimson-bright); color: var(--crimson-bright); }

.insp-exp-cuerpo {
  display: grid; grid-template-columns: 210px 1fr; gap: 22px;
  margin-top: 16px; align-items: start;
}
.insp-exp-circulo { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.insp-circulo { width: 100%; max-width: 168px; height: auto; display: block; }
.insp-aro-num {
  font-family: var(--font-mono); font-size: 34px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.insp-aro-pie { font-family: var(--font-mono); font-size: 10px; fill: var(--text-dim); }
.insp-vered {
  border: 1px solid; border-radius: 9px; padding: 10px 12px;
  background: rgba(255,255,255,0.02); text-align: center;
}
.insp-vered strong { display: block; font-size: 13.5px; margin-bottom: 4px; }
.insp-vered span { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }

.insp-ejes-tit {
  margin: 0 0 11px; font-family: var(--font-serif);
  font-size: 15px; color: var(--gold-bright);
}
.insp-ejes-lista { list-style: none; margin: 0; padding: 0; }
.insp-eje {
  padding: 11px 0; border-top: 1px solid var(--border-subtle);
}
.insp-eje:first-child { border-top: none; padding-top: 0; }
.insp-eje-cab { display: flex; align-items: baseline; gap: 9px; }
.insp-eje-et { font-size: 13.5px; font-weight: 600; color: var(--text-main); flex: 1; }
.insp-eje-peso {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
  background: rgba(255,255,255,0.05); border-radius: 4px; padding: 2px 7px;
}
.insp-eje-v {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
}
.insp-eje-riel {
  height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06);
  overflow: hidden; margin: 7px 0 6px;
}
.insp-eje-barra {
  display: block; height: 100%; border-radius: 4px;
  background: var(--gold-gradient);
}
.insp-eje-crudo {
  margin: 0 0 3px; font-family: var(--font-mono);
  font-size: 11.5px; color: var(--cyan);
}
.insp-eje-expl { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }

.insp-ident {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px; margin-top: 18px;
}
.insp-ident-c {
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px;
}
.insp-ident-k {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text-dim);
}
.insp-ident-v { font-size: 13px; color: var(--text-main); font-weight: 600; }

.insp-nota {
  margin-top: 11px; padding: 11px 13px; border-radius: 8px;
  background: rgba(255,255,255,0.03); border-left: 3px solid var(--border-accent);
  font-size: 13px; line-height: 1.65; color: var(--text-secondary);
}
.insp-formula {
  margin-top: 16px; padding: 13px 15px; border-radius: 9px;
  background: rgba(78,205,196,0.06); border: 1px solid rgba(78,205,196,0.2);
  font-size: 12.5px; line-height: 1.7; color: var(--text-secondary);
}
.insp-formula-det {
  display: block; margin-top: 6px; font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.7; color: var(--text-secondary);
}
.insp-formula-det b { color: var(--cyan); font-weight: 600; }

.insp-sin-indice {
  margin: 16px 0 0; padding: 13px 15px; border-radius: 9px;
  background: rgba(201,168,76,0.07); border: 1px solid rgba(201,168,76,0.22);
  font-size: 13px; line-height: 1.7; color: var(--text-secondary);
}
.insp-pilares {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-top: 14px;
}
.insp-pilar {
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle);
  border-radius: 9px; padding: 12px 13px; display: flex; flex-direction: column; gap: 5px;
}
.insp-pilar-t { font-size: 12.5px; font-weight: 700; color: var(--text-main); }
.insp-pilar-v {
  font-family: var(--font-mono); font-size: 13px; color: var(--gold-bright); line-height: 1.45;
}
.insp-pilar-d { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }

/* Nivel federal del inspector: cuatro preguntas con semáforo. */
.insp-fed-resumen {
  margin-top: 14px; padding: 12px 14px; border-radius: 9px; border: 1px solid;
  background: rgba(255,255,255,0.03); display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}
.insp-fed-resumen strong { font-size: 14.5px; }
.insp-fed-senales { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.insp-fed-senal {
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-left: 4px solid;
  border-radius: 9px; padding: 12px 14px; display: flex; flex-direction: column; gap: 5px;
}
.insp-fed-q { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.insp-fed-v { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.insp-fed-d { font-size: 12.8px; line-height: 1.65; color: var(--text-secondary); }
.insp-fed-grupos { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-secondary); }
.insp-fed-exps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.insp-fed-exp {
  font: inherit; font-size: 12px; cursor: pointer; padding: 5px 10px; border-radius: 999px;
  background: rgba(201,168,76,0.1); border: 1px solid var(--border-gold); color: var(--gold-bright);
}
.insp-fed-exp:hover, .insp-fed-exp:focus-visible { background: rgba(201,168,76,0.2); }

/* Incongruencias: dos documentos oficiales que no dicen lo mismo. Va
   arriba del expediente porque explicarlas es obligacion de la autoridad. */
.insp-inc {
  margin-top: 14px; padding: 14px 16px; border-radius: 11px;
  border: 1px solid var(--crimson-bright); background: rgba(220,53,69,0.07);
}
.insp-inc-tit { margin: 0 0 6px; font-family: var(--font-serif); font-size: 17px; color: var(--text-main); }
.insp-inc-intro { margin: 0 0 10px; font-size: 13px; line-height: 1.65; color: var(--text-secondary); }
.insp-inc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.insp-inc-it {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 14px;
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-left: 4px solid;
  border-radius: 8px; padding: 10px 12px;
}
.insp-inc-tema { grid-column: 1 / -1; font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.insp-inc-par { display: flex; flex-direction: column; gap: 1px; }
.insp-inc-doc { font-size: 11.5px; color: var(--text-secondary); }
.insp-inc-par b, .insp-inc-dif b { font-family: var(--font-mono); font-size: 13.5px; color: var(--text-main); }
.insp-inc-dif { font-size: 12.5px; color: var(--text-secondary); align-self: end; }
.insp-inc-nota { grid-column: 1 / -1; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }

/* Filtros de la lista del inspector */
.insp-vistas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.insp-vista {
  font: inherit; font-size: 12px; cursor: pointer; padding: 6px 11px; border-radius: 999px;
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.insp-vista b { font-family: var(--font-mono); color: var(--text-main); margin-left: 3px; }
.insp-vista:hover, .insp-vista:focus-visible { border-color: var(--border-gold); }
.insp-vista.active { border-color: var(--gold); background: rgba(201,168,76,0.12); color: var(--text-main); }
.insp-vista-d { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.insp-t-tx small.insp-t-extra { color: var(--text-secondary); white-space: normal; }
.insp-t-tx small.insp-t-sem { font-size: 10.5px; }
.insp-mas { margin-top: 10px; }
.insp-poderes {
  margin-top: 14px; padding: 14px 16px; border-radius: 11px;
  border: 1px solid var(--border-subtle); background: var(--bg-card-alt);
}
.insp-poderes-tit { margin: 0 0 8px; font-family: var(--font-serif); font-size: 17px; color: var(--text-main); }
.insp-poderes .insp-ident { margin-top: 0; }
.insp-poderes-nota { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.insp-asf-lista { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.insp-asf-lista li { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

.insp-acciones {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle);
}
.insp-fuentes { font-size: 11.5px; line-height: 1.6; color: var(--text-secondary); flex: 1; min-width: 220px; }

/* Separador que anuncia el tercer paso, el contraste de afirmaciones. */
.insp-sep {
  display: flex; gap: 13px; align-items: flex-start;
  margin: 26px 0 16px; padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.insp-sep-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-gradient); color: #0c0f16;
  font-family: var(--font-mono); font-size: 14px; font-weight: 800;
}
.insp-sep-tit {
  margin: 0 0 3px; font-family: var(--font-serif);
  font-size: 19px; color: var(--text-main);
}
.insp-sep-sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 900px) {
  .insp-pasos, .insp-niveles { grid-template-columns: 1fr; }
  .insp-exp-cuerpo { grid-template-columns: 1fr; }
  .insp-exp-circulo { max-width: 260px; margin: 0 auto; }
}

/* ==========================================================================
   SUBPESTANA 1.4, SEGUNDA PARTE: EL PAQUETE ECONOMICO 2027
   ========================================================================== */

.pe-hero { margin-top: 3.5rem; }
.pe-et {
  display: block; font-family: var(--font-sans); font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 0.35rem;
}
.pe-fuente-nota {
  margin: 0.9rem 0 0; font-family: var(--font-sans); font-size: 0.78rem;
  line-height: 1.6; color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle); padding-top: 0.7rem;
}

/* --- 5. Itinerario -------------------------------------------------------- */
.pe-itin { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pe-itin-paso {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); margin-bottom: 0.55rem; overflow: hidden;
}
.pe-itin-paso.abierto { border-color: var(--border-gold); }
.pe-itin-cab {
  display: grid; width: 100%; text-align: left; cursor: pointer;
  grid-template-columns: 2.1rem 9.5rem 1fr 13rem 1.6rem;
  align-items: center; gap: 0.75rem;
  background: none; border: 0; padding: 0.8rem 1rem; color: inherit;
}
.pe-itin-cab:hover { background: var(--bg-card-hover); }
.pe-itin-n {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono);
  font-size: 0.78rem; background: var(--gold-glow); color: var(--text-gold);
  border: 1px solid var(--border-gold);
}
.pe-itin-fecha {
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-gold);
  font-weight: 600;
}
.pe-itin-hito { font-family: var(--font-serif); font-size: 1rem; color: var(--text-main); }
.pe-itin-quien {
  font-family: var(--font-sans); font-size: 0.76rem; color: var(--text-secondary);
  text-align: right;
}
.pe-itin-mas {
  font-family: var(--font-mono); font-size: 1.15rem; color: var(--text-secondary);
  text-align: center;
}
.pe-itin-cuerpo { padding: 0 1rem 1rem 3.85rem; }
.pe-itin-ley {
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--cyan);
  margin: 0 0 0.5rem;
}
.pe-itin-texto {
  font-family: var(--font-body); font-size: 0.93rem; line-height: 1.65;
  color: var(--text-main); margin: 0 0 0.75rem;
}
.pe-itin-ciego {
  margin: 0; padding: 0.65rem 0.85rem; border-radius: 8px;
  background: var(--bg-card-alt); border-left: 3px solid var(--amber);
  font-family: var(--font-body); font-size: 0.88rem; line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Tablas comunes de la seccion ---------------------------------------- */
.pe-tabla-marco {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  overflow-x: auto; background: var(--bg-card);
}
.pe-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; }
.pe-tabla col.c-var { width: 38%; }
.pe-tabla col.c-n { width: 15.5%; }
.pe-tabla col.c-serie { width: 26%; }
.pe-tabla thead th {
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary); text-align: right;
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border-accent);
  background: var(--bg-card-alt); position: sticky; top: 0;
}
.pe-tabla thead th:first-child { text-align: left; }
.pe-tabla tbody th {
  text-align: left; padding: 0.6rem 0.8rem; font-weight: 500;
  border-bottom: 1px solid var(--border-subtle); vertical-align: top;
}
.pe-tabla tbody td {
  text-align: right; padding: 0.6rem 0.8rem; font-family: var(--font-mono);
  font-size: 0.85rem; color: var(--text-main);
  border-bottom: 1px solid var(--border-subtle); vertical-align: top;
}
.pe-tabla tbody tr:hover { background: var(--bg-card-hover); }
.pe-tabla .pe-destaca { color: var(--text-gold); font-weight: 600; }
.pe-tabla th.pe-destaca-col { color: var(--text-gold); }
.pe-var {
  display: block; font-family: var(--font-body); font-size: 0.93rem;
  color: var(--text-main);
}
.pe-uni {
  display: block; font-family: var(--font-sans); font-size: 0.7rem;
  color: var(--text-secondary); margin-top: 0.1rem;
}
.pe-nota-var {
  display: block; font-family: var(--font-body); font-size: 0.78rem;
  color: var(--text-secondary); margin-top: 0.3rem; line-height: 1.5;
}

/* --- 6b. Finanzas publicas ------------------------------------------------ */
.pe-fin-grupo { margin-top: 1.6rem; }
.pe-fin-tit {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-gold); margin: 0 0 0.7rem;
}
.pe-fin-rejilla {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
}
.pe-fin-tarjeta {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); padding: 0.85rem 0.95rem;
  border-top: 3px solid var(--emerald);
}
.pe-fin-tarjeta.neg { border-top-color: var(--crimson-bright); }
.pe-fin-nom {
  margin: 0 0 0.4rem; font-family: var(--font-sans); font-size: 0.8rem;
  color: var(--text-secondary); font-weight: 600;
}
.pe-fin-cifra {
  margin: 0; font-family: var(--font-mono); font-size: 1.02rem;
  color: var(--text-main); font-weight: 600;
}
.pe-fin-pib {
  margin: 0.25rem 0 0.5rem; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--text-gold); display: flex; justify-content: space-between; gap: 0.5rem;
}
.pe-fin-ant { color: var(--text-secondary); }
.pe-fin-d {
  margin: 0; font-family: var(--font-body); font-size: 0.83rem;
  line-height: 1.55; color: var(--text-secondary);
}

/* --- 7. Gasto ------------------------------------------------------------- */
.pe-sub { margin-top: 2rem; }
.pe-sub-tit {
  font-family: var(--font-serif); font-size: 1.12rem; color: var(--text-main);
  margin: 0 0 0.35rem;
}
.pe-sub-sub {
  font-family: var(--font-body); font-size: 0.9rem; line-height: 1.6;
  color: var(--text-secondary); margin: 0 0 1rem;
}
.pe-func { display: grid; gap: 0.5rem; }
.pe-func-fila {
  display: grid; align-items: center; gap: 0.5rem 0.8rem;
  grid-template-columns: 15rem 1fr 8rem 6.5rem;
  grid-template-areas: "nom barra m var" "d d d d";
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); padding: 0.75rem 0.9rem;
}
.pe-func-nom { grid-area: nom; font-family: var(--font-body); font-size: 0.92rem; color: var(--text-main); }
.pe-func-barra {
  grid-area: barra; height: 12px; border-radius: 6px;
  background: var(--bg-card-alt); overflow: hidden;
}
.pe-func-relleno { display: block; height: 100%; background: var(--gold-gradient); }
.pe-func-relleno.baja { background: linear-gradient(90deg, var(--crimson), var(--crimson-bright)); }
.pe-func-m { grid-area: m; text-align: right; font-family: var(--font-mono); font-size: 0.9rem; color: var(--text-main); }
.pe-func-var { grid-area: var; text-align: right; font-family: var(--font-mono); font-size: 0.8rem; }
.pe-func-var.sube { color: var(--emerald-bright); }
.pe-func-var.baja { color: var(--crimson-bright); }
.pe-func-d {
  grid-area: d; font-family: var(--font-body); font-size: 0.83rem;
  line-height: 1.55; color: var(--text-secondary);
  border-top: 1px dashed var(--border-subtle); padding-top: 0.5rem;
}
.pe-func-ant {
  display: block; font-family: var(--font-mono); font-size: 0.74rem;
  color: var(--text-dim); margin-top: 0.25rem;
}

.pe-lista { display: grid; gap: 0.3rem; }
.pe-lista-fila {
  display: grid; align-items: center; gap: 0.6rem;
  grid-template-columns: 6.5rem 16rem 1fr 8.5rem;
  padding: 0.42rem 0.7rem; border-radius: 8px; background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}
.pe-lista-g {
  font-family: var(--font-sans); font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
  border: 1px solid var(--border-subtle); border-radius: 999px;
  padding: 0.15rem 0.45rem; text-align: center;
}
.pe-lista-n { font-family: var(--font-body); font-size: 0.88rem; color: var(--text-main); }
.pe-lista-d {
  display: block; font-family: var(--font-body); font-size: 0.76rem;
  color: var(--text-secondary); margin-top: 0.12rem;
}
.pe-lista-barra { height: 9px; border-radius: 5px; background: var(--bg-card-alt); overflow: hidden; }
.pe-lista-relleno { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.pe-lista-relleno.inv { background: linear-gradient(90deg, var(--amber), var(--orange)); }
.pe-lista-m { text-align: right; font-family: var(--font-mono); font-size: 0.83rem; color: var(--text-main); }

/* El ancho lo anima el motor cuadro por cuadro: una transicion de CSS
   compitiendo por la misma propiedad hace que la cuenta se vea a saltos. */
.pe-func-relleno[data-anim-w],
.pe-lista-relleno[data-anim-w] { transition: none; }

/* --- 8. El simulador ------------------------------------------------------ */
.pe-esc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.pe-esc-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--bg-card); color: var(--text-secondary);
  padding: 0.42rem 0.9rem; font-family: var(--font-sans); font-size: 0.8rem;
}
.pe-esc-btn:hover { border-color: var(--border-gold); color: var(--text-main); }
.pe-esc-btn.active {
  background: var(--gold-glow); border-color: var(--border-gold);
  color: var(--text-gold); font-weight: 600;
}
.pe-esc-ico { font-size: 0.95rem; }
.pe-esc-d {
  margin: 0 0 1.1rem; font-family: var(--font-body); font-size: 0.86rem;
  color: var(--text-secondary); font-style: italic;
}
.pe-palancas {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.pe-palanca {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); padding: 0.85rem 0.95rem;
  border-left: 3px solid var(--border-subtle);
}
.pe-palanca.movida { border-left-color: var(--gold); background: var(--bg-card-alt); }
.pe-pal-cab { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; }
.pe-pal-ico { font-size: 1.05rem; }
.pe-pal-n {
  flex: 1; font-family: var(--font-sans); font-size: 0.85rem;
  color: var(--text-main); font-weight: 600; cursor: pointer;
}
.pe-pal-v {
  font-family: var(--font-mono); font-size: 1rem; color: var(--text-gold);
  font-weight: 600; min-width: 4.2rem; text-align: right;
}
.pe-pal-rango { width: 100%; accent-color: var(--gold); cursor: pointer; margin: 0; }
.pe-pal-rango:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.pe-pal-escala {
  display: flex; justify-content: space-between; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-secondary);
  margin-top: 0.2rem;
}
.pe-pal-base { color: var(--text-gold); }
.pe-pal-u {
  margin: 0.45rem 0 0; font-family: var(--font-sans); font-size: 0.72rem;
  color: var(--text-secondary);
}
.pe-pal-cita {
  margin: 0.55rem 0 0; padding: 0.5rem 0.65rem; border-radius: 7px;
  background: var(--bg-surface); border-left: 2px solid var(--cyan);
  font-family: var(--font-body); font-size: 0.79rem; line-height: 1.5;
  color: var(--text-secondary);
}
.pe-pal-porque {
  margin: 0.45rem 0 0; font-family: var(--font-body); font-size: 0.82rem;
  line-height: 1.55; color: var(--text-secondary);
}

.pe-res { margin-top: 1.3rem; }
.pe-res-fila {
  display: grid; gap: 0.7rem; margin-bottom: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.pe-res-panel {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); padding: 0.9rem 1rem;
  border-top: 3px solid var(--border-accent);
}
.pe-res-panel.mejora { border-top-color: var(--emerald-bright); }
.pe-res-panel.empeora { border-top-color: var(--crimson-bright); }
.pe-res-panel h5 {
  margin: 0 0 0.35rem; font-family: var(--font-sans); font-size: 0.78rem;
  color: var(--text-secondary); font-weight: 600;
}
.pe-res-cifra { margin: 0; font-family: var(--font-mono); font-size: 1.22rem; color: var(--text-main); font-weight: 600; }
.pe-res-pib { margin: 0.2rem 0 0; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-gold); }
.pe-res-dif { margin: 0.35rem 0 0; font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-secondary); }
.pe-res-meta {
  border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 0.9rem;
  border: 1px solid var(--border-subtle); background: var(--bg-card-alt);
}
.pe-res-meta.ok { border-left: 4px solid var(--emerald); }
.pe-res-meta.alerta { border-left: 4px solid var(--crimson-bright); }
.pe-res-meta.fuera { border-left: 4px solid var(--amber); }
.pe-res-meta-et {
  display: block; font-family: var(--font-sans); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 0.4rem;
}
.pe-res-meta p { margin: 0 0 0.4rem; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.6; color: var(--text-main); }
.pe-res-meta p:last-child { margin-bottom: 0; }
.pe-res-meta-obj { color: var(--text-secondary) !important; font-size: 0.85rem !important; }
.pe-res-tabla-marco {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  overflow-x: auto; background: var(--bg-card);
}
.pe-res-tabla {
  width: 100%; border-collapse: collapse; background: transparent; min-width: 480px;
}
.pe-res-tabla th, .pe-res-tabla td {
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 0.81rem; text-align: right;
}
.pe-res-tabla thead th {
  font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
  background: var(--bg-card-alt);
}
.pe-res-tabla tbody th { text-align: left; font-family: var(--font-body); font-size: 0.87rem; color: var(--text-main); font-weight: 500; }
.pe-res-tabla thead th:first-child { text-align: left; }
.pe-res-tabla .pos { color: var(--emerald-bright); }
.pe-res-tabla .neg { color: var(--crimson-bright); }
.pe-res-tabla tr.pe-quieta { opacity: 0.5; }
.pe-res-tabla tr.pe-res-total th, .pe-res-tabla tr.pe-res-total td {
  border-top: 2px solid var(--border-accent); border-bottom: 0;
  font-weight: 700; background: var(--bg-card-alt);
}
.pe-res-neto { font-weight: 600; }
.pe-limite {
  margin: 1.1rem 0 0; padding: 0.85rem 1rem; border-radius: 10px;
  background: var(--bg-card-alt); border-left: 4px solid var(--cyan);
  font-family: var(--font-body); font-size: 0.87rem; line-height: 1.65;
  color: var(--text-secondary);
}

/* --- 9. Medidas fiscales -------------------------------------------------- */
.pe-fis-grupo { margin-top: 1.4rem; }
.pe-fis-tit {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 0.7rem;
}
.pe-fis-mas .pe-fis-tit { color: var(--emerald-bright); }
.pe-fis-menos .pe-fis-tit { color: var(--crimson-bright); }
.pe-fis-estr .pe-fis-tit { color: var(--text-gold); }
.pe-fis-rejilla { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pe-fis-tarjeta {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); padding: 0.9rem 1rem;
}
.pe-fis-mas .pe-fis-tarjeta { border-left: 3px solid var(--emerald); }
.pe-fis-menos .pe-fis-tarjeta { border-left: 3px solid var(--crimson); }
.pe-fis-estr .pe-fis-tarjeta { border-left: 3px solid var(--gold); }
.pe-fis-ico { font-size: 1.2rem; }
.pe-fis-n { margin: 0.35rem 0 0.4rem; font-family: var(--font-serif); font-size: 1rem; color: var(--text-main); }
.pe-fis-d { margin: 0 0 0.6rem; font-family: var(--font-body); font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary); }
.pe-fis-ley { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--cyan); }

/* --- 10. Colchon y pasivos ------------------------------------------------ */
.pe-amort {
  display: grid; gap: 0.7rem; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
}
.pe-amort-tarjeta {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); padding: 0.85rem 0.95rem;
  border-top: 3px solid var(--emerald);
}
.pe-amort-tarjeta.dolares { border-top-color: var(--blue); }
.pe-amort-ico { font-size: 1.15rem; }
.pe-amort-tarjeta h5 { margin: 0.3rem 0 0.4rem; font-family: var(--font-sans); font-size: 0.83rem; color: var(--text-main); font-weight: 600; }
.pe-amort-m { margin: 0 0 0.45rem; font-family: var(--font-mono); font-size: 1.05rem; color: var(--text-gold); font-weight: 600; }
.pe-amort-d { margin: 0; font-family: var(--font-body); font-size: 0.83rem; line-height: 1.55; color: var(--text-secondary); }
.pe-amort-meta {
  margin: 0.6rem 0 0; padding: 0.6rem 0.7rem; border-radius: 8px;
  background: var(--bg-card-alt); border-left: 3px solid var(--crimson-bright);
}
.pe-amort-meta-c { font-family: var(--font-mono); font-size: 0.92rem; color: var(--text-main); font-weight: 600; }
.pe-amort-meta-p { font-family: var(--font-mono); font-size: 0.82rem; color: var(--crimson-bright); margin-left: 0.5rem; }
.pe-amort-meta-t { display: block; margin-top: 0.35rem; font-family: var(--font-body); font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); }

.pe-conting {
  display: grid; gap: 0.7rem; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.pe-cont-tarjeta {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); padding: 0.9rem 1rem;
  border-top: 3px solid var(--amber);
}
.pe-cont-cab { display: flex; align-items: flex-start; gap: 0.5rem; }
.pe-cont-ico { font-size: 1.15rem; }
.pe-cont-cab h5 { margin: 0; font-family: var(--font-serif); font-size: 1rem; color: var(--text-main); }
.pe-cont-m {
  margin: 0.55rem 0 0.5rem; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.6rem; font-family: var(--font-mono); font-size: 1.05rem;
  color: var(--text-main); font-weight: 600;
}
.pe-cont-pib { font-size: 0.83rem; color: var(--text-gold); font-weight: 500; }
.pe-cont-d { margin: 0 0 0.55rem; font-family: var(--font-body); font-size: 0.84rem; line-height: 1.6; color: var(--text-secondary); }
.pe-cont-ciego {
  margin: 0; padding: 0.6rem 0.75rem; border-radius: 8px;
  background: var(--bg-card-alt); border-left: 3px solid var(--amber);
  font-family: var(--font-body); font-size: 0.83rem; line-height: 1.55;
  color: var(--text-secondary);
}

/* --- 11. La senda --------------------------------------------------------- */
.pe-senda-tabla tbody tr.pe-senda-deterioro td:last-child { color: var(--crimson-bright); font-weight: 600; }
.pe-senda-tabla tbody tr.pe-senda-mejora td:last-child { color: var(--emerald-bright); font-weight: 600; }
.pe-senda-lectura {
  margin-top: 1rem; display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.pe-senda-lectura p {
  margin: 0; padding: 0.85rem 1rem; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--gold);
  font-family: var(--font-body); font-size: 0.89rem; line-height: 1.65;
  color: var(--text-secondary);
}

/* --- 12. Puntos ciegos ---------------------------------------------------- */
.pe-ciego {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--bg-card); margin-bottom: 0.55rem; overflow: hidden;
}
.pe-ciego.abierto { border-color: var(--border-gold); }
.pe-ciego-cab {
  display: grid; grid-template-columns: 2.1rem 1fr 1.6rem; align-items: center;
  gap: 0.75rem; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0.85rem 1rem; color: inherit;
}
.pe-ciego-cab:hover { background: var(--bg-card-hover); }
.pe-ciego-n {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono);
  font-size: 0.8rem; background: var(--crimson-glow); color: var(--crimson-bright);
  border: 1px solid var(--crimson);
}
.pe-ciego-tit { margin: 0; font-family: var(--font-serif); font-size: 1.04rem; color: var(--text-main); line-height: 1.35; }
.pe-ciego-mas { font-family: var(--font-mono); font-size: 1.15rem; color: var(--text-secondary); text-align: center; }
.pe-ciego-avance {
  margin: 0; padding: 0 1rem 0.85rem 3.85rem;
  font-family: var(--font-body); font-size: 0.85rem; line-height: 1.55;
  color: var(--text-secondary);
}
.pe-ciego-cuerpo { padding: 0 1rem 1rem 3.85rem; display: grid; gap: 0.6rem; }
.pe-ciego-bloque { padding: 0.7rem 0.9rem; border-radius: 8px; background: var(--bg-card-alt); }
.pe-ciego-bloque.dice { border-left: 3px solid var(--text-dim); }
.pe-ciego-bloque.doc { border-left: 3px solid var(--cyan); }
.pe-ciego-bloque.porque { border-left: 3px solid var(--gold); }
.pe-ciego-bloque p { margin: 0; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.65; color: var(--text-main); }
.pe-ciego-bloque.dice p { color: var(--text-secondary); font-style: italic; }
.pe-ciego-ref { margin: 0; font-family: var(--font-sans); font-size: 0.76rem; color: var(--text-secondary); }

/* --- Fuentes -------------------------------------------------------------- */
.pe-fuentes {
  margin-top: 2rem; padding: 1.2rem 1.4rem; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--gold);
}
.pe-fuentes h4 { margin: 0 0 0.8rem; font-family: var(--font-serif); font-size: 1.08rem; color: var(--text-main); }
.pe-fuentes ol { margin: 0 0 0.9rem; padding-left: 1.3rem; }
.pe-fuentes li { font-family: var(--font-body); font-size: 0.87rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: 0.5rem; }
.pe-fuentes-pie {
  margin: 0; padding-top: 0.8rem; border-top: 1px solid var(--border-subtle);
  font-family: var(--font-body); font-size: 0.87rem; line-height: 1.65;
  color: var(--text-secondary);
}

/* --- Pantallas angostas --------------------------------------------------- */
@media (max-width: 860px) {
  .pe-itin-cab { grid-template-columns: 1.9rem 1fr 1.5rem; grid-template-areas: "n fecha mas" ". hito hito" ". quien quien"; row-gap: 0.2rem; }
  .pe-itin-n { grid-area: n; }
  .pe-itin-fecha { grid-area: fecha; }
  .pe-itin-hito { grid-area: hito; }
  .pe-itin-quien { grid-area: quien; text-align: left; }
  .pe-itin-mas { grid-area: mas; }
  .pe-itin-cuerpo, .pe-ciego-cuerpo, .pe-ciego-avance { padding-left: 1rem; }
  .pe-func-fila { grid-template-columns: 1fr 7rem; grid-template-areas: "nom m" "barra barra" "var var" "d d"; }
  .pe-func-var { text-align: left; }
  .pe-lista-fila { grid-template-columns: 1fr 7.5rem; grid-template-areas: "g g" "n m" "barra barra"; row-gap: 0.25rem; }
  .pe-lista-g { grid-area: g; justify-self: start; }
  .pe-lista-n { grid-area: n; }
  .pe-lista-m { grid-area: m; }
  .pe-lista-barra { grid-area: barra; }
}


/* ==========================================================================
   TASTE SKILL: PILARES CIVICOS, PASE AUDITOR & MODAL DE MONETIZACION
   ========================================================================== */
.hero-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.hero-pillar-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.hero-pillar-btn:hover {
  transform: translateY(-1.5px);
}

.hero-pillar-btn:active {
  transform: scale(0.975);
}

.hero-pillar-calc {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.22) 0%, rgba(201, 168, 76, 0.08) 100%);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.12);
}
.hero-pillar-calc:hover {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.35) 0%, rgba(201, 168, 76, 0.15) 100%);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.25);
}

.hero-pillar-audit {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.18) 0%, rgba(78, 205, 196, 0.06) 100%);
  border: 1px solid rgba(78, 205, 196, 0.38);
  color: var(--cyan);
  box-shadow: 0 4px 14px rgba(78, 205, 196, 0.10);
}
.hero-pillar-audit:hover {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.28) 0%, rgba(78, 205, 196, 0.12) 100%);
  box-shadow: 0 6px 20px rgba(78, 205, 196, 0.22);
}

.hero-pase-btn {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.20) 0%, rgba(230, 126, 34, 0.10) 100%);
  border: 1px solid rgba(243, 156, 18, 0.45);
  color: #f8c255;
  box-shadow: 0 4px 14px rgba(243, 156, 18, 0.12);
}
.hero-pase-btn:hover {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.32) 0%, rgba(230, 126, 34, 0.18) 100%);
  box-shadow: 0 6px 22px rgba(243, 156, 18, 0.25);
}

/* Modal del Pase Civico */
.civic-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 5, 8, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.civic-modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  max-width: 640px;
  width: 100%;
  padding: 30px 32px;
  position: relative;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7), 0 0 35px var(--gold-glow);
}

.civic-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.2s, color 0.2s;
}
.civic-modal-close:hover { background: rgba(231, 76, 60, 0.2); color: var(--crimson-bright); }

.civic-price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0 20px;
}
@media (max-width: 580px) {
  .civic-price-grid { grid-template-columns: 1fr; }
}

.civic-plan-card {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  transition: border-color 0.25s, transform 0.2s;
}
.civic-plan-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.civic-plan-popular {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.08) 0%, var(--bg-card-alt) 100%);
}

.civic-caguama-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(243, 156, 18, 0.15);
  color: #f8c255;
  border: 1px solid rgba(243, 156, 18, 0.35);
  padding: 4px 10px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Numeros tabulares para finanzas y tablas */
.tel-item strong, .macro-num, .cifra, .cc-rel-cif, .stat-val, .money-val, .num-tabular,
.tabbar .num, .prov span, .iw-status, .chip {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}


/* ==========================================================================
   ESTILOS: TICKET CIVICO DEL CONTRIBUYENTE & EXPEDIENTES FORENSES ASF
   ========================================================================== */
.civic-ticket-wrapper {
  margin: 32px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.civic-ticket-card {
  width: 100%;
  max-width: 580px;
  background: #0d0f17;
  border: 1px dashed var(--border-gold);
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 25px rgba(201, 168, 76, 0.08);
  font-family: var(--font-mono);
  color: var(--text-main);
  position: relative;
}

[data-theme="light"] .civic-ticket-card {
  background: #ffffff;
  border: 1px dashed var(--border-gold);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08), 0 0 20px rgba(201, 168, 76, 0.12);
}

.civic-ticket-header {
  text-align: center;
  border-bottom: 1px dashed var(--border-subtle);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.civic-ticket-stamp {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-bright);
  border: 1px solid var(--border-gold);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.civic-ticket-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 4px;
}

.civic-ticket-meta {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.civic-ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .civic-ticket-row {
  border-bottom: 1px dotted rgba(0, 0, 0, 0.08);
}

.civic-ticket-row.ticket-total {
  border-top: 2px dashed var(--border-gold);
  border-bottom: 2px dashed var(--border-gold);
  padding: 10px 0;
  margin-top: 12px;
  font-weight: 700;
  font-size: 14px;
  color: var(--gold-bright);
}

.civic-ticket-footer {
  text-align: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.civic-ticket-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* ==========================================================================
   EXPEDIENTES FORENSES ASF (DOSSIERS DE FISCALIZACION)
   ========================================================================== */
.forensic-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.forensic-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.forensic-chip-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.forensic-chip-btn:hover {
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold-bright);
  border-color: var(--border-gold);
}

.forensic-chip-btn.active {
  background: var(--gold);
  color: #0c0f16;
  font-weight: 700;
  border-color: var(--gold);
}

.forensic-dossiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.forensic-dossier-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.25s;
}

.forensic-dossier-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-gold);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 18px var(--gold-glow);
}

.forensic-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.forensic-id-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.5px;
}

.forensic-status-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
}

.forensic-status-penal {
  background: rgba(231, 76, 60, 0.16);
  color: var(--crimson-bright);
  border: 1px solid rgba(231, 76, 60, 0.35);
}

.forensic-status-obs {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.forensic-status-alerta {
  background: rgba(56, 189, 248, 0.16);
  color: var(--cyan);
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.forensic-dossier-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text-main);
  line-height: 1.3;
  margin: 0 0 6px;
}

.forensic-dossier-dep {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.forensic-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.forensic-metric-item {
  font-family: var(--font-mono);
}

.forensic-metric-label {
  font-size: 9.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.forensic-metric-val {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.forensic-quote-box {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  border-left: 3px solid var(--border-gold);
  padding-left: 10px;
  margin: 0 0 16px;
  font-style: italic;
}

.forensic-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.forensic-btn-asf {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}

.forensic-btn-asf:hover {
  background: rgba(255, 255, 255, 0.12);
}

.forensic-btn-dossier {
  flex: 1;
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.18) 0%, rgba(201, 168, 76, 0.12) 100%);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.forensic-btn-dossier:hover {
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.3) 0%, rgba(201, 168, 76, 0.2) 100%);
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.22);
}

/* ==========================================================================
   ESTILOS ADICIONALES: RADAR FORENSE EN TIEMPO REAL & ESQUEMAS CÍVICOS
   Inspirados en: Civio (¿Dónde van mis impuestos?), Serenata de Amor y USAspending
   ========================================================================== */

/* Barra de Alerta Forense & Telemetría en Tiempo Real */
.radar-alerta-bar {
  background: linear-gradient(90deg, rgba(20, 10, 15, 0.98) 0%, rgba(15, 18, 28, 0.98) 50%, rgba(20, 15, 10, 0.98) 100%);
  border-bottom: 1px solid rgba(231, 76, 60, 0.35);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  position: relative;
  z-index: 950;
  backdrop-filter: blur(10px);
}

[data-theme="light"] .radar-alerta-bar {
  background: linear-gradient(90deg, #fff5f5 0%, #fcfbf7 50%, #fef9ed 100%);
  border-bottom: 1px solid rgba(231, 76, 60, 0.25);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.radar-alerta-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.radar-badge-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.4);
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
}

[data-theme="light"] .radar-badge-pulse {
  background: rgba(231, 76, 60, 0.1);
  border-color: rgba(231, 76, 60, 0.3);
}

.pulsing-radar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e74c3c;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
  animation: radarPulse 1.6s infinite;
}

@keyframes radarPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.radar-tag {
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ff6b6b;
  text-transform: uppercase;
}

[data-theme="light"] .radar-tag {
  color: #c0392b;
}

.radar-timer {
  color: var(--gold-bright);
  font-weight: 700;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 8px;
}

[data-theme="light"] .radar-timer {
  border-left-color: rgba(0, 0, 0, 0.15);
  color: #b8860b;
}

.radar-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 5px 11px;
  transition: all 0.2s ease;
}

.radar-stat-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-gold);
}

[data-theme="light"] .radar-stat-item {
  background: #ffffff;
  border-color: #e5e7eb;
}

[data-theme="light"] .radar-stat-item:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.radar-stat-lbl {
  color: var(--text-dim);
  font-size: 11px;
}

.radar-stat-val {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.val-amber { color: #f39c12; }
.val-red { color: #e74c3c; }
.val-gold { color: var(--gold-bright); }

[data-theme="light"] .val-amber { color: #d35400; }
[data-theme="light"] .val-red { color: #c0392b; }
[data-theme="light"] .val-gold { color: #b8860b; }

.radar-stat-rate {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.radar-stat-item.highlight-item {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.05));
  border-color: var(--gold);
}

/* Esquemas Visuales Proporcionales (USAspending & Civio style) */
.civic-flow-schematic {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 22px;
  margin: 20px 0 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.civic-flow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.civic-flow-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--gold-bright);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.civic-flow-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.civic-flow-step {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.civic-flow-step:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.civic-step-num {
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--gold);
  color: #0c0e15;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
}

.civic-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin: 6px 0 4px;
}

.civic-step-amount {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--gold-bright);
  margin-bottom: 8px;
}

.civic-step-desc {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Barra Proporcional Apilada */
.stacked-progress-container {
  margin-top: 14px;
}

.stacked-progress-bar {
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.stacked-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #ffffff;
  transition: opacity 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

.stacked-segment:hover {
  opacity: 0.88;
}

.seg-programable { background: #27ae60; }
.seg-no-prog-deuda { background: #e74c3c; }
.seg-no-prog-ramo28 { background: #f39c12; }
.seg-otros { background: #34495e; }

.stacked-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 11px;
  font-family: var(--font-mono);
}

.stacked-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.legend-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Tabular numbers for financial and live telemetry elements (USAspending style) */
.radar-stat-val,
.civic-step-amount,
.civio-equiv-val,
.sim-tel-val,
.sim-kpi-val,
.tel-item strong,
.stacked-segment,
.radar-timer {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Microinteracciones táctiles y transiciones */
.hero-pillar-btn:active,
.tabbar button:active,
.subtab-btn:active,
.chip:active,
.forensic-chip-btn:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* Cajas de Equivalencias Ciudadanas (Civio "¿A qué equivale?") */
.civio-equiv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.civio-equiv-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.civio-equiv-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .civio-equiv-card {
  background: #ffffff;
  border-color: rgba(160, 120, 30, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .civio-equiv-card:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.civio-equiv-ico-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.civio-equiv-ico {
  font-size: 22px;
  line-height: 1;
}

.civio-equiv-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--gold-bright);
  letter-spacing: -0.2px;
}

.civio-equiv-lbl {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-top: 4px;
}

/* Glassmorphism y Transparencias para contemplar el fondo urbano (USAspending Explorer style) */
.site-header,
.tabbar,
.tabintro,
.erario-bloque,
.sim-bloque,
.civic-flow-schematic,
.civio-equiv-card,
.panel-stat-box,
.casilla-bloque,
.forensic-dossier-card,
.cc-bloque,
.site-footer,
.sim-parte-panel,
.radar-hacendario-hub {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ==========================================================================
   RADAR HACENDARIO EN VIVO (2 LÍNEAS INTEGRADAS: TELEMETRÍA & ERARIO)
   ========================================================================== */
.radar-hacendario-hub {
  position: relative;
  z-index: 950;
  background: rgba(12, 14, 21, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-gold);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .radar-hacendario-hub {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(160, 120, 30, 0.25);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Línea 1: Telemetría viva de pasivos acumulados en sesión */
.radar-row-live {
  max-width: 1440px;
  margin: 0 auto;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="light"] .radar-row-live {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

.radar-live-items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* ==========================================================================
   CONTROLES Y DESGLOSE DEL RADAR HACENDARIO EN VIVO (MOSTRAR / DESGLOSAR / OCULTAR)
   ========================================================================== */
.radar-brand-wrap {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.radar-controls-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.radar-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-main, #f1f5f9);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
}

.radar-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--border-gold, #c9a84c);
  color: #ffffff;
  transform: translateY(-1px);
}

.radar-ctrl-btn:active {
  transform: translateY(0);
}

.radar-ctrl-btn.is-hidden-mode {
  background: rgba(231, 76, 60, 0.18);
  border-color: rgba(231, 76, 60, 0.45);
  color: #fca5a5;
}

.radar-ctrl-btn.is-hidden-mode:hover {
  background: rgba(231, 76, 60, 0.28);
  border-color: #f87171;
  color: #ffffff;
}

.radar-ctrl-btn.radar-ctrl-desglose {
  background: rgba(201, 168, 76, 0.14);
  border-color: rgba(201, 168, 76, 0.38);
  color: var(--gold-bright, #f3cf65);
}

.radar-ctrl-btn.radar-ctrl-desglose:hover {
  background: rgba(201, 168, 76, 0.26);
  border-color: var(--gold-bright, #f3cf65);
  color: #ffffff;
}

.radar-ctrl-btn.radar-ctrl-desglose.active {
  background: var(--gold, #c9a84c);
  color: #0c0e15;
  font-weight: 700;
  border-color: var(--gold-bright, #f3cf65);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}

[data-theme="light"] .radar-ctrl-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .radar-ctrl-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
}

[data-theme="light"] .radar-ctrl-btn.is-hidden-mode {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

[data-theme="light"] .radar-ctrl-btn.radar-ctrl-desglose {
  background: #fef3c7;
  border-color: #fde68a;
  color: #b45309;
}

[data-theme="light"] .radar-ctrl-btn.radar-ctrl-desglose:hover {
  background: #fde68a;
  border-color: #d97706;
  color: #78350f;
}

[data-theme="light"] .radar-ctrl-btn.radar-ctrl-desglose.active {
  background: #b45309;
  color: #ffffff;
  border-color: #92400e;
  box-shadow: 0 2px 8px rgba(180, 83, 9, 0.25);
}

/* Ocultar estadísticas con transición suave */
.radar-live-items {
  transition: opacity 0.22s ease, max-height 0.22s ease;
}

.radar-live-items.radar-stats-hidden {
  display: none !important;
}

/* Panel Desplegable de Desglose Analítico */
.radar-desglose-drawer {
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.98) 0%, rgba(12, 16, 28, 0.98) 100%);
  border-top: 1px solid rgba(201, 168, 76, 0.25);
  border-bottom: 2px solid var(--border-gold, #c9a84c);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: radarDrawerSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes radarDrawerSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 1400px;
  }
}

[data-theme="light"] .radar-desglose-drawer {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-top-color: rgba(201, 168, 76, 0.3);
  border-bottom-color: #c9a84c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.radar-desglose-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 24px;
}

.radar-desglose-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .radar-desglose-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.radar-desglose-title-group {
  flex: 1;
}

.radar-desglose-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gold-bright, #f3cf65);
  margin-bottom: 4px;
}

[data-theme="light"] .radar-desglose-badge {
  color: #b45309;
}

.radar-desglose-title {
  margin: 4px 0 6px;
  font-family: var(--font-serif, "Playfair Display", serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-main, #f8fafc);
  letter-spacing: -0.2px;
}

[data-theme="light"] .radar-desglose-title {
  color: #0f172a;
}

.radar-desglose-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim, #94a3b8);
  line-height: 1.5;
  max-width: 900px;
}

[data-theme="light"] .radar-desglose-sub {
  color: #475569;
}

.radar-desglose-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-main, #e2e8f0);
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radar-desglose-close-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.5);
  color: #fca5a5;
}

[data-theme="light"] .radar-desglose-close-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .radar-desglose-close-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
}

/* Tira de Ritmos Temporales */
.radar-rates-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.radar-rate-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.radar-rate-box:hover {
  transform: translateY(-2px);
  border-color: var(--border-gold, #c9a84c);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .radar-rate-box {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .radar-rate-box:hover {
  border-color: #cbd5e1;
  background: #fafafa;
}

.radar-rate-box.highlight-rate {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.12), rgba(201, 168, 76, 0.04));
  border-color: var(--border-gold, #c9a84c);
}

[data-theme="light"] .radar-rate-box.highlight-rate {
  background: linear-gradient(135deg, #fef9c3, #fef08a);
  border-color: #fde047;
}

.radar-rate-tag {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #94a3b8);
}

[data-theme="light"] .radar-rate-tag {
  color: #64748b;
}

.radar-rate-num {
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.radar-rate-unit {
  font-size: 11px;
  color: var(--text-dim, #94a3b8);
}

[data-theme="light"] .radar-rate-unit {
  color: #64748b;
}

/* Rejilla de Columnas de Desglose */
.radar-desglose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.radar-desglose-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.radar-desglose-card:hover {
  border-color: var(--border-gold, #c9a84c);
  background: rgba(255, 255, 255, 0.045);
}

[data-theme="light"] .radar-desglose-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .radar-desglose-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.radar-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.radar-card-icon {
  font-size: 22px;
  line-height: 1;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .radar-card-icon {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.radar-card-title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main, #f8fafc);
}

[data-theme="light"] .radar-card-title {
  color: #0f172a;
}

.radar-card-rate {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 700;
  display: block;
}

.radar-card-body {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-dim, #94a3b8);
  line-height: 1.5;
  flex: 1;
}

[data-theme="light"] .radar-card-body {
  color: #475569;
}

.radar-card-meta {
  font-size: 11px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-theme="light"] .radar-card-meta {
  border-top-color: #f1f5f9;
}

.radar-meta-lbl {
  font-family: var(--font-mono, monospace);
  color: var(--gold, #c9a84c);
  font-weight: 700;
}

[data-theme="light"] .radar-meta-lbl {
  color: #b45309;
}

.radar-meta-val {
  color: var(--text-dim, #94a3b8);
}

[data-theme="light"] .radar-meta-val {
  color: #64748b;
}

.radar-card-action {
  margin-top: 4px;
}

.radar-link-btn {
  background: transparent;
  border: 1px solid var(--border-gold, #c9a84c);
  color: var(--gold-bright, #f3cf65);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
}

.radar-link-btn:hover {
  background: var(--gold, #c9a84c);
  color: #0c0e15;
}

[data-theme="light"] .radar-link-btn {
  border-color: #d97706;
  color: #b45309;
}

[data-theme="light"] .radar-link-btn:hover {
  background: #b45309;
  color: #ffffff;
}

/* Barra de Acumulado de Sesión */
.radar-session-acc-bar {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 8px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

[data-theme="light"] .radar-session-acc-bar {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.radar-session-acc-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radar-acc-icon {
  font-size: 20px;
}

.radar-acc-title {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--gold-bright, #f3cf65);
}

[data-theme="light"] .radar-acc-title {
  color: #b45309;
}

.radar-acc-desc {
  display: block;
  font-size: 11.5px;
  color: var(--text-dim, #94a3b8);
}

[data-theme="light"] .radar-acc-desc {
  color: #64748b;
}

.radar-session-acc-metrics {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.radar-acc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .radar-acc-stat {
  background: #ffffff;
  border-color: #e2e8f0;
}

.radar-acc-stat.total-stat {
  background: rgba(201, 168, 76, 0.1);
  border-color: rgba(201, 168, 76, 0.3);
}

[data-theme="light"] .radar-acc-stat.total-stat {
  background: #fef3c7;
  border-color: #fde68a;
}

.acc-lbl {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: var(--text-dim, #94a3b8);
}

[data-theme="light"] .acc-lbl {
  color: #64748b;
}

.acc-val {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 800;
}

.val-cyan { color: #38bdf8; }
[data-theme="light"] .val-cyan { color: #0284c7; }

/* Pie del Desglose */
.radar-desglose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .radar-desglose-footer {
  border-top-color: #f1f5f9;
}

.radar-desglose-tip {
  font-size: 12px;
  color: var(--text-dim, #94a3b8);
}

[data-theme="light"] .radar-desglose-tip {
  color: #64748b;
}

.radar-desglose-fold-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-main, #e2e8f0);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radar-desglose-fold-btn:hover {
  background: rgba(201, 168, 76, 0.2);
  border-color: var(--border-gold, #c9a84c);
  color: #ffffff;
}

[data-theme="light"] .radar-desglose-fold-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .radar-desglose-fold-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
}

@media (max-width: 768px) {
  .radar-brand-wrap {
    width: 100%;
    justify-content: space-between;
  }
  .radar-controls-cluster {
    flex-wrap: wrap;
  }
  .radar-rates-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .radar-desglose-grid {
    grid-template-columns: 1fr;
  }
  .radar-session-acc-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Línea 2: Datos e indicadores oficiales circulando en tiempo real */
.radar-row-telemetry {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 5px 0;
  background: rgba(0, 0, 0, 0.25);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

[data-theme="light"] .radar-row-telemetry {
  background: rgba(0, 0, 0, 0.03);
}

.radar-telemetry-track {
  display: inline-flex;
  gap: 30px;
  flex: 0 0 auto;
  will-change: transform;
  animation: scrollTicker 60s linear infinite;
}

.radar-telemetry-track:hover {
  animation-play-state: paused;
}


/* ==========================================================================
   USASPENDING EXPLORER LAYOUT & TOP NAVIGATION
   ========================================================================== */
.site-top-nav {
  position: sticky;
  top: 0;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px;
  background: rgba(10, 13, 20, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-gold);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  gap: 16px;
  flex-wrap: wrap;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="light"] .site-top-nav {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(160, 120, 30, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.nav-brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}

.nav-brand-logo {
  font-size: 24px;
  line-height: 1;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
}

.nav-brand-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--gold-bright);
  letter-spacing: -0.3px;
  line-height: 1.1;
}

[data-theme="light"] .nav-brand-title {
  color: var(--navy);
}

.nav-brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.nav-center-links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.nav-enc-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
}

.nav-enc-link:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--border-gold);
  color: var(--gold-bright);
}

[data-theme="light"] .nav-enc-link:hover {
  background: rgba(0, 43, 91, 0.08);
  color: var(--navy);
}

.nav-enc-link .caret {
  font-size: 10px;
  opacity: 0.7;
}

.nav-right-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.nav-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-search-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.search-command-bar.nav-search-bar {
  max-width: 360px;
  width: 100%;
  margin-top: 0;
  position: relative;
}

.search-command-bar.nav-search-bar .search-input-box {
  width: 100%;
  height: 28px;
  background: rgba(14, 18, 27, 0.82);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 4px 14px 4px 32px;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 11px;
  outline: none;
  transition: all 0.25s ease;
}

.search-command-bar.nav-search-bar .search-input-box:focus {
  border-color: var(--gold-bright);
  box-shadow: 0 0 12px var(--gold-glow);
  background: rgba(20, 26, 38, 0.96);
}

.search-command-bar.nav-search-bar .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-bright);
  font-size: 12px;
  pointer-events: none;
}

.search-command-bar.nav-search-bar .search-results-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  width: 400px;
  max-width: 90vw;
  background: rgba(12, 16, 24, 0.98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 1060;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85);
  display: none;
}

.search-command-bar.nav-search-bar .search-results-dropdown.active {
  display: block;
}

[data-theme="light"] .search-command-bar.nav-search-bar .search-input-box {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(160, 120, 30, 0.35);
  color: var(--text-main);
}

[data-theme="light"] .search-command-bar.nav-search-bar .search-input-box:focus {
  border-color: var(--gold);
  background: #ffffff;
  box-shadow: 0 0 10px rgba(160, 120, 30, 0.2);
}

[data-theme="light"] .search-command-bar.nav-search-bar .search-results-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(160, 120, 30, 0.3);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

@media (max-width: 900px) {
  .site-top-nav {
    padding: 10px 16px;
  }
  .nav-right-container {
    width: 100%;
    align-items: stretch;
    margin-top: 6px;
  }
  .nav-right-actions {
    justify-content: flex-start;
  }
  .search-command-bar.nav-search-bar {
    max-width: 100%;
  }
  .search-command-bar.nav-search-bar .search-results-dropdown {
    width: 100%;
  }
}

.nav-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.nav-feedback-btn {
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
}

.nav-feedback-btn:hover {
  background: var(--gold);
  color: #0c0e15;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.35);
}

.nav-share-btn {
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
}

.nav-share-btn:hover {
  background: var(--gold);
  color: #0c0e15;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.35);
}

.nav-creator-badge {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}

.nav-creator-badge:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ==========================================================================
   HERO EXPLORER SECTION (USAspending Style)
   ========================================================================== */
.explorer-hero-section {
  max-width: 1440px;
  margin: 24px auto 32px;
  padding: 0 20px;
}

/* Translucido y sin desenfoque: deja ver la ciudad del fondo. Las
   tarjetas de modulo conservan su fondo solido. */
.explorer-hero-box {
  background: rgba(14, 18, 27, 0.45);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 32px 36px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  text-align: center;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .explorer-hero-box {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(160, 120, 30, 0.28);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.explorer-hero-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid var(--border-gold);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

[data-theme="light"] .explorer-hero-tag {
  color: var(--navy);
  border-color: rgba(0, 43, 91, 0.2);
  background: rgba(0, 43, 91, 0.06);
}

.explorer-hero-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.explorer-hero-desc {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 860px;
  margin: 0 auto 24px;
}

.explorer-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.explorer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.explorer-cta-enciclopedia {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.22), rgba(201, 168, 76, 0.08));
  border: 1px solid var(--border-gold);
  color: var(--gold-bright);
}

.explorer-cta-enciclopedia:hover {
  background: var(--gold);
  color: #0c0e15;
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.35);
  transform: translateY(-1px);
}

.explorer-cta-audit {
  background: rgba(0, 168, 143, 0.15);
  border: 1px solid rgba(0, 168, 143, 0.4);
  color: #5eead4;
}

.explorer-cta-audit:hover {
  background: #00a88f;
  color: #0c0e15;
  box-shadow: 0 4px 16px rgba(0, 168, 143, 0.35);
  transform: translateY(-1px);
}

.explorer-cta-pase {
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #fca5a5;
}

.explorer-cta-pase:hover {
  background: rgba(220, 38, 38, 0.25);
  color: #fff;
}

/* ==========================================================================
   MODULE CARDS GRID (Purple Box in Sketch)
   ========================================================================== */
.explorer-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
@media (min-width: 1024px) {
  .explorer-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* Tarjeta de modulo al estilo del explorador de USAspending: icono grande,
   titulo, una frase, la cifra y «Comenzar». La explicacion larga vive en el
   proemio (#moduloProemio), al abrir el modulo. */
.explorer-card {
  background: rgba(14, 18, 27, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-card);
  border-radius: 14px;
  padding: 28px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.explorer-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.explorer-card.active-explorer-card {
  border-color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.08);
  box-shadow: 0 0 20px rgba(201, 168, 76, 0.2);
}

[data-theme="light"] .explorer-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .explorer-card:hover {
  border-color: var(--navy, #0b3a6e);
  box-shadow: 0 8px 20px rgba(0, 43, 91, 0.12);
}

[data-theme="light"] .explorer-card.active-explorer-card {
  border-color: var(--navy, #0b3a6e);
  background: rgba(0, 43, 91, 0.05);
}

.explorer-card-icon {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  line-height: 1;
  margin-bottom: 16px;
  background: radial-gradient(circle at 35% 30%, rgba(243, 207, 101, 0.22), rgba(201, 168, 76, 0.06) 70%);
  border: 1px solid var(--border-gold);
  box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.05);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.explorer-card:hover .explorer-card-icon { transform: scale(1.06); }

[data-theme="light"] .explorer-card-icon {
  background: radial-gradient(circle at 35% 30%, rgba(0, 43, 91, 0.12), rgba(0, 43, 91, 0.03) 70%);
  border-color: rgba(0, 43, 91, 0.2);
  box-shadow: 0 0 0 6px rgba(0, 43, 91, 0.04);
}

.explorer-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 8px;
  line-height: 1.25;
}

.explorer-card-desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 16px;
  flex-grow: 1;
}

.explorer-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 10px 8px;
  margin-top: auto;
  margin-bottom: 16px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.explorer-card-stat strong {
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.explorer-card-stat span {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-theme="light"] .explorer-card-stat strong {
  color: var(--navy, #0b3a6e);
}

.explorer-card-btn {
  width: 100%;
  padding: 11px 12px;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: #0c0e15;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.explorer-card-btn:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.35);
}

.explorer-card-btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

[data-theme="light"] .explorer-card-btn {
  background: var(--navy, #0b3a6e);
  border-color: var(--navy, #0b3a6e);
  color: #fff;
}

[data-theme="light"] .explorer-card-btn:hover {
  background: #013a78;
  box-shadow: 0 4px 14px rgba(0, 43, 91, 0.3);
}

/* Proemio del modulo: portada con el texto que salio de la tarjeta */
.mod-proemio {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 8px 0 28px;
  padding: 28px;
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(40, 34, 18, 0.92), rgba(12, 15, 22, 0.9) 60%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  scroll-margin-top: 156px;
}

.mod-proemio[hidden] { display: none; }

[data-theme="light"] .mod-proemio {
  border-color: rgba(0, 43, 91, 0.18);
  background: linear-gradient(135deg, rgba(0, 43, 91, 0.07), rgba(255, 255, 255, 0.9) 60%);
}

.mod-proemio-icono {
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 68px;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, rgba(243, 207, 101, 0.25), rgba(201, 168, 76, 0.06) 70%);
  border: 1px solid var(--border-gold);
}

[data-theme="light"] .mod-proemio-icono {
  background: radial-gradient(circle at 35% 30%, rgba(0, 43, 91, 0.14), rgba(0, 43, 91, 0.03) 70%);
  border-color: rgba(0, 43, 91, 0.2);
}

.mod-proemio-cuerpo { min-width: 0; }

.mod-proemio-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold);
}

[data-theme="light"] .mod-proemio-kicker { color: var(--navy, #0b3a6e); }

.mod-proemio-titulo {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.15;
  margin: 6px 0 4px;
  color: var(--text-main);
}

.mod-proemio-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--gold-bright);
  margin: 0 0 14px;
}

[data-theme="light"] .mod-proemio-sub { color: var(--navy, #0b3a6e); }

.mod-proemio-texto {
  margin: 0 0 16px;
  max-width: 82ch;
}

.mod-proemio-texto p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

.mod-proemio-texto p:last-child { margin-bottom: 0; }

/* El encabezado de la seccion que absorbio el proemio no se pinta dos veces. */
.section-hero[hidden] { display: none !important; }

.mod-proemio-temas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 16px;
}

.mod-proemio-temas li {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
}

.mod-proemio-volver {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-bright);
  cursor: pointer;
}

.mod-proemio-volver:hover { text-decoration: underline; }

[data-theme="light"] .mod-proemio-volver { color: var(--navy, #0b3a6e); }

.mod-proemio-eco { border-color: rgba(95, 212, 154, 0.45); }

@media (max-width: 640px) {
  .mod-proemio { flex-direction: column; align-items: center; text-align: center; padding: 22px 16px; gap: 14px; scroll-margin-top: 12px; }
  .mod-proemio-icono { width: 100px; height: 100px; font-size: 54px; }
  .mod-proemio-titulo { font-size: 24px; }
  .mod-proemio-temas { justify-content: center; }
  .explorer-card { padding: 22px 16px 16px; }
}

/* ==========================================================================
   FLOATING FEEDBACK BUTTON
   ========================================================================== */
.floating-feedback-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

.floating-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14, 18, 27, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--gold-bright);
  border: 1px solid var(--border-gold);
  padding: 10px 18px;
  border-radius: 30px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 0.25s ease;
}

.floating-feedback-btn:hover {
  transform: translateY(-2px);
  background: var(--gold);
  color: #0c0e15;
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.4);
}

[data-theme="light"] .floating-feedback-btn {
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  border-color: rgba(0, 43, 91, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .floating-feedback-btn:hover {
  background: var(--navy);
  color: #fff;
}


.modulo-activo-container {
  max-width: 1440px;
  margin: 0 auto 20px;
  padding: 0 20px;
}

.modulo-activo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}


/* ==========================================================================
   USASPENDING MEGA-MENU NAVIGATION & FEDERAL SLATE PALETTE
   ========================================================================== */
:root {
  --navy-deep: #07192f;
  --navy-fed: #002b5b;
  --navy-surface: rgba(10, 31, 61, 0.82);
  --slate-dark: #0f172a;
  --slate-medium: #334155;
  --slate-light: #64748b;
  --slate-border: rgba(148, 163, 184, 0.24);
  --blue-usa: #0071bc;
  --blue-bright: #38bdf8;
  --red-usa: #dc2626;
}

[data-theme="light"] {
  --navy-deep: #ffffff;
  --navy-fed: #002b5b;
  --navy-surface: rgba(255, 255, 255, 0.92);
  --slate-dark: #f8fafc;
  --slate-medium: #475569;
  --slate-light: #64748b;
  --slate-border: rgba(0, 43, 91, 0.16);
  --blue-usa: #0071bc;
  --blue-bright: #0284c7;
  --red-usa: #dc2626;
}

/* Mega-Menu Navigation Container */
.nav-menu-item {
  position: relative;
}

.mega-menu-trigger {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: #e2e8f0;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.mega-menu-trigger:hover,
.nav-menu-item:hover .mega-menu-trigger,
.nav-menu-item.open-mega-menu .mega-menu-trigger {
  background: rgba(0, 43, 91, 0.45);
  border-color: rgba(56, 189, 248, 0.35);
  color: #ffffff;
}

[data-theme="light"] .mega-menu-trigger {
  color: #1e293b;
}

[data-theme="light"] .mega-menu-trigger:hover,
[data-theme="light"] .nav-menu-item:hover .mega-menu-trigger {
  background: rgba(0, 43, 91, 0.08);
  border-color: rgba(0, 43, 91, 0.2);
  color: var(--navy-fed);
}

.mega-menu-trigger .caret {
  font-size: 10px;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.nav-menu-item:hover .mega-menu-trigger .caret,
.nav-menu-item.open-mega-menu .mega-menu-trigger .caret {
  transform: rotate(180deg);
}

/* Mega-Menu Dropdown Panel (USAspending Multi-Column) */
.mega-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 540px;
  background: rgba(10, 25, 47, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--slate-border);
  border-radius: 10px;
  padding: 22px;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  z-index: 1050;
  animation: megaFadeIn 0.2s ease-out forwards;
}

@keyframes megaFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-menu-item.open-mega-menu .mega-menu-dropdown {
  display: grid;
}
/* Abrir con el cursor solo donde hay cursor: en pantallas tactiles el
   :hover se queda pegado tras tocar y el menu no se podia cerrar. */
@media (hover: hover) and (pointer: fine) {
  .nav-menu-item:hover .mega-menu-dropdown { display: grid; }
}

[data-theme="light"] .mega-menu-dropdown {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(0, 43, 91, 0.18);
  box-shadow: 0 14px 36px rgba(0, 43, 91, 0.14);
}

.mega-menu-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mega-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--blue-bright);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-theme="light"] .mega-col-title {
  color: var(--navy-fed);
  border-bottom-color: rgba(0, 43, 91, 0.1);
}

.mega-link-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  background: transparent;
  transition: all 0.2s ease;
  border-left: 2px solid transparent;
}

.mega-link-item:hover {
  background: rgba(0, 113, 188, 0.15);
  border-left-color: var(--blue-bright);
  transform: translateX(2px);
}

.mega-link-item.mega-link-disabled {
  opacity: 0.65;
  cursor: pointer;
  border-left-color: rgba(201, 168, 76, 0.4);
  position: relative;
}

.mega-link-item.mega-link-disabled:hover {
  background: rgba(201, 168, 76, 0.08);
  border-left-color: var(--gold-bright);
  transform: none;
}

[data-theme="light"] .mega-link-item.mega-link-disabled:hover {
  background: rgba(160, 120, 30, 0.08);
  border-left-color: #a0781e;
}

.badge-proximamente {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1.5px 6px;
  border-radius: 4px;
  background: rgba(201, 168, 76, 0.18);
  border: 1px solid rgba(201, 168, 76, 0.4);
  color: var(--gold-bright);
  vertical-align: middle;
  margin-left: 6px;
}

[data-theme="light"] .badge-proximamente {
  background: rgba(160, 120, 30, 0.12);
  border-color: rgba(160, 120, 30, 0.35);
  color: #8c640e;
}

/* ==========================================================================
   TOAST DE NOTIFICACIÓN DE MÓDULOS EN EVALUACIÓN TÉCNICA / ROADMAP
   ========================================================================== */
.civic-roadmap-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 380px;
  width: calc(100vw - 48px);
  background: rgba(10, 16, 28, 0.95);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(201, 168, 76, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 99999;
  font-family: var(--font-sans);
  color: #f1f5f9;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.civic-roadmap-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

[data-theme="light"] .civic-roadmap-toast {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(160, 120, 30, 0.4);
  color: #1e293b;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 0 12px rgba(160, 120, 30, 0.15);
}

.crm-toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.crm-toast-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.15);
  border: 1px solid rgba(201, 168, 76, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
}

[data-theme="light"] .crm-toast-badge {
  color: #8c640e;
  background: rgba(160, 120, 30, 0.12);
  border-color: rgba(160, 120, 30, 0.3);
}

.crm-toast-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.crm-toast-close:hover {
  color: #f8fafc;
}

[data-theme="light"] .crm-toast-close:hover {
  color: #0f172a;
}

.crm-toast-body {
  font-size: 12px;
  line-height: 1.45;
  color: #cbd5e1;
  margin-bottom: 8px;
}

[data-theme="light"] .crm-toast-body {
  color: #334155;
}

.crm-toast-body strong {
  color: #ffffff;
}

[data-theme="light"] .crm-toast-body strong {
  color: #0f172a;
}

.crm-toast-footer {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--gold);
  border-top: 1px dashed rgba(201, 168, 76, 0.25);
  padding-top: 6px;
}

[data-theme="light"] .crm-toast-footer {
  color: #8c640e;
  border-top-color: rgba(160, 120, 30, 0.25);
}

[data-theme="light"] .mega-link-item:hover {
  background: rgba(0, 43, 91, 0.06);
  border-left-color: var(--navy-fed);
}

.mega-link-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

[data-theme="light"] .mega-link-name {
  color: var(--navy-fed);
}

.mega-link-desc {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.4;
  color: #94a3b8;
}

[data-theme="light"] .mega-link-desc {
  color: #64748b;
}

/* ==========================================================================
   SHOWCASE CÍVICO: CARRUSEL INTERACTIVO ("CLIC PARA DESCUBRIR QUÉ ES")
   ========================================================================== */
.civic-showcase-section {
  max-width: 1440px;
  margin: 28px auto;
  padding: 0 20px;
}

.civic-showcase-box {
  background: rgba(10, 25, 47, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--slate-border);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  position: relative;
}

[data-theme="light"] .civic-showcase-box {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 43, 91, 0.16);
  box-shadow: 0 8px 24px rgba(0, 43, 91, 0.08);
}

.showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

.showcase-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--blue-bright);
  background: rgba(0, 113, 188, 0.15);
  padding: 3px 10px;
  border-radius: 4px;
  border-left: 3px solid var(--blue-bright);
}

[data-theme="light"] .showcase-tag {
  color: var(--navy-fed);
  background: rgba(0, 43, 91, 0.08);
  border-left-color: var(--navy-fed);
}

.showcase-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.showcase-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

[data-theme="light"] .showcase-title {
  color: var(--navy-fed);
}

.showcase-hint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: #94a3b8;
}

/* Showcase Viewport & Track */
.showcase-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  height: 380px;
}

.showcase-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.showcase-slide {
  min-width: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

.showcase-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
  filter: brightness(0.88);
}

.showcase-slide:hover img {
  transform: scale(1.03);
  filter: brightness(0.96);
}

.showcase-slide-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(10, 25, 47, 0.4) 40%,
    rgba(10, 25, 47, 0.95) 100%
  );
  pointer-events: none;
}

[data-theme="light"] .showcase-slide-gradient {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 43, 91, 0.4) 40%,
    rgba(0, 43, 91, 0.92) 100%
  );
}

.showcase-slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 28px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.showcase-slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: rgba(220, 38, 38, 0.85);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.4);
}

.showcase-slide-q {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  margin: 0;
}

.showcase-click-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.showcase-slide:hover .showcase-click-cue {
  background: var(--blue-usa);
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
}

/* Nav Arrows and Indicators */
.showcase-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 25, 47, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}

.showcase-arrow-btn:hover {
  background: var(--navy-fed);
  border-color: var(--blue-bright);
  transform: translateY(-50%) scale(1.1);
}

.showcase-arrow-btn.prev { left: 16px; }
.showcase-arrow-btn.next { right: 16px; }

.showcase-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.showcase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  padding: 0;
}

.showcase-dot.active-dot {
  width: 28px;
  border-radius: 10px;
  background: var(--blue-bright);
}

[data-theme="light"] .showcase-dot.active-dot {
  background: var(--navy-fed);
}

/* ==========================================================================
   MODAL INTERACTIVO DE DESCUBRIMIENTO FORENSE (CLICK-TO-REVEAL)
   ========================================================================== */
.descubrimiento-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 23, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.descubrimiento-modal.show-modal {
  display: flex;
  animation: modalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalPop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

.desc-modal-card {
  max-width: 760px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(11, 28, 52, 0.95);
  border: 1px solid var(--slate-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  padding: 30px;
  position: relative;
}

[data-theme="light"] .desc-modal-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 43, 91, 0.2);
  box-shadow: 0 20px 50px rgba(0, 43, 91, 0.16);
}

.desc-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

[data-theme="light"] .desc-modal-close {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: #000;
}

.desc-modal-close:hover {
  background: var(--red-usa);
  color: #fff;
}

.desc-modal-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--blue-bright);
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}

[data-theme="light"] .desc-modal-tag {
  color: var(--navy-fed);
}

.desc-modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 10px;
}

[data-theme="light"] .desc-modal-title {
  color: var(--navy-fed);
}

.desc-modal-question {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: #cbd5e1;
  margin: 0 0 20px;
  line-height: 1.5;
}

[data-theme="light"] .desc-modal-question {
  color: #475569;
}

.desc-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.desc-modal-stat-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px;
  border-radius: 8px;
}

[data-theme="light"] .desc-modal-stat-box {
  background: rgba(241, 245, 249, 0.7);
  border-color: rgba(0, 43, 91, 0.1);
}

.desc-stat-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #94a3b8;
  display: block;
  margin-bottom: 4px;
}

[data-theme="light"] .desc-stat-lbl {
  color: #64748b;
}

.desc-stat-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}

.desc-stat-val.val-red { color: #f87171; }
.desc-stat-val.val-gold { color: #fbbf24; }

[data-theme="light"] .desc-stat-val {
  color: var(--navy-fed);
}
[data-theme="light"] .desc-stat-val.val-red { color: var(--red-usa); }

.desc-modal-findings {
  background: rgba(0, 43, 91, 0.25);
  border-left: 3px solid var(--blue-bright);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 22px;
}

[data-theme="light"] .desc-modal-findings {
  background: rgba(0, 43, 91, 0.05);
  border-left-color: var(--navy-fed);
}

.desc-findings-txt {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #e2e8f0;
  margin: 0;
}

[data-theme="light"] .desc-findings-txt {
  color: #334155;
}

.desc-source-txt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
  display: block;
}

.desc-modal-btn {
  width: 100%;
  padding: 12px 18px;
  background: var(--blue-usa);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.desc-modal-btn:hover {
  background: #0284c7;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.4);
}


/* ==========================================================================
   DESGLOSE INTERACTIVO DE MÓDULOS (ON-DEMAND REVEAL)
   ========================================================================== */
.barra-plegar-container {
  max-width: 1440px;
  margin: 10px auto 20px;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
}

.barra-plegar-container.barra-plegar-inferior {
  margin: 40px auto 30px;
  padding: 30px 20px 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: center;
}

.btn-plegar-desglose {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.28);
  padding: 8px 18px;
  border-radius: 20px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.btn-plegar-desglose:hover {
  background: rgba(0, 43, 91, 0.85);
  color: #ffffff;
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.25);
}

[data-theme="light"] .btn-plegar-desglose {
  background: rgba(255, 255, 255, 0.95);
  color: var(--navy-fed);
  border-color: rgba(0, 43, 91, 0.25);
  box-shadow: 0 4px 12px rgba(0, 43, 91, 0.08);
}

[data-theme="light"] .btn-plegar-desglose:hover {
  background: var(--navy-fed);
  color: #ffffff;
}

.seccion-desglose-modulos.desglose-abierto {
  animation: fadeInDesglose 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInDesglose {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   CORRECCIONES MÓDULO 1-B: SIMULADORES Y TERMOSTATO DE SALUD FINANCIERA
   ========================================================================== */
.salud-erario-seccion {
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 12px;
  padding: 16px 18px;
}

[data-theme="light"] .salud-erario-seccion {
  background: #ffffff;
  border-color: rgba(160, 120, 30, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.salud-erario-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 992px) {
  .salud-erario-grid {
    grid-template-columns: 1fr;
  }
}

.termostato-salud-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="light"] .termostato-salud-card {
  background: #fbf9f4;
  border-color: rgba(160, 120, 30, 0.3);
}

.termostato-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

[data-theme="light"] .termostato-head {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.termostato-ico {
  font-size: 20px;
}

.termostato-title {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-bright);
}

[data-theme="light"] .termostato-title {
  color: var(--navy-fed);
}

.termostato-sub {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.termostato-body {
  display: flex;
  gap: 14px;
  align-items: center;
}

.termostato-circ-wrap {
  width: 105px;
  height: 105px;
  flex-shrink: 0;
}

.termostato-svg {
  width: 100%;
  height: 100%;
}

.termostato-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  fill: var(--gold-bright);
}

[data-theme="light"] .termostato-num {
  fill: #b45309;
}

.termostato-pie {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-secondary);
}

.termostato-diag-wrap {
  flex: 1;
  min-width: 0;
}

.termostato-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.termostato-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.termostato-badge-cero {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.termostato-badge-fragil {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.termostato-badge-solido {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.termostato-rigidez-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

.termostato-diag-p {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
}

.termostato-minibar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .termostato-minibar-grid {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

.termostato-mini-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tmini-lbl {
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tmini-val {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-bright);
}

/* Nota metodológica Civio */
.civio-equiv-nota {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(201, 168, 76, 0.04);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
}

[data-theme="light"] .civio-equiv-nota {
  background: rgba(160, 120, 30, 0.04);
  border-color: rgba(160, 120, 30, 0.2);
  border-left-color: var(--gold);
}

.civio-nota-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}

[data-theme="light"] .civio-nota-head {
  color: #92400e;
}

.civio-nota-body {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* Enlaces a glosario y referencias */
.glos-link {
  color: #38bdf8;
  cursor: pointer;
  text-decoration: underline dotted #38bdf8;
  font-weight: 600;
  transition: all 0.15s ease;
}

.glos-link:hover {
  color: #7dd3fc;
  text-decoration: underline solid #7dd3fc;
}

.ref-link {
  color: var(--gold);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(201, 168, 76, 0.1);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ref-link:hover {
  background: var(--gold);
  color: #0c0e15 !important;
  text-decoration: none;
}

/* Modal Flotante de Referencia Legal Oficial APA 7 */
.modal-ref-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInModal 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-ref-card {
  background: #11141e;
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  max-width: 620px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(201, 168, 76, 0.2);
  padding: 24px;
  position: relative;
  animation: popInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="light"] .modal-ref-card {
  background: #ffffff;
  border-color: rgba(160, 120, 30, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.modal-ref-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
}

[data-theme="light"] .modal-ref-head {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.modal-ref-badge-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-ref-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: #0c0e15;
  background: var(--gold);
  padding: 3px 8px;
  border-radius: 6px;
}

.modal-ref-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-ref-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-secondary);
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.modal-ref-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

[data-theme="light"] .modal-ref-close {
  border-color: rgba(0, 0, 0, 0.15);
}

.modal-ref-title {
  margin: 0 0 10px 0;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--gold-bright);
}

[data-theme="light"] .modal-ref-title {
  color: var(--navy-fed);
}

.modal-ref-apa {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--gold);
  padding: 12px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
}

[data-theme="light"] .modal-ref-apa {
  background: rgba(0, 0, 0, 0.025);
}

.modal-ref-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 20px 0;
}

.modal-ref-foot {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}

[data-theme="light"] .modal-ref-foot {
  border-top-color: rgba(0, 0, 0, 0.08);
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popInModal {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   MODULO 3: COMPARADOR SALARIAL DE CHOQUE (TU VS ELLOS) & SUBPESTANAS
   ========================================================================== */
.mod3-tabs-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 12px;
  flex-wrap: wrap;
}

.mod3-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 10px 18px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mod3-tab-btn:hover {
  background: rgba(201, 168, 76, 0.12);
  border-color: var(--border-gold);
  color: var(--gold-bright);
}

.mod3-tab-btn.active {
  background: var(--gold);
  color: #0c0f16;
  border-color: var(--gold);
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.25);
  font-weight: 700;
}

.shock-container {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.shock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 14px;
}

.shock-title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--text-main);
  margin: 0;
}

.shock-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.shock-user-badge {
  background: rgba(78, 205, 196, 0.12);
  border: 1px solid rgba(78, 205, 196, 0.35);
  color: var(--cyan);
  padding: 8px 14px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}

.shock-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.shock-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s, border-color 0.2s;
}

.shock-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.shock-card-cargo {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--text-main);
  margin-bottom: 2px;
}

.shock-card-ente {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.shock-figure-box {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.shock-figure-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 4px;
}

.shock-ratio-highlight {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold-bright);
  padding: 8px 10px;
  background: rgba(201, 168, 76, 0.12);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  margin-bottom: 12px;
}

.shock-metric-pill {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}

.shock-summary-banner {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.12) 0%, rgba(243, 156, 18, 0.08) 100%);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}


/* ==========================================================================
   TREEMAP PROPORCIONAL DEL PRESUPUESTO (ESTILO USASPENDING EXPLORER)
   ========================================================================== */
.treemap-view-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 14px 0;
  padding: 10px 16px;
  background: rgba(14, 18, 28, 0.75);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.treemap-view-btns {
  display: flex;
  gap: 8px;
}

.treemap-view-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.treemap-view-btn:hover {
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold-bright);
  border-color: var(--border-gold);
}

.treemap-view-btn.active {
  background: rgba(201, 168, 76, 0.2);
  color: var(--gold-bright);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.25);
}

.treemap-box {
  background: rgba(10, 13, 20, 0.92);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px);
}

.treemap-breadcrumb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.treemap-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
}

.treemap-crumb-item {
  color: var(--cyan);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.treemap-crumb-item:hover {
  color: var(--gold-bright);
}

.treemap-crumb-current {
  color: var(--text-primary);
  font-weight: 700;
  cursor: default;
  text-decoration: none;
}

.treemap-crumb-separator {
  color: var(--text-dim);
  user-select: none;
}

.treemap-back-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.treemap-back-btn:hover {
  background: rgba(201, 168, 76, 0.15);
  color: var(--gold-bright);
  border-color: var(--gold);
}

.treemap-level-badge {
  display: inline-block;
  font-size: 10.5px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(201, 168, 76, 0.12);
  color: var(--gold-bright);
  border: 1px solid rgba(201, 168, 76, 0.3);
}

/* Rejilla adaptativa y proporcional del Treemap */
.treemap-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  min-height: 480px;
}

.treemap-node {
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  cursor: default;
}

.treemap-node.clickable {
  cursor: pointer;
}

.treemap-node.clickable:hover {
  transform: translateY(-3px) scale(1.008);
  z-index: 5;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Tamaños proporcionales en el grid */
.treemap-span-12 { grid-column: span 12; min-height: 180px; }
.treemap-span-8  { grid-column: span 8;  min-height: 180px; }
.treemap-span-7  { grid-column: span 7;  min-height: 180px; }
.treemap-span-6  { grid-column: span 6;  min-height: 160px; }
.treemap-span-5  { grid-column: span 5;  min-height: 160px; }
.treemap-span-4  { grid-column: span 4;  min-height: 150px; }
.treemap-span-3  { grid-column: span 3;  min-height: 140px; }

/* Temas cromáticos por categoría presupuestal */
.treemap-node.theme-social {
  background: linear-gradient(135deg, rgba(16, 75, 105, 0.75) 0%, rgba(8, 40, 60, 0.88) 100%);
  border: 1px solid rgba(46, 213, 115, 0.4);
}
.treemap-node.theme-social:hover { border-color: #2ed573; box-shadow: 0 0 20px rgba(46, 213, 115, 0.3); }

.treemap-node.theme-econ {
  background: linear-gradient(135deg, rgba(115, 85, 20, 0.75) 0%, rgba(65, 45, 10, 0.88) 100%);
  border: 1px solid rgba(255, 179, 0, 0.45);
}
.treemap-node.theme-econ:hover { border-color: #ffb300; box-shadow: 0 0 20px rgba(255, 179, 0, 0.3); }

.treemap-node.theme-gob {
  background: linear-gradient(135deg, rgba(120, 30, 30, 0.75) 0%, rgba(65, 15, 15, 0.88) 100%);
  border: 1px solid rgba(255, 71, 87, 0.45);
}
.treemap-node.theme-gob:hover { border-color: #ff4757; box-shadow: 0 0 20px rgba(255, 71, 87, 0.3); }

.treemap-node.theme-deuda {
  background: linear-gradient(135deg, rgba(95, 15, 35, 0.8) 0%, rgba(50, 10, 20, 0.92) 100%);
  border: 1px solid rgba(235, 47, 47, 0.55);
}
.treemap-node.theme-deuda:hover { border-color: #ff3838; box-shadow: 0 0 22px rgba(255, 56, 56, 0.35); }

.treemap-node.theme-fed {
  background: linear-gradient(135deg, rgba(20, 95, 60, 0.75) 0%, rgba(10, 50, 32, 0.88) 100%);
  border: 1px solid rgba(52, 199, 89, 0.45);
}
.treemap-node.theme-fed:hover { border-color: #34c759; box-shadow: 0 0 20px rgba(52, 199, 89, 0.3); }

.treemap-node.theme-autonomos {
  background: linear-gradient(135deg, rgba(70, 45, 110, 0.75) 0%, rgba(40, 22, 65, 0.88) 100%);
  border: 1px solid rgba(175, 82, 222, 0.45);
}
.treemap-node.theme-autonomos:hover { border-color: #af52de; box-shadow: 0 0 20px rgba(175, 82, 222, 0.3); }

.treemap-node.theme-adefas {
  background: linear-gradient(135deg, rgba(50, 60, 75, 0.75) 0%, rgba(28, 34, 42, 0.88) 100%);
  border: 1px solid rgba(142, 142, 147, 0.45);
}
.treemap-node.theme-adefas:hover { border-color: #aeaeb2; box-shadow: 0 0 20px rgba(174, 174, 178, 0.3); }

/* Detalles internos de nodo */
.treemap-node-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.treemap-node-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.treemap-node-icon {
  font-size: 20px;
  line-height: 1;
}

.treemap-node-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

.treemap-node-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.treemap-node-center {
  margin: 10px 0;
}

.treemap-node-amount {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--gold-bright);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 4px;
}

.treemap-node-share {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

.treemap-node-desc {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.35;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.treemap-node-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.treemap-drill-cue {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  gap: 4px;
}

.treemap-ref-link {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cyan);
  text-decoration: underline;
  cursor: pointer;
}

.treemap-summary-banner {
  background: rgba(14, 18, 28, 0.8);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 12px 18px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ==========================================================================
   BANDERAS ROJAS ASF (ESTILO OPERACIÓN SERENATA DE AMOR / ROSIE)
   ========================================================================== */
.red-flag-panel {
  background: rgba(15, 12, 16, 0.94);
  border: 1px solid rgba(255, 71, 87, 0.35);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0 20px 0;
  box-shadow: 0 6px 20px rgba(255, 71, 87, 0.12);
}

.red-flag-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.red-flag-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.red-flag-pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--red);
  animation: redFlagPulse 1.8s infinite;
}

@keyframes redFlagPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(255, 71, 87, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); }
}

.red-flag-summary-counts {
  display: flex;
  gap: 6px;
}

.flag-count-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}

.flag-count-pill.critica {
  background: rgba(255, 71, 87, 0.2);
  color: #ff6b81;
  border: 1px solid rgba(255, 71, 87, 0.4);
}

.flag-count-pill.alerta {
  background: rgba(243, 156, 18, 0.2);
  color: #f39c12;
  border: 1px solid rgba(243, 156, 18, 0.4);
}

.flag-count-pill.ok {
  background: rgba(46, 213, 115, 0.15);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.3);
}

.red-flag-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.red-flag-card {
  background: rgba(20, 24, 34, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px 14px;
  border-left: 3px solid var(--red);
}

.red-flag-card.alerta {
  border-left-color: var(--amber);
}

.red-flag-card.ok {
  border-left-color: var(--green);
}

.red-flag-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.red-flag-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
}

.red-flag-card-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.red-flag-card-detail {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 4px;
}

.red-flag-card-source {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--gold-bright);
}

/* Chips en tarjetas municipales */
.muni-flag-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.muni-flag-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.muni-flag-pill.critica {
  background: rgba(255, 71, 87, 0.18);
  color: #ff6b81;
  border: 1px solid rgba(255, 71, 87, 0.4);
}

.muni-flag-pill.alerta {
  background: rgba(243, 156, 18, 0.18);
  color: #f39c12;
  border: 1px solid rgba(243, 156, 18, 0.4);
}

.muni-flag-pill.ok {
  background: rgba(46, 213, 115, 0.12);
  color: #2ed573;
  border: 1px solid rgba(46, 213, 115, 0.3);
}

/* Botonera de filtros de riesgo en padrón municipal */
.muni-risk-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 8px 12px;
  background: rgba(14, 18, 28, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.muni-risk-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.muni-risk-btn:hover {
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold-bright);
}

.muni-risk-btn.active {
  background: rgba(201, 168, 76, 0.2);
  color: var(--gold-bright);
  border-color: var(--gold);
}

/* Radar Nacional de Banderas Rojas en Módulo 4 */
.radar-banderas-national {
  background: rgba(14, 18, 28, 0.9);
  border: 1px solid rgba(255, 71, 87, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.radar-banderas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.radar-banderas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.radar-state-flag-card {
  background: rgba(20, 25, 36, 0.7);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--red);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radar-state-flag-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.radar-state-flag-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.radar-state-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.radar-state-metric-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px;
  margin: 4px 0;
  color: var(--text-secondary);
}

/* Radar con la Matriz de Datos Basicos: las tarjetas son botones. */
button.radar-state-flag-card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.radar-state-flag-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.radar-state-valor {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
}
.radar-state-metric-row { align-items: center; gap: 8px; }
.radar-state-metric-row strong { color: var(--text-main); }
.radar-state-name { color: var(--text-main); }
[data-theme="light"] .radar-banderas-national { background: var(--bg-card-hover); }
[data-theme="light"] .radar-state-flag-card { background: var(--bg-card); }
.radar-state-ir {
  display: block;
  margin-top: 10px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-bright);
}
.radar-criterios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.radar-criterios-etq {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.radar-banderas-national .pd-nota { margin-top: 14px; }
.radar-ir-cp { color: var(--gold-bright); font-weight: 600; }
@media (max-width: 640px) {
  .radar-banderas-national { padding: 14px; }
  .radar-banderas-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .treemap-span-8, .treemap-span-7, .treemap-span-6, .treemap-span-5, .treemap-span-4, .treemap-span-3 {
    grid-column: span 12;
    min-height: 120px;
  }
  .treemap-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   2.6 LO QUE CUESTAN LOS PODERES (pd-) y renglones del ticket civico
   Fondo solido detras de todo texto: nada de lectura sobre fotografia.
   ========================================================================== */
.pd-raiz { display: grid; gap: 22px; }
.pd-bloque { background: #10131c; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 22px; display: grid; gap: 14px; }
.pd-tit { font-family: var(--font-serif); font-size: 21px; color: var(--gold-bright); margin: 0; text-wrap: balance; }
.pd-lead { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-main); max-width: 72ch; }
.pd-nota { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); max-width: 90ch; }
.pd-op { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
.pd-fuente { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; font-size: 12px; white-space: normal; }
.pd-fuente:hover, .pd-fuente:focus-visible { color: var(--gold-bright); }
.pd-btn { background: transparent; border: 1px solid var(--border-gold); color: var(--gold-bright); border-radius: 6px; padding: 6px 12px; font: 600 12.5px var(--font-sans); cursor: pointer; }
.pd-btn:hover, .pd-btn:focus-visible { background: var(--gold-glow); outline: none; }
.pd-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pd-duo-c { background: var(--bg-card-alt); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 14px 16px; display: grid; gap: 4px; }
.pd-duo-c.pd-legislativo { border-top: 3px solid var(--cyan); }
.pd-duo-c.pd-judicial { border-top: 3px solid var(--gold); }
.pd-k { font-size: 12.5px; color: var(--text-secondary); }
.pd-v { font-family: var(--font-mono); font-size: 26px; color: var(--text-main); font-variant-numeric: tabular-nums; }
.pd-v small { font-size: 13px; color: var(--text-dim); font-family: var(--font-sans); }
.pd-s { font-size: 12.5px; color: var(--text-dim); }
.pd-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.pd-lado-c { display: grid; gap: 8px; align-content: start; }
.pd-lado-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; }
.pd-lado-cab span { font-weight: 700; color: var(--text-main); }
.pd-lado-cab b { font-family: var(--font-mono); color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.pd-fila { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(80px, 2fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.pd-fila-n { color: var(--text-secondary); line-height: 1.35; }
.pd-fila-v { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-main); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-barra { display: block; height: 10px; background: var(--bg-card-alt); border-radius: 2px; overflow: hidden; }
.pd-barra-v { display: block; height: 100%; background: var(--gold); border-radius: 2px; }
.pd-barra-v.pd-v-leg { background: var(--cyan); }
.pd-barra-v.pd-v-jud { background: var(--gold); }
.pd-pila { display: grid; gap: 5px; }
.pd-pila-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--text-secondary); }
.pd-pila-cab span:last-child { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.pd-pila-barra { display: flex; height: 16px; border-radius: 3px; overflow: hidden; background: var(--bg-card-alt); }
.pd-pila-barra > span { display: block; height: 100%; }
.pd-cap-1000 { background: var(--gold); } .pd-cap-2000 { background: var(--emerald); } .pd-cap-3000 { background: var(--cyan); }
.pd-cap-4000 { background: var(--orange); } .pd-cap-5000 { background: var(--crimson-bright); } .pd-cap-6000 { background: var(--blue); }
.pd-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-dim); }
.pd-leyenda span { display: inline-flex; gap: 6px; align-items: center; }
.pd-leyenda i, .pd-tabla th i { width: 10px; height: 10px; display: inline-block; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.pd-ejec { height: 20px; }
.pd-ej-ejercido { background: var(--gold); } .pd-ej-compromiso { background: var(--cyan); } .pd-ej-disponible { background: var(--text-dim); }
.pd-sub { display: grid; gap: 10px; border-top: 1px dashed var(--border-subtle); padding-top: 14px; }
.pd-sub-t { font-size: 15.5px; font-weight: 700; color: var(--text-main); margin: 0; }
.pd-det > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; }
.pd-det > summary::-webkit-details-marker { display: none; }
.pd-det > summary::before { content: '+'; font-family: var(--font-mono); color: var(--gold-bright); width: 1em; }
.pd-det[open] > summary::before { content: '−'; }
.pd-det > summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.pd-tabla-w { overflow-x: auto; }
.pd-tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.pd-tabla th, .pd-tabla td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--text-main); }
.pd-tabla thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }
.pd-tabla tbody th { font-weight: 500; color: var(--text-secondary); }
.pd-tabla td { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pd-tabla td small { color: var(--text-dim); }
.pd-lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--text-secondary); }
.pd-docs { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 13px; }
.pd-docs a { color: var(--cyan); }
.pd-docs code { margin-left: 8px; font-size: 11px; color: var(--text-dim); }
@media (max-width: 640px) {
  .pd-bloque { padding: 16px; }
  .pd-fila { grid-template-columns: 1fr auto; }
  .pd-fila .pd-barra { grid-column: 1 / -1; grid-row: 2; }
}
[data-theme="light"] .pd-bloque { background: #ffffff; }
.civic-ticket-poderes { border-top: 1px dashed var(--border-subtle); margin-top: 8px; padding-top: 8px; display: grid; gap: 4px; font-size: 11.5px; }
.civic-ticket-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); font-weight: 700; }
.civic-ticket-sub small { text-transform: none; letter-spacing: 0; color: var(--text-dim); font-weight: 400; }
.civic-ticket-poderes .pd-btn { justify-self: start; margin-top: 4px; }
/* La barra de regreso no tapa el destino al saltar dentro de la pagina */
.subtab-panel, .glossary-card, [id^="ref-"] { scroll-margin-top: 120px; }
.nav-origen-marca { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 3px; background: var(--gold-glow); transition: background .4s; }
@media (prefers-reduced-motion: reduce) { .nav-origen-marca { transition: none; } }

/* ==========================================================================
   ESTADO DE CUENTA CIVICO (2.4): documento formal con cabecera azul
   marino (27-10-2026; antes, una foto de ciudad de dia o de noche).
   ========================================================================== */
.ecc {
  width: 100%;
  max-width: 760px;
  background: #0f1426;
  color: #e9ecf6;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  font-family: var(--font-sans);
}
[data-theme="light"] .ecc {
  background: #fbfaf6;
  color: #16203a;
  border-color: #ddd6c6;
  box-shadow: 0 14px 40px rgba(40, 40, 60, 0.15);
}
.ecc-cab { position: relative; padding: 22px 26px 18px; min-height: 190px; overflow: hidden; }
/* Sin foto de ciudad desde el 27-10-2026: la franja azul marino de los
   estados de cuenta, sin modo de dia o de noche. */
.ecc-cielo {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #071d47 0%, #0b2a63 38%, #2c579f 100%);
  border-bottom: 4px solid #4f9be8;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ecc-cab, [data-theme="light"] .ecc-cab { color: #ffffff; }
.ecc-cab-txt { position: relative; z-index: 1; }
.ecc-marca { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.6px; color: #fff; opacity: 0.85; }
[data-theme="light"] .ecc-marca { color: #ffffff; }
.ecc-titulo { font-family: var(--font-serif); font-size: 30px; font-weight: 700; margin: 6px 0 22px; color: #fff; line-height: 1.1; }
[data-theme="light"] .ecc-titulo { color: #ffffff; }
.ecc-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ecc-meta dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.7; }
.ecc-meta dd { margin: 2px 0 0; font-size: 12.5px; font-weight: 600; }
.ecc-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px 26px 6px; }
.ecc-kpi { background: rgba(255,255,255,0.05); border-top: 3px solid rgba(255,255,255,0.25); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-theme="light"] .ecc-kpi { background: #fff; border: 1px solid #e7e1d3; border-top: 3px solid #c9c0ab; }
.ecc-kpi span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.75; }
.ecc-kpi strong { font-size: 18px; overflow-wrap: anywhere; }
.ecc-kpi small { font-size: 10.5px; opacity: 0.7; line-height: 1.3; }
.ecc-kpi-isr { border-top-color: var(--gold-bright) !important; }
.ecc-kpi-isr strong { color: var(--gold-bright); }
.ecc-kpi-neto { border-top-color: var(--cyan) !important; }
.ecc-sec { padding: 14px 26px 4px; }
.ecc-sec-tit { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; margin-bottom: 8px; }
.ecc-sec-tit small { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.75; color: inherit; }
.ecc-mov { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 52px 104px; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,0.10); font-size: 12.5px; }
[data-theme="light"] .ecc-mov { border-bottom-color: #e5dfd1; }
.ecc-mov-con { min-width: 0; overflow-wrap: anywhere; }
.ecc-mov-bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
[data-theme="light"] .ecc-mov-bar { background: #ece6d8; }
.ecc-mov-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius: 4px; transform-origin: left; animation: ecc-crecer 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ecc-mov-sub .ecc-mov-bar { background: none; }
@keyframes ecc-crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ecc-mov-pct { text-align: right; opacity: 0.7; font-size: 11.5px; }
.ecc-mov-mon { text-align: right; font-weight: 700; }
.ecc-mov-sub { font-size: 12px; opacity: 0.9; }
.ecc-ellos { display: flex; gap: 16px; align-items: center; margin: 14px 26px 4px; padding: 12px 16px; border-left: 4px solid var(--gold-bright); background: rgba(255,255,255,0.05); border-radius: 0 8px 8px 0; }
[data-theme="light"] .ecc-ellos { background: #fff; border: 1px solid #e7e1d3; border-left: 4px solid var(--gold); }
.ecc-ellos-num { flex-shrink: 0; font-family: var(--font-serif); font-size: 40px; font-weight: 700; color: var(--gold-bright); line-height: 1; }
.ecc-ellos-txt { font-size: 12.5px; line-height: 1.5; }
.ecc-ellos-txt .pd-btn { margin-top: 6px; }
.ecc-pie { padding: 12px 26px 4px; font-size: 11px; line-height: 1.5; opacity: 0.85; }
.ecc-pie p { margin: 0 0 6px; }
.ecc-legal { font-style: italic; opacity: 0.8; }
.ecc .civic-ticket-actions { padding: 8px 26px 22px; }
@media (max-width: 640px) {
  .ecc-cab, .ecc-resumen, .ecc-sec, .ecc-pie, .ecc .civic-ticket-actions { padding-left: 16px; padding-right: 16px; }
  .ecc-ellos { margin-left: 16px; margin-right: 16px; }
  .ecc-meta, .ecc-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-mov { grid-template-columns: minmax(0, 1fr) 44px 92px; }
  .ecc-mov-bar { display: none; }
  .ecc-titulo { font-size: 25px; }
  .ecc-ellos { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ecc-mov-bar i { animation: none; }
}

/* ==========================================================================
   VERIFICADOR 69-B (Inspector): la lista del SAT, sin salir de la pagina.
   ========================================================================== */
.efos-verificador { margin-top: 12px; }
.efos-estado { font-size: 12px; color: var(--text-dim); margin: 8px 2px 12px; line-height: 1.5; }
.efos-resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.efos-ficha { background: #10131c; border: 1px solid var(--border-subtle); border-left: 4px solid var(--text-dim); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; }
[data-theme="light"] .efos-ficha { background: #fff; }
.efos-ficha h4 { margin: 6px 0; font-size: 14px; font-family: var(--font-sans); overflow-wrap: anywhere; }
.efos-ficha p { margin: 0 0 8px; color: var(--text-secondary); }
.efos-ficha-cab { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.efos-ficha-cab code { font-family: var(--font-mono); font-size: 12px; }
.efos-sit { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,0.08); }
.efos-oficio { font-size: 11px; color: var(--text-dim); }
.efos-f { border-left-color: #e5484d; } .efos-f .efos-sit { background: rgba(229,72,77,0.18); color: #ff8a8d; }
.efos-p { border-left-color: #f5a524; } .efos-p .efos-sit { background: rgba(245,165,36,0.18); color: #f7b955; }
.efos-d { border-left-color: #30a46c; } .efos-d .efos-sit { background: rgba(48,164,108,0.18); color: #5fd49a; }
.efos-s { border-left-color: #30a46c; } .efos-s .efos-sit { background: rgba(48,164,108,0.18); color: #5fd49a; }
[data-theme="light"] .efos-f .efos-sit { color: #b3261e; }
[data-theme="light"] .efos-p .efos-sit { color: #8a5a00; }
[data-theme="light"] .efos-d .efos-sit, [data-theme="light"] .efos-s .efos-sit { color: #1b6b43; }
.efos-vacio, .efos-nota { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.efos-guia { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.efos-guia summary { cursor: pointer; font-weight: 600; color: var(--gold-bright); }
.efos-guia ol { padding-left: 20px; }
/* Explicación larga de una portada, plegada: el lector ve la idea en una
   línea y abre el detalle si lo necesita. Viaja con los párrafos del
   encabezado cuando el proemio del módulo los absorbe. */
.hero-mas { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.hero-mas summary { cursor: pointer; font-weight: 600; color: var(--gold-bright); }
.hero-mas p { margin-top: 8px; }

/* ==========================================================================
   CAPITULOS: indice de tarjetas y lectura de un capitulo a la vez.
   ========================================================================== */
.cap-indice { margin: 4px 0 18px; }
.cap-indice-cab span { background: rgba(10,12,20,0.72); padding: 4px 10px; border-radius: 6px; color: #cfd5e6; }
[data-theme="light"] .cap-indice-cab span { background: rgba(255,255,255,0.85); color: #3b4460; }
.cap-indice-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.cap-todo { background: rgba(10,12,20,0.72); border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 20px; padding: 5px 12px; font: 600 11.5px var(--font-sans); cursor: pointer; text-transform: none; letter-spacing: 0; }
[data-theme="light"] .cap-todo { background: rgba(255,255,255,0.85); }
.cap-todo:hover { border-color: var(--gold); color: var(--gold-bright); }
.cap-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cap-tarjeta {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  background: #10131c; color: var(--text-primary, #e9ecf6); border: 1px solid var(--border-subtle); border-radius: 12px;
  padding: 14px 14px 12px; cursor: pointer; font-family: var(--font-sans);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="light"] .cap-tarjeta { background: #fff; color: #16203a; }
.cap-tarjeta:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.cap-tarjeta:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.cap-tarjeta.activa { border-color: var(--gold-bright); box-shadow: inset 0 0 0 1px var(--gold-bright); }
.cap-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; color: var(--text-dim); }
.cap-ico { position: absolute; top: 12px; right: 14px; font-size: 20px; }
.cap-tit { font-size: 14.5px; font-weight: 700; line-height: 1.25; padding-right: 26px; }
.cap-cifra { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--gold-bright); margin-top: 6px; line-height: 1.15; }
.cap-cifra-pie { font-size: 11px; color: var(--text-dim); line-height: 1.35; }
.cap-res { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin-top: 6px; }
.cap-modo-indice .cap-indice { margin-bottom: 0; }
.cap-bloque[hidden] { display: none !important; }
.cap-bloque { animation: cap-entra 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cap-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cap-nav { margin-top: 14px; }
.cap-avance { height: 4px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.cap-avance i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width 0.4s ease; }
.cap-nav-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cap-paso { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
.cap-btn { background: none; border: 1px solid var(--border-subtle); color: var(--text-secondary); border-radius: 8px; padding: 8px 12px; font: 600 12.5px var(--font-sans); cursor: pointer; max-width: 46%; text-align: left; }
.cap-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.cap-btn-sig { border-color: var(--gold); color: var(--gold-bright); text-align: right; }
@media (max-width: 640px) {
  .cap-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cap-tarjeta { padding: 12px 10px 10px; }
  .cap-cifra { font-size: 17px; }
  .cap-res { display: none; }
  .cap-paso { order: -1; width: 100%; text-align: center; }
  .cap-btn { max-width: none; flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cap-bloque { animation: none; }
  .cap-tarjeta { transition: none; }
}

/* 2.6 · Lo ya gastado: avance del año con marca de la mitad */
.pd-tabla-gasto td, .pd-tabla-gasto th { white-space: nowrap; }
.pd-tabla-gasto td:first-child { white-space: normal; min-width: 150px; }
.pd-avance-c { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.pd-avance { position: relative; flex: 1; height: 10px; background: var(--bg-card-alt, rgba(255,255,255,0.08)); border-radius: 5px; overflow: hidden; min-width: 70px; }
.pd-avance-v { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); border-radius: 5px; }
.pd-avance-mitad { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 2px; background: #fff; opacity: 0.85; }
[data-theme="light"] .pd-avance-mitad { background: #16203a; }
.pd-var { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border-radius: 4px; }
.pd-var-sube { color: #f7b955; background: rgba(245,165,36,0.14); }
.pd-var-baja { color: #8fb3d9; background: rgba(120,160,210,0.14); }
[data-theme="light"] .pd-var-sube { color: #8a5a00; }
[data-theme="light"] .pd-var-baja { color: #2b527a; }

/* ==========================================================================
   EL COSTO AMBIENTAL (Accion Financiera)
   ========================================================================== */
.am-reloj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 10px; }
.am-reloj-c { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(20, 70, 45, 0.55), rgba(10, 20, 30, 0.85)); border: 1px solid rgba(95, 212, 154, 0.35); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
[data-theme="light"] .am-reloj-c { background: linear-gradient(160deg, #e7f6ee, #ffffff); border-color: #9fd6b8; }
.am-reloj-c::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, transparent, #5fd49a, transparent); animation: am-barrido 2.4s linear infinite; }
@keyframes am-barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.am-reloj-t { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #9fe3bf; }
[data-theme="light"] .am-reloj-t { color: #1b6b43; }
.am-reloj-c strong { font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: #eafff3; overflow-wrap: anywhere; }
[data-theme="light"] .am-reloj-c strong { color: #0f3d27; }
.am-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.am-dato { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-left: 3px solid #5fd49a; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
[data-theme="light"] .am-dato { background: #fff; border-left-color: #2f9e67; }
.am-dato strong { font-family: var(--font-serif); font-size: 22px; color: var(--gold-bright); line-height: 1.1; }
.am-dato span { color: var(--text-secondary); line-height: 1.35; }
.am-dato small { color: var(--text-dim); font-size: 11px; line-height: 1.35; }
.am-alerta { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: rgba(245, 165, 36, 0.10); border: 1px solid rgba(245, 165, 36, 0.35); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.am-alerta-p { background: rgba(140, 150, 170, 0.10); border-color: rgba(140, 150, 170, 0.35); }
.am-serie { margin: 14px 0; }
.am-serie-cab { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 8px; }
.am-serie-g { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 0 4px; border-bottom: 1px solid var(--border-subtle); }
.am-serie-c { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.am-serie-b { display: block; width: 100%; max-width: 46px; background: linear-gradient(180deg, #5fd49a, #2f9e67); border-radius: 4px 4px 0 0; }
.am-serie-c small { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.am-balanza { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 12px 0; }
.am-balanza > div:not(.am-balanza-x) { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
[data-theme="light"] .am-balanza > div:not(.am-balanza-x) { background: #fff; }
.am-balanza strong { font-family: var(--font-serif); font-size: 22px; color: var(--gold-bright); }
.am-balanza-x { font-family: var(--font-serif); font-size: 30px; font-weight: 700; color: #ff8a8d; }
[data-theme="light"] .am-balanza-x { color: #b3261e; }
.am-leyes { padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.am-leyes li { margin-bottom: 8px; }
.am-est { font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.am-est-v { background: rgba(48, 164, 108, 0.18); color: #5fd49a; }
.am-est-c { background: rgba(245, 165, 36, 0.18); color: #f7b955; }
[data-theme="light"] .am-est-v { color: #1b6b43; }
[data-theme="light"] .am-est-c { color: #8a5a00; }
.am-quien td { white-space: normal; }
@media (max-width: 640px) {
  .am-reloj { grid-template-columns: 1fr; }
  .am-reloj-c strong { font-size: 22px; }
  .am-balanza { grid-template-columns: 1fr; }
  .am-balanza-x { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .am-reloj-c::after { animation: none; } }
.am-balanza .est-chip, .am-dato .est-chip { align-self: flex-start; }

/* Menus superiores: desplazamiento interno cuando el desplegable es mas alto que la pantalla */
.mega-menu-dropdown { overflow-y: auto; overscroll-behavior: contain; }

/* ==========================================================================
   DESCARGAR DATOS: ventana con las bases en CSV y su diccionario
   ========================================================================== */
.dl-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; background: rgba(4, 6, 12, 0.72); overflow-y: auto; }
.dl-caja { width: 100%; max-width: 760px; background: #10131c; border: 1px solid var(--border-subtle); border-radius: 14px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); font-family: var(--font-sans); color: var(--text-primary, #e9ecf6); }
[data-theme="light"] .dl-caja { background: #fff; color: #16203a; }
.dl-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dl-cab h3 { font-family: var(--font-serif); font-size: 24px; margin: 0; color: var(--gold-bright); }
.dl-cerrar { background: none; border: 1px solid var(--border-subtle); color: inherit; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 15px; }
.dl-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.dl-base { border-top: 1px solid var(--border-subtle); padding: 14px 0 6px; }
.dl-base-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dl-base h4 { margin: 0; font-size: 15px; }
.dl-base p { margin: 6px 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.dl-fuente { font-size: 11.5px !important; color: var(--text-dim) !important; }
.dl-base summary { cursor: pointer; font-size: 12.5px; color: var(--gold-bright); font-weight: 600; margin: 4px 0; }
.dl-base code { font-family: var(--font-mono); font-size: 11.5px; }
@media (max-width: 640px) { .dl-modal { padding: 12px; } .dl-caja { padding: 16px; } }

/* Modulo 5 en la portada: cinco tarjetas */
@media (min-width: 1200px) { .explorer-cards-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) and (max-width: 1199px) { .explorer-cards-grid { grid-template-columns: repeat(3, 1fr); } }
.explorer-card-eco { border-color: rgba(95, 212, 154, 0.45); }
.explorer-card-eco .explorer-card-stat strong { color: #9fe3bf; }
.explorer-card-eco .explorer-card-icon { border-color: rgba(95, 212, 154, 0.45); background: radial-gradient(circle at 35% 30%, rgba(95, 212, 154, 0.22), rgba(95, 212, 154, 0.05) 70%); }
[data-theme="light"] .explorer-card-eco .explorer-card-stat strong { color: #1b6b43; }
.am-profundizar { margin-top: 36px; padding-top: 12px; border-top: 1px dashed var(--border-subtle); }

/* En telefono la barra superior deja de ser fija: ocupaba cerca de un tercio
   de la pantalla y tapaba el principio de cada seccion. */
@media (max-width: 700px) {
  .site-top-nav { position: relative; }
}

/* Aterrizaje desde el menu: que el destino no quede bajo la barra fija
   (unos 145 px en escritorio). En telefono la barra no es fija. */
.tab-panel, .subtab-panel, #inspExplorador, #radarBanderasNacional, #expedientesCasos, .exp-ficha, #munBloqueLista, #forensicHeaderBar, #efosVerificador, #eb-egresos, #bloquePortal, #portalNuevoDebateForm, #portalFilterBar, #comOrientacion, #bloqueCanales, #decalogoWrap, .cap-bloque, .cap-indice { scroll-margin-top: 156px; }
@media (max-width: 700px) {
  .tab-panel, .subtab-panel, #inspExplorador, #radarBanderasNacional, #expedientesCasos, .exp-ficha, #munBloqueLista, #forensicHeaderBar, #efosVerificador, #eb-egresos, #bloquePortal, #portalNuevoDebateForm, #portalFilterBar, #comOrientacion, #bloqueCanales, #decalogoWrap, .cap-bloque, .cap-indice { scroll-margin-top: 12px; }
}

/* Pase Civico: si la ficha es mas alta que la pantalla, se desplaza dentro
   de la cubierta en lugar de cortarse arriba. */
.civic-modal-backdrop { overflow-y: auto; align-items: flex-start; }
.civic-modal-backdrop > .civic-modal-card { margin: auto; }
/* Ficha del catalogo a la que se llega desde una cita. */
.ref-row-item.ref-row-destacada { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: 8px; box-shadow: 0 0 22px rgba(212,175,55,0.35); transition: box-shadow .3s; }

/* ====================================================================
   INFORMES DE LA CUENTA PUBLICA (ASF)
   ==================================================================== */
.cp-seccion { margin: 0 0 32px; }
.cp-cab { border-left: 3px solid var(--gold); padding: 4px 0 4px 16px; margin-bottom: 16px; }
.cp-cab h3 { font-family: var(--font-serif); font-size: 24px; color: var(--text-main); margin: 6px 0; line-height: 1.25; }
.cp-cab p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0; max-width: 820px; }
.cp-sub { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); margin: 20px 0 10px; }
.cp-cuenta { display: flex; align-items: center; gap: 14px; background: rgba(201,168,76,0.08); border: 1px solid var(--border-gold); border-radius: 12px; padding: 12px 18px; margin: 14px 0; }
.cp-cuenta > span { font-family: var(--font-serif); font-size: 40px; font-weight: 700; color: var(--gold-bright); line-height: 1; }
.cp-cuenta b { display: block; color: var(--text-main); font-size: 15px; }
.cp-cuenta small { color: var(--text-dim); font-size: 12px; }
.cp-linea { list-style: none; margin: 16px 0; padding: 0 0 0 22px; border-left: 2px solid var(--border-subtle); }
.cp-linea li { position: relative; padding: 0 0 16px 8px; display: grid; gap: 3px; }
.cp-linea li::before { content: ""; position: absolute; left: -30px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border-subtle); }
.cp-linea li.cp-hecho::before { background: var(--emerald-bright, #2ecc71); border-color: var(--emerald-bright, #2ecc71); }
.cp-linea li.cp-prox::before { background: var(--gold-bright); border-color: var(--gold-bright); box-shadow: 0 0 0 5px rgba(212,175,55,0.2); }
.cp-linea .cp-fecha { font-family: var(--font-mono); font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.cp-linea b { color: var(--text-main); font-size: 14.5px; }
.cp-linea span:not(.cp-fecha) { color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.cp-linea small { font-size: 11.5px; color: var(--text-dim); }
.cp-pila { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 6px 0 10px; }
.cp-pila-R { background: #3b82f6; } .cp-pila-RD { background: #06b6d4; } .cp-pila-PEFCF { background: #a855f7; }
.cp-pila-SA { background: #f59e0b; } .cp-pila-PRAS { background: #ef4444; } .cp-pila-PO { background: #b91c1c; }
.cp-leyenda { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; font-size: 12.5px; color: var(--text-secondary); }
.cp-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.cp-leyenda b { color: var(--text-main); margin-right: 4px; font-family: var(--font-mono); }
.cp-leyenda .num-tabular { float: right; color: var(--text-main); }
.cp-ent-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.cp-ent-cab label { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; color: var(--gold); letter-spacing: .05em; }
.cp-ent-cab select { background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border-gold); border-radius: 8px; padding: 9px 12px; font-size: 14px; min-width: 240px; max-width: 100%; }
.cp-ranking { display: grid; gap: 2px; }
.cp-rank { width: 100%; background: none; border: 0; border-radius: 6px; padding: 4px 6px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.cp-rank:hover { background: rgba(255,255,255,0.04); }
.cp-rank-sel { background: rgba(212,175,55,0.12); outline: 1px solid var(--border-gold); }
.pd-barra-v.cp-barra-sel { background: var(--gold-bright); }
.cp-acciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 10px 0; }
.cp-accion { background: var(--bg-card-alt, rgba(255,255,255,0.03)); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
.cp-accion.cp-acc-correctiva { border-left: 3px solid #ef4444; }
.cp-accion.cp-acc-preventiva { border-left: 3px solid #3b82f6; }
.cp-accion p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.cp-accion small { color: var(--text-dim); font-size: 11px; }
.cp-clave { font-family: var(--font-mono); font-size: 11px; color: var(--gold); letter-spacing: .06em; }
.cp-plazos { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.cp-plazos b { color: var(--gold-bright); }
.cp-plazos small { color: var(--text-dim); font-size: 11px; margin-left: 4px; }
.cp-botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.cp-botones .hero-pillar-btn { text-decoration: none; }
#cuentaPublicaASF { scroll-margin-top: 156px; }
@media (max-width: 700px) {
  #cuentaPublicaASF { scroll-margin-top: 12px; }
  .cp-cab h3 { font-size: 20px; }
  .cp-cuenta > span { font-size: 32px; }
  .cp-ent-cab select { min-width: 0; width: 100%; }
}

/* Expedientes de casos: fichas con informes de la ASF y del Sistema de Alertas */
.exp-ficha .forensic-card-top { margin-bottom: 10px; }
.exp-hallazgo {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-main);
  margin: 10px 0 14px;
}
.exp-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.exp-cifra {
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.exp-cifra-v {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-bright);
}
.exp-cifra-e { font-size: 11.5px; line-height: 1.35; color: var(--text-secondary); }
.exp-anios { font-size: 12px; margin-bottom: 12px; }
.exp-informes, .exp-docs { margin: 4px 0 12px; font-size: 12px; }
.exp-informes summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--gold-bright);
  padding: 6px 0;
}
.exp-informes ol, .exp-docs { padding-left: 18px; margin: 6px 0 0; }
.exp-informes li, .exp-docs li { margin: 0 0 8px; line-height: 1.45; color: var(--text-secondary); }
.exp-informes a, .exp-docs a { color: var(--gold-bright); font-weight: 600; }
.exp-informes small { display: block; color: var(--text-dim); }
.exp-fuente { font-size: 11px; margin-bottom: 14px; }
@media (max-width: 640px) {
  .forensic-dossiers-grid { grid-template-columns: 1fr; }
  .exp-ficha { padding: 16px; }
}


/* --------------------------------------------------------------------------
   AUDITORIA EN IMAGENES: SIMULADOR «VER GASTO»
   Las cuentas nacen en cero y suben a la cifra oficial al pulsar el boton.
   -------------------------------------------------------------------------- */
.showcase-ia {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.62);
  color: #f1f5f9;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
}
.showcase-slide:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: -3px; }
.desc-modal-title, .desc-modal-tag { padding-right: 40px; }
.sc-sim { margin-bottom: 18px; }
.sc-mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}
.sc-btn {
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.6);
  background: #fbbf24;
  color: #111827;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sc-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(251, 191, 36, 0.35); }
.sc-btn:disabled { opacity: 0.7; cursor: progress; }
.sc-estado { font-size: 12.5px; color: #cbd5e1; flex: 1 1 220px; }
.sc-conts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.sc-cont {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-cont-v {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.sc-cont-e { font-size: 12px; line-height: 1.4; color: #cbd5e1; }
.sc-rastro-tit {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
}
.sc-rastro { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-fila { display: flex; flex-direction: column; gap: 4px; }
.sc-fila-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sc-fila-k { font-size: 13px; font-weight: 700; color: #e2e8f0; min-width: 0; }
.sc-fila-k a { color: inherit; text-decoration: underline; text-decoration-color: rgba(148, 163, 184, 0.5); text-underline-offset: 2px; }
.sc-fila-k a:hover { color: var(--blue-bright); }
.sc-fila-v { font-family: var(--font-mono); font-size: 13px; font-weight: 800; color: #fbbf24; white-space: nowrap; }
.sc-riel { display: block; height: 8px; border-radius: 4px; background: rgba(148, 163, 184, 0.18); overflow: hidden; }
.sc-barra { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f59e0b, #ef4444); }
.sc-fila-sub { font-size: 11.5px; line-height: 1.4; color: #94a3b8; }
.sc-hallazgo {
  font-size: 13px;
  line-height: 1.55;
  color: #e2e8f0;
  background: rgba(0, 43, 91, 0.25);
  border-left: 3px solid var(--blue-bright);
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  margin: 0 0 10px;
}
.sc-pendiente, .sc-fuente { font-size: 12px; line-height: 1.45; color: #94a3b8; margin: 0 0 6px; }
.desc-modal-acciones { display: flex; flex-direction: column; gap: 8px; }
.desc-modal-btn { text-decoration: none; text-align: center; }
.desc-modal-btn-2 {
  background: transparent;
  color: var(--blue-bright);
  border-color: rgba(56, 189, 248, 0.45);
  font-weight: 600;
}
.desc-modal-btn-2:hover { background: rgba(2, 132, 199, 0.14); box-shadow: none; }
[data-theme="light"] .sc-estado, [data-theme="light"] .sc-cont-e { color: #475569; }
[data-theme="light"] .sc-cont { background: rgba(241, 245, 249, 0.8); border-color: rgba(0, 43, 91, 0.12); }
[data-theme="light"] .sc-cont-v, [data-theme="light"] .sc-fila-v { color: #b45309; }
[data-theme="light"] .sc-rastro-tit { color: var(--navy-fed); }
[data-theme="light"] .sc-fila-k { color: #1e293b; }
[data-theme="light"] .sc-fila-sub, [data-theme="light"] .sc-pendiente, [data-theme="light"] .sc-fuente { color: #64748b; }
[data-theme="light"] .sc-riel { background: rgba(0, 43, 91, 0.1); }
[data-theme="light"] .sc-hallazgo { color: #334155; background: rgba(0, 43, 91, 0.05); border-left-color: var(--navy-fed); }
[data-theme="light"] .desc-modal-btn-2 { color: var(--navy-fed); border-color: rgba(0, 43, 91, 0.35); }
@media (max-width: 600px) {
  .descubrimiento-modal { padding: 10px; align-items: flex-start; }
  .desc-modal-card { padding: 20px 16px; max-height: calc(100vh - 20px); }
  .desc-modal-title { font-size: 19px; }
  .sc-conts { grid-template-columns: 1fr 1fr; }
  .sc-cont-v { font-size: 16px; }
}
/* ==========================================================================
   GLOSARIO EN VENTANA LATERAL (al estilo del glosario de USAspending)
   La palabra lleva un libro; al pulsarla se abre su definicion aqui mismo.
   ========================================================================== */
.glos-term {
  font: inherit;
  color: var(--gold-bright);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  display: inline;
  border-bottom: 1px dotted var(--gold);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.glos-term:hover { color: var(--gold-bright); border-bottom-style: solid; }
.glos-term:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 2px; }
.glos-term-ico {
  display: inline-block;
  font-size: 0.72em;
  margin-left: 3px;
  vertical-align: 0.18em;
  opacity: 0.85;
  font-style: normal;
}
[data-theme="light"] .glos-term { color: #0b3a6e; border-bottom-color: #0b3a6e; }
[data-theme="light"] .glos-term:hover { color: #0b3a6e; }

.glos-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 10, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 100010;
}
.glos-drawer-overlay.abierto { opacity: 1; pointer-events: auto; }

.glos-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: #10141d;
  border-left: 1px solid var(--border-gold);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.3s;
  z-index: 100011;
}
.glos-drawer.abierto {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
[data-theme="light"] .glos-drawer { background: #fbfaf7; border-left-color: rgba(0, 43, 91, 0.2); }

.glos-drawer-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.glos-drawer-marca {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-bright);
}
[data-theme="light"] .glos-drawer-marca { color: #0b3a6e; }
.glos-drawer-x {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-main);
  font-size: 15px;
  cursor: pointer;
}
.glos-drawer-x:hover { border-color: var(--gold); color: var(--gold-bright); }

.glos-drawer-cuerpo { flex: 1; overflow-y: auto; padding: 20px; }
.glos-drawer-cat {
  display: inline-block;
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.glos-drawer-tit {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--text-main);
}
.glos-drawer-sec { margin-bottom: 18px; }
.glos-drawer-sec h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
[data-theme="light"] .glos-drawer-sec h4 { color: #0b3a6e; }
.glos-drawer-sec p { font-size: 15px; line-height: 1.65; color: var(--text-main); margin: 0; }
.glos-drawer-ley { font-size: 13.5px !important; color: var(--text-secondary) !important; }
.glos-drawer-apa { font-size: 13px !important; color: var(--text-secondary) !important; }
.glos-drawer-num { font-family: var(--font-mono); color: var(--gold-bright); }
[data-theme="light"] .glos-drawer-num { color: #0b3a6e; }
.glos-drawer-doc {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cyan, #38bdf8);
}
.glos-drawer-pie { padding: 14px 20px; border-top: 1px solid var(--border-subtle); }
.glos-drawer-todo {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.glos-drawer-todo:hover { background: var(--gold); color: #0c0e15; }
[data-theme="light"] .glos-drawer-todo { border-color: #0b3a6e; color: #0b3a6e; }
[data-theme="light"] .glos-drawer-todo:hover { background: #0b3a6e; color: #fff; }
body.glos-drawer-bloqueo { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .glos-drawer, .glos-drawer.abierto, .glos-drawer-overlay { transition: none; }
}
/* Radar hacendario en la ventana lateral: que es, en que consiste y como
   se calcula cada cifra. Reutiliza .glos-drawer. */
.rc-filas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rc-fila { display: flex; flex-direction: column; gap: 4px; }
.rc-fila-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rc-fila-n { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-main); line-height: 1.35; }
.rc-fila-m { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; }
[data-theme="light"] .rc-fila-m { color: #0b3a6e; }
.rc-fila-d { font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.rc-barra { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rc-barra > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f59e0b, #ef4444); }
[data-theme="light"] .rc-barra { background: rgba(0, 0, 0, 0.07); }
.rc-nota { font-size: 13px !important; margin-top: 10px !important; color: var(--text-secondary) !important; }
.rc-pasos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.rc-paso { display: flex; gap: 10px; align-items: flex-start; }
.rc-paso-n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #0c0e15; background: var(--gold);
}
[data-theme="light"] .rc-paso-n { background: #0b3a6e; color: #fff; }
.rc-paso-t { font-size: 14px; line-height: 1.6; color: var(--text-main); }
.rc-plazos { padding-left: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-plazos li { font-size: 13.5px; line-height: 1.55; color: var(--text-main); }
.rc-fund { color: var(--text-dim); font-size: 12px; }
.glos-drawer-pie { display: flex; flex-direction: column; gap: 8px; }
.glos-drawer-todo-2 { border-color: var(--border-subtle); color: var(--text-main); font-weight: 600; }
.radar-stat-item[role="button"]:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 6px; }
#cuentaPublicaASFLeg { scroll-margin-top: 156px; }
@media (max-width: 640px) { #cuentaPublicaASFLeg { scroll-margin-top: 12px; } }
.cp-metricas { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
/* Libro junto al titulo de la portada: abre la nota «Las finanzas publicas». */
.hero-nota-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3em; height: 1.3em; margin-left: 0.35em; vertical-align: 0.12em;
  font-size: 0.62em; line-height: 1; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--border-gold);
  background: rgba(201, 168, 76, 0.12); color: inherit;
  transition: transform 0.2s ease, background 0.2s ease;
}
.hero-nota-btn:hover { transform: scale(1.1); background: rgba(201, 168, 76, 0.25); }
.hero-nota-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.showcase-nota-btn { font-size: 0.8em; vertical-align: 0.05em; }
[data-theme="light"] .hero-nota-btn { border-color: rgba(0, 43, 91, 0.3); background: rgba(0, 43, 91, 0.07); }
/* Sobre el recuadro translucido, el titulo y la frase llevan una sombra
   suave para leerse sobre cualquier parte de la fotografia. */
.explorer-hero-box .explorer-hero-title, .explorer-hero-box .explorer-hero-desc { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75); }
.explorer-hero-box .explorer-hero-desc { color: var(--text-main); }
[data-theme="light"] .explorer-hero-box .explorer-hero-title, [data-theme="light"] .explorer-hero-box .explorer-hero-desc { text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9); }
/* Tarjetas de modulo solidas sobre el recuadro translucido */
.explorer-hero-box .explorer-card { background: rgba(14, 18, 27, 0.88); }
[data-theme="light"] .explorer-hero-box .explorer-card { background: rgba(255, 255, 255, 0.94); }
.explorer-hero-box .explorer-card.active-explorer-card { background: linear-gradient(rgba(201, 168, 76, 0.1), rgba(201, 168, 76, 0.1)), rgba(14, 18, 27, 0.88); }
[data-theme="light"] .explorer-hero-box .explorer-card.active-explorer-card { background: linear-gradient(rgba(0, 43, 91, 0.05), rgba(0, 43, 91, 0.05)), rgba(255, 255, 255, 0.94); }

/* ==========================================================================
   LOGOTIPO: la moneda de oro inspectora. Al picarlo abre la presentacion.
   ========================================================================== */
.brand-logo-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: -6px 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.brand-logo-btn img {
  display: block;
  width: 72px;
  height: auto;
}
.brand-logo-btn-enc img { width: 82px; }
.brand-logo-btn:hover,
.brand-logo-btn:focus-visible {
  transform: translateY(-2px) rotate(-4deg) scale(1.06);
  filter: drop-shadow(0 4px 12px rgba(212, 168, 38, 0.45));
}
.brand-logo-btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .brand-logo-btn:hover img { animation: billeteAleteo 0.9s ease-in-out infinite alternate; }
}
@keyframes billeteAleteo {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}
@media (max-width: 640px) {
  .brand-logo-btn img { width: 56px; }
}

.pres-logo {
  display: block;
  width: 180px;
  height: auto;
  margin: 4px auto 14px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.3));
}
.pres-lema {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-main);
  margin: 8px 0 18px;
}
.pres-palabras { margin: 0; }
.pres-palabras dt {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--gold-bright);
  margin-top: 10px;
}
[data-theme="light"] .pres-palabras dt { color: var(--navy, #0b3a6e); }
.pres-palabras dd {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-main);
}
.pres-lista {
  margin: 0;
  padding-left: 22px;
  line-height: 1.55;
}
.pres-lista li { margin: 6px 0; font-size: 14px; color: var(--text-main); }

/* ==========================================================================
   MÓDULO 1 EN TRES BLOQUES
   Un índice de tres pasos arriba; debajo, tres bloques mayores que se
   despliegan por separado y, dentro, sus capítulos (1.1, 2.1...) que se
   despliegan a su vez. La línea punteada a la izquierda amarra cada
   capítulo con su bloque.
   ========================================================================== */
.erario-indice {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 4px 0 22px;
}
.erario-indice-paso {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.erario-indice-paso:hover { transform: translateY(-2px); background: var(--bg-card-hover); }
.erario-indice-paso:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.ei-n {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 0.9rem;
  color: #0c0e15; background: var(--gold);
}
.ei-ico { font-size: 26px; line-height: 1; }
.ei-tx { display: flex; flex-direction: column; min-width: 0; }
.ei-tx b { font-family: var(--font-serif); font-size: 15px; color: var(--gold-bright); line-height: 1.25; }
[data-theme="light"] .ei-tx b { color: var(--navy, #0b3a6e); }
.ei-tx small { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.erario-indice-flecha {
  align-self: center;
  color: var(--gold);
  font-size: 18px;
}

.erario-pleg-mayor { margin-bottom: 18px; }
.erario-pleg-mayor > .erario-pleg-h .erario-pleg-cab {
  padding: 18px 20px;
  border-color: var(--border-gold);
  border-left: 4px solid var(--gold);
}
.erario-pleg-ico { flex: none; font-size: 34px; line-height: 1; }
.erario-pleg-mayor > .erario-pleg-cuerpo {
  margin-left: 22px;
  padding: 20px 0 6px 20px;
  border-left: 2px dashed var(--border-gold);
}

.erario-pleg-sub { margin: 0 0 14px; }
.erario-pleg-sub > .erario-pleg-h .erario-pleg-cab { padding: 12px 16px; background: var(--bg-card-alt); }
.erario-pleg-sub .erario-pleg-tit { font-size: 18px; }
.erario-pleg-sub .erario-pleg-av { font-size: 13px; }
.erario-pleg-sub .erario-pleg-n {
  width: auto; min-width: 2.2rem; padding: 0 8px; border-radius: 999px; font-size: 0.85rem;
}

/* Bloque 1: las cuatro etapas en una sola tira, con flecha entre ellas */
.erario-pleg-cuerpo .civic-flow-schematic { margin-top: 0; }
.civic-flow-header .erario-bloque-sub { flex: 1 1 380px; }
.civic-flow-badge {
  font-family: var(--font-mono); font-size: 11px; color: var(--gold);
  background: rgba(201, 168, 76, 0.1); border: 1px solid var(--border-gold);
  padding: 4px 10px; border-radius: 12px;
}
.civic-flow-4 {
  list-style: none;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-top: 12px;
}
.civic-flow-4 .civic-flow-step { display: flex; flex-direction: column; padding-top: 20px; }
.civic-flow-4 .civic-flow-step:not(:last-child)::after {
  content: "➜";
  position: absolute;
  right: -21px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 16px;
}
.civic-flow-4 .civic-flow-step.active { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright) inset; }
.civic-step-verbo {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-bright);
  display: flex; align-items: center; gap: 8px;
}
[data-theme="light"] .civic-step-verbo { color: var(--navy, #0b3a6e); }
.civic-step-ico { font-size: 26px; line-height: 1; }
.civic-flow-4 .civic-step-title { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.civic-flow-4 .civic-step-desc { flex: 1; font-size: 12px; }
.civic-step-fijo .est-chip { font-size: 9.5px; vertical-align: middle; }
.civic-step-ley {
  margin-top: 10px;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--gold-bright);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  cursor: pointer;
}
[data-theme="light"] .civic-step-ley { color: var(--navy, #0b3a6e); }
.civic-step-ley:hover { background: rgba(201, 168, 76, 0.18); }
.civic-step-ley[aria-expanded="true"] .civic-step-ley-flecha { display: inline-block; transform: rotate(180deg); }
.civic-flow-schematic .circuito-detalle[hidden] { display: none; }

/* El proemio del módulo 1 enlista los tres bloques y los abre */
.mod-proemio-tema-ir { padding: 0 !important; }
.mod-proemio-tema-ir button {
  font: inherit; font-size: 12px; color: inherit;
  padding: 5px 12px; border: 0; background: none; cursor: pointer; border-radius: 999px;
}
.mod-proemio-tema-ir:hover { border-color: var(--gold) !important; }

@media (max-width: 1100px) {
  .civic-flow-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .civic-flow-4 .civic-flow-step:nth-child(2)::after { display: none; }
}
@media (max-width: 760px) {
  .erario-indice { flex-direction: column; }
  .erario-indice-flecha { transform: rotate(90deg); }
  .erario-pleg-mayor > .erario-pleg-cuerpo { margin-left: 8px; padding-left: 12px; }
  .erario-pleg-ico { font-size: 26px; }
  .civic-flow-4 { grid-template-columns: 1fr; gap: 24px; }
  .civic-flow-4 .civic-flow-step::after { display: none; }
  .civic-flow-4 .civic-flow-step:not(:last-child)::before {
    content: "➜"; position: absolute; bottom: -21px; left: 50%;
    transform: translateX(-50%) rotate(90deg); color: var(--gold);
  }
}

/* Módulo 2: índice de cuatro pasos; en pantallas medianas, de dos en dos */
@media (max-width: 1100px) and (min-width: 761px) {
  .erario-indice-4 { flex-wrap: wrap; }
  .erario-indice-4 .erario-indice-paso { flex: 1 1 calc(50% - 10px); }
  .erario-indice-4 .erario-indice-flecha { display: none; }
}
.glos-drawer-cuerpo .sim-conteo { margin-top: 6px; }
.glos-drawer-cuerpo .sim-conteo-ico { flex: none; }

/* ==========================================================================
   MÓDULO 2 · BLOQUE 2: filtros en dos pasos, filtro activo y vista en vivo
   ========================================================================== */
.sim-filtros {
  background: linear-gradient(180deg, rgba(201, 168, 76, 0.06), transparent 60%), var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}
.sim-filtros .sim-sel { background: transparent; border: 0; padding: 4px 2px 10px; margin: 0; }
.sim-filtros .sim-sel + .sim-sel,
.sim-filtros .sim-sel-mandato { border-top: 1px dashed var(--border-subtle); padding-top: 14px; margin-top: 4px; }
.sim-sel-paso {
  flex: none;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: #0c0e15; background: var(--gold);
  padding: 4px 9px; border-radius: 999px;
}
.sim-filtros .sim-sel-tit { font-family: var(--font-serif); font-size: 18px; }
.sim-filtros .sim-sel-cab .sim-vertodas { margin-left: auto; }

.sim-mdt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.sim-mdt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 12px 14px 12px 16px;
  text-align: left; cursor: pointer; font: inherit; color: var(--text-main);
  background: var(--bg-card-alt);
  border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--mdt, var(--gold));
  border-radius: 10px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sim-mdt:hover { transform: translateY(-2px); border-color: var(--mdt, var(--gold)); }
.sim-mdt:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.sim-mdt-nom { font-family: var(--font-serif); font-size: 15px; font-weight: 700; line-height: 1.2; }
.sim-mdt-per { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.sim-mdt-n {
  margin-top: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--mdt, var(--gold)); 
}
.sim-mdt.on {
  background: color-mix(in srgb, var(--mdt, #c9a84c) 16%, var(--bg-card-alt));
  border-color: var(--mdt, var(--gold));
  box-shadow: 0 0 0 1px var(--mdt, var(--gold)) inset;
}
.sim-mdt.on .sim-mdt-nom { color: var(--gold-bright); }
[data-theme="light"] .sim-mdt.on .sim-mdt-nom { color: var(--navy, #0b3a6e); }
.sim-mdt-cero { opacity: 0.5; }

.sim-filtro-activo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
  margin-top: 6px;
  border-radius: 12px;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid var(--border-gold);
}
.sim-fa-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sim-fa-lbl {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--gold);
}
.sim-fa-chip {
  font-size: 12.5px; font-weight: 700; color: var(--text-main);
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle);
}
.sim-fa-n { font-size: 12.5px; color: var(--text-secondary); }
.sim-fa-n b { color: var(--gold-bright); font-family: var(--font-mono); }
[data-theme="light"] .sim-fa-n b { color: var(--navy, #0b3a6e); }
.sim-filtros .sim-desg-cifras { margin-top: 12px; }

.sim-pill-vivo { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(231, 76, 60, 0.55) !important; }
.sim-pill-vivo .pulsing-dot { width: 7px; height: 7px; }
.sim-vista-vivo[hidden] { display: none; }
.sim-vista-vivo { margin-top: 4px; }

/* ==========================================================================
   MÓDULO 2 · BLOQUE 3: evaluación de los presidentes con trivia
   ========================================================================== */
.pe-subtit {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-size: 19px; color: var(--gold-bright);
  margin: 6px 0 12px;
}
[data-theme="light"] .pe-subtit { color: var(--navy, #0b3a6e); }
.pe-subtit span {
  font-family: var(--font-mono); font-size: 12px; font-weight: 800;
  color: #0c0e15; background: var(--gold); padding: 3px 9px; border-radius: 999px;
}
#presEval { margin-top: 8px; }
.pe {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  padding: 18px;
}
.pe-cab { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.pe-tit { font-family: var(--font-serif); font-size: 19px; margin: 0 0 4px; color: var(--text-main); }
.pe-sub { margin: 0; font-size: 13px; color: var(--text-secondary); max-width: 70ch; line-height: 1.55; }
.pe-marcador {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-gold); background: rgba(201, 168, 76, 0.08);
}
.pe-marcador b { color: var(--gold-bright); font-size: 15px; }
[data-theme="light"] .pe-marcador b { color: var(--navy, #0b3a6e); }
.pe-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pe-tab {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 7px 14px; border-radius: 999px; color: var(--text-main);
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle);
}
.pe-tab.on { border-color: var(--gold-bright); background: rgba(201, 168, 76, 0.16); color: var(--gold-bright); }
[data-theme="light"] .pe-tab.on { color: var(--navy, #0b3a6e); }
.pe-tab-marca { font-weight: 900; margin-left: 2px; }
.pe-tab-marca.ok { color: var(--emerald-bright, #2ecc71); }
.pe-tab-marca.no { color: var(--crimson-bright, #e74c3c); }
.pe-panel { border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.pe-q {
  padding: 14px 16px; border-radius: 12px; margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.12), transparent 70%);
  border: 1px dashed var(--border-gold);
}
.pe-q-lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gold); }
.pe-q-tit { font-family: var(--font-serif); font-size: 18px; margin: 6px 0 12px; color: var(--text-main); }
.pe-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pe-op {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--text-main);
  background: var(--bg-card-alt); border: 1px solid var(--border-subtle);
  border-left: 5px solid var(--pe, var(--gold)); border-radius: 10px;
  transition: transform 0.15s ease;
}
.pe-op:not(:disabled):hover { transform: translateY(-2px); border-color: var(--pe, var(--gold)); }
.pe-op b { font-size: 14px; }
.pe-op small { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); }
.pe-op:disabled { cursor: default; opacity: 0.55; }
.pe-op.correcta { opacity: 1; border-color: var(--emerald-bright, #2ecc71); box-shadow: 0 0 0 2px var(--emerald-bright, #2ecc71) inset; }
.pe-op.errada { opacity: 1; border-color: var(--crimson-bright, #e74c3c); box-shadow: 0 0 0 2px var(--crimson-bright, #e74c3c) inset; }
.pe-veredicto { margin: 12px 0 0; font-size: 14px; line-height: 1.55; }
.pe-veredicto.ok { color: var(--emerald-bright, #2ecc71); }
.pe-veredicto.no { color: var(--crimson-bright, #e74c3c); }
.pe-veredicto b { color: var(--text-main); }
.pe-bloqueado:disabled { opacity: 0.65; cursor: not-allowed; filter: grayscale(0.4); }
.pe-barras { list-style: none; padding: 0; margin: 12px 0 8px; display: flex; flex-direction: column; gap: 8px; transition: filter 0.3s ease, opacity 0.3s ease; }
.pe-velo { filter: blur(3px); opacity: 0.45; pointer-events: none; user-select: none; }
.pe-fila { display: grid; grid-template-columns: 190px 1fr 130px; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.pe-gana { background: rgba(201, 168, 76, 0.1); }
.pe-nom { display: flex; flex-direction: column; min-width: 0; }
.pe-nom b { font-size: 13.5px; }
.pe-nom small { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); }
.pe-riel { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
[data-theme="light"] .pe-riel { background: rgba(0, 0, 0, 0.06); }
.pe-barra { display: block; height: 100%; border-radius: 7px; }
.pe-nom-fuente a { color: var(--gold); font-family: var(--font-mono); font-size: 10px; }
.pe-val { font-family: var(--font-mono); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.pe-fuente { font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin: 8px 0 0; }
.pe-ficha { font-size: 13px; color: var(--text-secondary); margin: 14px 0 0; }
.pe-ficha a { color: var(--gold-bright); }
@media (max-width: 640px) {
  .pe-fila { grid-template-columns: 1fr; gap: 4px; }
  .pe-val { text-align: left; }
}

/* ---- Bloque 3: grupos de trivia y tablas comparativas verificadas ---- */
.pe-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 18px; margin-bottom: 14px; }
.pe-grupo { display: flex; flex-direction: column; gap: 6px; }
.pe-grupo .pe-tabs { margin-bottom: 0; }
.pe-grupo-et { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gold); }
.pe-fuera { margin: 4px 0 6px; padding-left: 1.1rem; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.pe-leccion { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold); background: rgba(201, 168, 76, 0.07); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.6; color: var(--text-main); }
.pe-conv { display: block; margin-top: 4px; opacity: 0.85; }
.pe-fuente a { color: var(--gold); }
[data-theme="light"] .pe-fuente a { color: var(--navy, #0b3a6e); }
.pe-tablas { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-gold); }
.pe-tabla-caja { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px; background: var(--bg-card-alt); }
.pe-tabla-cab { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pe-tabla-cab h4 { margin: 0; font-family: var(--font-serif); font-size: 16.5px; color: var(--text-main); }
.pe-tabla-aviso { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); }
.pe-tabla-scroll { overflow-x: auto; transition: filter 0.3s ease, opacity 0.3s ease; }
.pe-tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.pe-tabla th, .pe-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--border-subtle); text-align: right; vertical-align: middle; }
.pe-tabla thead th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.pe-tabla th[scope="row"], .pe-tabla thead th:first-child { text-align: left; }
.pe-tabla th[scope="row"] b { display: block; font-size: 13.5px; color: var(--text-main); }
.pe-tabla th[scope="row"] small { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); font-weight: 400; }
.pe-td-num { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-td-cp { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.pe-td-na { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.pe-nota-mk { color: var(--gold); margin-left: 2px; }
.pe-tabla-notas { margin: 10px 0 0; padding-left: 1.1rem; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.pe-tabla-notas li { margin-bottom: 3px; }
.pe-tabla th[scope="row"] { position: sticky; left: 0; z-index: 1; background: #151926; }
[data-theme="light"] .pe-tabla th[scope="row"] { background: #f6f4ee; }
.pe-td-cp { text-align: center; }
@media (max-width: 640px) { .pe-tabla th[scope="row"] { min-width: 128px; } .pe-tabla-cab h4 { font-size: 15px; } }

/* ==========================================================================
   MODULO 3, BLOQUE 2: USTED CONTRA ELLOS (filtros por Poder, tarjetas y
   cuadro de prestaciones contra la Ley Federal del Trabajo)
   ========================================================================== */
.shock-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.shock-filtro {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  border-radius: 999px; padding: 7px 14px; font: 600 12.5px var(--font-sans); cursor: pointer;
}
.shock-filtro:hover, .shock-filtro:focus-visible { border-color: var(--border-gold); color: var(--gold-bright); }
.shock-filtro.activo { background: var(--gold); border-color: var(--gold); color: #0c0f16; }
.shock-filtro-n { font-family: var(--font-mono); font-size: 11px; opacity: 0.75; margin-left: 2px; }
.shock-card-ico { font-size: 24px; margin-bottom: 4px; }
.shock-fig-et { color: var(--text-dim); padding-right: 8px; }
.shock-fig-v { text-align: right; color: var(--gold-bright); }
.shock-figure-row { gap: 8px; align-items: baseline; }
.shock-fig-concepto { font-family: var(--font-sans); font-size: 10.5px; color: var(--text-dim); line-height: 1.45; margin: -1px 0 7px; }
.shock-sub { list-style: none; margin: 0 0 10px; padding: 0; font-size: 11.5px; }
.shock-sub li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border-subtle); color: var(--text-secondary); }
.shock-sub li .num-tabular { white-space: nowrap; font-family: var(--font-mono); }
.shock-card-nota { font-size: 11.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 8px; }
.shock-card-nota small { color: var(--text-dim); }
.shock-lista { margin: 0 0 12px; font-size: 12px; }
.shock-lista summary { cursor: pointer; color: var(--cyan); font-weight: 600; }
.shock-lista ul { margin: 8px 0 6px; padding-left: 18px; columns: 2; column-gap: 18px; color: var(--text-secondary); }
.shock-lista li { break-inside: avoid; margin-bottom: 3px; }
.shock-card-fuente { font-size: 10.5px; color: var(--text-dim); margin-top: 12px; border-top: 1px dashed var(--border-subtle); padding-top: 8px; }
.shock-card-pend { border-style: dashed; }
.shock-prest { margin-top: 26px; border-top: 1px solid var(--border-subtle); padding-top: 18px; }
.shock-prest-tit { margin: 0 0 4px; font-family: var(--font-serif); font-size: 19px; color: var(--text-main); }
.shock-prest-sub { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.shock-prest-cuenta { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 8px; }
.shock-prest-caja { border: 1px solid var(--border-gold); border-radius: 10px; padding: 12px 14px; background: rgba(201, 168, 76, 0.06); }
.shock-prest-caja > span { font-weight: 700; color: var(--text-main); font-size: 13.5px; }
.shock-prest-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 6px; }
.shock-prest-par small { display: block; font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.shock-prest-par strong { font-family: var(--font-mono); font-size: 17px; color: var(--gold-bright); }
.shock-prest-par div:first-child strong { color: var(--cyan); }
.shock-prest-caja em { font-style: normal; font-size: 12px; color: var(--text-secondary); }
.shock-prest-op { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin: 0 0 14px; }
.shock-prest-scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 10px; }
.shock-prest-tabla { width: 100%; border-collapse: collapse; min-width: 820px; font-size: 12px; }
.shock-prest-tabla th, .shock-prest-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; line-height: 1.45; }
.shock-prest-tabla thead th { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gold); }
.shock-prest-tabla thead th small { display: block; text-transform: none; letter-spacing: 0; color: var(--text-dim); font-weight: 400; }
.shock-prest-tabla th[scope="row"] { color: var(--text-main); font-weight: 700; position: sticky; left: 0; background: #151926; min-width: 110px; }
.shock-prest-tabla td { color: var(--text-secondary); }
.shock-prest-tabla td small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.shock-td-lft { background: rgba(78, 205, 196, 0.07); color: var(--text-main) !important; }
.shock-td-nota { display: block; margin-top: 4px; font-size: 11px; color: var(--text-dim); }
.cc-bloque-ecc { margin-bottom: 10px; }
[data-theme="light"] .shock-prest-tabla th[scope="row"] { background: #f6f4ee; }
[data-theme="light"] .shock-filtro { background: rgba(0, 0, 0, 0.03); }
[data-theme="light"] .shock-figure-box { background: rgba(0, 0, 0, 0.04); }
@media (max-width: 600px) {
  .shock-container { padding: 18px 14px; }
  .shock-lista ul { columns: 1; }
  .shock-prest-par strong { font-size: 15px; }
}

/* Modulo 4, bloque 3: expedientes en lista numerada, un caso por renglon.
   El renglon muestra numero, tema, titulo y hasta tres cifras en fila; el
   desglose (hallazgo, tablas, informes) se abre al pulsarlo. */
.exp-conteo {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--gold-bright);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.exp-lista {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exp-fila-li { margin: 0; }
.exp-fila {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: border-color 0.2s;
}
.exp-fila[open], .exp-fila:hover { border-color: var(--border-gold); }
.exp-fila-cab {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
}
.exp-fila-cab::-webkit-details-marker { display: none; }
.exp-fila-cab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 12px; }
.exp-fila-n {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-bright);
  min-width: 2ch;
}
.exp-fila-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.exp-fila-tit { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.3; color: var(--text-main); }
.exp-fila-ente { font-size: 11.5px; color: var(--text-dim); line-height: 1.35; }
.exp-fila-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.exp-fila-cifra { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-fila-cifra b { font-family: var(--font-mono); font-size: 14.5px; color: var(--gold-bright); white-space: nowrap; }
.exp-fila-cifra small { font-size: 10.5px; line-height: 1.3; color: var(--text-secondary); }
.exp-fila-mas {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  color: var(--gold-bright);
  font-weight: 700;
}
.exp-fila[open] .exp-fila-mas { transform: rotate(45deg); }
.exp-fila-cuerpo { padding: 4px 18px 16px; border-top: 1px solid var(--border-subtle); }
.exp-fila-cuerpo .forensic-card-actions { margin-top: 4px; }
[data-theme="light"] .exp-fila { background: #fff; }
@media (max-width: 860px) {
  .exp-fila-cab { grid-template-columns: auto minmax(0, 1fr) auto; }
  .exp-fila-cifras { grid-column: 2 / 4; grid-row: 2; }
}
@media (max-width: 600px) {
  .exp-fila-cab { gap: 10px; padding: 12px 14px; }
  .exp-fila-n { font-size: 18px; }
  .exp-fila-cifras { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  .exp-fila-cuerpo { padding: 4px 14px 14px; }
}

/* Modulo 5 en bloques: simulacion de un ano, ticket en negativo y graficas.
   Cuatro colores de serie validados (claro y oscuro, CVD): cada uno sigue a
   su concepto, no a su lugar. c1 intereses de la deuda, c2 presupuesto
   federal de Medio Ambiente y PINE, c3 dano ambiental y PIB, c4 gasto en
   proteccion ambiental. */
:root { --am-c1: #e5534b; --am-c2: #23a197; --am-c3: #b8862a; --am-c4: #8f7ee6; --am-neg: #ff8a7a; }
[data-theme="light"] { --am-c1: #c0392b; --am-c2: #0e8f86; --am-c3: #b07d12; --am-c4: #6a4fc8; --am-neg: #b3261e; }
.am-c1 { background: var(--am-c1); } .am-c2 { background: var(--am-c2); }
.am-c3 { background: var(--am-c3); } .am-c4 { background: var(--am-c4); }
/* Cifra pendiente en el simulador: gris rayado, nunca un color de serie. */
.am-pend { background: repeating-linear-gradient(135deg, var(--text-dim) 0 5px, transparent 5px 9px); outline: 1px dashed var(--text-dim); outline-offset: -1px; }
.am-car-vistas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 16px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: 8px; }
.am-car-vistas-et { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-bright); font-family: var(--font-mono); margin-right: 4px; }
.am-car-vista-btn { background: var(--bg-card-alt); color: var(--text-secondary); border: 1px solid var(--border-subtle); padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; }
.am-car-vista-btn:hover { color: var(--text-main); border-color: var(--gold); }
.am-car-vista-btn.activa { background: var(--gold-glow); color: var(--gold-bright); border-color: var(--gold-bright); font-weight: 700; }
.am-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.am-pib-entrada { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 4px 0 14px; }

.am-car-mandos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 8px; }
.am-car-fecha { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--gold-bright); font-weight: 700; }
.am-car-avance { height: 3px; background: var(--border-subtle); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.am-car-avance i { display: block; height: 100%; width: 0; background: var(--gold); }
.am-car-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.am-car-fila { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 9.5rem; align-items: center; gap: 12px; }
.am-car-nom { font-size: 13px; color: var(--text-main); line-height: 1.3; }
.am-car-nom small { color: var(--text-dim); font-family: var(--font-mono); }
.am-car-riel { position: relative; height: 22px; background: var(--bg-card-alt); border-radius: 0 4px 4px 0; border-left: 1px solid var(--text-dim); }
.am-car-barra { position: absolute; left: 0; top: 2px; bottom: 2px; width: 0; min-width: 0; border-radius: 0 4px 4px 0; }
.am-car-v { font-family: var(--font-mono); font-size: 13px; color: var(--text-main); text-align: right; font-weight: 700; }
.am-car-remate { min-height: 1.4em; margin: 14px 0 6px; font-size: 14px; line-height: 1.55; color: var(--text-main); }

.am-tk-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 12px 0 16px; }
.am-tk-campo { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .5px; }
.am-tk-input { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-gold); border-radius: 10px; padding: 8px 12px; background: var(--bg-card-alt); }
.am-tk-input b { color: var(--gold-bright); }
.am-tk-input input { border: 0; background: transparent; color: var(--text-main); font: 700 18px var(--font-mono); width: 11ch; outline: none; }
.am-tk-origen { flex-basis: 100%; color: var(--text-dim); font-size: 12px; }
.am-tk {
  max-width: 560px; margin: 0 auto 14px; padding: 22px 22px 18px;
  background: #fbfaf6; color: #1b1d24; border-radius: 6px;
  font-family: var(--font-mono); font-size: 13px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 16px 100%;
          mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 16px 100%;
  padding-bottom: 26px;
}
.am-tk-cab { text-align: center; border-bottom: 2px dashed #9a978d; padding-bottom: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 3px; }
.am-tk-cab b { font-size: 17px; letter-spacing: 3px; }
.am-tk-cab span { text-transform: uppercase; letter-spacing: 1.5px; font-size: 11.5px; color: #b3261e; font-weight: 700; }
.am-tk-cab small { font-size: 10.5px; color: #5b5e68; }
.am-tk-sec { margin: 14px 0 6px; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #5b5e68; border-bottom: 1px solid #d6d3c8; padding-bottom: 4px; }
.am-tk-l { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; align-items: end; gap: 8px; padding: 4px 0; }
.am-tk-c { display: flex; flex-direction: column; line-height: 1.3; }
.am-tk-c small { font-size: 10.5px; color: #6a6d76; }
.am-tk-p { border-bottom: 1px dotted #a9a69c; margin-bottom: 5px; min-width: 12px; }
.am-tk-v { font-size: 14px; color: #b3261e; white-space: nowrap; }
.am-tk-ref .am-tk-v, .am-tk-l .am-tk-v[data-anim-f="pos"] { color: #146c43; }
.am-tk-sub { padding-left: 12px; opacity: .85; }
.am-tk-sub .am-tk-v { font-size: 12.5px; }
.am-tk-total { border-top: 2px solid #1b1d24; margin-top: 6px; padding-top: 7px; font-weight: 700; }
.am-tk-total .am-tk-v { font-size: 17px; }
.am-tk-graf { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 5px; }
.am-tk-graf-t { font-size: 10.5px; color: #5b5e68; text-transform: uppercase; letter-spacing: 1px; }
.am-tk-graf-r { display: flex; gap: 2px; height: 14px; background: #e6e3d8; border-radius: 3px; overflow: hidden; }
.am-tk-graf-r i { display: block; height: 100%; }
.am-tk-graf-r .am-c1 { background: #c0392b; } .am-tk-graf-r .am-c3 { background: #b07d12; }
.am-tk-graf-l { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: #3c3f48; }
.am-tk-graf-l .am-c1 { background: #c0392b; } .am-tk-graf-l .am-c3 { background: #b07d12; }
.am-tk-bal { margin-top: 14px; padding: 10px 12px; border: 1px dashed #b3261e; border-radius: 6px; line-height: 1.5; font-size: 12.5px; }
.am-tk-bal b { color: #b3261e; }
.am-tk-pie { margin-top: 12px; font-size: 10.5px; line-height: 1.5; color: #5b5e68; text-align: center; }
.am-tk-acciones { display: flex; justify-content: center; margin-bottom: 10px; }
.am-tk-vacio { text-align: center; }
.am-tk-anim > * { animation: amTkRenglon .45s ease-out both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes amTkRenglon { from { opacity: 0; transform: translateY(-6px); } }

.cee-graf { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.cee-graf-f { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 10px; }
.cee-graf-et { font-family: var(--font-mono); font-size: 12px; color: var(--text-main); }
.cee-graf-riel { position: relative; height: 20px; background: var(--bg-card-alt); border-radius: 4px; }
.cee-graf-cero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--text-dim); }
.cee-graf-b { position: absolute; top: 3px; bottom: 3px; left: 50%; width: 0; border-radius: 4px; transition: left .5s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.2, .8, .2, 1); }
.cee-graf-v { font-family: var(--font-mono); font-size: 13px; color: var(--text-main); text-align: right; }

/* La cascada y el desglose crecen al abrir el bloque: una animacion CSS
   arranca cuando el cuerpo plegado deja de estar oculto. */
.erario-pleg-cuerpo .cee-casc-barra { transform-origin: left center; animation: amCrece 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.erario-pleg-cuerpo .cee-casc-fila:nth-child(2) .cee-casc-barra { animation-delay: .15s; }
.erario-pleg-cuerpo .cee-casc-fila:nth-child(3) .cee-casc-barra { animation-delay: .3s; }
.erario-pleg-cuerpo .cee-casc-fila:nth-child(4) .cee-casc-barra { animation-delay: .45s; }
.erario-pleg-cuerpo .cee-casc-fila:nth-child(5) .cee-casc-barra { animation-delay: .6s; }
.erario-pleg-cuerpo .cee-casc-fila:nth-child(n+6) .cee-casc-barra { animation-delay: .75s; }
.erario-pleg-cuerpo .cee-comp-barra { transform-origin: left center; animation: amCrece 1s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes amCrece { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .am-tk-anim > *, .erario-pleg-cuerpo .cee-casc-barra, .erario-pleg-cuerpo .cee-comp-barra { animation: none; }
  .cee-graf-b { transition: none; }
}
@media (max-width: 700px) {
  .am-car-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .am-car-riel { grid-column: 1 / -1; grid-row: 2; }
  .am-car-fecha { margin-left: 0; flex-basis: 100%; }
  .am-tk { padding: 18px 14px 24px; font-size: 12px; }
  .am-tk-v { font-size: 13px; }
  .am-tk-total .am-tk-v { font-size: 15px; }
}

/* Leyenda de los tres estados de una cifra, en el pie */
.leyenda-estados {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.leyenda-estados-tit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.leyenda-estados ul { list-style: none; margin: 0; padding: 0; }
.leyenda-estados li {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.leyenda-estados li:last-child { margin-bottom: 0; }
.leyenda-estados .est-chip { margin-right: 6px; vertical-align: 1px; }

/* Panel lateral de contexto: boton que abre la informacion densa */
.ctx-abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-bright);
  background: rgba(201,168,76,0.08);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
}
.ctx-abrir:hover { background: rgba(201,168,76,0.16); }
.ctx-abrir:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.ctx-abrir-flecha { font-size: 16px; line-height: 1; }
.ctx-contenido[hidden] { display: none !important; }
.glos-drawer:has(.ctx-drawer-cuerpo) { width: min(560px, 100vw); }
.ctx-drawer-cuerpo { font-size: 14px; line-height: 1.65; color: var(--text-main); }
.ctx-drawer-cuerpo p { margin: 0 0 12px; }
.ctx-drawer-cuerpo ol, .ctx-drawer-cuerpo ul { padding-left: 20px; margin: 0 0 12px; }
.ctx-drawer-cuerpo li { margin-bottom: 6px; }
.ctx-drawer-cuerpo .sim-ver { margin-top: 0; overflow-x: auto; }
.ctx-drawer-cuerpo a { color: var(--gold-bright); }
.pd-sub-ctx { display: block; }
.ctx-drawer-cuerpo .pd-fila { margin-bottom: 8px; }
.ctx-drawer-cuerpo .pd-tabla-w { margin: 0 0 12px; }
.ctx-drawer-cuerpo .pd-nota { margin: 0 0 12px; }
[data-theme="light"] .ctx-abrir { color: #0b3a6e; border-color: rgba(0,43,91,0.3); background: rgba(0,43,91,0.05); }

/* Huachicol fiscal: aviso que enlaza con su explicación en el radar */
.aviso-huachicol { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; margin: 16px 0; padding: 14px 16px; border: 1px solid rgba(231, 76, 60, 0.45); border-left: 4px solid #e74c3c; border-radius: 10px; background: rgba(231, 76, 60, 0.07); }
.aviso-huachicol-ico { font-size: 22px; line-height: 1; }
.aviso-huachicol p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-main); }
.aviso-huachicol .ctx-abrir { grid-column: 2; justify-self: start; }
.radar-stat-huachicol .radar-stat-val { font-size: 0.92em; }
.glos-drawer-cuerpo a[target="_blank"] { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 2px; }

/* Contrasta una nota (Modo Inspector) */
.vn-verificador { display: grid; gap: 14px; margin-top: 12px; }
.vn-pasos { display: grid; gap: 14px; }
.vn-paso { display: grid; gap: 8px; }
.vn-et { font-size: 14px; color: var(--text-main); font-weight: 600; }
.vn-et small { font-weight: 400; color: var(--text-secondary); }
.vn-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-bright); color: #111; font-weight: 800; font-size: 13px; }
.vn-paso > .vn-n { margin-bottom: -2px; }
.vn-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-card, transparent); color: var(--text-main); font-size: 15px; }
.vn-resultados { display: grid; gap: 6px; }
.vn-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; text-align: left; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-main); cursor: pointer; font-size: 13.5px; }
.vn-item:hover, .vn-item:focus-visible { border-color: var(--gold-bright); outline: none; }
.vn-item-v { font-family: var(--font-mono); white-space: nowrap; }
.vn-mas { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.vn-elegida { font-size: 13.5px; line-height: 1.6; color: var(--text-main); }
.vn-elegida:empty { display: none; }
.vn-elegida a, .vn-v-fuente a, .vn-tabla a { color: var(--gold-bright); }
.vn-cifra { display: flex; flex-wrap: wrap; gap: 8px; }
.vn-cifra .vn-input { flex: 1 1 140px; width: auto; }
.vn-unidad { flex: 1 1 200px; padding: 10px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-card, transparent); color: var(--text-main); font-size: 14px; }
.vn-boton { justify-self: start; }
.vn-resultado:empty { display: none; }
.vn-veredicto { margin: 0; padding: 16px; border-radius: 12px; border: 1px solid var(--border-subtle); border-left-width: 5px; display: grid; gap: 10px; }
.vn-v-verde { border-left-color: #2ecc71; }
.vn-v-ambar { border-left-color: #f1c40f; }
.vn-v-rojo { border-left-color: #e74c3c; }
.vn-v-gris { border-left-color: #95a5a6; color: var(--text-secondary); font-size: 14px; }
.vn-v-tit { margin: 0; font-size: 17px; font-weight: 800; color: var(--text-main); }
.vn-tabla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.vn-tabla > div { display: grid; gap: 3px; padding: 10px; border-radius: 8px; background: rgba(127, 127, 127, 0.08); }
.vn-tabla span { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; }
.vn-tabla b { font-family: var(--font-mono); font-size: 16px; color: var(--text-main); overflow-wrap: anywhere; }
.vn-tabla small { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.vn-v-porque, .vn-v-fuente { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-main); }
.vn-aviso { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.vn-verificador { padding: 16px; border-radius: 14px; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.vn-veredicto { background: var(--bg-card); }
/* La cinta de datos pasa por debajo de su etiqueta: la etiqueta necesita fondo opaco */
.radar-tel-etiqueta { position: relative; z-index: 2; flex: 0 0 auto; background: #3a1418 !important; box-shadow: 8px 0 10px -4px rgba(0, 0, 0, 0.6); }
[data-theme="light"] .radar-tel-etiqueta { background: #fde4e4 !important; color: #9b1c1c !important; box-shadow: 8px 0 10px -4px rgba(0, 0, 0, 0.12); }

/* Sello de emisión de los tickets (solo en el auditor) */
.sello-av { width: 118px; height: 118px; color: #d9b457; transform: rotate(-12deg); opacity: .93; pointer-events: none; flex: 0 0 auto; }
.sello-av svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sello-disco { fill: rgba(8, 12, 26, 0.5); }
.sello-arco { font: 700 15px var(--font-mono); letter-spacing: 2px; fill: currentColor; }
.sello-arco-b { font-size: 10.5px; letter-spacing: 1.2px; }
.sello-estrella { font-size: 12px; fill: currentColor; }
.sello-emitido { font: 700 9px var(--font-mono); letter-spacing: 2px; fill: currentColor; }
.sello-fecha { font: 700 13px var(--font-mono); fill: currentColor; }
.sello-folio { font: 600 8.5px var(--font-mono); fill: currentColor; }
.ecc-sello { position: absolute; top: 14px; right: 18px; z-index: 2; }
[data-theme="light"] .ecc-sello { color: #8a6512; }
[data-theme="light"] .ecc-sello .sello-disco { fill: rgba(255, 255, 255, 0.6); }
body[data-pagina="auditor"] .ecc-marca, body[data-pagina="auditor"] .ecc-titulo { padding-right: 128px; }
.am-tk-sello { color: #8a6512; margin: 10px 2px 0 auto; transform: rotate(-9deg); }
.am-tk-sello .sello-disco { fill: transparent; }
@media (max-width: 600px) {
  .sello-av.ecc-sello { width: 86px; height: 86px; top: 10px; right: 10px; }
  body[data-pagina="auditor"] .ecc-marca, body[data-pagina="auditor"] .ecc-titulo { padding-right: 88px; }
  .am-tk-sello { width: 96px; height: 96px; }
}

/* Ancho uniforme (decisión del autor, 27-09-2026): «Auditoría en imágenes» y
   «Fiscalización ciudadana del gasto público» ocupan el mismo ancho y los mismos
   márgenes que el espacio donde se desglosa un módulo al pulsar «Comenzar»
   (.main-wrapper: 1560 px, 24 px por lado; 14 px en celular). */
body[data-pagina="auditor"] .civic-showcase-section, body[data-pagina="auditor"] .explorer-hero-section { max-width: 1560px; padding-left: 24px; padding-right: 24px; }
@media (max-width: 720px) {
  body[data-pagina="auditor"] .civic-showcase-section, body[data-pagina="auditor"] .explorer-hero-section { padding-left: 14px; padding-right: 14px; }
}
/* Las cifras de las tarjetas de módulo se parten en dos renglones cuando no
   caben, en lugar de salirse de la tarjeta y chocar con la de al lado. */
.explorer-card-stat strong { white-space: normal; text-align: center; overflow-wrap: anywhere; }
/* La barra «Regresar al punto de lectura» vive en una capa más alta que la
   ficha de «Auditoría en imágenes» y en celular le tapaba los botones de
   abajo. Mientras la ficha está abierta, la barra se oculta; al cerrarla
   vuelve tal como estaba. */
body:has(.descubrimiento-modal.show-modal) .nav-regreso { display: none; }
/* Tablas comparativas de la evaluacion: cada cifra abre su desglose. */
.pe-td-abre { cursor: pointer; transition: background 0.15s ease; }
.pe-td-abre:hover, .pe-td-abre:focus-visible { background: var(--gold-glow); outline: none; }
.pe-td-abre:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-bright); }
.pe-td-num.pe-td-abre > span:first-child { border-bottom: 1px dotted var(--gold); }
.pe-desliza { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 8px; }
.pe-dg-cifra { font-family: var(--font-mono); font-size: 26px; font-weight: 800; color: var(--text-main); margin: 4px 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Simulación en vivo del módulo 2: lo que nos cuesta cada obra (28-09-2026) */
.sim-vivo-nota { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.sim-vivo-tag { display: inline-block; font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 999px; border: 1px dashed var(--gold-bright); color: var(--gold-bright); vertical-align: middle; }
.sim-vivo-parado { background: transparent; border-style: dashed; border-color: var(--text-dim); box-shadow: none; }
.sim-vivo-falta { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, inherit); }
.sim-vivo-falta li { margin-bottom: 6px; }
.sim-vivo-comps { padding-left: 18px; font-size: 13px; line-height: 1.5; }
.sim-vivo-comps li { margin-bottom: 10px; }
.sim-vivo-total { margin: 14px 0 6px; padding: 14px 16px; border: 1px solid var(--crimson-bright); border-radius: 8px; background: linear-gradient(135deg, rgba(139, 26, 26, 0.25) 0%, transparent 100%); }
.sim-vivo-total-lbl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sim-vivo-total-val { font-family: var(--font-mono); font-size: clamp(22px, 5vw, 34px); font-weight: 800; color: #ffd166; margin: 6px 0 2px; overflow-wrap: anywhere; }
.sim-vivo-falta a { color: var(--gold-bright); text-decoration: underline; overflow-wrap: anywhere; }
.sim-vivo-falta .sim-ver-fuentes { padding-left: 14px; margin: 4px 0 0; list-style: none; }


/* ====================================================================
   AUDITAVISIÓN · CUENTA CIUDADANA Y ESTADO DE RESULTADOS GUBERNAMENTAL (CONAC)
   Estilos para el Estado de Actividades, Presupuesto, Flujos, Balance y Peritaje
   ==================================================================== */
.cf-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}
.cf-nav-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  align-items: center;
}
.cf-nav-btn {
  background: transparent;
  color: var(--text-muted, #94a3b8);
  border: 1px solid transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cf-nav-btn:hover {
  color: var(--text-bright, #fff);
  background: rgba(255, 255, 255, 0.06);
}
.cf-nav-btn.activa {
  background: var(--gold-bg, rgba(212, 175, 55, 0.15));
  color: var(--gold-bright, #ffd700);
  border-color: var(--gold, #d4af37);
}
.cf-concil-btn {
  margin-left: auto;
  background: rgba(0, 229, 255, 0.1);
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.3);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cf-concil-btn:hover {
  background: rgba(0, 229, 255, 0.2);
  border-color: #00e5ff;
}
.cf-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.cf-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-card-header {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cf-card-val {
  font-family: var(--font-mono, monospace);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright, #fff);
}
.cf-card-val.positivo { color: var(--emerald-bright, #2ecc71); }
.cf-card-val.negativo { color: var(--crimson-bright, #e74c3c); }
.cf-card-val.dorado { color: var(--gold-bright, #ffd700); }
.cf-card-val.cian { color: #00e5ff; }
.cf-card-sub {
  font-size: 11.5px;
  color: var(--text-muted, #94a3b8);
  line-height: 1.4;
}
.cf-table-w {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  margin-top: 8px;
}
.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}
.cf-table th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--gold-bright, #ffd700);
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cf-table td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.cf-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.cf-table td.num-tabular {
  font-family: var(--font-mono, monospace);
  text-align: right;
  font-weight: 600;
}
.cf-table tr.cf-row-destacada td {
  background: rgba(212, 175, 55, 0.08);
  font-weight: 700;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
.cf-callout {
  background: rgba(212, 175, 55, 0.05);
  border-left: 3px solid var(--gold, #d4af37);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-normal, #cbd5e1);
}
.cf-callout strong {
  color: var(--gold-bright, #ffd700);
}
.cf-modal-box {
  background: #0f172a;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  max-width: 850px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  padding: 24px;
  color: #e2e8f0;
}
.cf-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.cf-modal-tit {
  font-size: 19px;
  font-weight: 700;
  color: var(--gold-bright, #ffd700);
  margin: 0 0 4px 0;
}
.cf-modal-sub {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 0;
}
.cf-modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  color: #94a3b8;
  cursor: pointer;
}
.cf-modal-close:hover { color: #fff; }
/* Etiqueta visible de simulacion (propuesta de Astra, punto 6, 10-10-2026) */
.cc-sim-et { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: #fff3d6; color: #7a4b00; border: 1px solid #e8c77a; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
[data-theme="dark"] .cc-sim-et { background: #3a2c10; color: #f3d38a; border-color: #6b5222; }
.cc-sim-nota { margin-top: 10px; }
.am-tk-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Íconos de trazo en lugar de emojis (decisión del autor, 20-10-2026).
   Los pone assets/auditor/js/iconos.js; miden lo mismo que la letra de
   alrededor y toman su color. Solo los semáforos y las alertas llevan el
   color de su significado. */
svg.ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; stroke-width: 1.9; overflow: visible; }
svg.ico + svg.ico { margin-left: 0.15em; }
svg.ico.ico-r { fill: currentColor; stroke-width: 0; }
svg.ico.ico-rot { transform: rotate(180deg); }
svg.ico-circle.ico-r { width: 0.85em; height: 0.85em; vertical-align: -0.05em; }
svg.ico.ico-verde { color: var(--emerald-bright, #1e824c); }
svg.ico.ico-ambar { color: var(--amber, #b7791f); }
svg.ico.ico-rojo { color: var(--crimson-bright, #ba2828); }
svg.ico.ico-naranja { color: #d9731a; }
svg.ico.ico-azul { color: #1d5fd6; }
svg.ico.ico-gris { opacity: 0.6; }
svg.ico.ico-oro { color: #c9a84c; }
svg.ico.ico-plata { color: #8a96a8; }
svg.ico.ico-bronce { color: #b2713a; }