/* ══════════════════════════════════════════
   PINAMAR EN DATOS — Design System
   ══════════════════════════════════════════ */
:root {
  --bg-primary: #051208;
  --bg-secondary: #0a1e10;
  --bg-card: rgba(10, 30, 16, 0.35);
  --bg-card-hover: rgba(16, 42, 24, 0.55);
  --border-card: rgba(0, 200, 83, 0.12);
  --border-card-hover: rgba(0, 200, 83, 0.35);
  --cyan: #00c853;
  --on-cyan: #04140a;            /* tinta sobre un fondo --cyan: acompaña al --cyan de arriba */
  --cyan-dim: rgba(0, 200, 83, 0.15);
  --indigo: #a855f7;
  --emerald: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --text-primary: #e8f4ec;
  --text-secondary: #88a892;
  /* WCAG 2.1 AA (1.4.3): #4b7558 daba 3,63:1 sobre el fondo futurista — no llegaba al 4,5:1
     mínimo para texto chico (medido en el pie de página). #5d8a6b da 4,85:1 y es el tono más
     cercano al original que pasa: sube el contraste sin recalibrar la paleta. NO bajarlo. */
  --text-muted: #5d8a6b;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-glow: 0 0 30px rgba(0,200,83,0.07);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html {
  scroll-behavior: smooth;
  height: 100%;
  height: -webkit-fill-available;
  overflow: hidden;
  /* COMO UNA APP, SIN TRABAR A NADIE (decisión del usuario, 2026-10-12).
     En el celular se saca el zoom que aparece sin querer —el del doble toque—, que el teléfono
     agrande la letra por su cuenta y el rebote al llegar al borde. El zoom de DOS DEDOS no se
     toca: es el recurso de quien ve poco (la letra propia del portal llega sólo a 140 %) y
     bloquearlo baja la medición de accesibilidad. Por eso acá va `manipulation` y no
     `pan-x pan-y`, y por eso la etiqueta de la pantalla (<meta name="viewport">) no lleva
     `user-scalable=no`. Lo cuida scripts/test/zoom-portal.js. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: none;       /* el que se desplaza es <body>: al llegar al borde no rebota ni dispara la recarga del navegador */
  -webkit-overflow-scrolling: touch;
  line-height: 1.6;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
/* Background effects */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,83,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,83,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
#particleCanvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
/* Container */
.container { max-width: 1320px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
/* Header */
.header {
  /* z-index 300: por encima del .detail-panel (200) para que el menú "Módulos" no quede tapado
     por el encabezado del panel abierto; por debajo del drawer móvil (overlay 400 / panel 500). */
  position: sticky; top: 0; z-index: 300;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(6,10,20,0.8);
  border-bottom: 1px solid var(--border-card);
  padding: 0 clamp(16px, 3.5vw, 44px);
}
.header-inner {
  max-width: none; margin: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; position: relative;
}
.header-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.header-brand .logo-icon {
  height: 46px; width: auto;
  object-fit: contain;
  transition: transform 0.35s ease;
}
.header-brand:hover .logo-icon {
  transform: scale(1.08);
}
.header-brand h1 {
  font-family: var(--font-heading); font-size: 1.15rem;
  font-weight: 700; color: var(--text-primary);
}
.header-brand span { color: var(--cyan); }
.header-nav {
  display: flex; gap: 8px; align-items: center;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.header-nav a {
  color: var(--text-secondary); text-decoration: none;
  font-size: 0.85rem; padding: 6px 14px; border-radius: 8px;
  transition: var(--transition);
}
.header-nav a:hover, .header-nav a.active {
  color: var(--cyan); background: var(--cyan-dim);
}
/* Chatbot del HCD: el logo oficial como botón, con resplandor al pasar el cursor. */
.header-nav a.nav-chatbot {
  display: inline-flex; align-items: center;
  padding: 3px 5px; border-radius: 9px;
  line-height: 0; /* la imagen no arrastra el interlineado del texto */
}
.header-nav a.nav-chatbot img {
  height: 27px; width: auto; display: block;
  transition: filter .22s ease, transform .22s ease;
}
/* Sin resplandor (decisión del usuario, 2026-08-13): el logo se muestra limpio. Queda una
   respuesta mínima al cursor —un píxel de elevación— para que siga leyéndose como botón y
   no como una imagen decorativa. El anillo de foco por teclado lo pone accesibilidad.css. */
.header-nav a.nav-chatbot:hover img {
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .header-nav a.nav-chatbot img { transition: none; }
  .header-nav a.nav-chatbot:hover img { transform: none; }
}
/* Botón de Ingreso (CTA verde, arriba a la derecha — estética Portal Pinamar) */
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cyan-dim);
  border: 1px solid var(--border-card-hover);
  color: var(--cyan);
  padding: 8px 16px; border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap;
  transition: var(--transition);
}
.nav-cta:hover {
  background: rgba(0, 200, 83, 0.22); border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(0, 200, 83, 0.18); transform: translateY(-1px);
}
.nav-cta svg { flex-shrink: 0; }
/* Dropdown styles */
.nav-dropdown { position: relative; display: inline-block; }
.dropdown-content {
  position: absolute; top: 100%; left: 0;
  background: rgba(10, 30, 16, 0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  min-width: 220px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm);
  padding: 8px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 200;
}
.nav-dropdown:hover .dropdown-content,
.nav-dropdown:focus-within .dropdown-content {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}
.dropdown-content a {
  display: block; padding: 8px 16px; margin: 0 8px; border-radius: 6px;
  color: var(--text-secondary); font-weight: 500;
}
.dropdown-content a:hover {
  background: var(--cyan-dim); color: var(--cyan);
}
/* Mega-menú de Módulos: 4 ejes con sus módulos como enlaces directos. Centrado sobre "Módulos"
   (el nav está centrado con left:50%) y ancho acotado para no desbordar. Solo desktop (≥769px). */
.dropdown-content.mega {
  left: 50%; width: min(780px, calc(100vw - 210px));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 10px;
  padding: 14px 16px; min-width: 0;
  transform: translate(-50%, 10px);
}
.dropdown-content.mega::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* puente invisible: evita que el menú se cierre al bajar el cursor */
.nav-dropdown:hover .dropdown-content.mega,
.nav-dropdown:focus-within .dropdown-content.mega { transform: translate(-50%, 0); }
.mega .mega-h { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.mega .mega-num { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 11px; padding: 2px 6px; border-radius: 6px; color: var(--ax); background: color-mix(in srgb, var(--ax) 16%, transparent); }
.mega .mega-t { font-family: var(--font-heading, inherit); font-size: 11.5px; font-weight: 600; color: var(--text-primary); line-height: 1.15; }
.mega .mega-mod { display: flex; align-items: center; gap: 9px; padding: 6px 8px; margin: 0; border-radius: 8px; font-size: 12.5px; color: var(--text-secondary); font-weight: 500; text-decoration: none; transition: background .14s ease, color .14s ease, transform .14s ease; }
.mega .mega-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ax); box-shadow: 0 0 6px var(--ax); }
.mega .mega-mod:hover { background: rgba(0,255,162,0.12); color: #eafff2; transform: translateX(2px); }
.mega .mega-mod.dev { opacity: .5; }
.mega .mega-dev { margin-left: auto; font-size: 9px; font-weight: 600; color: #a855f7; border: 1px solid rgba(168,85,247,0.4); border-radius: 20px; padding: 1px 6px; letter-spacing: .3px; }
/* Búsqueda en la barra superior: input que se expande al foco + panel de resultados con fade suave. */
.nav-search { position: relative; display: flex; align-items: center; }
.nav-search-ic { position: absolute; left: 11px; color: var(--text-muted); pointer-events: none; }
.nav-search input { width: 172px; height: 38px; padding: 0 12px 0 33px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-card); border-radius: 10px; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; transition: width .22s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.nav-search input::placeholder { color: var(--text-muted); }
.nav-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nav-search input:focus { outline: none; width: 230px; border-color: rgba(0,200,83,0.5); background: rgba(0,200,83,0.06); box-shadow: 0 0 0 3px rgba(0,200,83,0.1); }

/* Buscador del padrón de inspectores. Traía el fondo y el borde escritos en línea con valores
   del tema oscuro (blanco al 5% y al 10%), así que en Clásico el campo era invisible: sólo se
   veían la lupa y el texto de ayuda flotando sobre la tarjeta. Encima, el onblur reponía ese
   mismo borde invisible al salir del campo, de modo que arreglar sólo el estilo no alcanzaba.
   Ahora el estado de foco lo da :focus, que el tema sí alcanza, y no hay nada en línea. */
.pd-buscador {
  padding: 8px 12px 8px 32px; width: 200px; border-radius: 6px; font-size: 0.85rem;
  color: var(--text-primary); outline: none; transition: border-color 0.2s, background 0.2s;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
}
.pd-buscador:focus { border-color: var(--cyan); }
/* En un celular, un campo donde se escribe con letra de menos de 16 px hace que el iPhone agrande
   la página sola al tocarlo, y la deja agrandada. En pantallas de dedo los dos buscadores van a
   16 px (o más, si la persona agrandó la letra); con mouse quedan como estaban. Cualquier campo
   nuevo tiene que cumplirlo: lo mira scripts/test/zoom-portal.js. */
@media (pointer: coarse) {
  .nav-search input, .pd-buscador { font-size: max(16px, 0.85rem); }
}
.pd-buscador::placeholder { color: var(--text-muted); opacity: 1; }
/* El borde va más marcado que el de una tarjeta: WCAG 1.4.11 pide 3:1 para el contorno de un
   control, y --border-card sobre blanco da 1,3:1. Con el verde al 70% llega a 3,3:1. */
[data-theme="light"] .pd-buscador { background: #ffffff; border-color: rgba(0, 114, 66, 0.7); }
.nav-search-results { position: absolute; top: calc(100% + 8px); right: 0; width: 330px; max-height: 384px; overflow-y: auto; background: rgba(10,30,16,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-card); border-radius: 12px; padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,0.55); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 250; }
.nav-search-results.show { opacity: 1; visibility: visible; transform: translateY(0); }
.ns-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--text-secondary); font-size: 0.85rem; transition: background .14s ease; }
.ns-item:hover, .ns-item.on { background: rgba(0,255,162,0.12); }
.ns-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ns-n { color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-ax { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; flex: none; }
.ns-item.dev { opacity: .55; }
.ns-empty { padding: 14px 12px; font-size: 0.82rem; color: var(--text-muted); text-align: center; }
.header-badge {
  font-size: 0.7rem; padding: 3px 8px; border-radius: 20px;
  background: linear-gradient(135deg, var(--cyan), var(--indigo));
  color: #fff; font-weight: 600; letter-spacing: 0.5px;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none; background: none; border: 1px solid rgba(0,200,83,0.3);
  color: var(--cyan); font-size: 1.4rem; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px;
  align-items: center; justify-content: center;
  transition: var(--transition);
}
.mobile-menu-toggle:hover { background: var(--cyan-dim); }
/* Drawer Overlay */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: all 0.35s ease;
}
.drawer-overlay.active { opacity: 1; visibility: visible; }
/* Drawer Panel */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 500;
  width: 85%; max-width: 360px;
  background: rgba(6,14,10,0.98);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border-left: 1px solid var(--border-card);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer.active { transform: translateX(0); }
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-card);
  flex-shrink: 0;
}
.drawer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-size: 1rem; color: var(--text-primary);
}
.drawer-close {
  background: none; border: 1px solid var(--border-card);
  color: var(--text-secondary); width: 34px; height: 34px;
  border-radius: 8px; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.drawer-close:hover { border-color: var(--cyan); color: var(--cyan); }
.drawer-body {
  flex: 1; overflow-y: auto; padding: 16px 16px 120px;
  display: flex; flex-direction: column; gap: 6px;
}
.drawer-body::-webkit-scrollbar { width: 0; }
.drawer-main-link {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: rgba(0,200,83,0.1);
  color: var(--text-primary); font-family: var(--font-heading);
  font-size: 1.1rem; font-weight: 700; text-decoration: none;
  border-radius: 12px; border: 1px solid rgba(0,200,83,0.2);
  transition: var(--transition); margin-bottom: 4px;
  flex-shrink: 0;
}
.drawer-main-link:hover { background: rgba(0,200,83,0.15); border-color: var(--cyan); }
.drawer-main-icon { font-size: 1.1rem; }
.drawer-axis {
  flex-shrink: 0;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border-card);
  border-radius: 12px; overflow: hidden; margin-bottom: 4px;
}
.drawer-axis-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border-card); transition: background 0.2s;
}
.drawer-axis-header:hover { background: rgba(255,255,255,0.03); }
.drawer-axis-info { display: flex; align-items: center; gap: 10px; }
.drawer-axis-num {
  font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
  padding: 2px 7px; border-radius: 6px; flex-shrink: 0;
}
.drawer-axis-title {
  font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;
}
.drawer-axis-chevron {
  color: var(--text-muted); font-size: 0.8rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer-axis.expanded .drawer-axis-chevron { transform: rotate(180deg); color: var(--text-primary); }
.drawer-axis.expanded .drawer-axis-header { border-bottom-color: rgba(255,255,255,0.05); }

.drawer-modules-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer-axis.expanded .drawer-modules-wrapper { 
  max-height: 500px; 
}
.drawer-modules { display: flex; flex-direction: column; padding-bottom: 6px; }
.drawer-module {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: none; border: none;
  color: var(--text-primary); font-size: 0.9rem; font-family: var(--font-body);
  cursor: pointer; text-align: left; width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.2s ease;
}
.drawer-module:last-child { border-bottom: none; }
.drawer-module:hover { background: rgba(0,200,83,0.07); color: var(--cyan); }
.drawer-module span { font-size: 1rem; flex-shrink: 0; }
.drawer-chatbot-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; padding: 14px;
  background: linear-gradient(135deg, rgba(0,200,83,0.15), rgba(0,242,255,0.1));
  border: 1px solid rgba(0,200,83,0.3); border-radius: 12px;
  color: var(--cyan); font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  text-decoration: none; transition: var(--transition);
}
.drawer-chatbot-btn:hover {
  background: linear-gradient(135deg, rgba(0,200,83,0.25), rgba(0,242,255,0.2));
  transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,242,255,0.2);
}
.drawer-chatbot-sm {
  width: max-content; margin: 0; padding: 10px 24px; font-size: 0.9rem;
}
/* Chatbot del HCD en el menú del celular: el MISMO logo que en la barra superior.
   Conserva el marco de botón del drawer (fondo y borde) porque acá tiene que leerse como
   una acción táctil, no como una imagen suelta; y mantiene 48 px de alto, que es el objetivo
   táctil cómodo. Sin resplandor, igual que arriba. */
.drawer-chatbot-logo {
  width: max-content; margin: 0 auto;
  padding: 11px 20px; min-height: 48px;
}
.drawer-chatbot-logo img { height: 30px; width: auto; display: block; }
.drawer-chatbot-logo:hover { transform: none; box-shadow: none; }
.drawer-external-link {
  color: var(--text-secondary); font-size: 0.85rem; font-family: var(--font-body);
  text-decoration: none; padding: 8px 14px; border-radius: 8px;
  transition: all 0.2s; display: block;
}
.drawer-external-link:hover {
  background: rgba(255,255,255,0.03); color: var(--text-primary);
}
/* Hero */
.hero { padding: 44px 0 40px; text-align: center; scroll-margin-top: 90px; position: relative; z-index: 5; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.hero .hero-brand {
  font-family: 'Space Grotesk', var(--font-heading);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 14px;
  background: linear-gradient(to right, #ffffff 20%, var(--cyan) 50%, #ffffff 80%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shine-text 5s linear infinite;
}
@keyframes shine-text {
  to { background-position: 200% center; }
}
.hero .hero-lead {
  font-family: 'Space Grotesk', var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 600; line-height: 1.2; color: var(--text-primary); margin: 0 auto 18px;
}
.hero .hero-lead span { color: var(--cyan); }
.hero .hero-sub {
  color: var(--text-secondary); max-width: 580px; margin: 0 auto 40px;
  font-size: 1.02rem; line-height: 1.6; font-weight: 300;
}
/* KPI Row */
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 48px;
}
.kpi-card {
  background: rgba(2, 8, 4, 0.6); border: 1px solid var(--border-card);
  border-radius: var(--radius); padding: 24px;
  transition: var(--transition); position: relative; overflow: hidden;
  
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--indigo));
  opacity: 0; transition: var(--transition);
}
.kpi-card:hover { border-color: var(--border-card-hover); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.kpi-card:hover::before { opacity: 1; }
.kpi-icon { 
  font-size: 1.5rem; margin-bottom: 8px; 
  display: inline-block; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kpi-card:hover .kpi-icon { transform: scale(1.18) translateY(-3px) rotate(-3deg); }

/* Tarjeta elegida del padrón de inspectores. Antes esto lo escribía el JS en línea, y de paso
   le escribía a las NO elegidas un fondo blanco al 2% que pisaba el verde claro del Clásico:
   las cuatro restantes quedaban como huecos. Con la marca en una clase, las no elegidas no
   llevan nada encima y siguen siendo .kpi-card comunes en los dos temas.
   --cyan-dim existe en ambos temas, así que una sola regla alcanza.
   Los tres nombres de clase son a propósito: [data-theme="light"] .kpi-card pesa lo mismo que
   .inspector-card.is-sel y está declarada más abajo, así que le ganaba y la tarjeta elegida
   quedaba igual que las otras cuatro en Clásico. */
.kpi-card.inspector-card.is-sel { border-color: var(--cyan); background: var(--cyan-dim); }
.kpi-value {
  font-family: var(--font-heading); font-size: 2rem; font-weight: 800;
  color: var(--text-primary); line-height: 1;
}
.kpi-value .unit { font-size: 0.9rem; color: var(--text-secondary); font-weight: 400; }
.kpi-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; }
.kpi-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.75rem; font-weight: 600; margin-top: 8px;
  padding: 2px 8px; border-radius: 20px;
}
.kpi-trend.up { color: var(--emerald); background: rgba(16,185,129,0.12); }
.kpi-trend.down { color: var(--rose); background: rgba(244,63,94,0.12); }
/* Section */
.section { margin-bottom: 56px; scroll-margin-top: 90px; }
.section-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.section-number {
  font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800;
  color: var(--text-muted); line-height: 1;
}
.section-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; }
.section-sub { color: var(--text-secondary); font-size: 0.9rem; }
/* Module Cards */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
@property --snake-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.module-card {
  background: rgba(2, 8, 4, 0.6); border: 1px solid var(--border-card);
  border-radius: var(--radius); padding: 28px;
  cursor: pointer; transition: var(--transition); position: relative;
}
.module-card::before {
  content: ''; position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  padding: 1px;
  background: conic-gradient(from var(--snake-angle), transparent 75%, rgba(0, 255, 102, 1) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: snakeSpin 6s linear infinite; z-index: 10;
  pointer-events: none;
}
@keyframes snakeSpin { 0% { --snake-angle: 0deg; } 100% { --snake-angle: 360deg; } }

.module-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-card-hover); transform: translateY(-4px);
  box-shadow: var(--shadow-glow), inset 0 0 20px rgba(0, 200, 83, 0.05);
}
.module-card .mc-icon { 
  font-size: 2rem; margin-bottom: 12px; 
  display: inline-block; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.module-card:hover .mc-icon { transform: scale(1.18) translateY(-3px) rotate(-3deg); }
.module-card .mc-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.module-card .mc-desc { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 16px; }
.module-card .mc-stat { font-size: 1.1rem; font-weight: 700; }
.module-card .mc-stat.cyan { color: var(--cyan); }
.module-card .mc-stat.emerald { color: var(--emerald); }
.module-card .mc-stat.amber { color: var(--amber); }
.module-card .mc-stat.indigo { color: var(--indigo); }
.module-card .mc-stat.rose { color: var(--rose); }
.module-card .mc-stat.wip { color: var(--indigo); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; }
.module-card .mc-arrow {
  position: absolute; top: 28px; right: 28px;
  color: var(--text-muted); font-size: 1.2rem;
  transition: var(--transition);
}
.module-card:hover .mc-arrow { color: var(--cyan); transform: translateX(4px); }

/* Spotlight: la tarjeta se "ilumina" siguiendo al cursor (estética Portal Pinamar).
   El JS actualiza --mx/--my en mousemove; el radial-gradient se centra ahí. */
.module-card::after, .kpi-card::after, .roadmap-card::after, .spot-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 230, 118, 0.13), transparent 62%);
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 1;
}
.module-card:hover::after, .kpi-card:hover::after, .roadmap-card:hover::after, .spot-card:hover::after { opacity: 1; }
.spot-card { position: relative; }
.spot-card > * { position: relative; z-index: 2; }

/* Tooltip suave para [data-tip] — JS lo posiciona con left/top (viewport). */
.pd-tip {
  position: fixed; z-index: 9999; pointer-events: none; top: 0; left: 0;
  max-width: 280px; padding: 8px 11px;
  background: rgba(5,18,8,0.96); color: var(--text-primary);
  border: 1px solid rgba(0,200,83,0.42); border-radius: 9px;
  font-size: 0.8rem; line-height: 1.35; font-weight: 500;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5), 0 0 16px rgba(0,200,83,0.14);
  opacity: 0; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease;
}
.pd-tip.show { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .pd-tip { transition: opacity 0.12s ease; transform: none; } }

/* Tarjeta-puente: acceso a la visión completa del Plan 2050 (Portal Pinamar) */
.bridge-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 28px; padding: 24px;
  background: linear-gradient(135deg, rgba(0,200,83,0.12), rgba(2,8,4,0.4));
  border: 1px solid rgba(0,200,83,0.35); border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 30px rgba(0,200,83,0.08); transition: var(--transition);
}
.bridge-card:hover { border-color: var(--cyan); box-shadow: 0 0 40px rgba(0,200,83,0.18); transform: translateY(-2px); }
.bridge-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(0,230,118,0.16), transparent 60%);
  opacity: 0; transition: opacity 0.35s; pointer-events: none; z-index: 1;
}
.bridge-card:hover::after { opacity: 1; }
.bridge-card > * { position: relative; z-index: 2; }
.bridge-ico {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  background: rgba(0,200,83,0.14); border: 1px solid rgba(0,200,83,0.4);
  box-shadow: 0 0 24px rgba(0,200,83,0.18);
}
.bridge-body { flex: 1; min-width: 220px; }
.bridge-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,200,83,0.12); border: 1px solid rgba(0,200,83,0.3);
  color: var(--cyan); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 8px;
}
.bridge-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; margin-bottom: 6px; }
.bridge-desc { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.5; }
.bridge-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  background: var(--cyan); color: var(--on-cyan);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem;
  padding: 13px 22px; border-radius: 11px; white-space: nowrap;
  box-shadow: 0 0 22px rgba(0,200,83,0.3);
}
.bridge-note { text-align: center; color: var(--text-muted); font-size: 0.72rem; margin-top: 12px; }
@media (max-width: 600px) { .bridge-btn { width: 100%; justify-content: center; } }

/* Hoja de ruta 2050 — las 4 fases como tarjetas (reemplaza el timeline largo del home) */
.roadmap { display: flex; flex-direction: column; gap: 22px; }
.rm-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.rm-progress-label { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.rm-progress-val { font-size: 0.82rem; color: var(--text-secondary); }
.rm-progress-val b { color: var(--cyan); font-weight: 700; }
.rm-progress-track { height: 6px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
.rm-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--emerald), var(--cyan)); box-shadow: 0 0 12px rgba(0,200,83,0.5); }

.roadmap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.roadmap-card {
  --rm: var(--amber);
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--radius-sm); padding: 16px 16px 18px;
  transition: var(--transition);
}
.roadmap-card.done { border-color: rgba(0,200,83,0.3); box-shadow: 0 0 26px rgba(0,200,83,0.07); }
.roadmap-card:hover { transform: translateY(-3px); border-color: var(--border-card-hover); }
.roadmap-card > * { position: relative; z-index: 2; }
.rm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.rm-fase { font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.rm-status { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.rm-status.done { background: rgba(16,185,129,0.15); color: var(--emerald); }
.rm-status.wip { background: rgba(245,158,11,0.15); color: var(--amber); }
.rm-ring { position: relative; width: 54px; height: 54px; margin-bottom: 14px; }
.rm-ring svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.rm-ring .rm-track { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 3; }
.rm-ring .rm-arc { fill: none; stroke: var(--rm); stroke-width: 3; stroke-linecap: round; }
.roadmap-card.wip .rm-arc { stroke-dasharray: 26 100; transform-box: fill-box; transform-origin: center; animation: rmspin 9s linear infinite; }
.rm-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.rm-title { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--text-primary); line-height: 1.3; margin-bottom: 5px; }
.rm-desc { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.45; }
@keyframes rmspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roadmap-card.wip .rm-arc { animation: none; stroke-dasharray: 50 100; } }

/* Chart container */
.chart-wrap {
  background: rgba(2, 8, 4, 0.6); border: 1px solid var(--border-card);
  border-radius: var(--radius); padding: 28px;
  
}
.chart-wrap h3 {
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700;
  margin-bottom: 20px;
}
/* Filas de tarjetas (reclamos y trámites). El espacio entre una fila y la siguiente es de la fila:
   la grilla sólo separa lo que tiene ADENTRO, así que dos filas seguidas quedaban pegadas, y la
   última, pegada a la franja de datos abiertos. 24 px hacia abajo: lo mismo que hay entre los
   indicadores y la primera fila, y lo que usan los demás paneles (.panel-chart-grid). */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; margin-bottom: 24px; }
/* Timeline */
.timeline { position: relative; padding-left: 40px; }
.timeline::before {
  content: ''; position: absolute; left: 14px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(180deg, var(--cyan), var(--indigo), var(--text-muted));
}
.timeline-item { position: relative; margin-bottom: 32px; }
.timeline-item .tl-dot {
  position: absolute; left: -34px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid var(--cyan); background: var(--bg-primary);
}
.timeline-item.completed .tl-dot { background: var(--cyan); }
.timeline-item.active .tl-dot { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 12px rgba(245,158,11,0.4); }
.timeline-item .tl-phase {
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem; margin-bottom: 4px;
}
.timeline-item .tl-status {
  display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 10px;
  border-radius: 20px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.timeline-item .tl-status.done { background: rgba(16,185,129,0.15); color: var(--emerald); }
.timeline-item .tl-status.wip { background: rgba(245,158,11,0.15); color: var(--amber); }
.timeline-item .tl-desc { font-size: 0.85rem; color: var(--text-secondary); }

/* Custom Scrollbar (Desktop Only) */
@media (min-width: 769px) {
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-left: 1px solid rgba(255,255,255,0.03);
  }
  ::-webkit-scrollbar-thumb {
    background: #3c4043;
    border-radius: 6px;
    border: 3px solid var(--bg-primary);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #5f6368;
  }
}

/* Panel Navigation */
.panel-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--border-card);
}
.nav-btn {
  background: var(--bg-card); border: 1px solid var(--border-card);
  color: var(--text-secondary); font-family: var(--font-heading);
  font-size: 0.95rem; font-weight: 600; padding: 12px 24px;
  border-radius: 12px; cursor: pointer; transition: var(--transition);
  text-align: left; line-height: 1.4; min-width: 180px;
}
.nav-btn.next { text-align: right; }
.nav-btn:hover:not(:disabled) {
  background: var(--cyan-dim); border-color: var(--cyan);
  color: var(--cyan); transform: translateY(-3px);
  box-shadow: 0 4px 20px rgba(0, 200, 83, 0.1);
}
.nav-btn:disabled {
  opacity: 0.2; cursor: not-allowed;
}
.nav-footer-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 0 24px; margin-top: 12px;
}

/* Footer */
.footer {
  text-align: center; padding: 24px 0 90px 0; margin-top: 40px;
  border-top: 1px solid var(--border-card);
  color: var(--text-muted); font-size: 0.8rem;
}
.footer a { color: var(--cyan); text-decoration: none; }
/* Responsive */
@media (max-width: 768px) {
  .header-badge { display: none; }
  .mobile-menu-toggle { display: flex !important; }
  .header-nav { display: none !important; }
  .nav-search { display: none; }
  .nav-cta { padding: 8px 11px; }
  .nav-cta span { display: none; } /* en celular, solo el ícono */
  .header-nav a { padding: 12px; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); border-radius: 6px; text-align: left; }
  .header-nav a:hover { background: rgba(0,242,255,0.05); }
  .header-nav a:last-child { border-bottom: none; margin-top: 4px; }
  .nav-dropdown { width: 100%; text-align: left; }
  .nav-dropdown .dropdown-content {
    position: static; visibility: inherit; opacity: 1; transform: none;
    background: transparent; border: none; box-shadow: none; padding: 0;
    display: flex; flex-direction: column;
    margin-top: 8px; border-left: 2px solid var(--cyan-dim); margin-left: 16px;
  }
  .dropdown-content a { padding: 12px 16px; font-size: 0.95rem; border-bottom: none; }
  .kpi-row { grid-template-columns: 1fr 1fr; }
  .chart-row { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr; }

  /* Efecto Stacking Cards (Mercado Pago Style) */
  .module-card {
    position: sticky;
    background: rgba(2, 8, 4, 0.6);
    box-shadow: 0 -4px 15px rgba(0,0,0,0.5); /* Sombra más suave para no oscurecer el texto */
    border-top: 1px solid rgba(0, 200, 83, 0.4);
    margin-bottom: 0;
    padding: 20px; /* Reducir padding en móvil para optimizar espacio */
    transform: none !important;
    transition: background 0.3s ease;
  }
  
  .module-card.stuck {
    background: rgba(5, 18, 8, 0.99) !important; /* Opaco para tapar textos inferiores */
  }
  
  .module-card:hover, .module-card:active {
    background: rgba(6, 20, 10, 0.75) !important; /* Premium semi-transparente */
    box-shadow: inset 0 72px 0 0 rgba(0, 242, 255, 0.06), 0 -4px 15px rgba(0, 242, 255, 0.1) !important;
    border-top: 1px solid var(--cyan) !important;
  }
  
  /* Alinear icono y título horizontalmente para que entren en la pestaña visible */
  .module-card .mc-icon {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    margin-right: 12px;
    font-size: 1.6rem;
  }
  .module-card .mc-title {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    font-size: 1.1rem;
    width: calc(100% - 80px); /* Dejar espacio para icono y flecha */
    line-height: 1.2;
  }
  .module-card .mc-desc {
    margin-top: 16px; /* Restaurar la separación con la descripción */
  }
  .module-card .mc-arrow {
    top: 24px;
    right: 20px;
  }

  /* Offset incrementado a 72px para asegurar que icono y título se vean perfectos */
  .module-card:nth-child(1) { top: 80px; z-index: 10; }
  .module-card:nth-child(2) { top: 152px; z-index: 11; }
  .module-card:nth-child(3) { top: 224px; z-index: 12; }
  .module-card:nth-child(4) { top: 296px; z-index: 13; }
  .module-card:nth-child(5) { top: 368px; z-index: 14; }
  .module-card:nth-child(6) { top: 440px; z-index: 15; }
  .module-card:nth-child(7) { top: 512px; z-index: 16; }
  .module-card:nth-child(8) { top: 584px; z-index: 17; }
}
@media (max-width: 480px) {
  .hero { padding: 32px 0 16px; }
  .hero .hero-sub { margin-bottom: 16px; font-size: 0.95rem; }
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
  .kpi-card { padding: 16px; }
  .kpi-value { font-size: 1.5rem; }
  .kpi-label { font-size: 0.75rem; line-height: 1.2; }
  .kpi-trend { font-size: 0.65rem; padding: 2px 6px; display: inline-block; margin-top: 4px; }
  .hero .hero-brand { font-size: 2.3rem; }
  .hero .hero-lead { font-size: 1.15rem; }
}
/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s ease-out both; }
.fade-up:nth-child(2) { animation-delay: 0.1s; }
.fade-up:nth-child(3) { animation-delay: 0.2s; }
.fade-up:nth-child(4) { animation-delay: 0.3s; }
.fade-up:nth-child(5) { animation-delay: 0.4s; }
.fade-up:nth-child(6) { animation-delay: 0.5s; }
.fade-up:nth-child(7) { animation-delay: 0.6s; }
.fade-up:nth-child(8) { animation-delay: 0.7s; }
.fade-up:nth-child(9) { animation-delay: 0.8s; }
.fade-up:nth-child(10) { animation-delay: 0.9s; }
.fade-up:nth-child(11) { animation-delay: 1.0s; }
.fade-up:nth-child(12) { animation-delay: 1.1s; }
/* Detail Panel (fullscreen overlay) */
.detail-panel {
  position: fixed; top: 65px; bottom: 0; left: 0; right: 0; z-index: 200;
  background: #051208;
  overflow-y: auto; overflow-x: hidden; transform: translateY(100%);
  /* ⚠ visibility, no solo transform: un panel corrido fuera de pantalla SIGUE siendo tabulable.
     Con 27 paneles cerrados, quien navega por teclado caía dentro de paneles invisibles —
     medido en la auditoría del 2026-08-08. `visibility:hidden` lo saca del orden de tabulación
     sin romper la animación: se retrasa 0,4s al cerrar (para que se vea salir) y se aplica al
     instante al abrir. NO reemplazar por display:none, que mata la transición. */
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s;
  /* Corta el encadenamiento de overscroll al viewport: evita el pull-to-refresh NATIVO de
     Android y el rubber-band de iOS dentro del panel (mismo patrón que los demás overlays del
     proyecto). Es lo que permite que nuestro PTR propio sea 100% pasivo (sin preventDefault). */
  overscroll-behavior-y: contain;
}
/* Grilla de fondo para los paneles de detalle */
.detail-panel::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(0,200,83,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,83,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.detail-panel > * { position: relative; z-index: 1; }

/* Resaltado breve al llegar por deep-link a una sección (#panel=…&at=…): orienta la vista sin ser invasivo. */
@keyframes pdFlashTarget {
  0%   { box-shadow: 0 0 0 0 rgba(0,200,83,0); }
  18%  { box-shadow: 0 0 0 3px rgba(0,200,83,0.55); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,83,0); }
}
.pd-flash-target { animation: pdFlashTarget 2.2s ease-out 1; border-radius: 12px; scroll-margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .pd-flash-target { animation: none; } }
/* Al ABRIR, visible al instante (sin el retardo de 0,4s que sí lleva el cierre). */
.detail-panel.open { transform: translateY(0); visibility: visible; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; }
.panel-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 32px; backdrop-filter: blur(20px);
  background: rgba(6,10,20,0.85);
  border-bottom: 1px solid var(--border-card);
}
.panel-header h2 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; text-align: center; }
.panel-close {
  position: absolute; right: 32px;
  background: none; border: 1px solid var(--border-card);
  color: var(--text-secondary); width: 40px; height: 40px;
  border-radius: 10px; font-size: 1.2rem; cursor: pointer;
  transition: var(--transition); display: flex; align-items: center; justify-content: center;
}
.panel-close:hover { border-color: var(--cyan); color: var(--cyan); }
.panel-body { max-width: 1320px; margin: 0 auto; padding: 32px; }
/* Indicador de "tirar para actualizar" (pull-to-refresh) del panel. Absoluto dentro del panel
   y con z-index por DEBAJO del encabezado sticky (z-10): arranca escondido detrás del header y
   asoma al tirar. La lógica (solo móvil, un dedo, arriba de todo) vive en pinamar_datos.js. */
.pd-ptr {
  position: absolute; top: -6px; left: 50%; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(6,10,20,0.96); border: 1px solid var(--border-card);
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  transform: translateX(-50%) translateY(0); opacity: 0;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease;
  pointer-events: none;
}
.pd-ptr-spin {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(0,200,83,0.22); border-top-color: var(--cyan);
  transition: border-top-color 0.18s ease;
}
.pd-ptr-ready .pd-ptr-spin { border-top-color: var(--emerald); border-right-color: var(--emerald); }
.pd-ptr-loading .pd-ptr-spin { animation: pdPtrSpin 0.7s linear infinite; }
@keyframes pdPtrSpin { to { transform: rotate(360deg); } }
[data-theme="light"] .pd-ptr { background: #ffffff; }
.panel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 32px; }
.panel-chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 24px; }
.panel-chart-grid.equal { grid-template-columns: 1fr 1fr; }
.panel-chart-box, .chart-card {
  background: rgba(2, 8, 4, 0.6); border: 1px solid var(--border-card);
  border-radius: var(--radius); padding: 24px; position: relative;

}
.panel-chart-box h4, .chart-card .chart-title { font-family: var(--font-heading); font-size: 0.95rem; margin-bottom: 16px; color: var(--text-primary); }
.panel-chart-box canvas, .chart-card canvas { max-width: 100%; }
.panel-chart-box .chart-h { height: 280px; position: relative; width: 100%; }
/* Donde van las barras del portal sin torta (PD_PIE3D.barras): el alto de un gráfico, con las barras centradas. */
.panel-chart-box .pd-barras-solas { min-height: 280px; display: flex; align-items: center; width: 100%; }
/* Nota al pie de los 4 cuadros del parte de Seguridad: altura reservada para 2 líneas → las
   cajas quedan con la MISMA proporción aunque una nota sea de 1 línea y otra de 2. */
.seg-terr-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 12px; margin-bottom: 0; min-height: 34px; line-height: 1.45; }
.panel-table {
  width: 100%; border-collapse: collapse;
  background: rgba(0, 0, 0, 0.2); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border-card);
}
.panel-table th {
  text-align: left; padding: 12px 16px; font-family: var(--font-heading);
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--cyan); background: rgba(0,242,255,0.05);
  border-bottom: 1px solid var(--border-card);
}
.panel-table td {
  padding: 10px 16px; font-size: 0.85rem; color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.panel-table tr:hover td { background: rgba(0,242,255,0.03); color: var(--text-primary); }
.panel-embed {
  background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: var(--radius); padding: 0; margin-bottom: 24px;
  overflow: hidden; /* Cortar esquinas del iframe para que coincida con el borde redondeado */
  position: relative; min-height: 200px;
}
.panel-embed::before {
  content: "Cargando tablero en vivo...";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--cyan); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600;
  animation: pulse 1.5s infinite ease-in-out; z-index: 0;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.panel-embed iframe { 
  position: relative; z-index: 1;
  width: 100%; border: none; min-height: 600px; display: block;
}

@media (max-width: 768px) {
  .panel-embed iframe {
    min-height: unset;
    height: 95vw; /* Ajuste más preciso al ratio de Looker Studio en celular para eliminar espacio en blanco */
  }
}
.panel-info {
  background: rgba(2, 8, 4, 0.6); border: 1px solid var(--border-card);
  border-radius: var(--radius); padding: 24px; margin-bottom: 20px;
}
.panel-info h4 { font-family: var(--font-heading); margin-bottom: 8px; }
.panel-info p { color: var(--text-secondary); font-size: 0.9rem; }

@media (max-width: 768px) {
  .panel-chart-grid, .panel-chart-grid.equal { grid-template-columns: 1fr; }
  .panel-body { padding: 16px; }
  .panel-info { padding: 16px; margin-bottom: 16px; }
  .panel-info p { font-size: 0.85rem; }
  .panel-header { padding: 12px 16px; }
  .panel-header h2 { font-size: 1.1rem; }
  .panel-close { right: 16px; width: 36px; height: 36px; }
  .panel-table { display: table; width: 100%; table-layout: fixed; }
  .panel-table th, .panel-table td { padding: 8px 4px; font-size: 0.75rem; text-align: center; word-wrap: break-word; }
  .panel-table th:first-child, .panel-table td:first-child { text-align: left; }
}

@media (max-width: 480px) {
  .panel-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .panel-kpis .kpi-card { padding: 12px; }
  .panel-kpis .kpi-icon { font-size: 1.5rem; margin-bottom: 4px; }
  .panel-kpis .kpi-value { font-size: 1.3rem !important; }
  .panel-kpis .kpi-label { font-size: 0.7rem !important; }
  .section-title { font-size: 1.1rem !important; }
  .panel-nav { flex-direction: row; gap: 12px; }
  .nav-btn { flex: 1; width: auto; min-width: 0; padding: 12px; font-size: 0.85rem; }
  .nav-btn.prev { text-align: left !important; }
  .nav-btn.next { text-align: right !important; }
  .nav-btn span { font-size: 0.65rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-footer-logo { display: none; }
}

.org-avatar-float {
  position: absolute;
  top: -24px;
  right: -10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden; /* recorta el zoom del rostro al círculo (marco de tamaño fijo) */
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px) scale(0.9);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  border: 2px solid var(--org-c, transparent); /* color del área (variable inline via JS) */
  box-shadow: 0 0 15px var(--org-c, transparent);
  background: var(--bg-primary); /* Fallback */
}
/* El video/imagen llena el marco y ACERCA el rostro (mismo criterio que .sec-photo del panel:
   145% + centro-arriba), recortando hombros y fondo sin agrandar el círculo. */
.org-avatar-media {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1.45);
  transform-origin: center 26%;
}

@media (min-width: 769px) {
  .org-card:hover .org-avatar-float,
  .org-card.expanded .org-avatar-float {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  
  .org-avatar-float:hover {
    transform: scale(2.2) !important;
    transform-origin: top right;
    z-index: 100 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.9), 0 0 15px rgba(255,255,255,0.1) !important;
  }
}

.org-avatar-mobile-wrapper {
  animation: fadeUpAvatar 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.org-avatar-mobile {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 10;
  cursor: pointer;
  transform-origin: top right;
}

.org-avatar-mobile.zoomed {
  transform: scale(2.5);
  z-index: 100;
  box-shadow: 0 15px 35px rgba(0,0,0,0.9), 0 0 15px rgba(255,255,255,0.1);
}

.org-content-inner:has(.org-avatar-mobile.zoomed) {
  overflow: visible !important;
}

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

@media (max-width: 768px) {
  .org-col-wrapper {
    display: contents;
  }
  .org-avatar-mobile-wrapper {
    display: flex !important;
  }
  .org-avatar-float {
    display: none !important;
  }
}

/* ══════════════════════════════════════════
   TEMA CLÁSICO (claro) — estética institucional de pinamar.gob.ar
   (verde #007242, Fira Sans, blanco pleno) ejecutada flat-premium:
   tarjetas blancas con sombra en capas + elevación al hover.
   Comparte configuración con el Panel de Control (localStorage
   'pina_theme'). Conserva grilla, orbs y partículas (js/particles.js).
   ══════════════════════════════════════════ */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8f7;
  --bg-card: #eaf4ee;            /* verde claro institucional: separa las tarjetas del fondo blanco */
  --bg-card-hover: #dfeee6;
  --border-card: #cfe4d8;
  --border-card-hover: rgba(0, 114, 66, 0.55);
  --cyan: #007242;               /* verde institucional exacto del sitio oficial */
  --on-cyan: #ffffff;            /* el verde institucional es OSCURO: encima va blanco (6,1:1) */
  --cyan-dim: rgba(0, 114, 66, 0.08);
  --indigo: #7c3aed;
  --emerald: #059669;
  --amber: #d97706;
  --rose: #e11d48;
  --text-primary: #333333;       /* mismo gris de texto que pinamar.gob.ar */
  --text-secondary: #4f5f56;     /* ~6.8:1 sobre blanco (AA holgado) */
  --text-muted: #6d7972;         /* ~4.5:1 sobre blanco (AA justo — no aclarar más) */
  --shadow-glow: 0 0 30px rgba(0, 114, 66, 0.05);
  --font-body: 'Fira Sans', 'Inter', sans-serif;  /* la letra oficial; títulos siguen en Outfit/Space Grotesk */
}
/* Línea institucional: hilo verde degradado en el tope (guiño a la barra verde oficial) */
[data-theme="light"] body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #007242, #00a05c 50%, #007242);
  z-index: 1500; pointer-events: none;
}
[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(0,114,66,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,114,66,0.05) 1px, transparent 1px);
}
[data-theme="light"] .header { background: rgba(255, 255, 255, 0.86); }
[data-theme="light"] .dropdown-content {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 30px rgba(18, 53, 36, 0.12);
}
[data-theme="light"] .drawer { background: rgba(255, 255, 255, 0.98); }
[data-theme="light"] .drawer-modules-wrapper,
[data-theme="light"] .drawer-modules { background: rgba(255, 255, 255, 0.99) !important; }
[data-theme="light"] .kpi-card,
[data-theme="light"] .module-card,
[data-theme="light"] .chart-wrap,
[data-theme="light"] .panel-chart-box,
[data-theme="light"] .panel-info {
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(18, 53, 36, 0.05), 0 6px 20px rgba(18, 53, 36, 0.07);
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] .kpi-card:hover,
[data-theme="light"] .module-card:hover {
  background: var(--bg-card-hover);
  box-shadow: 0 2px 4px rgba(18, 53, 36, 0.07), 0 14px 34px rgba(18, 53, 36, 0.13);
}
[data-theme="light"] .detail-panel { background: #ffffff; }
[data-theme="light"] .detail-panel::before {
  background-image:
    linear-gradient(rgba(0,114,66,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,114,66,0.045) 1px, transparent 1px);
}
[data-theme="light"] .panel-header { background: rgba(255, 255, 255, 0.9); }
[data-theme="light"] .panel-table { background: rgba(246, 248, 247, 0.6); }
[data-theme="light"] .panel-table th { background: rgba(0, 114, 66, 0.06); }
[data-theme="light"] .panel-table tr:hover td { background: rgba(0, 114, 66, 0.045); }
[data-theme="light"] .panel-table td { border-bottom-color: rgba(0, 0, 0, 0.06); }
/* Componentes con fondo oscuro hardcodeado → versión clásica (blanco/institucional) */
[data-theme="light"] .nav-search-results {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 34px rgba(18, 53, 36, 0.16);
}
/* Mega-menú de Módulos: en Futurista el hover pinta el texto casi-blanco (#eafff2), que sobre
   el resaltado verde claro del Clásico quedaba INVISIBLE. En Clásico → verde institucional legible. */
[data-theme="light"] .mega .mega-mod:hover { background: var(--cyan-dim); color: var(--cyan); }
[data-theme="light"] .pd-tip {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 114, 66, 0.45);
  box-shadow: 0 8px 26px rgba(18, 53, 36, 0.18), 0 0 16px rgba(0, 114, 66, 0.08);
}
[data-theme="light"] .bridge-card {
  background: linear-gradient(135deg, rgba(0, 114, 66, 0.11), #eaf4ee);
  border-color: rgba(0, 114, 66, 0.35);
  box-shadow: 0 1px 2px rgba(18, 53, 36, 0.05), 0 6px 20px rgba(18, 53, 36, 0.07);
}
[data-theme="light"] .data-credits {
  background: linear-gradient(135deg, rgba(0, 114, 66, 0.08), #eaf4ee);
}
[data-theme="light"] .dc-btn { background: #ffffff; }  /* blanco: los botones de descarga resaltan sobre la ficha verde */
/* Barrido de borde ("serpiente"): en clásico pasa del neón al verde institucional sutil */
[data-theme="light"] .module-card::before {
  background: conic-gradient(from var(--snake-angle), transparent 75%, rgba(0, 114, 66, 0.55) 100%);
}
[data-theme="light"] .chart-card {
  background: var(--bg-card);
  box-shadow: 0 1px 2px rgba(18, 53, 36, 0.05), 0 6px 20px rgba(18, 53, 36, 0.07);
}
@media (max-width: 768px) {
  /* Stacking cards móvil (efecto Mercado Pago): en Futurista las tarjetas se apilan en
     oscuro; en Clásico deben mantener el MISMO verde claro. Las reglas base de .stuck y
     :hover/:active usan !important → hay que ganarles con más especificidad + !important. */
  [data-theme="light"] .module-card {
    background: var(--bg-card);
    box-shadow: 0 -4px 15px rgba(18, 53, 36, 0.10);
    border-top: 1px solid rgba(0, 114, 66, 0.4);
  }
  /* Pegada arriba: verde claro OPACO (tiene que tapar el texto de las tarjetas de abajo) */
  [data-theme="light"] .module-card.stuck { background: #eaf4ee !important; }
  [data-theme="light"] .module-card:hover,
  [data-theme="light"] .module-card:active {
    background: #dfeee6 !important;
    box-shadow: inset 0 72px 0 0 rgba(0, 114, 66, 0.05), 0 -4px 15px rgba(18, 53, 36, 0.12) !important;
    border-top: 1px solid var(--cyan) !important;
  }
}
/* Logo "Respirá Pinamar" del pie: SVG monocromo pintado por máscara CSS → un solo
   archivo, color exacto por tema (blanco en Futurista, verde institucional en Clásico). */
.footer-logo {
  display: inline-block; width: 271px; height: 48px; opacity: 0.8;
  background-color: #ffffff;                    /* Futurista: blanco, como el original */
  -webkit-mask: url(/assets/logo-muni-respira.svg) center / contain no-repeat;
          mask: url(/assets/logo-muni-respira.svg) center / contain no-repeat;
}
[data-theme="light"] .footer-logo {
  background-color: var(--cyan);                /* Clásico: verde institucional #007242 */
  opacity: 0.9;
}
/* La misma marca, en el pie de navegación de los 27 paneles de detalle. Ahí venía como <img>
   del mismo SVG, que es monocromo BLANCO: a un <img> el CSS no puede cambiarle el color, así
   que sobre el panel blanco del Clásico el logo era invisible. Se resolvió como el de arriba.
   Las medidas salen del propio archivo: viewBox 800,56 × 141,72 → 271 × 48. */
.nav-logo-respira {
  display: inline-block; width: 271px; height: 48px; opacity: 0.6; margin-bottom: 4px;
  background-color: #ffffff;
  -webkit-mask: url(/assets/logo-muni-respira.svg) center / contain no-repeat;
          mask: url(/assets/logo-muni-respira.svg) center / contain no-repeat;
}
[data-theme="light"] .nav-logo-respira { background-color: var(--cyan); opacity: 0.75; }
/* Título del hero en tema clásico: base verde institucional legible + contorno fijo
   + barra brillante más angosta que sigue recorriendo las letras. */
[data-theme="light"] .hero .hero-brand {
  background: linear-gradient(to right, #00623a 43%, #00b86b 50%, #00623a 57%);
  background-size: 200% auto;
  -webkit-background-clip: text;        /* re-declarar: el shorthand 'background' lo había reseteado */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px rgba(0, 114, 66, 0.4);
}

/* Botón de cambio de tema (header, arriba a la derecha) */
.header-controls { display: flex; align-items: center; gap: 10px; }
.theme-toggle-btn {
  position: relative;
  background: var(--cyan-dim);
  border: 1px solid var(--border-card);
  color: var(--cyan);
  width: 38px; height: 38px; border-radius: 10px;
  line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); flex-shrink: 0;
}
.theme-toggle-btn:hover { border-color: var(--border-card-hover); transform: scale(1.06); }

/* Ícono sol/luna: ambos viven en el botón; se cruzan con rotación + escala según el tema. */
.theme-toggle-btn .theme-ic {
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle-btn .theme-ic-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle-btn .theme-ic-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme="light"] .theme-toggle-btn .theme-ic-sun  { opacity: 0; transform: rotate(90deg) scale(.5); }
[data-theme="light"] .theme-toggle-btn .theme-ic-moon { opacity: 1; transform: rotate(0deg) scale(1); }
@media (prefers-reduced-motion: reduce) { .theme-toggle-btn .theme-ic { transition: none; } }
html.a11y-reduce-motion .theme-toggle-btn .theme-ic { transition: none; }

/* ══════════════════════════════════════════
   Ficha técnica + descargas (datos abiertos)
   ══════════════════════════════════════════ */
.data-credits {
  position: relative;
  background: linear-gradient(135deg, rgba(0,200,83,0.05), rgba(2,8,4,0.5));
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  overflow: hidden;
}
.data-credits::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cyan); box-shadow: 0 0 14px var(--cyan); opacity: 0.85;
}
.dc-row1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.dc-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase; color: var(--cyan);
  white-space: nowrap;
}
.dc-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(0,200,83,0.6); animation: dcPulse 1.8s infinite;
}
@keyframes dcPulse {
  0% { box-shadow: 0 0 0 0 rgba(0,200,83,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(0,200,83,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,83,0); }
}
.dc-sources { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dc-src-label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); margin-right: 2px;
}
.dc-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 500; color: var(--text-primary);
  background: var(--cyan-dim); border: 1px solid var(--border-card);
  cursor: default;
}
.dc-meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px;
  font-size: 0.78rem; color: var(--text-secondary);
}
.dc-meta b { color: var(--text-primary); font-weight: 600; }
/* Semáforo de frescura: dice en la cara si el dato cumple la periodicidad que declara.
   Nunca solo color (WCAG 1.4.1): el texto ya distingue los tres estados. */
.dc-fresh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 0.74rem;
  border: 1px solid currentColor; line-height: 1.6;
}
.dc-fresh-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dc-fresh-al-dia     { color: #34d399; }
.dc-fresh-por-vencer { color: #fbbf24; }
.dc-fresh-vencido    { color: #fb7185; }
[data-theme="light"] .dc-fresh-al-dia     { color: #047857; }
[data-theme="light"] .dc-fresh-por-vencer { color: #92400e; }
[data-theme="light"] .dc-fresh-vencido    { color: #b91c1c; }
/* Nota que explica un rezago de la fuente (no un incumplimiento del municipio). */
.dc-nota-fresh { font-style: italic; opacity: 0.85; flex-basis: 100%; }
.dc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Ficha del bloque territorial (Seguridad): separador "CSV:" entre los botones unificados
   (Excel/JSON/API, que juntan los 4 datasets) y los chips de CSV por dataset. */
.segt-csv-label { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); margin-left: 10px; letter-spacing: 0.5px; }
.dc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 10px; cursor: pointer;
  font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600;
  color: var(--text-primary); background: rgba(2,8,4,0.5);
  border: 1px solid var(--border-card); text-decoration: none;
  transition: var(--transition);
}
.dc-btn:hover {
  border-color: var(--border-card-hover); color: var(--cyan);
  background: var(--cyan-dim); transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(0,200,83,0.12);
}
.dc-btn .dc-ic { font-size: 0.95rem; line-height: 1; }
.dc-btn-api { border-style: dashed; }
.dc-btn.copied { color: var(--cyan); border-color: var(--cyan); }
.dc-report {
  margin-left: auto; font-size: 0.74rem; color: var(--text-muted);
  text-decoration: none; transition: var(--transition); white-space: nowrap;
}
.dc-report:hover { color: var(--amber); }
@media (max-width: 768px) {
  .data-credits { padding: 14px 16px; }
  .dc-report { margin-left: 0; }
}

/* Historial público de actualizaciones (modal) */
.dh-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.dh-box {
  width: 100%; max-width: 460px; max-height: 80vh; overflow-y: auto;
  background: var(--bg-secondary); border: 1px solid var(--border-card-hover);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.dh-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-card);
  position: sticky; top: 0; background: var(--bg-secondary);
}
.dh-head h3 { font-size: 1.05rem; color: var(--text-primary); margin: 0; }
.dh-x { background: none; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px; }
.dh-x:hover { color: var(--cyan); background: var(--cyan-dim); }
.dh-body { padding: 16px 20px 20px; }
.dh-sec { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 14px; }
.dh-sec b { color: var(--text-primary); }
.dh-empty { color: var(--text-muted); font-size: 0.9rem; text-align: center; padding: 14px 0; }
.dh-timeline { list-style: none; margin: 0; padding: 0; }
.dh-item { position: relative; display: flex; gap: 12px; padding: 0 0 16px 4px; }
.dh-item:last-child { padding-bottom: 0; }
.dh-item:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 18px; bottom: 0; width: 2px; background: var(--border-card); }
.dh-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 4px; z-index: 1;
  background: var(--text-muted); border: 2px solid var(--bg-secondary); box-shadow: 0 0 0 1px var(--border-card-hover);
}
.dh-item.dh-current .dh-dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.dh-content { min-width: 0; }
.dh-when { font-size: 0.92rem; color: var(--text-primary); font-weight: 600; }
.dh-detail { font-size: 0.82rem; color: var(--text-secondary); margin-top: 2px; }
.dh-badge {
  font-size: 0.66rem; font-weight: 700; color: var(--cyan); background: var(--cyan-dim);
  border: 1px solid var(--border-card-hover); padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}

/* Informes operativos mensuales de Seguridad */
.segm-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-card); }
.segm-section > .panel-chart-box { margin-bottom: 22px; }
.segm-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.segm-head h3 { font-size: 1.15rem; color: var(--text-primary); margin: 0; }
/* Selector de meses agrupado por AÑO. Antes era una fila larga de píldoras con el nombre completo:
   con 28 meses había que leerla entera para darse cuenta de qué faltaba. Ahora cada año es un
   renglón de doce casillas y el hueco se ve solo. */
.segm-meses { display: flex; flex-direction: column; gap: 7px; }
.segm-anio { display: flex; align-items: flex-start; gap: 10px; }
.segm-anio-lab { font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; color: var(--text-muted); flex: 0 0 auto; min-width: 34px; padding-top: 5px; }
.segm-anio-meses { display: flex; gap: 5px; flex-wrap: wrap; }
.segm-meses-nota { font-size: 0.74rem; color: var(--text-muted); margin: 2px 0 0; }
/* Un mes sin informe: punteado, sin relleno y sin clic. Es una ausencia, no un botón apagado.
   SIN opacity: estos son justamente los que el área tiene que poder leer para saber qué cargar,
   y bajarles la opacidad los dejaba por debajo del contraste mínimo. El tono apagado y el borde
   punteado ya alcanzan para que no compitan con los meses disponibles. */
.segm-mes.vacio { cursor: default; border-style: dashed; background: transparent; color: var(--text-muted); }
.segm-mes.vacio:hover { border-color: var(--border-card); color: var(--text-muted); }
.segm-mes { font-size: 0.8rem; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 999px; padding: 5px 12px; cursor: pointer;transition: var(--transition); }
.segm-mes:hover { border-color: var(--border-card-hover); color: var(--text-primary); }
.segm-mes.active { background: var(--cyan-dim); color: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.segm-sub { font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 14px; }
.segm-muted { color: var(--text-muted); }
.segm-nota { font-size: 0.74rem; color: var(--text-muted); margin-top: 8px; }
.segm-hint { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.segm-destacados { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
/* Celular: 2×2 compacto (igual que .panel-kpis de Base Normativa). DEBE ir DESPUÉS de la regla
   base de arriba: con igual especificidad, gana la última en el archivo aunque el media matchee
   (por eso el override, cuando estaba antes de esta línea, no tomaba). */
@media (max-width: 480px) {
  .segm-destacados { grid-template-columns: 1fr 1fr; gap: 10px; }
  .segm-destacados .kpi-card { padding: 12px; }
  .segm-destacados .kpi-icon { font-size: 1.5rem; margin-bottom: 4px; }
  .segm-destacados .kpi-value { font-size: 1.05rem !important; line-height: 1.25; }
  .segm-destacados .kpi-label { font-size: 0.7rem !important; }
  .segm-destacados .kpi-trend { font-size: 0.66rem !important; }
}
.segm-dest { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; padding: 11px 13px; }
.segm-dest-ic { font-size: 1.4rem; flex: none; }
.segm-dest-lab { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.segm-dest-val { font-size: 0.92rem; color: var(--text-primary); font-weight: 600; }
.segm-dest-val span { color: var(--cyan); }
.segm-top5 { display: flex; align-items: flex-end; justify-content: space-around; gap: 8px; padding: 18px 8px 4px; min-height: 176px; }
.segm-t5col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; min-width: 0; }
.segm-t5val { font-family: var(--font-heading, inherit); font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 9px; letter-spacing: .3px; text-align: center; line-height: 1.15; }
.segm-t5pct { display: block; font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 600; color: var(--text-muted, #88a892); letter-spacing: 0; margin-top: 1px; }
.segm-c3d { position: relative; width: clamp(26px, 55%, 54px); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--c), var(--cd)); box-shadow: 0 0 22px -5px var(--c); margin-top: 9px; transform-origin: bottom center; transition: filter .18s ease, box-shadow .18s ease, transform .2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.segm-c3d::before { content: ''; position: absolute; left: 0; top: -9px; width: 100%; height: 9px; background: #eaf6ff; opacity: .9; transform: skewX(45deg); transform-origin: bottom left; }
.segm-c3d::after { content: ''; position: absolute; top: -9px; right: -9px; width: 9px; height: 100%; background: var(--cs); transform: skewY(45deg); transform-origin: top left; }
.segm-c3d:hover { filter: brightness(1.15); box-shadow: 0 0 40px -2px var(--c); transform: scale(1.08); }
/* Un nombre que no entra en su columna se separa EN SÍLABAS y con guion («Fiscaliza-ción»), que
   es como se corta una palabra en castellano (la página declara lang="es").
   ⚠ NO ponerle overflow-wrap: anywhere para "que no se salga". Medido: en un celular de 360 px
   la columna tiene 46 px y «Fiscalización» necesita 56, así que la partía en «Fiscalizaci / ón»
   en casi todos los meses. El nombre compuesto («Disturbios/vandalismo») se corta además
   después de la barra, con un <wbr> que pone renderSegmDona. */
.segm-t5name { margin-top: 11px; font-size: 0.72rem; line-height: 1.15; color: var(--text-secondary); text-align: center; max-width: 100%; -webkit-hyphens: auto; hyphens: auto; }
/* Cabecera del cuadro del ranking: título + toggle Barras/Torta (mismo cuadro, intercambiable). */
.segm-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.segm-cardhead h4 { margin: 0; }
.segm-vtoggle { display: inline-flex; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; overflow: hidden; flex: none; }
.segm-vtoggle button { background: transparent; border: 0; color: var(--text-secondary); font: 600 0.75rem 'Inter', sans-serif; padding: 5px 14px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.segm-vtoggle button.on { background: rgba(0,200,83,0.16); color: var(--cyan); }
.segm-vtoggle button:not(.on):hover { color: var(--text-primary); }
/* Vista Torta: gráfico a la IZQUIERDA (cuadrado, aspect-ratio 1 → llena su columna sin aire
   vertical) + leyenda propia a la DERECHA. La leyenda resetea line-height (si no, hereda el 1.6
   del body, infla las 13 filas y estira la fila forzando la torta a achicarse con aire). */
.segm-torta { display: flex; align-items: center; gap: 24px; min-height: 280px; }
.segm-torta-canvas { flex: 0 0 54%; max-width: 400px; align-self: center; position: relative; }
.segm-torta-canvas svg { display: block; width: 100%; height: auto; }
/* El dibujo y la animación de la dona (clases .sgd-* y .segm-tleg-*) los inyecta el módulo
   COMPARTIDO /js/dona3d.js — mismo estilo garantizado en web y preview del panel de carga. */
.segm-torta-leg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
/* Apila a 768px, DONDE colapsa .panel-chart-grid a 1 columna (evita la franja 620-768 con la
   torta en fila dentro de una columna angosta que la aplastaba). */
@media (max-width: 768px) {
  .segm-torta { flex-direction: column; gap: 14px; align-items: stretch; }
  .segm-torta-canvas { flex: none; width: 100%; max-width: 300px; margin: 0 auto; }
  .segm-tleg-name, .segm-tleg-val { font-size: 0.82rem; }
}
.segm-barras { display: flex; flex-direction: column; gap: 7px; container-type: inline-size; overflow-y: auto; scrollbar-gutter: stable; padding-right: 8px; scrollbar-width: thin; scrollbar-color: rgba(0,200,83,0.35) rgba(255,255,255,0.05); }
/* Ranking largo (40+ categorías): top 12 a la vista, el resto colapsado (.segm-bxtras).
   Al expandir, el JS congela el alto REAL medido (inline max-height) y el listado completo
   scrollea adentro: la tarjeta no cambia de altura → nunca estira a su vecina de grilla
   (y aguanta el escalado de fuente de la barra de accesibilidad, que rompería un px fijo).
   El gutter del scrollbar queda SIEMPRE reservado (scrollbar-gutter) → cero salto horizontal. */
.segm-bxtras { display: none; }
.segm-barras.expanded .segm-bxtras { display: contents; }
.segm-barras::-webkit-scrollbar { width: 8px; }
.segm-barras::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border: 0; border-radius: 4px; }
.segm-barras::-webkit-scrollbar-thumb { background: rgba(0,200,83,0.3); border: 0; border-radius: 4px; }
.segm-vermas { display: flex; justify-content: center; margin-top: 12px; }
.segm-vermas:empty { display: none; }
.segm-bmore {
  background: rgba(0,200,83,0.06); border: 1px solid var(--border-card); color: var(--cyan);
  border-radius: 999px; padding: 6px 16px; font-size: 0.78rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.segm-bmore:hover, .segm-bmore:focus-visible { border-color: var(--cyan); background: rgba(0,200,83,0.12); }
/* El número va PEGADO AL FINAL de su barra (no en una columna contra el borde derecho): con el
   número lejos había que seguir el renglón con el ojo para saber cuánto valía una barra corta.
   La pista deja a la derecha el lugar del número más ancho (--vw, lo calcula quien dibuja) y al
   pasar el cursor se marca el renglón entero. Es lo mismo que hace /js/pie3d.js: si cambia uno,
   cambia el otro. */
.segm-brow { display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: 10px; padding: 2px 6px; border-radius: 9px; transition: background .15s ease; }
.segm-brow:hover { background: rgba(0,200,83,0.22); }
[data-theme="light"] .segm-brow:hover { background: rgba(0,114,66,0.13); }
.segm-brow:hover .segm-bname { color: var(--text-primary); }
.segm-bname { font-size: 0.82rem; color: var(--text-secondary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segm-btrack { position: relative; height: 20px; margin-right: var(--vw, 150px); background: rgba(255,255,255,0.05); border-radius: 10px; font-family: var(--font-heading, inherit); font-size: 0.8rem; font-weight: 700; }
.segm-bfill { position: absolute; left: 0; top: 0; height: 100%; width: var(--w); min-width: 6px; border-radius: 10px; background: var(--c); box-shadow: 0 0 11px -1px var(--c); transition: filter .18s ease, box-shadow .18s ease; }
.segm-bfill::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 50%; border-radius: 10px 10px 6px 6px; background: rgba(255,255,255,0.16); }
.segm-brow:hover .segm-bfill { filter: brightness(1.12); box-shadow: 0 0 17px 0 var(--c); }
.segm-bval { position: absolute; left: calc(max(var(--w), 6px) + 9px); top: 50%; transform: translateY(-50%); line-height: 1; color: var(--text-primary); white-space: nowrap; }
.segm-bval-pct { color: var(--text-secondary, #88a892); font-weight: 600; font-size: 0.74rem; margin-left: 4px; } /* % separado y atenuado del monto (no se confunden) */
.segm-bdelta { font-size: 0.68rem; font-weight: 600; }
.segm-bdelta.up { color: var(--amber); }
.segm-bdelta.dn { color: var(--cyan); }
.segm-catnota { margin-top: 4px; }
@media (max-width: 560px) {
  .segm-brow { grid-template-columns: 86px minmax(0, 1fr); gap: 7px; padding: 2px 2px; }
  .segm-bname { font-size: 0.74rem; }
  .segm-btrack { font-size: 0.72rem; }
  .segm-bval { left: calc(max(var(--w), 6px) + 6px); }
  .segm-t5name { font-size: 0.62rem; }
  .segm-t5val { font-size: 0.82rem; }
}
/* Cuando la lista es angosta el nombre va ARRIBA de su barra (igual que /js/pie3d.js): al costado no
   entraban nombre, barra y número. Se mira el ancho de la LISTA y no el de la pantalla: es angosta en el
   celular, pero también en una tableta, donde la tarjeta ocupa media pantalla y la barra quedaba en nada. */
@container (max-width: 400px) {
  .segm-brow { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 3px 2px; }
  .segm-bname { text-align: left; white-space: normal; }
}
.segm-leyenda { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 5px 18px; }
.segm-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; color: var(--text-muted); padding: 16px; }
.segm-empty-ic { font-size: 2rem; opacity: 0.55; }
.segm-empty p { font-size: 0.84rem; margin: 0; line-height: 1.5; }
.segm-leg-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.segm-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.segm-leg-pct { font-weight: 700; color: var(--text-primary); min-width: 46px; }
.segm-leg-name { color: var(--text-secondary); flex: 1; min-width: 0; }
.segm-delta { font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.segm-delta.up { color: var(--amber); }
.segm-delta.dn { color: var(--cyan); }
.segm-leg-nota { grid-column: 1 / -1; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.07); font-size: 0.72rem; color: var(--text-muted, #94a3b8); }
.segm-leg-nota b { color: var(--text-secondary); }
.segm-mapa-box { display: flex; flex-direction: column; }
.segm-mapa { width: 100%; height: 390px; border-radius: 10px; overflow: hidden; background: #0a1410; }
/* En la grilla, el mapa LLENA el alto de la caja (ocupa el lugar del texto que antes iba debajo). */
.segm-mapa-box .segm-mapa { flex: 1; height: auto; min-height: 400px; }
/* Tendencia (media caja al lado del mapa): el gráfico llena el alto para emparejar con el mapa. */
.segm-tend-box { display: flex; flex-direction: column; }
.segm-tend-box .chart-h { flex: 1; height: auto; min-height: 260px; }
/* El skin del mapa (tinte verde del pane, tooltip, controles, chip de detalle) lo inyecta el
   módulo COMPARTIDO /js/mapaloc.js — mismo mapa garantizado en web y preview del panel. */
.segm-dias-box { display: flex; flex-direction: column; }
.segm-dias-box .segm-dias { flex: 1; }
.segm-dias { position: relative; min-height: 230px; max-height: 430px; padding-top: 4px; } /* tope: aunque la tarjeta vecina crezca, el gráfico no se estira más allá de esto */
.segm-dias canvas { display: block; }
.segm-export { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(255,255,255,0.025); }
.segm-dl-label { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 10px; }
.segm-dl-label b { color: var(--text-primary, #e8edf2); }
.segm-dl-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Mapa del delito (Seguridad en el territorio): mitad mapa + mitad panel interactivo ── */
.segdz-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.segdz-map-head h4 { margin: 0; }
.segdz-toggle { display: flex; gap: 6px; }
/* Colores por VARIABLE (no neón hardcodeado): --cyan/--rose/--amber se redefinen en el tema
   claro, así el botón activo mantiene contraste WCAG en ambos temas. Fondos/bordes neutros. */
.segdz-tbtn { background: rgba(127,127,127,0.08); border: 1px solid var(--border-card, rgba(255,255,255,0.14)); color: var(--text-secondary); font: 600 0.74rem 'Inter', sans-serif; padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; }
.segdz-tbtn:hover { background: rgba(127,127,127,0.18); color: var(--text-primary); }
.segdz-tbtn.active { background: rgba(0,255,162,0.10); border-color: var(--cyan); color: var(--cyan); }
.segdz-tbtn[data-met="robos"].active { background: rgba(251,113,133,0.10); border-color: var(--rose, #fb7185); color: var(--rose, #fb7185); }
.segdz-tbtn[data-met="hurtos"].active { background: rgba(251,191,36,0.10); border-color: var(--amber); color: var(--amber); }
/* Panel derecho: ranking + ficha. La caja estira para emparejar con el mapa de la izquierda. */
.segdz-panel-box { display: flex; flex-direction: column; }
.segdz-rank { display: flex; flex-direction: column; gap: 6px; }
.segdz-rrow { display: grid; grid-template-columns: 16px minmax(96px, auto) 1fr auto auto; gap: 9px; align-items: center; background: rgba(127,127,127,0.06); border: 1px solid var(--border-card, rgba(255,255,255,0.1)); border-radius: 9px; padding: 7px 11px; cursor: pointer; font: inherit; color: inherit; text-align: left; transition: border-color 0.18s, background 0.18s, box-shadow 0.18s; }
.segdz-rrow:hover { background: rgba(127,127,127,0.13); }
.segdz-rrow.sel { border-color: var(--zc); box-shadow: 0 0 12px -3px var(--zc); background: rgba(127,127,127,0.10); }
.segdz-rn { font-size: 0.72rem; font-weight: 800; color: var(--text-muted); text-align: center; }
.segdz-rrow.sel .segdz-rn { color: var(--zc); }
.segdz-rname { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segdz-rbar { height: 8px; background: rgba(127,127,127,0.16); border-radius: 99px; overflow: hidden; }
.segdz-rfill { display: block; height: 100%; border-radius: 99px; background: var(--zc); box-shadow: 0 0 8px var(--zc); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.segdz-rval { font-size: 0.82rem; font-weight: 800; color: var(--text-primary); min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
/* Chips de delta: sube = ámbar (peor), baja = cyan (mejor) — vars adaptadas al tema. */
.segdz-d { font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.segdz-d.up { color: var(--amber); }
.segdz-d.dn { color: var(--cyan); }
.segdz-d.eq { color: var(--text-muted); }
/* Ficha (zona seleccionada o resumen del partido) */
.segdz-det { flex: 1; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border-card, rgba(255,255,255,0.1)); border-radius: 11px; background: rgba(127,127,127,0.05); }
.segdz-det-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.segdz-det-head b { font-size: 0.9rem; color: var(--text-primary); }
.segdz-det-head span { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.segdz-dk { margin-bottom: 10px; }
.segdz-dk-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.segdz-dk-l { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); flex: 1; }
.segdz-dk-v { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.segdz-cmp { display: grid; grid-template-columns: 34px 1fr 30px; gap: 8px; align-items: center; margin-bottom: 3px; }
.segdz-cmp-y { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; }
.segdz-cmp-bar { height: 7px; background: rgba(127,127,127,0.16); border-radius: 99px; overflow: hidden; }
.segdz-cmp-bar i { display: block; height: 100%; border-radius: 99px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.segdz-cmp-bar i.prev { background: #8fa3b8; }
.segdz-cmp-v { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.segdz-det-tot { font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px; }
.segdz-det-tot b { color: var(--text-primary); }
.segdz-det-nota, .segdz-det-hint { font-size: 0.7rem; color: var(--text-muted); margin: 8px 0 0; line-height: 1.5; }
.segdz-det-nodata { font-size: 0.8rem; color: var(--text-secondary); margin: 6px 0; }
.segdz-res-tot { font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.segdz-res-num { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.segdz-res-line { font-size: 0.76rem; color: var(--text-secondary); margin-bottom: 4px; }
.segdz-res-line b { color: var(--text-primary); }

/* ══════════════════════════════════════════
   RENDIMIENTO EN MÓVIL — el celular se trababa (2026-07-16)
   Tres costos de repintado POR FRAME, todos apagados solo en móvil
   (en escritorio se mantienen: no hay lag y aportan al look):

   1. La "serpiente" de cada tarjeta (.module-card::before) anima la custom
      property --snake-angle que alimenta un conic-gradient + mask-composite →
      re-rasteriza el borde de las ~23 tarjetas en CADA frame, para siempre
      (animation infinite), incluso fuera de pantalla.
   2. .header es sticky CON backdrop-filter y TODO el contenido scrollea por
      debajo → Chromium desactiva el scroll compositado y repinta en el hilo
      principal (la "regla de oro" ya aprendida en el Panel de Control).
   3. Ídem .panel-header dentro de los paneles de módulo.
   Sin blur se compensa con fondo más opaco (el frost casi no se percibía).
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .module-card::before { display: none; }
  .header,
  .panel-header {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(6, 10, 20, 0.96);
  }
  [data-theme="light"] .header,
  [data-theme="light"] .panel-header { background: rgba(255, 255, 255, 0.97); }
}


/* ── Iconografía propia (public/js/iconos.js) ──────────────────────────────────
   Reemplaza los emojis del SO que se usaban como iconografía. Heredan currentColor,
   así el mismo ícono funciona en Clásico (verde institucional), en Futurista (verde
   neón) y en el modo de alto contraste de la barra de accesibilidad. */
.pd-ic {
  width: 1em; height: 1em;
  display: inline-block; vertical-align: -0.125em;
  fill: none; stroke: currentColor; flex-shrink: 0;
}
/* Tarjetas de módulo: el ícono es el ancla visual de la tarjeta → tamaño propio y
   el verde de la marca (antes cada emoji traía su color de fábrica: maletín bordó,
   auto rojo, rompiendo la paleta). */
.mc-icon { color: var(--cyan); line-height: 1; }
.mc-icon .pd-ic { width: 30px; height: 30px; stroke-width: 1.6; }
/* Título del panel: acompaña al texto, un punto por debajo para no competir. */
.pd-ic-h2 { width: 1.05em; height: 1.05em; margin-right: 9px; opacity: 0.85; vertical-align: -0.16em; }
.panel-header h2 { display: inline-flex; align-items: center; justify-content: center; }
/* KPI: el ícono acompaña al número, no compite con él → verde de marca a media opacidad
   (en negro heredado pesaba más que la cifra, que es lo que el vecino viene a leer). */
.kpi-icon .pd-ic { width: 1.5rem; height: 1.5rem; color: var(--cyan); opacity: 0.9; }

/* Contadores de uso en la ficha técnica: transparencia sobre la transparencia.
   Discretos — informan sin competir con la fuente y la fecha del dato. */
.dc-uso { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; opacity: 0.9; }
.dc-uso-p { white-space: nowrap; }
.dc-uso .pd-ic { width: 0.95em; height: 0.95em; opacity: 0.8; }

/* ── Superficies del organigrama y del HCD ─────────────────────────────────────
   Estas tarjetas (secretarías, comisiones, bloques, autoridades) tenían el color
   escrito a mano en el JS con valores de tema OSCURO: fondo blanco al 2% y borde
   blanco al 8%. Sobre el fondo verde claro del Tema Clásico eso es literalmente
   invisible — las secciones se leían como texto suelto (reporte del usuario).
   Ahora el color vive acá y cada tema define el suyo. */
.org-surface {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.org-surface-soft { background: rgba(255, 255, 255, 0.03); }
.org-divider { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.org-hdr-line { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.org-accent { background: rgba(255, 255, 255, 0.02); }
/* El panel que se DESPLIEGA (las áreas de la secretaría, las autoridades de la comisión)
   traía `background:rgba(0,0,0,0.3)` escrito en el JS: un velo negro pensado para el fondo
   oscuro. En Clásico ese velo ensucia la tarjeta verde y el listado sale gris sucio —
   por eso el organigrama "se veía oscuro" recién al abrirlo, y en todas las tarjetas.
   Mismo patrón de siempre: el color se va del marcado y cada tema define el suyo. */
.org-panel { background: rgba(0, 0, 0, 0.3); }

/* Clásico: verde institucional, como pidió el usuario ("borde y fondo verde",
   igual que la caja de Intendencia). El fondo es un punto MÁS saturado que el
   contenedor (#eaf4ee) para que la tarjeta se despegue, y el borde lo delimita.
   La Intendencia conserva su relleno más fuerte: es la cabecera de la jerarquía. */
[data-theme="light"] .org-surface,
[data-theme="light"] .org-accent {
  background: rgba(0, 200, 83, 0.08);
  border-color: rgba(0, 114, 66, 0.30);
}
[data-theme="light"] .org-surface-soft { background: rgba(0, 200, 83, 0.06); }
/* En claro el panel no se oscurece: se hunde un punto en el mismo verde de la tarjeta,
   lo justo para separarlo de la cabecera sin robarle contraste al texto. */
[data-theme="light"] .org-panel { background: rgba(0, 114, 66, 0.06); }
[data-theme="light"] .org-divider { border-top-color: rgba(0, 114, 66, 0.16); }
[data-theme="light"] .org-hdr-line { border-bottom-color: rgba(0, 114, 66, 0.25); }
/* El hover de la fila clickeable también era blanco: en claro no se percibía. */
[data-theme="light"] .org-row:hover { background: rgba(0, 114, 66, 0.07) !important; }
.org-row:hover { background: rgba(255, 255, 255, 0.06); }

/* ── Menú lateral: colores que RESPETAN el tema ──────────────────────────────
   Estos valores estaban escritos a mano en el HTML (style="background:rgba(...)"),
   pensados para el tema oscuro. Un estilo en línea le gana siempre a la hoja de estilos,
   así que en tema CLARO —que es el que viene por defecto— el pie del menú quedaba negro
   dentro de un menú blanco, y los numeritos de los ejes perdían contraste.
   Es el mismo patrón que ya nos había mordido en el organigrama: sacar el color del
   marcado y dejarlo acá, donde el tema puede alcanzarlo. */

/* Pie del menú: acompaña al fondo del propio menú (.drawer). */
.drawer-footer { background: rgba(6, 14, 10, 0.98); }
[data-theme="light"] .drawer-footer { background: rgba(255, 255, 255, 0.98); }

/* Numeritos de cada eje. En claro, el texto usa un tono OSCURO del mismo color:
   el mismo tono que sobre fondo oscuro se lee bien, sobre blanco no llega al contraste. */
.drawer-axis-num.is-institucional { background: rgba(99, 102, 241, 0.20); color: #818cf8; }
.drawer-axis-num.is-sociedad      { background: rgba(0, 242, 255, 0.10); color: var(--cyan); }
.drawer-axis-num.is-economia      { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
.drawer-axis-num.is-territorio    { background: rgba(16, 185, 129, 0.15); color: var(--emerald); }
.drawer-axis-num.is-plan          { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.drawer-axis-num.is-enlaces       { background: rgba(255, 255, 255, 0.10); color: var(--text-secondary); }
.drawer-axis-num.is-telefonos     { background: rgba(225, 29, 72, 0.15); color: var(--rose); }

[data-theme="light"] .drawer-axis-num.is-institucional { background: rgba(99, 102, 241, 0.13); color: #3730a3; }
[data-theme="light"] .drawer-axis-num.is-sociedad      { background: rgba(13, 148, 136, 0.13); color: #115e59; }
[data-theme="light"] .drawer-axis-num.is-economia      { background: rgba(245, 158, 11, 0.18); color: #854d0e; }
[data-theme="light"] .drawer-axis-num.is-territorio    { background: rgba(16, 185, 129, 0.16); color: #065f46; }
[data-theme="light"] .drawer-axis-num.is-plan          { background: rgba(236, 72, 153, 0.14); color: #9d174d; }
[data-theme="light"] .drawer-axis-num.is-enlaces       { background: rgba(0, 0, 0, 0.06); color: #4b5563; }
[data-theme="light"] .drawer-axis-num.is-telefonos     { background: rgba(225, 29, 72, 0.14); color: #9f1239; }

/* El mismo eje se muestra en DOS lugares: el numerito del menú lateral (las reglas de arriba)
   y la columna del mega-menú de "Módulos" de la barra superior. Cuando se corrigieron los del
   menú lateral, estos quedaron afuera: el color venía escrito en línea (style="--ax:#22d3ee")
   y una propiedad personalizada en línea le gana a la hoja de estilos. Sobre el desplegable
   blanco del Clásico el "02" daba 1,7:1 y las viñetas casi no se veían.
   Van juntos a propósito: si un eje cambia de color, se cambian los dos de una sola pasada. */
.mega-col.is-institucional { --ax: #818cf8; }
.mega-col.is-sociedad      { --ax: #22d3ee; }
.mega-col.is-economia      { --ax: #f59e0b; }
.mega-col.is-territorio    { --ax: #10b981; }

[data-theme="light"] .mega-col.is-institucional { --ax: #3730a3; }
[data-theme="light"] .mega-col.is-sociedad      { --ax: #115e59; }
[data-theme="light"] .mega-col.is-economia      { --ax: #854d0e; }
[data-theme="light"] .mega-col.is-territorio    { --ax: #065f46; }

/* ═══════════════════════════════════════════════════════════════════════════
   RECORRIDO «PINAMAR EN NÚMEROS»  (js/recorrido.js · el interruptor está en el <head> de index.html)
   ---------------------------------------------------------------------------
   Una presentación corta, a pantalla completa, para quien entra por la portada —en el celular y
   en la compu—: una idea por pantalla, con un número grande leído de lo que publican las áreas.

   · Tiene SU estética —de noche, con la foto aérea de Pinamar— y no la del tema elegido: por eso
     los colores van escritos acá y no salen de las variables del tema. Las tipografías sí.
   · Todo en rem: la barra de accesibilidad agranda la letra cambiando el tamaño de <html>.
   · El foco NO se estiliza acá: lo gobierna accesibilidad.css.
   · La esquina de abajo a la derecha queda libre: ahí vive el botón de accesibilidad, que va por
     encima de esto (z-index 99990) para que se pueda usar también durante el recorrido.
   · Sin la clase `rec-on` en <html> nada de esto se ve: la portada es la de siempre.
   ═══════════════════════════════════════════════════════════════════════════ */
#recorrido { display: none; }
html.rec-on #recorrido { display: flex; }
html.rec-on body { overflow: hidden; }
/* AL TERMINAR, SE DESVANECE (pedido del usuario, 2026-10-15: «que la transición sea suave, que no
   aparezca de golpe la pantalla de inicio»). Ya está cerrado —no recibe toques ni foco, y la
   página de atrás ya se puede usar—: sólo se está yendo. Su logo está exactamente encima del de
   la barra de la portada, así que mientras se desvanece queda quieto. js/recorrido.js pone y
   saca la clase; a quien pidió menos movimiento no se le desvanece: se va de una. */
html.rec-sale #recorrido { display: flex; opacity: 0; pointer-events: none; }
/* Lo que se lee se va primero, en un cuarto de segundo, y después la foto se disuelve en la portada:
   si se fueran juntos, a mitad de camino se leerían dos textos encimados. El logo, no: queda. */
html.rec-sale #recorrido .rec-p, html.rec-sale #recorrido .rec-barras, html.rec-sale #rec-saltar { opacity: 0; transition: opacity .25s ease; }

#recorrido {
  /* Aire a los costados: el MISMO que el de la barra de la portada (.header), así el logo de
     arriba y el texto quedan alineados con los de la página que aparece al terminar. */
  --rec-lado: clamp(16px, 3.5vw, 44px);
  --rec-arriba: env(safe-area-inset-top, 0px);            /* dónde empieza la fila del logo */
  --rec-pluma: 3.5rem;                                      /* cuánto antes del primer renglón empieza a oscurecerse */
  --rec-aire: 1;                                            /* el aire entre un bloque y el siguiente: en un celular bajo se aprieta */
  position: fixed; inset: 0; z-index: 99000;
  transition: opacity .7s ease;          /* al terminar se desvanece (html.rec-sale, más abajo) */
  flex-direction: column; overflow: hidden;
  background: #06110b; color: #fff;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;                       /* tocar en cualquier lado pasa a la pantalla siguiente */
}
.rec-caja {
  position: relative; flex: 1; min-height: 0; width: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  padding: var(--rec-arriba) var(--rec-lado) 0;
}
.rec-foto, .rec-velo { position: absolute; inset: 0; }
/* La foto se acerca despacio. Lo que crece es un ::before y .rec-foto lo recorta: si creciera la
   capa misma, la caja pasaría a tener «algo más allá del borde» y un salto de foco podría correr
   toda la pantalla unos píxeles, sin vuelta (a quien pidió menos movimiento la foto le queda ya
   acercada, así que le pasaría siempre). */
.rec-foto { overflow: hidden; background: #06110b; }
.rec-foto::before { content: ''; position: absolute; inset: 0; background: url('/img/recorrido-costa.webp') 50% 50% / cover no-repeat; animation: rec-acercar 15s ease-out both; }
/* En una pantalla apaisada (la compu, un celular de costado), el recorte apaisado de la misma foto
   (los arma scripts/recorrido-fondos.js; el de cada pantalla lo elige js/recorrido.js). */
@media (orientation: landscape) { .rec-foto::before { background-image: url('/img/recorrido-costa-ancha.webp'); } }
/* La foto propia de una pantalla: una imagen que entra con un fundido por encima de la de la tapa
   (el ::before, que queda siempre debajo) y que también se acerca despacio. La pone y la saca
   js/recorrido.js; el fundido dura lo mismo que espera ese archivo para retirar la de abajo.
   No recibe toques: pasan de largo, así un dedo apoyado no abre el menú de «guardar imagen». */
.rec-capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity .6s ease; animation: rec-acercar 15s ease-out both; pointer-events: none; }
.rec-capa.ya { opacity: 1; }
/* QUE EL TEXTO SE LEA NO DEPENDE DE LA FOTO NI DEL ALTO DE LA PANTALLA. Hay dos oscurecimientos, y
   los dos se miden desde donde está el texto, no en porcentajes de la pantalla:
     · arriba, una franja pareja que cubre las barritas y el encabezado (este velo);
     · abajo, el fondo propio de cada pantalla (.rec-p), que empieza a oscurecerse un poco antes
       de su primer renglón (la «pluma») y va con ella.
   En el medio queda la ventana por donde se ve la foto: grande en un celular alto, angosta en uno
   bajo. Antes el velo iba en porcentajes de la pantalla, y en un celular bajo el texto subía hasta
   la parte clara.
   La pluma y el fondo los pinta UNA sola capa. Con dos capas pegadas (probado) queda una raya de
   un píxel donde se tocan, en los celulares cuya pantalla no tiene un número entero de puntos por
   píxel —un Pixel, muchos Samsung y Xiaomi—: en el borde cada una tapa medio punto, y dos medios
   tonos no suman un tono entero.
   La prueba (scripts/test/recorrido-portal.js) mide las dos cosas —el contraste con una foto toda
   blanca detrás, y que no haya rayas—: no tocar esto sin correrla. */
.rec-velo { background: linear-gradient(180deg, rgba(4,14,9,.8) 0, rgba(4,14,9,.8) calc(var(--rec-arriba) + 4.75rem), rgba(4,14,9,.44) calc(var(--rec-arriba) + 9.5rem), rgba(4,14,9,.44) 100%); }
/* 15 s, la tapa y cada pantalla: con 20 s al usuario le resultaba lento (2026-10-14, «un poco más
   rápido, un poco solamente»). Lo que se acerca no cambia. */
@keyframes rec-acercar { from { transform: scale(1); } to { transform: scale(1.08); } }
.rec-caja > :not(.rec-foto):not(.rec-velo) { position: relative; }

/* Debajo de la fila del logo, y con aire debajo: con la letra agrandada el texto se desplaza, y sin
   ese aire subía hasta pegarse al borde blanco de las barritas (medido: 1 a 1 en ese borde). */
.rec-barras { flex: none; display: flex; gap: .375rem; list-style: none; margin: 2px 0 .375rem; padding: 0; }
.rec-barras li { flex: 1; height: .25rem; border-radius: .25rem; background: rgba(255,255,255,.34); transition: background .25s; }
.rec-barras li.ya { background: #fff; }

/* La fila de arriba mide lo mismo que la barra de la portada (64 px) y su logo también (46 px):
   en px, como allá, para que coincidan aunque se agrande la letra. */
.rec-cab { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; height: 64px; }
/* Arriba a la izquierda, el logo oficial de la Municipalidad: el MISMO archivo que el encabezado del
   portal (/assets/logo_muni.svg), en blanco, del mismo tamaño y en el mismo lugar que el de la barra
   verde de la portada (pedido del usuario, 2026-10-15: «que mantenga la misma proporción, para que
   no se note desprolijo o algún movimiento raro»). Sin una copia aparte del logo. */
.rec-marca { margin: 0; line-height: 0; }
.rec-logo { display: block; height: 46px; width: auto; filter: brightness(0) invert(1); }

/* Cada pantalla va apoyada abajo (margin-top:auto), al alcance del pulgar, y mide lo que mide su
   texto. Va de borde a borde (los márgenes negativos) para que su fondo oscuro también llegue.
   Cuando el lugar no alcanza, cede en orden: primero se achica la pluma —el tramo de arriba, sin
   texto—, y recién si ni así entra (alguien agrandó la letra, o el celular es muy bajo) la pantalla
   SE DESPLAZA. Lo primero que se resigna es la foto, no la lectura. */
.rec-p {
  flex: 0 1 auto; min-height: 0; margin: auto calc(-1 * var(--rec-lado)) 0;
  padding: 0 var(--rec-lado) max(calc(1.25rem * var(--rec-aire)), env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none;
  background-image: linear-gradient(180deg, rgba(4,14,9,0) 0, rgba(4,14,9,.7) var(--rec-pluma), rgba(4,14,9,.9) 100%);
}
.rec-p::before { content: ''; flex: 0 1 var(--rec-pluma); min-height: .5rem; }   /* la pluma */
.rec-p::-webkit-scrollbar { display: none; }
.rec-p[hidden] { display: none; }
.rec-p > * { max-width: 46rem; }   /* la columna de lectura: un renglón de punta a punta de una pantalla ancha no se lee */
.rec-p.entra > * { animation: rec-subir .5s cubic-bezier(.2,.8,.2,1) both; }
.rec-p.entra > :nth-child(2) { animation-delay: .06s; }
.rec-p.entra > :nth-child(3) { animation-delay: .12s; }
.rec-p.entra > :nth-child(n+4) { animation-delay: .18s; }
@keyframes rec-subir { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

.rec-ante { margin: 0; font: 600 .875rem/1.3 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: #7ff0b1; }
.rec-tit { margin: calc(.5rem * var(--rec-aire)) 0 0; font-family: var(--font-heading); font-weight: 800; color: #fff; }
.rec-num { display: block; white-space: nowrap; font-size: clamp(3.25rem, 25vw, 6.5rem); line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.rec-num.l2 { font-size: clamp(2.6rem, 16.5vw, 4.75rem); }
.rec-num.l3 { font-size: clamp(2.1rem, 12.5vw, 3.75rem); }
.rec-num.l4 { font-size: clamp(1.6rem, 9vw, 2.75rem); letter-spacing: -.02em; }
.rec-num.parte { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; letter-spacing: 0; }   /* ni achicado entra: va en renglones */
/* Para el lector de pantalla y para nadie más: el número que se ve se anima, éste dice el valor de una. */
.rec-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.rec-que { display: block; margin-top: calc(.5rem * var(--rec-aire)); font-size: 1.6875rem; line-height: 1.15; font-weight: 600; }
.rec-p.tapa .rec-tit, .rec-p.cierre .rec-tit { font-size: clamp(2.6rem, 14.5vw, 3.9rem); line-height: 1; letter-spacing: -.02em; }
.rec-seg { align-self: flex-start; margin: calc(1rem * var(--rec-aire)) 0 0; padding: .5rem .875rem; border-radius: 999px; background: rgba(0,200,83,.2); border: 1px solid rgba(127,240,177,.5); color: #b9f8d4; font: 600 1rem/1.3 var(--font-body); }
.rec-pie { margin: calc(1.125rem * var(--rec-aire)) 0 0; font: 400 .9375rem/1.45 var(--font-body); color: rgba(255,255,255,.92); }
.rec-pie b { font-weight: 600; color: #fff; }

.rec-acc { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-top: calc(1.375rem * var(--rec-aire)); padding-right: 4.75rem; }
.rec-btn {
  min-height: 3rem; padding: 0 1.25rem; border-radius: 999px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: 600 1.0625rem/1 var(--font-body); white-space: nowrap;
}
.rec-btn.pri { background: #fff; color: #0c2417; }
.rec-btn.sec { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); color: #fff; }
.rec-btn.chico { min-height: 2.75rem; padding: 0 1rem; font-size: .9375rem; }
.rec-btn[disabled] { opacity: .65; cursor: progress; }

/* Un celular bajo —o uno común con la barra del navegador a la vista, que le saca alto a la
   pantalla (un iPhone SE deja 553 px)—: menos aire y el número un poco más chico, para que la
   pantalla más cargada entre sin tener que desplazarla. La letra de leer no se toca. */
@media (max-height: 41.25rem) {
  #recorrido { --rec-aire: .7; --rec-pluma: 2.5rem; }
  .rec-num { font-size: clamp(3rem, 22vw, 5.25rem); }
  .rec-que { font-size: 1.5rem; }
}

/* LA COMPU, A PANTALLA COMPLETA (pedido del usuario, 2026-10-14: «funciona perfecto en celular,
   tenemos que incorporarlo pantalla completa en pc también»). Lo mismo que en el celular, más
   grande: la foto ocupa toda la pantalla y el texto sigue apoyado abajo, con los mismos
   oscurecimientos atados a él, en una columna de lectura a la izquierda (un renglón de punta a
   punta de una pantalla ancha no se lee). Los tamaños crecen con el ancho Y con el alto: una
   notebook con la barra del navegador a la vista deja unos 650 px de alto. */
@media (min-width: 48rem) {
  #recorrido { --rec-pluma: clamp(2.5rem, 9vh, 6rem); }
  .rec-num { font-size: clamp(3.25rem, min(10vw, 14vh), 8.5rem); }
  .rec-num.l2 { font-size: clamp(2.6rem, min(7.5vw, 10.5vh), 6.25rem); }
  .rec-num.l3 { font-size: clamp(2.1rem, min(5.5vw, 8vh), 4.75rem); }
  .rec-num.l4 { font-size: clamp(1.6rem, min(4vw, 6vh), 3.5rem); }
  .rec-que { font-size: clamp(1.5rem, min(2.4vw, 4vh), 2.25rem); }
  .rec-p.tapa .rec-tit, .rec-p.cierre .rec-tit { font-size: clamp(2.6rem, min(6vw, 9.5vh), 5.25rem); }
  .rec-pie { font-size: 1.0625rem; }
}

/* En la portada: el botón para volver a verlo (en el celular y en la compu). */
.hero-rec { display: none; margin: 1.25rem 0 0; }
.rec-abrir {
  min-height: 2.75rem; padding: 0 1.125rem; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bg-card); border: 1px solid var(--border-card); color: var(--text-primary);
  font: 600 .9375rem/1 var(--font-body);
}
html.rec-hay .hero-rec { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA SUPERIOR VERDE, CON EL LOGO EN BLANCO (pedido del usuario, 2026-10-15)
   El verde del logo (#007242), en los dos temas, y todo lo de la barra en blanco. Es la barra en
   la que termina el recorrido: su logo queda exactamente debajo del de allá (mismo archivo,
   tamaño y lugar), así que cuando el recorrido se desvanece el logo no se mueve.
   Opaca y sin desenfoque: con un fondo lleno el desenfoque no se ve y le cuesta al celular.
   El foco por teclado, en blanco sobre el verde: está en accesibilidad.css, como todo el foco.
   ═══════════════════════════════════════════════════════════════════════════ */
.header, [data-theme="light"] .header {
  background: #007242;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: rgba(0, 0, 0, .14);
}
@media (max-width: 768px) { .header, [data-theme="light"] .header { background: #007242; } }
[data-theme="light"] body::before { display: none; }   /* el hilo verde de arriba: ahora la barra entera es verde */
.header-brand .logo-icon { filter: brightness(0) invert(1); }
.header-nav a.nav-chatbot img { filter: brightness(0) invert(1); }
.header .header-nav a { color: rgba(255, 255, 255, .92); }
.header .header-nav a:hover, .header .header-nav a.active { color: #fff; background: rgba(255, 255, 255, .16); }
.header .nav-search-ic { color: #4f5f56; }
.header .nav-search input, [data-theme="light"] .header .nav-search input { background: #fff; border-color: transparent; color: #1f2d25; }
.header .nav-search input::placeholder { color: #5d6b63; }
.header .nav-search input:focus { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.header .nav-cta, [data-theme="light"] .header .nav-cta { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.header .nav-cta:hover { background: rgba(255, 255, 255, .14); border-color: #fff; box-shadow: none; }
.header .theme-toggle-btn, [data-theme="light"] .header .theme-toggle-btn, .header .mobile-menu-toggle { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); color: #fff; }
.header .theme-toggle-btn:hover, .header .mobile-menu-toggle:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }