/* PDF Platform — layout + view styles */

/* ─── Shell ─── */
html, body, #root { margin: 0; padding: 0; }
/* Sin scroll lateral (sobre todo en mobile). `clip` evita el scroll horizontal
   sin romper position:sticky del header; `hidden` queda de fallback. */
html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
.app-shell {
  display: block;
  min-height: 100vh;
  background: var(--bg);
}
.app-main { display: flex; flex-direction: column; min-height: 100vh; }

/* ─── Sidebar (overlay) ─── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: var(--paper);
  border-right: 1px solid var(--border);
  z-index: 60;
  transform: translateX(-100%);
  transition: transform 220ms cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: 0 0 0 0 transparent;
}
.app-shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 18px 60px -20px rgba(0,0,0,0.30); }
.sidebar-scrim {
  position: fixed; inset: 0;
  background: rgba(10, 18, 50, 0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 55;
  animation: scrimIn 160ms ease;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.sidebar-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: 0; background: transparent;
  font-size: 22px; line-height: 1; color: var(--ink-3);
  cursor: pointer; border-radius: 6px;
}
.sidebar-close:hover { background: var(--bg-2); color: var(--ink); }

.topbar-menu, .topbar-brand {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-menu { width: 42px; height: 42px; }
.topbar-menu:hover { background: var(--bg-2); }
/* Burger: oculto por defecto; en desktop solo lo ven los admins (.is-admin).
   En mobile (cuando se oculta el nav superior) se muestra a TODOS, ver @media. */
.topbar-menu { display: none; }
.topbar-menu.is-admin { display: inline-flex; }
.topbar-brand { padding: 4px 6px; }
/* Header en modo mapa (mobile): ← Volver + provincia reemplazan burger+logo.
   Oculto por defecto; se activa dentro del @media mobile más abajo. */
.topbar-mapa-hdr { display: none; }
@media (max-width: 880px) {
  .topbar.topbar-mapa-mode { position: relative; }
  .topbar.topbar-mapa-mode .topbar-menu,
  .topbar.topbar-mapa-mode .topbar-brand { display: none !important; }
  .topbar.topbar-mapa-mode .topbar-mapa-hdr {
    display: flex; align-items: center;
    flex: 1 1 auto; min-width: 0;
  }
  .topbar-mapa-volver {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    background: none; border: 0; cursor: pointer; padding: 4px 2px;
    color: oklch(0.62 0.24 258); font: 600 15px 'Orbitron', var(--sans);
    -webkit-tap-highlight-color: transparent;
  }
  .topbar-mapa-volver svg { flex: none; }
  /* Nombre de provincia: CENTRADO en el header (absoluto sobre la barra,
     igual que el logo), azul con neón DÉBIL. La flecha Volver queda a la
     izquierda y las acciones a la derecha sin descentrarlo. */
  .topbar-mapa-prov {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    max-width: 56%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: center; pointer-events: none;
    font-family: 'Orbitron', var(--sans); font-weight: 600; font-size: 18px;
    color: oklch(0.60 0.24 258);
    text-shadow: 0 0 6px oklch(0.62 0.24 258 / 0.4);
  }
}

/* ─── Sidebar ─── */
.sidebar {
  background: var(--paper);
  border-right: 1px solid var(--border);
  padding: 28px 22px 22px;
  display: flex; flex-direction: column;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.brand-name { font-family: var(--serif); font-size: 19px; line-height: 1.1; letter-spacing: -0.01em; }
.brand-name .italic { font-style: italic; color: var(--primary); }
.brand-meta { font-size: 10px; letter-spacing: 0.10em; color: var(--ink-3); margin-top: 4px; text-transform: uppercase; }

.side-nav {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
  overflow-y: auto;        /* scroll cuando hay más ítems que alto de pantalla */
  min-height: 0;           /* permite que el flex item achique y scrollee */
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.side-nav::-webkit-scrollbar { width: 8px; }
.side-nav::-webkit-scrollbar-thumb { background: var(--border-2, rgba(0,0,0,.18)); border-radius: 8px; }
.side-item {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 11px 12px;
  border-radius: var(--r);
  background: transparent; border: 0;
  cursor: pointer; text-align: left;
  transition: background .12s ease;
  /* Asegura look uniforme entre <button> y <a> */
  text-decoration: none; color: inherit;
  font: inherit;
}
.side-item:hover { background: var(--bg-2); }
/* Tab "Contacto" colapsable del burger: label + caret en una fila. */
.side-contacto-toggle {
  flex-direction: row; align-items: center; justify-content: space-between;
}
.side-contacto-caret { display: inline-flex; color: var(--ink-3); transition: transform .22s ease; }
.side-contacto-toggle.is-open .side-contacto-caret { transform: rotate(180deg); }
.side-contacto-sub {
  display: flex; flex-direction: column;
  margin: 2px 0 4px 10px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.side-contacto-sub .side-sub-item { padding-top: 9px; padding-bottom: 9px; }
.side-item.active {
  background: var(--ink);
  color: var(--bg);
}
.side-item .si-label { font-weight: 500; font-size: 14px; }
.side-item .si-hint { font-size: 10px; letter-spacing: 0.05em; color: var(--ink-3); text-transform: uppercase; margin-top: 2px; }
.side-item.active .si-hint { color: oklch(0.78 0.025 270); }

.sidebar-foot { padding-top: 18px; border-top: 1px solid var(--border); }
.status { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg-2); margin-bottom: 8px; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-tint); }
.status-t { font-size: 12px; font-weight: 500; }
.status-s { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.modo { font-size: 11px; color: var(--ink-3); padding: 4px 10px; }

/* ─── Topbar ─── */
.app-main { display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
  padding: 11px clamp(14px, 2vw, 36px);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
/* En la SPA (plataforma.html) el header no es sticky. */
.app-main .topbar { position: static; top: auto; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.crumbs .sep { color: var(--ink-3); }
.crumbs .cur { font-weight: 500; }
.search {
  flex: 1; max-width: 480px; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-3);
}
.search input {
  flex: 1; border: 0; background: transparent;
  font: inherit; color: var(--ink); outline: none;
  font-size: 13px;
}
.search .kbd { font-size: 10px; padding: 2px 6px; border: 1px solid var(--border-2); border-radius: 4px; background: var(--paper); }
.topbar-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-shrink: 0; }

/* Avatar + menú de usuario en el topbar */
.topbar-user { position: relative; }
.topbar-avatar {
  position: relative; padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 50%; line-height: 0; display: block;
  /* Mismo margen visual que el glifo del icono de menú (inset 11px en su botón 42px). */
  margin-right: 11px;
  transition: box-shadow .15s ease;
  box-shadow: 0 0 6px oklch(0.66 0.22 255/0.42),
              0 0 14px oklch(0.60 0.26 258/0.28),
              0 0 26px oklch(0.56 0.27 260/0.16);
}
.topbar-avatar:hover {
  box-shadow: 0 0 0 3px var(--primary-tint),
              0 0 8px oklch(0.66 0.22 255/0.55),
              0 0 18px oklch(0.60 0.26 258/0.38),
              0 0 34px oklch(0.56 0.27 260/0.22);
}
.topbar-avatar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.topbar-avatar-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.topbar-avatar-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
  background: oklch(0.58 0.20 25); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border-radius: 9px; border: 2px solid var(--bg);
}
.topbar-usermenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  display: flex; flex-direction: column;
  min-width: 230px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px;
  animation: tmIn .12s ease;
}
@keyframes tmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.topbar-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.topbar-menu-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.topbar-menu-mail { font-size: 12px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.topbar-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: none; cursor: pointer;
  font-size: 14px; color: var(--ink); text-align: left; border-radius: 8px;
}
.topbar-menu-item:hover { background: var(--bg-2); }
.topbar-menu-item.danger { color: oklch(0.55 0.20 25); }
.tm-ico { width: 18px; text-align: center; font-size: 15px; flex: none; }
.tm-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  background: oklch(0.58 0.20 25); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; border-radius: 9px;
}
.topbar-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Vista Notificaciones */
.notif-view { max-width: 760px; margin: 0 auto; }
.notif-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.notif-title { font-family: var(--serif); font-size: 28px; font-weight: 500; margin: 2px 0 0; display: flex; align-items: center; gap: 12px; }
.notif-count {
  font-family: var(--sans, inherit); font-size: 12px; font-weight: 600;
  color: var(--primary); background: var(--primary-tint);
  padding: 3px 10px; border-radius: 999px;
}
.notif-mark-all { font-size: 13px; white-space: nowrap; }
.notif-list { padding: 0; overflow: hidden; }
.notif-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border-bottom: 1px solid var(--border); position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.is-unread { background: color-mix(in oklab, var(--primary) 4%, transparent); }
.notif-ico {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: var(--bg-2);
}
.notif-body { flex: 1; min-width: 0; }
.notif-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notif-cat { color: var(--ink-3); }
.notif-time { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.notif-it-title { font-weight: 600; font-size: 14px; color: var(--ink); margin: 2px 0; }
.notif-it-detail { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.notif-action { font-size: 13px; margin-top: 6px; display: inline-block; }
.notif-dot {
  flex: none; width: 10px; height: 10px; margin-top: 6px; padding: 0;
  border: none; border-radius: 50%; background: var(--primary); cursor: pointer;
}
.notif-dot:hover { box-shadow: 0 0 0 4px var(--primary-tint); }
.notif-empty { text-align: center; padding: 48px 24px; display: grid; gap: 16px; place-items: center; }
.notif-empty-t { font-size: 16px; color: var(--ink-2); }

/* Menú principal en el topbar — centrado horizontalmente */
.topbar-nav {
  display: flex; align-items: center;
  flex: 1;                 /* toma el espacio del medio entre marca y acciones */
  justify-content: center; /* centra la píldora en ese espacio */
  min-width: 0;
  white-space: nowrap;
}
/* Contenedor ovalado que envuelve todas las opciones (igual que el toggle de
   Nivel de gobierno): fondo suave + borde + esquinas redondeadas. */
.topbar-nav-pill {
  position: relative;      /* referencia para el thumb deslizante */
  isolation: isolate;
  display: inline-flex; align-items: center;
  gap: clamp(2px, 0.5vw, 8px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px;
  max-width: 100%;
}
/* Pastilla azul que se desliza hasta el link activo (mismo diseño que los
   toggles de sección). La posición/ancho la fija el JS del Topbar. */
.topbar-nav-thumb {
  position: absolute; z-index: 0;
  top: 4px; bottom: 4px; left: 0;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--primary) 70%, transparent);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
  pointer-events: none;
}
.topbar-nav-thumb.is-on { opacity: 1; }
.topbar-nav-link {
  position: relative; z-index: 1;
  background: transparent; border: 0; padding: 6px 14px;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(12.5px, 1vw, 16px);
  font-weight: 500;
  color: var(--ink-3);          /* no seleccionado: gris */
  letter-spacing: -0.005em;
  text-decoration: none;        /* limpia underline de <a> */
  border-radius: 999px;
  transition: color .12s ease;
}
.topbar-nav-link:hover {
  color: oklch(0.55 0.18 272);  /* hover: azul claro (mismo que mapas) */
  text-decoration: none;
}
.topbar-nav-link.is-active {
  color: #fff;                  /* seleccionado: blanco sobre la pastilla azul */
  text-decoration: none;
}
.topbar-nav-link.is-active:hover { color: #fff; }

/* ─── Botón "Contacto" del topbar con desplegable ─── */
.topbar-navitem { position: relative; display: inline-flex; align-items: center; }
.topbar-navitem > .topbar-nav-link { display: inline-flex; align-items: center; }
.topbar-caret {
  font-size: 0.7em; margin-left: 4px; display: inline-block;
  transition: transform .12s ease;
}
.topbar-caret.is-open { transform: rotate(180deg); }
.topbar-navmenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  display: flex; flex-direction: column;
  min-width: 230px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0,0,0,.14); padding: 6px;
  animation: tmIn .12s ease;
}
/* Los ítems son <a>: anulamos la cursiva serif del nav y el subrayado de enlace. */
.topbar-navmenu .topbar-menu-item {
  text-decoration: none; font-family: var(--sans, inherit); font-style: normal;
}

/* Por debajo de ~1240px los 7 links no entran ni escalados con clamp() (sobre
   todo deslogueado, con "Iniciar sesión" + "Crear cuenta"): el menú inline se
   oculta y la navegación pasa a la hamburguesa (la sidebar tiene los mismos
   accesos). Arriba de ese ancho, clamp() los achica para que no se toquen. */
@media (max-width: 1240px) {
  .topbar-nav { display: none; }
  /* Sin el nav superior, el burger es la navegación: visible para todos. */
  .topbar-menu { display: inline-flex; }
}

/* ─── Content ─── */
.app-content { flex: 1; padding: 28px 32px 60px; max-width: 1400px; width: 100%; margin: 0 auto; }
[data-density="compact"] .app-content { padding: 18px 24px 40px; }

.app-foot {
  border-top: 1px solid var(--border);
  padding: 16px 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--ink-3);
}
.af-links { display: flex; gap: 8px; }
.af-links a { text-decoration: none; }
.af-links a:hover { color: var(--ink); }

/* ─── Common bits ─── */
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.10em; color: var(--ink-3); text-transform: uppercase; font-weight: 500; }
.stat {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
}
.stat.accent-primary { border-left: 3px solid var(--primary); }
.stat.accent-warn    { border-left: 3px solid var(--accent); }
.stat.accent-good    { border-left: 3px solid var(--good); }
.stat-label { margin-bottom: 8px; }
.stat-value { font-family: var(--serif); font-size: 38px; line-height: 1; letter-spacing: -0.02em; }
.stat-sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

.state-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font: 500 11px var(--sans);
  letter-spacing: 0.01em;
}
.state-badge .sb-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.avatar {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600;
  flex-shrink: 0;
}

.bar {
  position: relative; overflow: hidden;
  background: var(--bg-2);
  border-radius: 999px;
}
.bar-fill { height: 100%; border-radius: 999px; transition: width .35s ease; }

.link {
  background: transparent; border: 0; color: var(--ink);
  font-family: var(--sans); font-weight: 500; font-size: 13px;
  cursor: pointer; padding: 4px 0;
  border-bottom: 1px solid var(--border-2);
}
.link:hover { color: var(--primary); border-bottom-color: var(--primary); }
.link.back { display: inline-flex; gap: 8px; margin-bottom: 18px; border: 0; padding: 6px 0; }

.panel-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 22px; margin-top: 4px; }
.panel { overflow: hidden; }

.seg {
  display: inline-flex;
  background: var(--bg-2); padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.seg button {
  background: transparent; border: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font: 500 12px var(--sans);
  cursor: pointer;
  color: var(--ink-2);
}
.seg button.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }

/* ─── Inicio ─── */
.hero-strip { padding: 28px 0 32px; }
.hs-eyebrow { margin-bottom: 14px; }
.hs-title { font-size: 56px; line-height: 1.0; letter-spacing: -0.02em; max-width: 820px; }
.hs-lede { font-size: 17px; color: var(--ink-2); max-width: 640px; margin-top: 18px; line-height: 1.5; }
.hs-actions { display: flex; gap: 10px; margin-top: 24px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }

.elec-list, .den-list { padding: 8px 12px; }
.elec-row, .den-row {
  display: grid; grid-template-columns: 1fr 200px; gap: 18px;
  padding: 16px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.elec-row:hover, .den-row:hover { background: var(--bg-2); }
.elec-row:last-child, .den-row:last-child { border-bottom: 0; }
.er-title { font-weight: 500; margin-top: 6px; font-size: 15px; }
.er-meta  { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.er-right { text-align: right; }
.er-pct   { font-family: var(--serif); font-size: 28px; line-height: 1; }
.er-pct-lbl { font-size: 9px; color: var(--ink-3); letter-spacing: 0.1em; margin: 2px 0 8px; }

.den-row { grid-template-columns: 60px 1fr 160px; }
.den-tag { font-size: 11px; color: var(--ink-3); padding-top: 3px; }
.den-cat { margin-bottom: 4px; }
.den-title { font-weight: 500; font-size: 14px; line-height: 1.35; }
.den-meta { font-size: 10px; color: var(--ink-3); margin-top: 4px; }
.den-right { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.den-apoyos { font-size: 11px; color: var(--ink-3); }

.proximas .prox-grid {
  padding: 16px 18px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.prox-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: 8px;
}
.pc-title { font-family: var(--serif); font-size: 19px; line-height: 1.15; margin-top: 6px; }
.pc-fechas { font-size: 11px; color: var(--ink-3); }
.pc-dist { font-size: 12px; color: var(--ink-2); }
.pc-foot { display: flex; gap: 18px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--border-2); }
.pc-val { font-size: 14px; font-weight: 500; }

/* ─── Mapa ─── */
.mapa { display: flex; flex-direction: column; gap: 18px; }
.mapa-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 32px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto 22px;
  padding: 60px 48px 40px;
  overflow: hidden;
  isolation: isolate;
}
/* Grilla CRT/HUD del hero removida — hero limpio (sin grilla ni animación). */
/* Scanline (ya no se renderiza; el elemento se quitó del JSX). */
.mapa-hero-scanline {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%, var(--primary) 12%, var(--primary) 88%, transparent 100%);
  box-shadow: 0 0 14px 1px var(--primary);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: mapa-hero-scan 7s linear infinite;
}
@keyframes mapa-hero-scan {
  0%   { top: -1%;  opacity: 0; }
  8%   { opacity: 0.55; }
  92%  { opacity: 0.55; }
  100% { top: 101%; opacity: 0; }
}
/* Crosshairs en las esquinas */
.mapa-hero-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid var(--primary);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.mapa-hero-corner.tl { top: 22px; left: 22px;     border-right: 0; border-bottom: 0; }
.mapa-hero-corner.tr { top: 22px; right: 22px;    border-left: 0;  border-bottom: 0; }
.mapa-hero-corner.bl { bottom: 22px; left: 22px;  border-right: 0; border-top: 0; }
.mapa-hero-corner.br { bottom: 22px; right: 22px; border-left: 0;  border-top: 0; }
/* Cursor parpadeante en el título */
.mapa-hero-title .h-cursor {
  display: inline-block;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 0.62em;
  font-weight: 400;
  vertical-align: 10%;
  margin-left: 6px;
  animation: mapa-hero-blink 1.05s steps(2, start) infinite;
}
@keyframes mapa-hero-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-hero-scanline { animation: none; opacity: 0.4; top: 50%; }
  .mapa-hero-title .h-cursor { animation: none; }
}
.mapa-hero-text { max-width: 520px; align-self: center; position: relative; z-index: 1; }
.mapa-hero-eyebrow {
  display: inline-block;
  color: white !important;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0 0 18px;
}
.mapa-hero-title {
  font-family: var(--serif);
  font-size: 64px; line-height: 1.0; letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--ink);
  font-weight: 500;
  text-wrap: balance;
}
.mapa-hero-title em { font-style: italic; color: var(--primary); font-weight: 400; }
.mapa-hero-lede {
  font-family: var(--serif);
  font-size: 21px; line-height: 1.5;
  font-weight: 400;
  color: var(--ink-2);
  margin: 0;
  max-width: 520px;
}
.mapa-hero-map {
  display: flex; justify-content: flex-end; align-items: center;
  position: relative; z-index: 2;
  padding-right: 0;
}
/* Tooltip flotante del mapa (hover sobre una provincia) */
.map-tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: #0D1320; color: #fff; border-radius: 10px;
  padding: 8px 11px; min-width: 130px; max-width: 230px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  font-size: 12px; line-height: 1.35;
}
.map-tip-t { font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
.map-tip-row { display: flex; justify-content: space-between; gap: 12px; }
.map-tip-row span { color: rgba(255,255,255,0.7); }
.map-tip-row b { font-weight: 600; white-space: nowrap; }
.map-tip-hint {
  margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 11px; font-weight: 600; color: #7fb0ff; letter-spacing: .01em;
}
.mapa-hero-map .mapa-svg {
  background: transparent; padding: 0;
  width: 99%;
  filter: drop-shadow(0 14px 48px rgba(0, 18, 50, 0.45));
}
.mapa-hero-map .mapa-svg svg {
  max-height: 1287px; width: 100%; max-width: 100%;
  /* Glow neón azul que abraza el contorno del mapa (igual que el hero de index) */
  filter:
    drop-shadow(0 0 3px  oklch(0.68 0.22 255 / 0.55))
    drop-shadow(0 0 9px  oklch(0.60 0.26 258 / 0.38))
    drop-shadow(0 0 18px oklch(0.56 0.27 260 / 0.24));
  animation: mapaHeroGlow 4.5s ease-in-out infinite;
}
@keyframes mapaHeroGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px  oklch(0.68 0.22 255 / 0.48))
      drop-shadow(0 0 8px  oklch(0.60 0.26 258 / 0.30))
      drop-shadow(0 0 15px oklch(0.56 0.27 260 / 0.18));
  }
  50% {
    filter:
      drop-shadow(0 0 4px  oklch(0.70 0.22 255 / 0.62))
      drop-shadow(0 0 11px oklch(0.62 0.26 258 / 0.45))
      drop-shadow(0 0 22px oklch(0.56 0.27 260 / 0.30));
  }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-hero-map .mapa-svg svg { animation: none; }
}

/* Estado colapsado deshabilitado — el mapa no se desplaza al seleccionar una provincia.
.mapa-hero {
  transition: grid-template-columns 900ms cubic-bezier(.65,.05,.36,1), padding 900ms cubic-bezier(.65,.05,.36,1);
}
.mapa-hero-text {
  transition: opacity 1100ms ease, transform 900ms cubic-bezier(.65,.05,.36,1), visibility 0s linear 0s;
  opacity: 1;
}
.mapa-hero-map {
  transition: justify-content 900ms cubic-bezier(.65,.05,.36,1),
              padding-left 900ms cubic-bezier(.65,.05,.36,1),
              padding-right 900ms cubic-bezier(.65,.05,.36,1),
              transform 900ms cubic-bezier(.65,.05,.36,1);
}
.mapa-hero.is-collapsed { grid-template-columns: 1fr; padding: 32px 48px 48px; }
.mapa-hero.is-collapsed .mapa-hero-text {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-24px);
  transition: opacity 1100ms ease, transform 900ms cubic-bezier(.65,.05,.36,1), visibility 0s linear 1100ms;
  pointer-events: none;
  position: absolute;
  width: 0; height: 0; overflow: hidden;
}
.mapa-hero.is-collapsed .mapa-hero-map {
  justify-content: flex-start;
  padding-left: max(0px, calc((100vw - 1400px) / 2));
  padding-right: 0;
}
.mapa-hero.is-collapsed .mapa-hero-map .mapa-svg svg { max-height: 1300px; }
*/

@media (max-width: 880px) {
  .mapa-hero {
    grid-template-columns: 1fr;
    padding: 36px 24px 48px;
    min-height: auto;
  }
  .mapa-hero-text { padding-left: 0; }
  .mapa-hero-map { padding-right: 0; justify-content: center; }
  .mapa-hero-title { font-size: 42px; }
}

/* ─── Feed de propuestas en Provincia: tarjetas prp-dest-card a todo el ancho, apiladas en lista ─── */
.view.provincia .prov-prop-feed { display: flex; flex-direction: column; gap: 16px; }
.view.provincia .prov-prop-list { display: flex; flex-direction: column; gap: 16px; }
.view.provincia .prov-prop-list .prp-dest-card { width: 100%; }
/* Hover de la tarjeta de propuesta en Provincia: resplandor neón azul */
.view.provincia .prov-prop-list .prp-dest-card:hover {
  border-color: oklch(0.68 0.22 255 / 0.75);
  box-shadow:
    0 0 0 1px  oklch(0.68 0.22 255 / 0.32),
    0 0 10px   oklch(0.66 0.24 258 / 0.42),
    0 0 26px   oklch(0.60 0.26 260 / 0.28),
    0 20px 50px -30px oklch(0.20 0.10 268 / 0.30);
}

/* Selector de nivel de gobierno dentro del panel de propuestas */
.view.provincia .prov-prop-nivel { margin: 4px 0 18px; }

/* ─── Efecto neón azul en todas las cajas (.card) de la página ─────────────── */
.view.provincia .card {
  border-color: oklch(0.68 0.22 255 / 0.45);
  box-shadow:
    0 0 0 1px oklch(0.68 0.22 255 / 0.18),
    0 0 10px  oklch(0.66 0.24 258 / 0.30),
    0 0 30px  oklch(0.60 0.26 260 / 0.18);
  animation: provBoxGlow 4.5s ease-in-out infinite;
}
@keyframes provBoxGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px oklch(0.68 0.22 255 / 0.16),
      0 0 8px   oklch(0.66 0.24 258 / 0.24),
      0 0 24px  oklch(0.60 0.26 260 / 0.14);
  }
  50% {
    box-shadow:
      0 0 0 1px oklch(0.68 0.22 255 / 0.30),
      0 0 14px  oklch(0.66 0.24 258 / 0.40),
      0 0 40px  oklch(0.60 0.26 260 / 0.26);
  }
}
@media (prefers-reduced-motion: reduce) {
  .view.provincia .card { animation: none; }
}

/* ─── HERO de Provincia: mismo estilo y layout que index.html (.hero) ─────── */
.hero.prov-hero {
  max-width: 1400px; margin: 0 auto 22px;
  padding: 60px 40px 72px 28px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  position: relative; isolation: isolate; overflow: hidden;
}
/* (Marca de agua del hero eliminada a pedido). */
.prov-hero .hero-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid var(--primary);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.prov-hero .hero-corner.tl { top: 28px; left: 28px;     border-right: 0; border-bottom: 0; }
.prov-hero .hero-corner.tr { top: 28px; right: 28px;    border-left: 0;  border-bottom: 0; }
.prov-hero .hero-corner.bl { bottom: 28px; left: 28px;  border-right: 0; border-top: 0; }
.prov-hero .hero-corner.br { bottom: 28px; right: 28px; border-left: 0;  border-top: 0; }
.prov-hero .h-title .h-cursor {
  display: inline-block;
  color: var(--primary);
  font-family: var(--mono);
  font-size: 0.62em;
  font-weight: 400;
  vertical-align: 8%;
  margin-left: 6px;
  animation: hero-blink 1.05s steps(2, start) infinite;
}
@keyframes hero-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.prov-hero .h-left { max-width: 640px; position: relative; }
.prov-hero .h-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid var(--border-2); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper);
}
.prov-hero .h-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-tint); }
.prov-hero .h-title {
  font-family: var(--serif);
  font-size: 77px; line-height: 0.98; letter-spacing: -0.03em;
  margin: 28px 0 24px;
  font-weight: 500;
  text-wrap: balance;
}
.prov-hero .h-title em { font-style: italic; color: var(--primary); font-weight: 400; }
.prov-hero .h-lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 540px; }
.prov-hero .h-lede em { font-style: italic; color: var(--primary); font-weight: 500; }
.prov-hero .h-title em, .prov-hero .h-lede em {
  text-shadow:
    0 0 4px  oklch(0.68 0.22 255 / 0.45),
    0 0 12px oklch(0.60 0.26 258 / 0.30),
    0 0 24px oklch(0.56 0.27 260 / 0.18);
}
/* Caja de estado de conformación — mismo estilo que el contenedor del mapa (.h-illo) */
.prov-hero .prov-status {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 26px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 16px;
  box-shadow: 0 18px 44px -26px oklch(0.20 0.10 268 / 0.22),
              0 0 6px oklch(0.66 0.22 255 / 0.20),
              0 0 16px oklch(0.60 0.26 258 / 0.12);
  padding: 16px 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  font: inherit;
}
.prov-hero .prov-status:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 54px -24px oklch(0.20 0.10 268 / 0.30),
              0 0 8px oklch(0.66 0.22 255 / 0.32),
              0 0 22px oklch(0.60 0.26 258 / 0.20);
}
.prov-hero .prov-status:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prov-hero .prov-status-main {
  font-family: var(--serif);
  font-size: 17px; line-height: 1.35; color: var(--ink);
}
.prov-hero .prov-status-main em { font-style: italic; color: var(--primary); font-weight: 500; }
.prov-hero .prov-status-main b { font-weight: 600; }
.prov-hero .prov-status-sub {
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2); margin-top: 7px;
}
/* Contador compacto — cierre de la primera lista (hero de Precandidatos).
   display block: ocupa el mismo ancho que el contenedor de texto de arriba. */
.prov-hero .prov-countdown {
  margin-top: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; border-radius: 16px; padding: 21px 29px 23px;
  display: block; text-align: center;
  position: relative;
  /* Halo neón azul de fondo que pulsa (mismos tonos que el glow del mapa). */
  animation: cd-neon 3s ease-in-out infinite;
}
@keyframes cd-neon {
  0%, 100% {
    box-shadow:
      0 18px 44px -22px oklch(0.20 0.10 268 / 0.55),
      0 0 6px  oklch(0.66 0.22 255 / 0.35),
      0 0 18px oklch(0.60 0.26 258 / 0.22),
      0 0 36px oklch(0.56 0.27 260 / 0.12);
  }
  50% {
    box-shadow:
      0 18px 44px -22px oklch(0.20 0.10 268 / 0.55),
      0 0 10px oklch(0.70 0.22 255 / 0.60),
      0 0 28px oklch(0.62 0.26 258 / 0.42),
      0 0 56px oklch(0.56 0.27 260 / 0.26);
  }
}
@media (prefers-reduced-motion: reduce) {
  .prov-hero .prov-countdown { animation: none; }
}
.prov-hero .prov-countdown-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.8; margin-bottom: 12px;
}
.prov-hero .prov-countdown-cells { display: flex; justify-content: center; gap: 48px; }
.prov-hero .prov-countdown-num {
  font-size: 43px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prov-hero .prov-countdown-unit {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.7; margin-top: 6px;
}
@media (max-width: 700px) {
  .prov-hero .prov-countdown { display: block; text-align: center; }
  .prov-hero .prov-countdown-cells { justify-content: center; gap: 26px; }
  .prov-hero .prov-countdown-num { font-size: 32px; }
  .prov-hero .prov-countdown-label { font-size: 10px; }
}
.prov-hero .prov-status-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary); font-weight: 600;
}
.prov-hero .prov-status-cta svg { width: 14px; height: 14px; }
.prov-hero .prov-status-frente       { border-left-color: var(--accent); }
.prov-hero .prov-status-conformacion  { border-left-color: var(--primary); }
.prov-hero .prov-status-conformado    { border-left-color: var(--good); }

/* Sin caja: el mapa va directo sobre el fondo de la página (a pedido,
   se eliminó el contenedor blanco semitransparente con borde y glow). */
.prov-hero .h-illo {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  position: relative;
  overflow: visible;
}
.prov-hero .h-illo-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; position: relative; }
.prov-hero .h-illo-head .t { font-family: var(--serif); font-size: 18px; font-style: italic; }
.prov-hero .h-illo-head .b { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; }
.prov-hero .h-illo-svg { position: relative; }
.prov-hero .h-illo-svg::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 60%; aspect-ratio: 3 / 4;
  background: radial-gradient(ellipse at center,
    oklch(0.60 0.26 255 / 0.26) 0%,
    transparent 68%);
  filter: blur(34px);
  z-index: 0;
  pointer-events: none;
}
.prov-hero .prov-hero-map {
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 3px  oklch(0.68 0.22 255 / 0.55))
    drop-shadow(0 0 9px  oklch(0.60 0.26 258 / 0.38))
    drop-shadow(0 0 18px oklch(0.56 0.27 260 / 0.24));
  animation: heroMapGlow 4.5s ease-in-out infinite;
}
.prov-hero .prov-hero-map svg { width: 100%; height: auto; display: block; }
/* Sin el texto de cabecera, el mapa aprovecha ese espacio: en desktop se
   agranda un poco más allá del ancho de su columna, siempre centrado. */
@media (min-width: 881px) {
  .prov-hero .prov-hero-map { width: 132%; margin-left: -16%; }
}
/* Página Nuestros Precandidatos (.view.mapa): mapa 10% más chico que el
   resto en desktop (132% → ~119%), siempre centrado. */
@media (min-width: 881px) {
  .view.mapa .prov-hero .prov-hero-map { width: 119%; margin-left: -9.5%; }
}
@media (max-width: 880px) {
  /* En mobile también se agranda, centrado; el excedente (~7.5% por lado)
     queda dentro del padding lateral de la página, sin scroll horizontal. */
  .prov-hero .prov-hero-map { width: 120%; margin-left: -10%; }
}
.prov-hero .prov-hero-legend {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.prov-hero .phl-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em;
  color: var(--ink-2);
}
.prov-hero .phl-sw {
  width: 13px; height: 13px; border-radius: 3px; flex: none;
  box-shadow: inset 0 0 0 1px oklch(0.20 0.05 270 / 0.18);
}
.prov-hero .phl-sw-empty { background: #ffffff; box-shadow: inset 0 0 0 1px var(--border-2); }
@keyframes heroMapGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 3px  oklch(0.68 0.22 255 / 0.48))
      drop-shadow(0 0 8px  oklch(0.60 0.26 258 / 0.30))
      drop-shadow(0 0 15px oklch(0.56 0.27 260 / 0.18));
  }
  50% {
    filter:
      drop-shadow(0 0 4px  oklch(0.70 0.22 255 / 0.62))
      drop-shadow(0 0 11px oklch(0.62 0.26 258 / 0.45))
      drop-shadow(0 0 22px oklch(0.56 0.27 260 / 0.30));
  }
}
@media (prefers-reduced-motion: reduce) {
  .prov-hero .prov-hero-map { animation: none; }
  .prov-hero .h-title .h-cursor { animation: none; }
}
@media (max-width: 880px) {
  .hero.prov-hero {
    grid-template-columns: 1fr;
    padding: 40px 24px 56px;
    gap: 40px;
  }
  .prov-hero .h-title { font-size: 48px; }
  .prov-hero .hero-corner { width: 14px; height: 14px; }
  .prov-hero .hero-corner.tl, .prov-hero .hero-corner.tr { top: 14px; }
  .prov-hero .hero-corner.tl, .prov-hero .hero-corner.bl { left: 14px; }
  .prov-hero .hero-corner.tr, .prov-hero .hero-corner.br { right: 14px; }
  .prov-hero .hero-corner.bl, .prov-hero .hero-corner.br { bottom: 14px; }
}
@media (max-width: 560px) {
  .hero.prov-hero { padding: 28px 16px 40px; gap: 28px; }
  .prov-hero .h-title { font-size: 38px; }
  .prov-hero .h-illo { padding: 0; }
}

/* ── Selector Ciudadanos/Políticos en el hero del mapa ────────────────────
   Mismo estilo que el selector de segmentos Vacantes/Precandidatos/
   Propuestas (#mapa-segmentos): pastilla blanca, opción activa llena con el
   color de acento. Ciudadanos → azul (primary) · Políticos → rojo (danger).
   El acento se propaga con --modo-accent y la iluminación neón del hero
   acompaña (capas azul/roja con crossfade). */
.hero-modo { --modo-accent: var(--primary); }
.hero-modo.hero-modo-politicos { --modo-accent: var(--danger); }
.hero-modo-wrap {
  display: flex; justify-content: center;
  margin-bottom: 16px; position: relative; z-index: 1;
}
.hero-modo-seg.seg { background: #fff; }
.hero-modo-seg button { padding: 8px 18px; font-size: 13px; }
/* Especificidad (0,4,1): tiene que ganarle a `.pd-nivel-seg button.on`
   (definida MÁS ABAJO con background: var(--primary)), si no el acento
   rojo del modo Políticos nunca se aplica. */
.seg.pd-nivel-seg.hero-modo-seg button.on {
  background: var(--modo-accent);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--modo-accent) 25%, transparent);
}
/* Iluminación neón de fondo: capa azul (::before) y roja (::after)
   superpuestas, crossfade por opacidad. z-index -1 = sobre el fondo del
   hero, debajo del contenido (el hero tiene isolation: isolate). En
   matrix-mode se apagan solas (display:none de matrix.css). */
.prov-hero.hero-modo::before,
.prov-hero.hero-modo::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  transition: opacity .5s ease;
  /* Pulso lento y suave del glow. Se anima filter+transform (NO opacity,
     que está reservada para el crossfade azul↔rojo entre modos). */
  animation: heroNeonPulse 7s ease-in-out infinite;
}
/* Glow más intenso en el centro y cada vez más tenue hacia los márgenes
   del hero (transparente total en los bordes). */
/* Glow más intenso en el centro y cada vez más tenue hacia los márgenes
   del hero (transparente total en los bordes). */
.prov-hero.hero-modo::before {
  background: radial-gradient(80% 70% at 50% 45%,
    oklch(0.60 0.26 255 / 0.26) 0%,
    oklch(0.58 0.25 257 / 0.12) 40%,
    oklch(0.56 0.25 258 / 0.03) 68%,
    transparent 88%);
  opacity: 1;
}
.prov-hero.hero-modo::after {
  background: radial-gradient(80% 70% at 50% 45%,
    oklch(0.58 0.22 27 / 0.28) 0%,
    oklch(0.55 0.21 27 / 0.13) 40%,
    oklch(0.52 0.21 27 / 0.03) 68%,
    transparent 88%);
  opacity: 0;
}
.prov-hero.hero-modo-politicos::before { opacity: 0; }
.prov-hero.hero-modo-politicos::after { opacity: 1; }
/* Hero full-bleed en desktop (página Mapa): el hero escapa del contenedor
   centrado de 1400px y ocupa todo el ancho de la ventana, pegado al topbar
   (sin marco crema). El contenido (texto + mapa) conserva la columna de
   1400px de antes vía padding calculado; solo se expande la superficie
   del glow. max() protege en ventanas de 881–1400px. */
@media (min-width: 881px) {
  .view.mapa .hero.prov-hero {
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -28px; /* come el padding-top de .app-content */
    padding-left: max(28px, calc((100vw - 1400px) / 2 + 60px));
    padding-right: max(40px, calc((100vw - 1400px) / 2 + 72px));
  }
  [data-density="compact"] .view.mapa .hero.prov-hero { margin-top: -18px; }
}

/* Desktop: el hero es mucho más ancho → el radial corto dejaba franjas
   blancas a los costados. Acá el glow cubre TODA la superficie del hero
   (los bordes quedan tenues pero nunca en cero). En mobile queda la caída
   corta de arriba. */
@media (min-width: 881px) {
  .prov-hero.hero-modo::before {
    background: radial-gradient(78% 70% at 50% 45%,
      oklch(0.60 0.26 255 / 0.18) 0%,
      oklch(0.58 0.25 257 / 0.10) 45%,
      oklch(0.56 0.25 258 / 0.04) 75%,
      transparent 100%);
  }
  .prov-hero.hero-modo::after {
    background: radial-gradient(78% 70% at 50% 45%,
      oklch(0.58 0.22 27 / 0.20) 0%,
      oklch(0.55 0.21 27 / 0.11) 45%,
      oklch(0.52 0.21 27 / 0.05) 75%,
      transparent 100%);
  }
}
@keyframes heroNeonPulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50%      { filter: brightness(1.35) saturate(1.12); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .prov-hero.hero-modo::before,
  .prov-hero.hero-modo::after { animation: none; }
}
/* Las esquinitas del hero acompañan el acento del modo. */
.prov-hero.hero-modo .hero-corner { border-color: var(--modo-accent); }
/* En modo Políticos, el glow del mapa también pasa a rojo. */
.hero-modo-politicos .h-illo-svg::before {
  background: radial-gradient(ellipse at center,
    oklch(0.55 0.22 27 / 0.26) 0%,
    transparent 68%);
}
.hero-modo-politicos .prov-hero-map {
  animation: none;
  filter:
    drop-shadow(0 0 3px  oklch(0.62 0.23 27 / 0.55))
    drop-shadow(0 0 9px  oklch(0.55 0.23 27 / 0.38))
    drop-shadow(0 0 18px oklch(0.50 0.23 27 / 0.24));
}

/* ── Nuestros Precandidatos (.view.mapa) · solo mobile ────────────────────
   A pedido: en la versión mobile de esta página se ocultan el contador de
   cierre de lista ("Tiempo para cerrar nuestra primera lista") y el footer,
   y el mapa se agranda para ocupar el espacio que dejaba el contador.
   Scope acotado a .view.mapa: Inicio y demás páginas quedan intactas.
   El hero tiene overflow:hidden, así que el mapa más ancho no genera
   scroll horizontal. */
/* Orbitron en las opciones del header (nav + desplegables) y del menú
   hamburguesa mobile. */
.topbar-nav-link,
.topbar-menu-item,
.side-item { font-family: 'Orbitron', var(--sans); }

/* ── Dashboard futurista de la provincia (al elegirla) ───────────────────
   Panel oscuro con acentos neón, brackets de esquina y scanline; 4 tiles
   con calendario electoral y métricas en vivo de la jurisdicción. */
.mapa-dash {
  position: relative;
  max-width: 1400px; margin: 8px auto 18px;
  padding: 18px 22px 20px;
  border-radius: 16px;
  overflow: hidden;
  color: #eaf2ff;
  background:
    radial-gradient(120% 140% at 12% 0%, oklch(0.34 0.15 265 / 0.55), transparent 60%),
    linear-gradient(135deg, #0b1030 0%, #0e1447 55%, #0a0f2b 100%);
  border: 1px solid oklch(0.72 0.15 240 / 0.45);
  box-shadow:
    0 0 0 1px oklch(0.72 0.15 240 / 0.15),
    0 10px 30px -12px oklch(0.55 0.2 265 / 0.6),
    inset 0 0 40px oklch(0.60 0.24 260 / 0.12);
}
.mapa-dash::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image:
    linear-gradient(oklch(0.72 0.15 240 / 0.12) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.72 0.15 240 / 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 40%, transparent 85%);
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 40%, transparent 85%);
}
.mapa-dash-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, oklch(0.85 0.16 220 / 0.9), transparent);
  animation: mapaDashScan 4.5s linear infinite;
}
@keyframes mapaDashScan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(220px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapa-dash-scan { animation: none; opacity: 0; } }
.mapa-dash-head {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  margin-bottom: 14px;
  /* Ahora es un <button> que expande/colapsa el panel. */
  width: 100%; border: 0; background: none; cursor: pointer;
  padding: 2px 0; font: inherit; text-align: left; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.mapa-dash.is-compact .mapa-dash-head { margin-bottom: 12px; }
.mapa-dash-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  color: oklch(0.82 0.11 230);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.mapa-dash.is-open .mapa-dash-toggle { transform: rotate(180deg); }
/* Fechas y números pulsantes cuando el panel está expandido. */
@keyframes mdtPulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 10px oklch(0.72 0.16 245 / 0.55); }
  50%      { opacity: 0.72; text-shadow: 0 0 18px oklch(0.72 0.18 245 / 0.95); }
}
.mdt-pulse { animation: mdtPulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mdt-pulse { animation: none; } }
.mapa-dash-grid { animation: mdtReveal 0.32s ease both; }
@keyframes mdtReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mapa-dash-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: oklch(0.85 0.18 145);
  box-shadow: 0 0 0 4px oklch(0.85 0.18 145 / 0.2), 0 0 10px oklch(0.85 0.18 145 / 0.9);
  animation: mapaDashPulse 1.6s ease-in-out infinite;
}
@keyframes mapaDashPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.mapa-dash-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(0.82 0.11 230);
}
.mapa-dash-prov {
  margin-left: 0;
  font-family: 'Orbitron', var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  color: #fff; text-shadow: 0 0 12px oklch(0.7 0.18 250 / 0.7);
}
.mapa-dash-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
/* Segunda línea del dashboard: métricas en vivo (votos/precandidatos/
   propuestas) en 3 columnas, con su ticker de novedades. */
.mapa-dash-metrics { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
/* Ticker de novedades desde la última visita. */
.mdt-ticker {
  margin-top: 5px;
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  color: oklch(0.82 0.17 150);
  text-shadow: 0 0 8px oklch(0.75 0.18 150 / 0.6);
  animation: mdtTickerPulse 1.3s ease-in-out infinite;
}
@keyframes mdtTickerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .mdt-ticker { animation: none; } }
/* Gráfico de votos en el tiempo dentro del dashboard. */
.mapa-dash-chart {
  position: relative; z-index: 2;
  margin-top: 12px; padding: 12px 12px 8px;
  border-radius: 12px;
  background: oklch(0.28 0.09 262 / 0.45);
  border: 1px solid oklch(0.72 0.15 240 / 0.28);
}
.mdc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.mdc-y-label { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.78 0.09 235); }
.mdc-svg { display: block; width: 100%; height: 96px; overflow: visible; }
.mdc-axis { stroke: oklch(0.72 0.15 240 / 0.35); stroke-width: 1; }
.mdc-line {
  fill: none; stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.mdc-line-votos   { stroke: oklch(0.72 0.20 250); filter: drop-shadow(0 0 5px oklch(0.62 0.24 258 / 0.7)); }
.mdc-line-precand { stroke: oklch(0.72 0.22 350); filter: drop-shadow(0 0 4px oklch(0.70 0.24 350 / 0.7)); } /* rosa */
.mdc-line-props   { stroke: oklch(0.78 0.20 150); filter: drop-shadow(0 0 4px oklch(0.72 0.20 150 / 0.7)); } /* verde */
.mdc-dot-votos { fill: #fff; stroke: oklch(0.62 0.24 258); stroke-width: 2; filter: drop-shadow(0 0 6px oklch(0.66 0.22 255 / 0.9)); }
.mdc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.mdc-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.mdc-leg {
  position: relative; padding-left: 14px;
  font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.82 0.06 240);
}
.mdc-leg::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 10px; height: 3px; border-radius: 2px;
}
.mdc-leg-votos::before   { background: oklch(0.72 0.20 250); }
.mdc-leg-precand::before { background: oklch(0.72 0.22 350); }
.mdc-leg-props::before   { background: oklch(0.78 0.20 150); }
.mdc-x-label { text-align: right; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.78 0.09 235); white-space: nowrap; }
/* Desktop: métricas a la izquierda y gráfico a la DERECHA del dashboard. */
@media (min-width: 881px) {
  .mapa-dash-open {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 18px; align-items: stretch;
  }
  .mapa-dash-open .mapa-dash-chart {
    margin-top: 0; display: flex; flex-direction: column;
  }
  .mapa-dash-open .mapa-dash-chart .mdc-svg { height: auto; flex: 1 1 auto; min-height: 140px; }
}
.mapa-dash-tile {
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: oklch(0.28 0.09 262 / 0.45);
  border: 1px solid oklch(0.72 0.15 240 / 0.28);
}
.mdt-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(0.78 0.09 235); margin-bottom: 8px;
}
.mdt-value {
  font-family: 'Orbitron', var(--sans); font-weight: 700; font-size: 22px; line-height: 1.05;
  color: #fff; text-shadow: 0 0 14px oklch(0.7 0.2 245 / 0.7);
}
.mdt-num { font-size: 28px; color: oklch(0.88 0.15 220); text-shadow: 0 0 16px oklch(0.75 0.2 225 / 0.85); }
.mdt-sub { margin-top: 6px; font-size: 10.5px; color: oklch(0.72 0.06 240); }
/* Botón de votación al pie del dashboard: inicia el modo votación (swipe) */
.mapa-dash-votar {
  position: relative; z-index: 2;
  display: block; width: 100%;
  margin-top: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid oklch(0.78 0.15 235 / 0.55);
  background: linear-gradient(135deg, oklch(0.45 0.20 262), oklch(0.55 0.24 258));
  color: #fff;
  font-family: 'Orbitron', var(--sans);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.10em; text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 0 10px oklch(0.70 0.20 250 / 0.8);
  box-shadow:
    0 0 14px oklch(0.66 0.22 255 / 0.5),
    inset 0 0 18px oklch(0.70 0.20 250 / 0.18);
  transition: box-shadow .2s ease, transform .1s ease;
}
.mapa-dash-votar:active { transform: scale(0.99); }
/* Dashboard oculto: la sección queda sin panel, solo el botón VOTAR desactivado. */
.mapa-dash.is-oculto {
  background: none; border: 0; box-shadow: none; padding: 0; margin: 8px 0 12px;
}
.mapa-dash.is-oculto::before { display: none; }
.mapa-dash-votar:disabled {
  opacity: 0.5; cursor: not-allowed;
  box-shadow: none; text-shadow: none; transform: none;
}
.mapa-dash-votar:hover {
  box-shadow:
    0 0 22px oklch(0.68 0.22 255 / 0.7),
    inset 0 0 22px oklch(0.70 0.20 250 / 0.26);
}
@media (max-width: 880px) {
  .mapa-dash { margin: 18px 0 12px; padding: 14px 14px 16px; border-radius: 14px; }
  .mapa-dash-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mapa-dash-metrics { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .mapa-dash-metrics .mapa-dash-tile { padding: 11px 8px 10px; }
  .mapa-dash-metrics .mdt-ticker { font-size: 9px; }
  .mapa-dash-prov { font-size: 13px; }
  .mdt-value { font-size: 18px; }
  .mdt-num { font-size: 22px; }
}

/* ── Lista de precandidatos como CARDS estilo dashboard ──────────────────
   Mismo lenguaje que .mapa-dash / .mapa-dash-tile: panel azul-marino con
   radial de luz, borde neón, glow y tipografía clara. */
.view.mapa .cand-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; width: 100%; max-width: 100%; }
.view.mapa .cand-row { max-width: 100%; min-width: 0; overflow: hidden; }
.view.mapa .cand-row .cr-mid { min-width: 0; max-width: 100%; }
.view.mapa .cand-row {
  /* Tarjeta blanca con texto oscuro y neón azul (azul del botón Votar). */
  position: relative;
  background: #fff;
  border: 1.5px solid oklch(0.55 0.24 258);
  border-bottom: 1.5px solid oklch(0.55 0.24 258);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px oklch(0.66 0.22 255 / 0.18),
    0 0 18px oklch(0.60 0.24 258 / 0.4),
    0 0 40px oklch(0.58 0.26 260 / 0.22),
    0 6px 18px -12px rgba(20, 30, 80, 0.35);
  color: var(--ink);
}
/* Franja superior azul 2 (como en las tarjetas de propuesta). */
.view.mapa .cand-row:not(.cand-row-empty)::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(135deg, oklch(0.45 0.20 262), oklch(0.55 0.24 258));
  z-index: 2; pointer-events: none;
}
/* Hover solo con puntero real: en táctiles el tap no altera la card. */
@media (hover: hover) {
  .view.mapa .cand-row:hover {
    /* Lift sutil sobre blanco: leve tinte azul. */
    background: color-mix(in oklab, var(--primary) 5%, #fff);
    box-shadow: 0 10px 26px -12px rgba(20, 30, 80, 0.42);
  }
}
.view.mapa .cand-row .cr-rank { color: color-mix(in oklab, var(--primary) 55%, var(--ink-3)); }
.view.mapa .cand-row .cr-name,
.view.mapa .cand-row.lead .cr-name {
  color: var(--ink);
  text-shadow: none;
}
.view.mapa .cand-row .cr-prof { color: var(--ink-3); }
.view.mapa .cand-row .cr-bio-item .eyebrow { color: var(--ink-3); }
.view.mapa .cand-row .cr-bio-v { color: var(--ink); }
.view.mapa .cand-row .cr-bio-sub { color: var(--ink-3); }
.view.mapa .cand-row .cr-megusta { color: var(--primary); }
.view.mapa .cand-row .cr-megusta-num {
  color: var(--primary);
  text-shadow: 0 0 10px color-mix(in oklab, var(--primary) 35%, transparent);
  animation: crMegustaPulse 1.7s ease-in-out infinite;
}
/* Votos nuevos desde la última visita: (+N) en verde junto al contador. */
.view.mapa .cand-row .cr-megusta-nuevos {
  margin-left: 5px;
  font-size: 13px; font-weight: 700;
  color: var(--good, oklch(0.55 0.14 152));
}
/* Contador de apoyos pulsante: late el número y el ícono 👍 (opacidad). */
@keyframes crMegustaPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.68; }
}
.view.mapa .cand-row .cr-megusta-ico {
  /* Sin neón: ícono flat azul, sin glow ni pulso. */
  filter: none;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .view.mapa .cand-row .cr-megusta-num,
  .view.mapa .cand-row .cr-megusta-ico { animation: none; }
}
/* Filas "Acá podrías estar vos": variante punteada del mismo panel */
.view.mapa .cand-row-empty {
  background:
    radial-gradient(120% 140% at 12% 0%, oklch(0.30 0.12 265 / 0.4), transparent 60%),
    linear-gradient(135deg, oklch(0.20 0.06 265 / 0.9), oklch(0.16 0.05 265 / 0.9));
  border: 1px dashed oklch(0.75 0.15 235 / 0.55);
  box-shadow: inset 0 0 26px oklch(0.60 0.24 260 / 0.10);
}
/* Hover de la fila vacía solo con puntero real: en táctil el tap no debe
   cambiarle el color a la tarjeta "Acá podrías estar vos". */
@media (hover: hover) {
  .view.mapa .cand-row-empty:hover { background:
      radial-gradient(120% 140% at 12% 0%, oklch(0.30 0.12 265 / 0.4), transparent 60%),
      linear-gradient(135deg, oklch(0.20 0.06 265 / 0.9), oklch(0.16 0.05 265 / 0.9));
    border-color: oklch(0.75 0.15 235 / 0.55);
  }
}
.view.mapa .cand-row-empty .cr-rank { color: oklch(0.78 0.12 235); }
.view.mapa .cand-row-empty .cre-avatar {
  border-color: oklch(0.75 0.15 235 / 0.7);
  color: oklch(0.85 0.13 225);
}
.view.mapa .cand-row-empty .cre-title { color: oklch(0.88 0.13 225); text-shadow: 0 0 10px oklch(0.7 0.18 250 / 0.5); }
.view.mapa .cand-row-empty .cre-sub { color: oklch(0.78 0.07 240); }

/* Botones/selects activos bajo el dashboard con SU misma paleta: panel
   azul-marino con radial de luz, borde y glow neón (en vez del primary
   plano). Aplica al selector de segmentos, botones de cargo y dropdowns. */
.view.mapa #mapa-segmentos .seg button.on,
.view.mapa .seg.pd-nivel-seg.pd-cargos-seg button.on,
.view.mapa .sub-select.on {
  background:
    radial-gradient(120% 140% at 12% 0%, oklch(0.34 0.15 265 / 0.55), transparent 60%),
    linear-gradient(135deg, #0b1030 0%, #0e1447 55%, #0a0f2b 100%);
  border-color: oklch(0.72 0.15 240 / 0.55);
  color: #eaf2ff;
  box-shadow:
    0 0 0 1px oklch(0.72 0.15 240 / 0.15),
    0 6px 18px -8px oklch(0.55 0.20 265 / 0.6),
    inset 0 0 18px oklch(0.60 0.24 260 / 0.12);
}
.view.mapa .sub-select-wrap.on::after { border-color: #eaf2ff; }
/* Botón "+ Postularme como precandidato/a" con la misma paleta del dashboard */
.view.mapa .pd-foot-propose .btn.primary {
  background:
    radial-gradient(120% 140% at 12% 0%, oklch(0.34 0.15 265 / 0.55), transparent 60%),
    linear-gradient(135deg, #0b1030 0%, #0e1447 55%, #0a0f2b 100%);
  border: 1px solid oklch(0.72 0.15 240 / 0.55);
  color: #eaf2ff;
  text-shadow: 0 0 10px oklch(0.70 0.20 250 / 0.7);
  box-shadow:
    0 0 0 1px oklch(0.72 0.15 240 / 0.15),
    0 6px 18px -8px oklch(0.55 0.20 265 / 0.6),
    inset 0 0 18px oklch(0.60 0.24 260 / 0.12);
}

/* Selectores activos (precandidatos/propuestas, concejales/…, dropdowns) y el
   botón "Postularme" con el MISMO azul brillante del botón "Votar precandidatos"
   (.mapa-dash-votar), en TODOS los anchos (mobile y desktop igual). */
.view.mapa #mapa-segmentos .seg button.on,
.view.mapa .seg.pd-nivel-seg.pd-cargos-seg button.on,
.view.mapa .sub-select.on,
.view.mapa .pd-foot-propose .btn.primary {
  background: linear-gradient(135deg, oklch(0.45 0.20 262), oklch(0.55 0.24 258));
  border-color: oklch(0.78 0.15 235 / 0.55);
  color: #fff;
  text-shadow: 0 0 10px oklch(0.70 0.20 250 / 0.8);
  box-shadow:
    0 0 14px oklch(0.66 0.22 255 / 0.5),
    inset 0 0 18px oklch(0.70 0.20 250 / 0.18);
}
.view.mapa .pd-foot-propose .btn.primary { border: 1px solid oklch(0.78 0.15 235 / 0.55); }
/* Selector Precandidatos/Propuestas interno (desktop): el thumb del slider
   también en azul brillante (venía navy). */
.view.mapa .mapa-seg-inside .seg-slider::before,
.prp-nivel-seg.seg-slider::before {
  background: linear-gradient(135deg, oklch(0.45 0.20 262), oklch(0.55 0.24 258));
  box-shadow: 0 0 14px oklch(0.66 0.22 255 / 0.5);
}
/* Desktop: menos gap entre los selectores (Precandidatos/Propuestas ↔ cargos
   ↔ título/dropdown). */
@media (min-width: 881px) {
  .view.mapa .mapa-seg-inside { margin-bottom: 4px; }
  .view.mapa .prov-detail .pd-nivel:not(.mapa-seg-inside) { padding-top: 8px; }
}

/* Fila "← Volver" + nombre de provincia: solo existe visualmente en mobile
   (en desktop el mapa del hero queda siempre visible y no hace falta). */
.mapa-topbar-sel { display: none; }
/* Chips del wizard: también son un artefacto mobile. */
.wizard-chips { display: none; }

/* Footer del sitio oculto en la página Mapa (mobile Y desktop), y sin el
   hueco blanco al final: el padding inferior de .app-content se anula y el
   respiro lo pone la propia vista. */
.app-main:has(.view.mapa) .f { display: none; }
.app-main:has(.view.mapa) .app-content { padding-bottom: 0; }
/* En mobile, el perfil del precandidato y el modo votación tampoco
   llevan footer. */
@media (max-width: 880px) {
  .app-main:has(.view.perfil) .f,
  .app-main:has(.view.propuesta-detalle) .f,
  .app-main:has(.view.sw-view) .f { display: none; }
}
.view.mapa { padding-bottom: 32px; }
/* Toda la página Nuestros Precandidatos en Orbitron (prueba tipográfica). */
.view.mapa, .view.mapa * { font-family: 'Orbitron', var(--sans) !important; }
@media (max-width: 880px) {
  .view.mapa .prov-hero .prov-countdown { display: none; }
}

/* ── Desktop: al elegir provincia, el hero (mapa + texto) colapsa hacia
   arriba y el dashboard + lista suben tapándolo. Botón "← Volver al mapa"
   arriba a la izquierda. Mismo comportamiento que en mobile. ───────────── */
@media (min-width: 881px) {
  .view.mapa .prov-hero {
    overflow: hidden;
    max-height: 1400px;
    transition: max-height .55s cubic-bezier(.4,0,.2,1),
                margin-bottom .55s cubic-bezier(.4,0,.2,1),
                opacity .3s ease;
  }
  .view.mapa:not(.is-mapview) .prov-hero {
    max-height: 0;
    min-height: 0;
    padding-top: 0; padding-bottom: 0;
    margin-bottom: -24px; /* absorbe el gap para pegar la fila de volver al panel */
    opacity: 0;
    pointer-events: none;
    border: 0;
  }
  .view.mapa:not(.is-mapview) .prov-hero .h-title,
  .view.mapa:not(.is-mapview) .prov-hero .h-illo,
  .view.mapa:not(.is-mapview) .prov-hero .h-left { opacity: 0; }
  /* Fila superior con "← Volver al mapa" (aparece sólo con provincia elegida). */
  .view.mapa .mapa-topbar-sel { display: none; }
  .view.mapa:not(.is-mapview) .mapa-topbar-sel {
    display: flex; align-items: center; gap: 16px;
    position: relative; margin: 0 0 14px; min-height: 42px;
    animation: mapaSelUp .5s cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes mapaSelUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .view.mapa .mapa-volver {
    position: static; transform: none;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 11px; cursor: pointer;
    background: linear-gradient(135deg, oklch(0.45 0.20 262), oklch(0.55 0.24 258));
    border: 1px solid oklch(0.78 0.15 235 / 0.55);
    color: #fff; font: 700 14px 'Orbitron', var(--sans);
    box-shadow: 0 0 14px oklch(0.66 0.22 255 / 0.45);
  }
  .view.mapa .mapa-volver:hover { box-shadow: 0 0 20px oklch(0.66 0.22 255 / 0.65); }
  .view.mapa .mapa-topbar-prov {
    font-size: 22px; font-weight: 600; margin: 0;
    color: #eaf2ff; text-shadow: 0 0 12px oklch(0.62 0.24 258 / 0.7);
  }
  .view.mapa .mapa-topbar-prov em { font-style: normal; }
  /* Dashboard con el MISMO ancho que el contenedor de precandidatos/propuestas
     (.mapa-grid): sin cap de max-width ni márgenes laterales de centrado. */
  .view.mapa .mapa-dash { max-width: none; margin-left: 0; margin-right: 0; }
  /* Selector Precandidatos/Propuestas: en desktop va DENTRO del contenedor
     (arriba de los cargos); se oculta la copia externa. */
  .view.mapa .mapa-seg-outside { display: none; }
  .view.mapa .mapa-seg-inside { display: flex; justify-content: center; margin: 0 0 14px; }
  /* El selector de propuestas debe quedar EN EL MISMO LUGAR y con el MISMO
     fondo que el de precandidatos (que está en .prov-detail: banda blanca a
     todo el ancho, tope del card, padding-top 26). El de propuestas vive en
     .propuestas-embedded (padding 26px 30px) → se compensa con margen negativo
     para alinear borde/tope y fondo blanco. */
  .view.mapa .mapa-seg-inside-prop {
    background: #fff;
    margin: -26px -30px 16px;
    padding: 26px 30px 0;
  }
  .view.mapa .mapa-seg-inside .seg { background: #fff; }
}
/* En mobile el selector interno no se usa (va la copia externa). */
@media (max-width: 880px) {
  .view.mapa .mapa-seg-inside { display: none; }
}

/* ── Map view a pantalla completa (solo mobile) ───────────────────────────
   El hero (título + mapa) mide SIEMPRE 100dvh menos el topbar, en ambos
   estados (map view y provincia elegida), así el mapa NO cambia de tamaño
   al seleccionar una provincia. --pdf-topbar-h la setea Mapa.jsx midiendo
   el topbar real. La clase .is-mapview (puesta por Mapa.jsx mientras
   !userClicked) solo agrega el candado de scroll: sin provincia elegida la
   página no scrollea; al elegirla se saca la clase y el detalle scrollea
   debajo del hero. Solo :has() de un nivel (iOS Safari); NADA de :not(:has()). */
@media (max-width: 880px) {
  .app-shell:has(.view.mapa.is-mapview) {
    min-height: 0; height: 100vh; height: 100dvh; overflow: hidden;
  }
  .app-main:has(.view.mapa.is-mapview) {
    min-height: 0; height: 100vh; height: 100dvh; overflow: hidden;
  }
  .app-main:has(.view.mapa) .app-content {
    min-height: 0; padding: 8px 8px 0;
  }
  .view.mapa { margin: 0; padding-bottom: 48px; }
  .view.mapa.is-mapview { padding-bottom: 0; }
  .view.mapa .prov-hero {
    height: calc(100dvh - var(--pdf-topbar-h, 66px) - 8px);
    flex: 0 0 auto; min-height: 0;
    /* Full-bleed lateral: el glow llega a los bordes de la pantalla
       (come el padding de 8px de .app-content). */
    margin: 0 -8px 0;
    padding: 6px 16px 10px;
    display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  }
  .view.mapa.is-mapview .prov-hero {
    /* En map view también se come el padding superior: full-bleed total. */
    margin-top: -8px;
    height: calc(100dvh - var(--pdf-topbar-h, 66px));
  }
  /* El título conserva su tamaño y posición original (no se overridea). */
  .view.mapa .h-left { flex: 0 0 auto; }
  /* Selector Ciudadanos/Políticos DEBAJO del mapa en mobile: .h-left pasa a
     display:contents para que sus hijos (selector + título) sean items del
     flex del hero y se puedan reordenar → título, mapa, selector. */
  .view.mapa .prov-hero .h-left { display: contents; }
  .view.mapa .prov-hero .h-title { order: 1; }
  .view.mapa .prov-hero .h-illo { order: 2; }
  /* z-index 2: el mapa escalado (z-index 1, posterior en el DOM) se solapa
     con la zona del selector y le robaba los taps. */
  .view.mapa .prov-hero .hero-modo-wrap { order: 3; margin: 10px 0 2px; z-index: 2; }
  .view.mapa .h-illo {
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; align-items: stretch; justify-content: center;
  }
  .view.mapa .h-illo-svg {
    flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; align-items: center; justify-content: center;
  }
  .view.mapa .prov-hero-map {
    width: 100%; height: 100%; margin: 0;
    display: flex; align-items: center; justify-content: center;
    transform: scale(1.45); transform-origin: center;
  }
  .view.mapa .prov-hero-map svg {
    height: 100%; width: auto; max-width: 100%; max-height: 100%;
  }
}

/* ── Selector de cargos (.pd-cats) en la página Mapa · mobile ─────────────
   Etiquetas cortas (Diputado / Senador / Gobernador) y todas las opciones
   en UNA fila. En desktop se muestra la etiqueta completa + descripción. */
.pd-cat-nom-corto { display: none; }
@media (max-width: 880px) {
  .view.mapa .pd-cat-nom-full { display: none; }
  .view.mapa .pd-cat-nom-corto { display: inline; }
  .view.mapa .pd-cats {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px; padding: 12px 14px;
  }
  .view.mapa .pd-cat { padding: 10px 6px; text-align: center; }
  .view.mapa .pd-cat-h { justify-content: center; padding-right: 0; margin-bottom: 0; }
  .view.mapa .pd-cat-nom { font-size: 15px; white-space: nowrap; }
  .view.mapa .pd-cat-num,
  .view.mapa .pd-cat-d,
  .view.mapa .pd-cat-marker { display: none; }
  /* Opción Nuestros Precandidatos SIN contenedor con glow azul en mobile:
     el detalle (tipo de elección, cargos, distrito, listas) va directo
     sobre la página, a todo el ancho. */
  .view.mapa .prov-detail.sec-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .view.mapa .prov-detail.sec-card::before { display: none; }
  /* Sin la caja, los bloques internos pierden el padding lateral para
     aprovechar todo el ancho (queda solo el padding de página de 8px). */
  .view.mapa .prov-detail .pd-head,
  .view.mapa .prov-detail .pd-nivel,
  .view.mapa .prov-detail .pd-top,
  .view.mapa .prov-detail .pd-cats,
  .view.mapa .prov-detail .mm-legend,
  .view.mapa .prov-detail .cand-list,
  .view.mapa .prov-detail .pd-empty,
  .view.mapa .prov-detail .pd-foot-propose { padding-left: 0; padding-right: 0; }
  .prp-foot-propose { margin-top: 16px; }
  .view.mapa .prov-detail .sub-select-wrap { margin-left: 0; margin-right: 0; }
  .view.mapa .prov-detail .pd-nivel { background: transparent; }
  /* Selector de segmentos pegado al selector de Elección: se anulan el
     margin inferior del primero (inline → !important), el gap de 18px del
     flex de .mapa (margen negativo) y el padding-top de 26px del segundo. */
  /* Selector de segmentos pegado al dashboard de arriba y a los botones
     de cargo de abajo: los márgenes negativos compensan el gap de 18px
     del flex de .mapa y los márgenes propios (12px inline + 12px del
     dashboard). */
  .view.mapa .mapa-dash { margin-bottom: 0; }
  .view.mapa #mapa-segmentos { margin-top: -10px !important; margin-bottom: 0 !important; }
  /* Mismo radio, ancho y tipografía que los botones de cargo. El padding
     lateral heredado de .pd-nivel lo dejaba más angosto que el dropdown de
     municipio: se anula para igualar anchos. */
  .view.mapa #mapa-segmentos { padding-left: 0; padding-right: 0; }
  .view.mapa #mapa-segmentos .seg { border-radius: 10px; width: 100%; }
  .view.mapa #mapa-segmentos .seg button {
    border-radius: 8px;
    flex: 1 1 0;
    font-size: 12px;
    padding: 9px 14px;
  }
  /* Dropdowns de sección electoral / municipio / orden: misma altura y
     fuente (12px) que los botones de cargo, fondo BLANCO. En :focus la
     fuente sube a 16px — truco estándar para que iOS no haga auto-zoom
     al abrir el select (el picker nativo tapa el salto). */
  .view.mapa .sub-select {
    padding: 9px 38px 9px 12px;
    font-size: 12px;
    background: #fff;
  }
  .view.mapa .sub-select:focus { font-size: 16px; }
  .view.mapa .sub-select-wrap::after { right: 14px; }
  .view.mapa .mapa-grid { margin-top: -10px; }
  .view.mapa .prov-detail .pd-nivel { padding-top: 0; }
  /* Igual que Nuestros Precandidatos: las opciones Vacantes y Propuestas
     tampoco llevan contenedor con glow en mobile — contenido directo sobre
     la página, a todo el ancho. */
  .view.mapa .vac-card.sec-card,
  .view.mapa .propuestas-embedded.sec-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
  }
  .view.mapa .vac-card.sec-card::before,
  .view.mapa .propuestas-embedded.sec-card::before { display: none; }
  /* Propuestas/Vacantes sin huecos: intro pegado al selector de segmentos
     y contenido pegado al intro. Se compensa el gap de 18px del flex de
     .mapa con márgenes negativos y se anulan el margin-top de 20px del
     intro (prefijo .app-content: gana en especificidad a la regla base
     .view.mapa .mm-intro definida más abajo) y el padding-top del bloque. */
  .app-content .view.mapa .mm-intro { margin: -14px 0 0; }
  /* Propuestas en mobile: sin el intro "Propuestas ciudadanas…" y sin el
     selector de Nivel de gobierno (la provincia ya está elegida en el mapa;
     quedan solo los dropdowns de Municipio y Tema). */
  .view.mapa .mm-intro { display: none; }
  .view.mapa .propuestas-embedded .prp-nivel-row:not(.prp-nivel-loc) { display: none; }
  .view.mapa .propuestas-embedded.sec-card,
  .view.mapa .vac-card.sec-card { padding-top: 0; margin-top: -10px; }
  /* Modo Políticos: Parasitómetro/Panquecómetro/Sueldos también sin card
     contenedora en mobile — contenido directo sobre la página, a todo el
     ancho (igual que las opciones de Ciudadanos). */
  .view.mapa .mm-card,
  .view.mapa .panque-board {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
  }
  .view.mapa .mm-card .panel-head,
  .view.mapa .panque-board .panel-head { padding-left: 0; padding-right: 0; }
  .view.mapa .mm-card .mm-legend { padding-left: 0; padding-right: 0; }
  .view.mapa .mm-card .mm-side { padding-left: 0; padding-right: 0; border-left: 0; }
  .view.mapa .panque-board .panque-row { padding-left: 0; padding-right: 0; }
  /* Rows de precandidatos rediseñadas (mobile): foto grande arriba y
     centrada, nombre + profesión centrados debajo, y la bio en dos columnas
     (izq: Edad + Trayectoria reciente · der: Estudios + Antecedentes — el
     orden del DOM en la grilla de 2 columnas da exactamente esas parejas). */
  .view.mapa .cand-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
    padding: 18px 4px 14px;
  }
  .view.mapa .cand-row .cr-rank { position: absolute; top: 12px; left: 4px; }
  .view.mapa .cand-row .avatar,
  .view.mapa .cand-row-empty .cre-avatar {
    width: 128px !important; height: 128px !important; font-size: 42px !important;
  }
  .view.mapa .cand-row .cr-mid { text-align: center; min-width: 0; }
  .view.mapa .cand-row .cr-name { font-size: 18px; }
  .view.mapa .cand-row .cr-prof { margin-top: 3px; }
  .view.mapa .cand-row .cr-bio {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }
  .view.mapa .cand-row .cr-bio-item { min-width: 0; }
  .view.mapa .cand-row .cr-bio-v { overflow-wrap: break-word; }
  /* Textos de las dos columnas de bio centrados */
  .view.mapa .cand-row .cr-bio-item { text-align: center; }
  /* Thumb up + contador centrados; el número en azul con luz neón, más
     grande, en la fuente tecnológica (clase .mono del markup). */
  .view.mapa .cand-row .cr-counters { width: 100%; justify-content: center; }
  .view.mapa .cand-row .cr-megusta { color: var(--primary); }
  .view.mapa .cand-row .cr-megusta-ico { width: 21px; height: 21px; }
  .view.mapa .cand-row .cr-megusta-num {
    font-size: 26px;
    color: var(--primary);
    text-shadow: 0 0 10px color-mix(in oklab, var(--primary) 30%, transparent);
  }
  /* Luz neón azul de fondo en la foto de perfil del candidato */
  .view.mapa .cand-row .avatar {
    box-shadow:
      0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent),
      0 0 16px oklch(0.66 0.22 255 / 0.55),
      0 0 38px oklch(0.60 0.26 258 / 0.35);
  }
  /* (El hover de la fila vacía ya está gateado tras @media (hover:hover);
     en mobile no aplica ningún cambio, así que no hace falta resetearlo.) */

  /* ── Provincia elegida: el mapa se oculta ──────────────────────────────
     El hero colapsa con transición de altura (pantalla completa → franja
     compacta con solo el selector Ciudadanos/Políticos) y la sección
     inferior se desliza hacia arriba tapando el mapa. El título y el mapa
     se desvanecen y colapsan (flex 0, min-height 0) durante la animación. */
  .view.mapa .prov-hero { transition: height .5s cubic-bezier(.4,0,.2,1); }
  .view.mapa .prov-hero .h-title,
  .view.mapa .prov-hero .h-illo { transition: opacity .22s ease; }
  .view.mapa:not(.is-mapview) .prov-hero {
    height: 0;
    padding-top: 0; padding-bottom: 0;
    /* Absorbe los gaps de 18px del flex a ambos lados: la fila de provincia
       queda pegada al dashboard. */
    margin-top: -18px; margin-bottom: -14px;
  }
  /* Sin glow neón detrás del selector Ciudadanos/Políticos (hero colapsado). */
  .view.mapa:not(.is-mapview) .prov-hero.hero-modo::before,
  .view.mapa:not(.is-mapview) .prov-hero.hero-modo::after { display: none; }
  .view.mapa:not(.is-mapview) .prov-hero .h-title,
  .view.mapa:not(.is-mapview) .prov-hero .h-illo {
    flex: 0 1 0%;
    min-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
  }
  .view.mapa:not(.is-mapview) .prov-hero .hero-corner { display: none; }
  .view.mapa:not(.is-mapview) .prov-hero .hero-modo-wrap { margin: 4px 0; }
  /* La fila "← Volver + provincia" ahora vive en el HEADER (topbar-mapa-hdr);
     la versión in-content queda oculta para no duplicarla. */
  .view.mapa .mapa-topbar-sel {
    display: none;
  }
  .view.mapa .mapa-volver {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 0;
    background: transparent; border: 0; cursor: pointer;
    font: 600 14px var(--sans); color: var(--primary);
  }
  /* Nombre de provincia con neón azul (mismo azul del botón "Votar
     precandidatos"): texto claro con doble glow celeste. */
  .view.mapa .mapa-topbar-prov,
  .view.mapa .mapa-topbar-prov em {
    color: #eaf2ff;
    text-shadow:
      0 0 6px oklch(0.62 0.24 258 / 0.75),
      0 0 16px oklch(0.70 0.20 250 / 0.9);
  }
  .view.mapa .mapa-topbar-prov {
    font-size: 26px; font-weight: 500; margin: 0;
    text-align: center; line-height: 1.1;
    max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* El título grande de provincia de abajo del hero se reemplaza por el de
     la fila superior en mobile. */
  .view.mapa .mapa-prov-title { display: none; }
  /* Cadena anti-desborde completa: el aside del grid tiene min-width:auto
     y su min-content (fila de botones en una línea) desbordaba el track
     aunque el track fuera minmax(0,1fr). Se acota cada eslabón. */
  .view.mapa .mapa-grid { max-width: 100%; min-width: 0; }
  .view.mapa .prov-detail { min-width: 0; max-width: 100%; overflow: hidden; }
  .view.mapa .prov-detail .pd-nivel { min-width: 0; max-width: 100%; }
  .view.mapa .cand-list-h { white-space: normal; overflow-wrap: break-word; }
  /* Botones de cargo como SLIDER horizontal: una sola línea deslizable
     (no entran los 5 en el ancho de pantalla). Scrollbar oculta y snap
     suave por botón. */
  .view.mapa .seg.pd-cargos-seg {
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .view.mapa .seg.pd-cargos-seg::-webkit-scrollbar { display: none; }
  .view.mapa .seg.pd-cargos-seg button {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 9px 14px;
    scroll-snap-align: start;
  }
  /* Sin el título "Precandidatos a cargos …" en mobile: queda solo el
     dropdown (sección electoral o municipio). */
  .view.mapa .pd-top { display: none; }

  /* ── Wizard: selectores DE A UNO (mobile) ───────────────────────────────
     La clase wizard-<paso> en la raíz marca el paso actual:
     segmento → cargo → done. Cada clic en una opción oculta ese selector y
     muestra el siguiente. En desktop no aplica (media). */
  /* El hero ya no se corta en seco: colapsa animado (ver reglas de
     colapso más arriba) y el contenido sube tapando el mapa. */
  /* Selector de segmentos solo en su paso */
  .view.mapa.wizard-cargo #mapa-segmentos,
  .view.mapa.wizard-done #mapa-segmentos { display: none; }
  .view.mapa.wizard-segmento #mapa-segmentos { margin-top: 0 !important; }
  /* Contenido oculto hasta su paso */
  .view.mapa.wizard-segmento .mapa-grid { display: none; }
  .view.mapa.wizard-cargo .mapa-grid,
  .view.mapa.wizard-done .mapa-grid { margin-top: 0; }
  .view.mapa.wizard-segmento .mm-intro,
  .view.mapa.wizard-segmento .propuestas-embedded { display: none; }
  /* Paso cargo: dentro del detalle solo los botones de cargo */
  .view.mapa.wizard-cargo .prov-detail > *:not(.pd-nivel) { display: none; }
  /* Paso done: el selector de cargos queda oculto (chips arriba para cambiar) */
  .view.mapa.wizard-done .prov-detail > .pd-nivel { display: none; }
  /* Propuestas: sin el rótulo "Municipio y tema" en mobile. */
  .view.mapa .propuestas-embedded .prp-nivel-eyebrow { display: none; }
  /* Propuestas: Municipio y Tema en la MISMA fila (los min-width de 200px
     hacían que en mobile cayeran en dos filas). */
  .view.mapa .propuestas-embedded .prp-nivel-loc-selects { flex-wrap: nowrap; width: 100%; }
  .view.mapa .propuestas-embedded .prp-nivel-select { flex: 1 1 0; min-width: 0; }
  /* Chips de opciones ya elegidas (wizard): fila centrada arriba; tocar un
     chip vuelve a ese selector para cambiar la elección. */
  .view.mapa .wizard-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center;
    margin: -6px 0 -8px;
  }
  .view.mapa .wizard-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--primary) 45%, var(--border));
    background: color-mix(in oklab, var(--primary) 8%, transparent);
    color: var(--primary);
    font: 600 12px var(--sans);
    cursor: pointer;
  }
  .view.mapa .wizard-chip svg { width: 12px; height: 12px; opacity: 0.7; }
}

.mapa-grid {
  display: grid;
  /* minmax(0,1fr): sin blowout por min-content de los hijos (selects,
     filas de botones nowrap) — la columna nunca excede el contenedor. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px; margin-bottom: 0; /* el gap del flex .mapa maneja la separación */
}
.mapa-card { padding: 0; overflow: hidden; }
.mapa-card-floating {
  background: transparent;
  border: 0;
  padding: 0;
  overflow: visible;
  box-shadow: none;
}
.mapa-card-floating .mapa-svg {
  background: transparent;
  padding: 0;
}
.mapa-controls-floating { padding: 8px 0; }
.mapa-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  gap: 14px;
}
.mapa-head h2 { font-size: 22px; margin-top: 4px; }
.mapa-controls { display: flex; align-items: center; gap: 12px; }
.mapa-svg {
  padding: 18px;
  background: linear-gradient(to bottom, var(--bg-2), var(--paper) 30%);
  display: flex; justify-content: center;
}
.mapa-svg svg { max-height: 780px; width: auto; max-width: 100%; }

/* Side-by-side: country map + province submap */
.mapa-svg.has-submap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
  padding: 18px 22px;
}
.mapa-svg.has-submap > svg { justify-self: end; }
.mapa-svg.has-submap .submap { justify-self: start; width: 100%; }

.submap {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
}
.submap-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-2);
}
.submap-title { font-family: var(--serif); font-size: 20px; line-height: 1.1; margin: 4px 0 0; letter-spacing: -0.01em; }
.submap-meta { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; text-align: right; }
.submap-svg-wrap {
  padding: 8px;
  background: linear-gradient(to bottom, var(--bg-2), var(--paper) 40%);
  border-radius: 8px;
}
.submap-svg-wrap svg { max-height: 700px; }
.submap-foot { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }

@media (max-width: 980px) {
  .mapa-svg.has-submap { grid-template-columns: 1fr; }
  .mapa-svg.has-submap > svg, .mapa-svg.has-submap .submap { justify-self: center; }
}
.mapa-legend { padding: 12px 22px 18px; border-top: 1px solid var(--border); }
.ml-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.ml-hint { font-size: 10px; color: var(--ink-3); }
.legend-label { margin-bottom: 8px; }
.legend-scale { display: flex; gap: 10px; }
.ls-cell { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.ls-sw { width: 22px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }

/* BA hint card inside the right detail panel */
.ba-hint {
  margin: 14px 22px;
  padding: 16px;
  background: var(--accent-tint);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: var(--r);
  display: flex; flex-direction: column; gap: 10px;
}
.ba-hint p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ba-hint .btn { align-self: flex-start; }

/* Sección detail */
.sec-detail { padding: 0 22px 14px; display: flex; flex-direction: column; gap: 14px; }
.sec-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.sec-stat {
  background: var(--paper);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.sec-stat-v { font-family: var(--serif); font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; }
.sec-note {
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 14px 16px; border-radius: var(--r);
}
.sec-note p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.sec-cands .pd-title { margin-bottom: 8px; }

.prov-detail {
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-1),
              0 0 10px oklch(0.66 0.22 255/0.50),
              0 0 26px oklch(0.60 0.26 258/0.36),
              0 0 56px oklch(0.56 0.27 260/0.24);
}
.pd-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.pd-head h2 { font-size: 28px; margin-top: 6px; }
.pd-sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* CTA "Ver más de la provincia" → ficha completa (clave en móvil, sin hover). */
.pd-ver-mas {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 44px); margin: 14px 22px 0;
  padding: 12px 16px;
  border: 1px solid var(--primary); border-radius: 10px;
  background: var(--primary-tint); color: var(--primary);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background 120ms, transform 120ms;
}
.pd-ver-mas:hover { background: color-mix(in oklab, var(--primary) 14%, white); }
.pd-ver-mas:active { transform: scale(.99); }
.pd-ver-mas span { font-size: 16px; }

.pd-nivel {
  padding: 16px 22px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-nivel-centered { align-items: center; }
/* Selector de segmentos de Nuestros Precandidatos: sin franja de fondo; el
   blanco va ADENTRO de la pastilla. El thumb deslizante se reemplaza por un
   resaltado por botón para que el azul cubra completo la opción activa
   (con el thumb de tercios fijos, "Nuestros Precandidatos" quedaba cortado). */
#mapa-segmentos.pd-nivel { background: transparent; }
/* Nombre de la provincia elegida, centrado arriba del selector de segmentos. */
.mapa-prov-title { text-align: center; margin: 30px 0 0; }
#mapa-segmentos .seg { background: #fff; }
#mapa-segmentos .seg-slider { display: inline-flex; }
#mapa-segmentos .seg-slider::before { display: none; }
#mapa-segmentos .seg-slider button.on {
  background: var(--primary); color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--primary) 70%, transparent);
}
/* Variante roja del selector de segmentos (modo Políticos:
   Parasitómetro / Panquecómetro / Sueldos). */
#mapa-segmentos .seg-slider.seg-rojo button.on {
  background: var(--danger);
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--danger) 70%, transparent);
}
/* Panel de precandidatos: selector de nivel con fondo blanco adentro y afuera. */
.prov-detail .pd-nivel { background: #fff; padding-top: 26px; }
.prov-detail .pd-nivel .seg { background: #fff; }
/* Título "Precandidatos a cargos…" y selector de municipio centrados. */
.prov-detail .pd-top { align-items: center; text-align: center; }
.prov-detail .pd-muni { justify-content: center; }
.pd-nivel-seg button { padding: 8px 18px; font-size: 13px; }
.pd-nivel-seg button.on {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}
/* Selector de cargos (Concejales/Intendentes/Diputados/…): diseño de
   BOTONES sueltos en vez de switch — sin pastilla contenedora, cada opción
   con su propio borde; la activa se llena de primary con halo. */
.seg.pd-nivel-seg.pd-cargos-seg {
  background: transparent;
  border: 0;
  border-radius: 10px; /* mismo radio que sus botones (el 999px de .seg recortaba el carrusel) */
  padding: 0;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.seg.pd-nivel-seg.pd-cargos-seg button {
  flex: 0 1 auto;
  border: 1.5px solid var(--border);
  background: var(--paper);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: all .15s ease;
}
.seg.pd-nivel-seg.pd-cargos-seg button:hover { border-color: var(--ink-3); }
.seg.pd-nivel-seg.pd-cargos-seg button.on {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}

/* Municipio dropdown: label a la izquierda */
.pd-muni {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.pd-muni-label {
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex-shrink: 0;
}
.pd-muni-select { flex: 1; }

.pd-cats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  padding: 14px 22px;
}
.pd-cat {
  position: relative;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: all .15s ease;
}
.pd-cat:hover { border-color: var(--ink-3); background: var(--paper); }
.pd-cat.on {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}
.pd-cat.on .pd-cat-nom,
.pd-cat.on .pd-cat-d,
.pd-cat.on .pd-cat-num { color: white; }
.pd-cat.on .pd-cat-d { opacity: 0.85; }
.pd-cat.on .pd-cat-marker { background: white; }
.pd-cat.on .pd-cat-marker::after { background: var(--primary); }
.pd-cat-marker {
  position: absolute; top: 8px; right: 10px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.pd-cat-marker::after {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%;
  background: white;
}
.pd-cat-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; padding-right: 22px; }
.pd-cat-nom { font-family: var(--serif); font-size: 16px; font-weight: 500; line-height: 1.2; }
.pd-cat-num { font-size: 12px; color: var(--primary); font-weight: 600; }
.pd-cat-d { font-size: 11px; color: var(--ink-3); line-height: 1.4; }

.pd-muni-note {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 10px 0 0;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--warn, #b7791f) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #b7791f) 25%, transparent);
  border-radius: 8px;
}

.cand-list-h { padding: 14px 0 8px; color: var(--ink-3); }
.cand-list-note { font-size: 12px; color: var(--ink-3); padding: 4px 0 12px; }
.cand-list-note .link { font-size: 12px; }

/* Nota legislativa provincial */
.leg-note {
  margin: 22px 22px 14px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
}
.ln-tag {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 4px; font-weight: 600;
}
.ln-text { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* Subdivisions band: chips de secciones/departamentos */
.subs-band {
  margin: 0 22px 14px;
  padding: 14px 16px;
  /* Mismo fondo blanco que el selector de cargos (gobernador / senador
     provincial…) para que no corte con una banda de otro color. */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.sb-h {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 10px;
}
.sb-t { font-size: 13.5px; color: var(--ink); margin-top: 4px; }
.sub-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sub-chip {
  font: 500 12px var(--sans);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--border-2);
  cursor: pointer;
  transition: all .12s;
}
.sub-chip:hover:not(:disabled) { border-color: var(--ink); }
/* Glow neón azul pulsante en las secciones que SÍ se pueden elegir
   (ni bloqueadas ni la ya seleccionada). */
.sub-chip:not(:disabled):not(.on) { animation: sub-chip-glow 2.6s ease-in-out infinite; }
@keyframes sub-chip-glow {
  0%, 100% {
    box-shadow: 0 0 3px oklch(0.66 0.22 255 / 0.25),
                0 0 8px oklch(0.60 0.26 258 / 0.14);
  }
  50% {
    box-shadow: 0 0 6px  oklch(0.70 0.22 255 / 0.55),
                0 0 16px oklch(0.62 0.26 258 / 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sub-chip { animation: none; }
}
.sub-chip.on {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
/* Sección que no renueva estas bancas en esta elección */
.sub-chip-off, .sub-chip:disabled {
  opacity: .45; cursor: not-allowed;
  background: var(--bg-2, #f4f5f9); color: var(--ink-3);
  border-style: dashed;
}

/* Dropdown de subdivisión electoral (reemplaza los chips) — mismo estilo
   que las cards del selector de cargos (Diputado / Senador / Gobernador):
   fondo bg-2, borde 1.5px, radio var(--r), tipografía serif; seleccionado
   → primary con halo, como .pd-cat.on. */
/* Va suelto (sin banda contenedora): margen lateral alineado con .pd-cats. */
.sub-select-wrap { position: relative; margin: 0 22px 14px; }
.sub-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font: 500 16px var(--serif);
  line-height: 1.2;
  padding: 13px 42px 13px 16px;
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
  transition: all .15s ease;
}
.sub-select:hover { border-color: var(--ink-3); background: var(--paper); }
.sub-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.sub-select.on {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}
/* Las <option> se pintan sobre panel nativo claro: forzar texto oscuro
   (si no, con .on heredan color blanco sobre blanco en algunos browsers). */
.sub-select option { color: var(--ink); background: var(--paper); font-family: var(--sans); }
.sub-select option:disabled { color: var(--ink-3); }
/* Chevron propio (appearance:none saca la flecha nativa) */
.sub-select-wrap::after {
  content: '';
  position: absolute; right: 17px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.sub-select-wrap.on::after { border-color: #fff; }

/* Propose precandidatura band */
.pd-propose {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 14px 22px;
  margin: 0 22px 14px;
  background: var(--primary-tint);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent);
  border-radius: var(--r);
  flex-wrap: wrap;
}
.pdp-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pdp-eyebrow { color: var(--primary); }
.pdp-t { font-size: 14px; color: var(--ink); line-height: 1.4; }

.pd-empty {
  padding: 22px;
  margin: 0 22px 14px;
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r);
}
.pd-empty .eyebrow { color: var(--accent-2); margin-bottom: 8px; }
.pd-empty p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0 0 12px; }
.pd-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; }
.pd-top {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 22px 6px;
}
.pd-title { font-weight: 500; font-family: var(--serif); font-size: 20px; }
.pd-muni { display: flex; flex-direction: column; gap: 4px; }
.pd-muni-select {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--paper);
  font: inherit; color: var(--ink);
  outline: none;
}
.pd-muni-select:focus { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 1px; }
.cand-list { padding: 0 22px 14px; flex: 1; }
.cand-row {
  display: grid;
  /* Antes: 32px 112px 1fr 2.2fr 100px 110px 220px (7 cols, incluía bar+pct)
     Ahora que la barra y el % de intención están ocultos, colapsamos sus
     columnas y dejamos que el bloque de apoyo se asiente contra el margen derecho. */
  grid-template-columns: 32px 112px 1fr 2.2fr auto;
  align-items: center; gap: 14px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  border-radius: 14px;       /* puntas redondeadas (se ve en el fill + glow del hover) */
  cursor: pointer;
  transition: background 120ms ease, box-shadow 160ms ease;
}
.cand-row .cr-counters {
  justify-self: end;
  align-items: center;
}
/* Hover solo con puntero real: en táctiles el tap no debe dejar el hover
   pegado a la tarjeta de precandidato. */
@media (hover: hover) {
  .cand-row:hover {
    background: color-mix(in oklab, var(--primary) 6%, transparent);
    box-shadow: 0 0 10px oklch(0.66 0.22 255/0.40),
                0 0 24px oklch(0.60 0.26 258/0.26),
                0 0 44px oklch(0.56 0.27 260/0.16);
    border-radius: 14px;
    border-bottom-color: transparent;
    /* Ensancha el recuadro hacia ambos lados para que el fondo no quede
       pegado al número (izquierda) ni al botón Apoyar (derecha). */
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
    position: relative; z-index: 1;
  }
}
.cand-row .avatar { flex-shrink: 0; }
.cand-row.lead .cr-name { color: var(--primary); font-weight: 500; }

/* Lugar vacante de la lista — "Acá podrías estar vos" */
.cand-row-empty {
  grid-template-columns: 32px 112px 1fr auto;
  border: 1px dashed color-mix(in oklab, var(--primary) 45%, var(--border));
  background: color-mix(in oklab, var(--primary) 4%, transparent);
}
.cand-row-empty .cr-rank { color: color-mix(in oklab, var(--primary) 70%, var(--ink-3)); }
@media (hover: hover) {
  .cand-row-empty:hover {
    background: color-mix(in oklab, var(--primary) 9%, transparent);
    border-color: var(--primary);
  }
}
.cre-avatar {
  width: 104px; height: 104px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed color-mix(in oklab, var(--primary) 55%, var(--border));
  color: color-mix(in oklab, var(--primary) 80%, var(--ink-3));
  justify-self: center;
}
.cre-msg { min-width: 0; }
.cre-title {
  font-size: 16px; font-weight: 600;
  color: color-mix(in oklab, var(--primary) 82%, var(--ink));
}
.cre-sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.35; }
.cre-cta { justify-self: end; }
.cre-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--primary);
  box-shadow: 0 0 12px oklch(0.62 0.24 258/0.35);
}
@media (hover: hover) {
  .cand-row-empty:hover .cre-btn { box-shadow: 0 0 18px oklch(0.62 0.24 258/0.55); }
}
.cr-name { font-size: 16px; line-height: 1.25; }
/* Cambio de posición vs. la última visita del usuario: ▲ verde subió,
   ▼ roja bajó, con la cantidad de puestos. */
.cr-delta {
  display: inline-flex; align-items: center; gap: 1px;
  margin-left: 8px;
  font-size: 16px; font-weight: 700; /* 30% más grande (12 → 16) */
  vertical-align: middle;
  transform-origin: center;
  animation: crDeltaPulse 1.5s ease-in-out infinite;
}
/* Número de cambio de posición pulsante. */
@keyframes crDeltaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) { .cr-delta { animation: none; } }
.cr-delta-up   { color: var(--good, #34a853); text-shadow: 0 0 8px color-mix(in oklab, var(--good, #34a853) 60%, transparent); }
.cr-delta-down { color: var(--danger, #d4382c); text-shadow: 0 0 8px color-mix(in oklab, var(--danger, #d4382c) 60%, transparent); }
.cr-prof { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.cr-bio { display: grid; grid-template-columns: auto 1fr 1.3fr 1.3fr; gap: 16px; font-size: 12px; }
.cr-bio-item .eyebrow { font-size: 9px; margin-bottom: 3px; }
.cr-bio-v { color: var(--ink); font-size: 13px; line-height: 1.3; }
.cr-bio-sub { color: var(--ink-3); font-size: 11px; }

/* Contadores: votos + apoyos */
.cr-counters { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-counter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font: inherit;
  cursor: default;
}
.cr-counter-num { font-weight: 600; color: var(--ink); font-size: 12px; }
.cr-counter-lbl { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }

.cr-counter-votos svg { color: var(--good, oklch(0.55 0.14 152)); }

.cr-heart-btn {
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cr-heart-btn:hover { background: color-mix(in oklab, var(--danger, oklch(0.55 0.18 28)) 8%, var(--paper)); border-color: color-mix(in oklab, var(--danger, oklch(0.55 0.18 28)) 25%, var(--border)); }
.cr-heart-btn svg { color: var(--danger, oklch(0.55 0.18 28)); }
.cr-heart-btn.is-apoyado {
  background: color-mix(in oklab, var(--danger, oklch(0.55 0.18 28)) 10%, var(--paper));
  border-color: color-mix(in oklab, var(--danger, oklch(0.55 0.18 28)) 40%, transparent);
  color: var(--danger, oklch(0.48 0.18 28));
}
.cr-heart-btn.is-apoyado .cr-counter-num { color: var(--danger, oklch(0.48 0.18 28)); }
.cr-heart-btn.is-apoyado .cr-counter-lbl { color: var(--danger, oklch(0.48 0.18 28)); font-weight: 600; }

/* ─── Botón "Apoyar" estilo like (corazón) + contador externo ─── */
/* Votos positivos (me gusta + me gusta mucho) a la derecha de la fila. */
.cr-megusta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--good);
}
.cr-megusta-ico { font-size: 17px; line-height: 1; width: 18px; height: 18px; flex: none; }
.cr-megusta-num { font-size: 20px; font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }
.cr-apoyo-block {
  display: inline-flex; align-items: center; gap: 14px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.cr-apoyo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--border-2);
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 100ms ease;
}
.cr-apoyo-btn svg {
  color: var(--primary);
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1);
}
.cr-apoyo-btn:hover {
  background: color-mix(in oklab, var(--primary) 8%, var(--paper));
  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
  color: var(--primary);
}
.cr-apoyo-btn:hover svg { transform: scale(1.15); }
.cr-apoyo-btn:active { transform: scale(0.97); }

.cr-apoyo-btn.is-apoyado {
  background: color-mix(in oklab, var(--primary) 14%, var(--paper));
  border-color: color-mix(in oklab, var(--primary) 55%, transparent);
  color: var(--primary);
}
.cr-apoyo-btn.is-apoyado svg {
  color: var(--primary);
  animation: cr-check-pop 280ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes cr-check-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.cr-apoyo-count {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13px;
}
.cr-apoyo-count-num {
  font-weight: 700; color: var(--ink); font-size: 14px;
}
.cr-apoyo-count-lbl {
  font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em;
}

/* Vote button (mirror of heart) */
.cr-vote-btn { cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.cr-vote-btn:hover { background: color-mix(in oklab, var(--primary) 8%, var(--paper)); border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); }
.cr-vote-btn.is-voted {
  background: color-mix(in oklab, var(--primary) 10%, var(--paper));
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  color: var(--primary);
}
.cr-vote-btn.is-voted .cr-counter-num { color: var(--primary); }
.cr-vote-btn.is-voted .cr-counter-lbl { color: var(--primary); font-weight: 600; }

/* Confirm modal extras */
.mapa-confirm-modal { width: min(480px, 100%); }
.confirm-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.confirm-card-name { font-size: 16px; font-weight: 500; line-height: 1.2; }
.confirm-card-meta { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 2px; }
.confirm-text { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.cr-rank { color: var(--ink-3); font-size: 11px; }
.cr-bar { width: 100%; }
.cr-pct { text-align: right; }
.cp-num { font-family: var(--serif); font-size: 20px; line-height: 1; }
.cp-votes { font-size: 10px; color: var(--ink-3); margin-top: 2px; }

.pd-foot { display: flex; gap: 18px; padding: 14px 22px; border-top: 1px solid var(--border); }
.pf-cell { flex: 1; }
.pf-val { font-size: 13px; font-weight: 500; margin-top: 4px; }

.nat-board { padding: 0; }
.nat-grid { padding: 14px 18px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* ─── Tarjeta ancha de propuesta ─── */
.prp-wide-card {
  display: grid;
  grid-template-columns: 340px 1fr 140px;
  gap: 0;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .12s ease, border-color .15s ease;
}
.prp-wide-card:hover {
  box-shadow: 0 18px 50px -25px rgba(10, 18, 50, 0.30);
  border-color: var(--ink-3);
}
.prp-wide-card:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.pwc-image {
  position: relative;
  background: var(--bg-2);
  min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pwc-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pwc-image-glyph {
  font-size: 92px; color: rgba(255,255,255,0.85);
  font-family: var(--mono); font-weight: 700;
  text-shadow: 0 4px 24px rgba(0,0,0,0.20);
}

/* Flechas para navegar imágenes del carrusel */
.pwc-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background .12s ease, transform .12s ease;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.pwc-arrow:hover { background: white; transform: translateY(-50%) scale(1.07); }
.pwc-arrow:active { transform: translateY(-50%) scale(0.95); }
.pwc-arrow-left  { left: 10px; }
.pwc-arrow-right { right: 10px; }

/* Dots indicadores */
.pwc-dots {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 2;
}
.pwc-dot-btn {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease, width .15s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.pwc-dot-btn:hover { background: rgba(255, 255, 255, 0.9); }
.pwc-dot-btn.is-active { background: white; width: 22px; border-radius: 4px; }

/* Pill con contador "N / total" */
.pwc-count-pill {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 11px; letter-spacing: 0.04em;
  color: white;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.pwc-body {
  padding: 24px 28px 22px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.pwc-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pwc-tema-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.01em;
}
.pwc-tema-glyph { font-size: 11px; opacity: 0.9; }

.pwc-title {
  font-family: var(--serif);
  font-size: 24px; line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink); font-weight: 500;
  letter-spacing: -0.01em;
}
.pwc-subtitle {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 12px;
  font-style: italic;
}

/* Descripción con clamp a 5 líneas + fade en la 6ta */
.pwc-desc {
  position: relative;
  margin: 0 0 14px;
  /* altura ≈ 5 líneas × line-height 1.55 × font-size 13px */
}
.pwc-desc p {
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  line-clamp: 8;
  overflow: hidden;
}
.pwc-desc::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.4em;
  background: linear-gradient(to bottom, transparent, var(--paper) 85%);
  pointer-events: none;
}

.pwc-footer {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border-2);
  flex-wrap: wrap;
}
.pwc-meta {
  font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 6px;
}
.pwc-dot { opacity: 0.5; }

/* Contadores apilados en columna lateral derecha */
.pwc-counters-side {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  padding: 20px 14px;
  border-left: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-2) 50%, var(--paper));
}
.pwc-counter-big {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--ink);
}
.pwc-counter-big svg {
  color: oklch(0.55 0.18 25);  /* corazón rojo (Me gusta) */
}
.pwc-counter-big.pwc-counter-comments svg {
  color: var(--primary);       /* bocadillo en navy primary */
  fill: none; stroke: currentColor;
}
.pwc-counter-num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.pwc-counter-lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 1100px) {
  .prp-wide-card { grid-template-columns: 280px 1fr 110px; }
  .pwc-counter-num { font-size: 18px; }
}
@media (max-width: 800px) {
  .prp-wide-card { grid-template-columns: 1fr; }
  .pwc-image { min-height: 180px; }
  .pwc-body { padding: 18px 16px 16px; }
  .pwc-title { font-size: 19px; }
  .pwc-footer { flex-direction: column; align-items: flex-start; }
  .pwc-counters-side {
    flex-direction: row; justify-content: space-around;
    border-left: 0; border-top: 1px solid var(--border);
    padding: 14px;
  }
}

/* ─── Propuestas insignia (destacadas, link a páginas .html) ─── */
.prp-destacadas {
  margin: 30px 0 50px;
}
.prp-dest-head {
  max-width: 760px;
  margin-bottom: 28px;
}
.prp-dest-title {
  font-family: var(--serif);
  font-size: 42px; line-height: 1.05;
  letter-spacing: -0.02em; font-weight: 500;
  margin: 12px 0 14px;
}
.prp-dest-title em { font-style: italic; color: var(--primary); font-weight: 400; }
.prp-dest-lede {
  font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 660px;
}
.prp-dest-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  /* Cada tarjeta toma su alto natural (sin estirarse al alto de la más alta de
     la fila), evitando el espacio vacío al fondo de las cortas. */
  align-items: start;
}
.prp-dest-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px 30px 26px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.prp-dest-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: oklch(0.55 0.24 258); /* azul del botón Votar precandidatos */
  transition: height 180ms ease;
}
.prp-dest-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
  box-shadow: 0 20px 50px -30px oklch(0.20 0.10 268 / 0.30);
}
.prp-dest-card:hover::before { height: 6px; }
.prp-dest-card:hover .prp-dest-cta { transform: translateX(4px); }

/* Pie de la tarjeta: CTA "Ver propuesta" + botón Votar (gate por sesión). */
.prp-dest-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: auto; flex-wrap: wrap;
}
.prp-dest-votar-btn {
  flex: none; cursor: pointer;
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: oklch(0.55 0.24 258);
  border: none; border-radius: 999px; padding: 9px 20px;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  box-shadow: 0 8px 22px -10px oklch(0.55 0.24 258 / 0.8);
}
.prp-dest-votar-btn:hover { transform: translateY(-1px); background: oklch(0.50 0.24 258); }
.prp-dest-votar-btn.is-voted { background: oklch(0.42 0.13 155); cursor: default; }
.prp-dest-votar-btn.is-voted:hover { transform: none; background: oklch(0.42 0.13 155); }

/* Modal de gate para votar propuestas */
.prp-voto-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(10, 12, 30, 0.55); backdrop-filter: blur(3px);
}
.prp-voto-card {
  width: min(92vw, 420px); background: var(--paper);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 32px 28px 26px; text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
}
.prp-voto-ico { font-size: 30px; margin-bottom: 10px; }
.prp-voto-t { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--ink); }
.prp-voto-d { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; }
.prp-voto-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Franja superior unificada al azul del botón Votar precandidatos. */
.prp-dest-1::before,
.prp-dest-2::before,
.prp-dest-3::before,
.prp-dest-4::before,
.prp-dest-5::before,
.prp-dest-6::before { background: oklch(0.55 0.24 258); }

.prp-dest-tag {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
/* Badge "Propuesta de fundadores" en el hero de las páginas de propuesta. */
.founder-badge {
  display: block; width: fit-content;
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: oklch(0.55 0.24 258);
  padding: 6px 12px; border-radius: 999px; margin: 0 0 16px;
  box-shadow: 0 6px 18px -8px oklch(0.55 0.24 258 / 0.7);
}

/* Tag "Propuesta de fundadores": pill azul con tipografía tecnológica (mono). */
.prp-dest-founder {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: oklch(0.55 0.24 258);
  padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 6px 18px -8px oklch(0.55 0.24 258 / 0.7);
}
.prp-dest-card.prp-dest-2 .prp-dest-tag { color: oklch(0.45 0.16 200); }
.prp-dest-card.prp-dest-3 .prp-dest-tag { color: oklch(0.48 0.18 28); }
.prp-dest-card.prp-dest-4 .prp-dest-tag { color: var(--ink-2); }
.prp-dest-card.prp-dest-5 .prp-dest-tag { color: oklch(0.42 0.13 155); }
.prp-dest-card.prp-dest-6 .prp-dest-tag { color: oklch(0.42 0.20 320); }
/* Tarjetas ciudadanas: la etiqueta SIEMPRE en azul 1 (primary), sin importar
   la categoría. */
.prp-dest-card.prp-dest-citizen .prp-dest-tag { color: var(--primary); }

.prp-dest-t {
  font-family: var(--serif);
  font-size: 28px; line-height: 1.15;
  letter-spacing: -0.015em; font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.prp-dest-t em { font-style: italic; color: var(--primary); font-weight: 400; }
.prp-dest-card.prp-dest-2 .prp-dest-t em { color: oklch(0.45 0.16 200); }
.prp-dest-card.prp-dest-3 .prp-dest-t em { color: oklch(0.48 0.18 28); }
.prp-dest-card.prp-dest-4 .prp-dest-t em { color: oklch(0.30 0 0); }
.prp-dest-card.prp-dest-5 .prp-dest-t em { color: oklch(0.42 0.13 155); }
.prp-dest-card.prp-dest-6 .prp-dest-t em { color: oklch(0.42 0.20 320); }

.prp-dest-d {
  font-family: var(--sans); /* descripción en font secundario (no Orbitron) */
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
  margin: 0;
  /* Máximo 4 líneas; el resto se corta con elipsis. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* En modo embebido (dentro de .view.mapa hay Orbitron !important global): la
   descripción igual usa el font secundario. */
.view.mapa .prp-dest-d { font-family: var(--sans) !important; }
/* Métricas de la tarjeta de propuesta: ranking (chip) + apoyos pulsante. */
.prp-dest-metrics {
  display: flex; align-items: center; justify-content: space-evenly; gap: 12px;
  padding-top: 14px; margin-top: 6px;
  border-top: 1px solid var(--border);
}
.prp-dest-metric { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.prp-dest-metric-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3);
}
/* Posición en el ranking: solo el número (sin pill). */
.prp-dest-rank-chip {
  font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
/* Métrica de apoyos: número/label a la izquierda, botón "Apoyar" al lado. */
.prp-dest-metric-apoyos { flex-direction: row; align-items: center; gap: 14px; }
.prp-dest-apoyos-main { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.prp-dest-apoyos-line { display: inline-flex; align-items: baseline; gap: 6px; }
/* Botón "Apoyar" (me gusta) inline, a la DERECHA del contador de apoyos: azul 2,
   sin posición absoluta. Doble clase para ganarle a .prp-vote-corner (que está
   más abajo en el archivo y lo posicionaría en la esquina). */
.prp-vote-corner.prp-vote-inline {
  position: static; right: auto; bottom: auto;
  background: linear-gradient(135deg, oklch(0.45 0.20 262), oklch(0.55 0.24 258));
  color: #fff; border-color: transparent;
  box-shadow: 0 0 12px oklch(0.66 0.22 255 / 0.4);
}
.prp-vote-corner.prp-vote-inline:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 16px oklch(0.66 0.22 255 / 0.6); }
.prp-vote-corner.prp-vote-inline.is-on {
  background: color-mix(in oklab, var(--primary) 12%, #fff);
  color: var(--primary); border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
  box-shadow: none; cursor: default; transform: none;
}
.prp-dest-apoyos-num {
  font-size: 22px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
  animation: prpApoyosPulse 1.6s ease-in-out infinite;
}
@keyframes prpApoyosPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.58; } }
@media (prefers-reduced-motion: reduce) { .prp-dest-apoyos-num { animation: none; } }
.prp-dest-apoyos-new {
  font-size: 13px; font-weight: 700;
  color: var(--good, oklch(0.55 0.14 152));
}
.prp-dest-stats {
  display: flex; gap: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.prp-dest-stat .v {
  font-family: var(--serif);
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.prp-dest-stat .l {
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.prp-dest-cta {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-top: 4px;
  transition: transform 180ms ease;
}
.prp-dest-card.prp-dest-2 .prp-dest-cta { color: oklch(0.45 0.16 200); }
.prp-dest-card.prp-dest-3 .prp-dest-cta { color: oklch(0.48 0.18 28); }
.prp-dest-card.prp-dest-4 .prp-dest-cta { color: var(--ink); }
.prp-dest-card.prp-dest-5 .prp-dest-cta { color: oklch(0.42 0.13 155); }
.prp-dest-card.prp-dest-6 .prp-dest-cta { color: oklch(0.42 0.20 320); }
/* En las tarjetas ciudadanas, "Ver propuesta detallada →" SIEMPRE en azul 2
   (votar), sin importar la categoría. */
.prp-dest-card.prp-dest-citizen .prp-dest-cta { color: oklch(0.55 0.24 258); }

/* Variante "ciudadana": misma tarjeta, pero renderizada como <button>.
   Reseteamos los defaults del botón nativo para que se comporte como el <a>. */
.prp-dest-card.prp-dest-citizen {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.prp-dest-card.prp-dest-citizen:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Fila inferior de la tarjeta ciudadana: CTA a la izquierda, contadores a la derecha. */
.prp-dest-foot-row {
  display: flex;
  align-items: center;
  /* row-reverse: autor a la izquierda, "Ver propuesta detallada →" a la derecha. */
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.prp-dest-foot-row .prp-dest-cta { margin-top: 0; align-self: auto; }
.prp-dest-counters {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.prp-dest-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1;
}
.prp-dest-count svg { display: block; }
.prp-dest-count-heart { color: oklch(0.55 0.18 28); font-weight: 600; }
.prp-dest-count-heart .mono { color: var(--ink); }
/* Contador de comentarios clickeable: lleva a la sección de comentarios del detalle */
.prp-dest-count-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}
.prp-dest-count-btn:hover { background: color-mix(in oklab, var(--primary) 10%, var(--paper)); border-color: var(--primary); color: var(--primary); }
.prp-dest-count-btn:active { transform: scale(0.96); }
.prp-dest-count-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prp-dest-count-btn .mono { color: inherit; }

/* Meta de autor y fecha en la tarjeta de propuesta — a la izquierda del ícono
   de comentarios, dentro de la fila de pie. */
.prp-dest-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-3);
  min-width: 0;
}
.prp-dest-meta-txt {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25;
}
.prp-dest-meta-author {
  color: var(--ink-2); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;
}
.prp-dest-meta-date { color: var(--ink-3); font-size: 11px; }
/* Autor/foto clickeable → perfil del autor */
.prp-dest-meta-avbtn {
  border: none; background: none; padding: 0; margin: 0;
  cursor: pointer; line-height: 0; border-radius: 50%;
  transition: transform .12s ease;
}
.prp-dest-meta-avbtn:hover { transform: scale(1.08); }
.prp-dest-meta-author-btn {
  border: none; background: none; padding: 0; margin: 0;
  font: inherit; text-align: left; cursor: pointer;
  transition: color .12s ease;
}
.prp-dest-meta-author-btn:hover { color: var(--primary); text-decoration: underline; }

/* Mensaje de advertencia en el modal de confirmación de voto */
.prp-vote-modal-warn {
  color: var(--danger);
  font-weight: 600;
  background: color-mix(in oklab, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 28%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
}

/* Botón "Apoyar" funcional — corazón mediano abajo a la derecha de la tarjeta */
.prp-dest-apoyar {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  color: oklch(0.55 0.18 28);
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.prp-dest-apoyar svg { display: block; }
.prp-dest-apoyar .mono { color: var(--ink); font-size: 13px; }
.prp-dest-apoyar:hover { background: oklch(0.95 0.04 28); border-color: oklch(0.70 0.14 28); }
.prp-dest-apoyar:active { transform: scale(0.96); }
.prp-dest-apoyar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prp-dest-apoyar.is-on {
  background: oklch(0.55 0.18 28);
  border-color: oklch(0.55 0.18 28);
  color: #fff;
}
.prp-dest-apoyar.is-on .mono { color: #fff; }

/* ── Tarjeta de propuesta ciudadana (.prp-dest-citizen): mismo diseño insignia
   en TODOS los anchos — columna, a todo el ancho, sin riel lateral de voto.
   El "me gusta" va como pulgar + saldo en la esquina inferior derecha. ── */
.prp-dest-citizen .prp-dest-body {
  min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.prp-dest-citizen .prp-vote { display: none; }
.prp-vote {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  margin-left: 22px; padding-left: 22px;
  border-left: 1px solid var(--border);
}
.prp-vote-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink-3);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
}
.prp-vote-btn svg { display: block; }
.prp-vote-btn:active { transform: scale(0.94); }
.prp-vote-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.prp-vote-btn.up:hover { background: color-mix(in oklab, var(--primary) 10%, var(--paper)); border-color: var(--primary); color: var(--primary); }
.prp-vote-btn.up.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.prp-vote-btn.down:hover { background: oklch(0.95 0.04 28); border-color: oklch(0.70 0.14 28); color: oklch(0.55 0.18 28); }
.prp-vote-btn.down.is-on { background: oklch(0.55 0.18 28); border-color: oklch(0.55 0.18 28); color: #fff; }
/* Botón deshabilitado: el voto ya fue emitido y es definitivo */
.prp-vote-btn:disabled { opacity: 0.35; cursor: default; }
.prp-vote-btn:disabled:hover { background: var(--paper); border-color: var(--border); color: var(--ink-3); transform: none; }
.prp-vote-saldo {
  font-size: 18px; font-weight: 700; line-height: 1;
  color: var(--primary);
  min-width: 1.5em; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Mobile: la tarjeta ciudadana usa el mismo estilo que las insignia (sin
   riel lateral de voto) y el voto a favor va como pulgar con el saldo en la
   esquina inferior derecha. ── */
/* "Me gusta" (pulgar + saldo) en la esquina inferior derecha, en todos los anchos. */
.prp-vote-corner {
  display: inline-flex; align-items: center; gap: 6px;
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--paper); color: var(--ink-2);
  padding: 8px 14px; font-size: 13px; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .1s ease;
  box-shadow: 0 3px 10px oklch(0.20 0.10 268 / 0.14);
}
.prp-vote-corner svg { display: block; }
.prp-vote-corner .mono { font-variant-numeric: tabular-nums; }
.prp-vote-corner:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.prp-vote-corner:active:not(:disabled) { transform: scale(0.96); }
.prp-vote-corner.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.prp-vote-corner:disabled { opacity: 0.45; cursor: default; }
/* Reservamos aire abajo a la derecha para que el pulgar no tape autor/fecha/comentarios. */
.prp-dest-citizen .prp-dest-foot-row { padding-right: 0; }
@media (max-width: 800px) {
  .prp-vote-corner { right: 12px; bottom: 12px; padding: 7px 13px; }
  .prp-dest-citizen .prp-dest-foot-row { padding-right: 0; }
}

/* Badge de moderación · sólo visible para el autor/admin cuando moderacion != 'aprobada' */
.prp-dest-mod-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.prp-dest-mod-reason {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  background: oklch(0.97 0.02 28);
  border-left: 3px solid oklch(0.55 0.18 28);
  padding: 8px 10px;
  margin: 0;
  border-radius: 0 6px 6px 0;
}

.prp-dest-foot {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin: 40px 0 20px;
}

@media (max-width: 900px) {
  .prp-dest-grid { grid-template-columns: 1fr; }
  .prp-dest-title { font-size: 30px; }
  .prp-dest-t { font-size: 22px; }
  .prp-dest-card { padding: 26px 22px 22px; }
}

/* ─── Selector unificado: nivel + tema (Propuestas) ─── */
/* ── Sistema de secciones (Vacantes / Precandidatos / Propuestas) ──────────
   Diseño consistente para las tres secciones de Nuestros Precandidatos:
   card con línea de acento superior, chip numerado (01/02/03), título serif
   y descripción, con separador hairline bajo el encabezado. */
.sec-card {
  position: relative;
  background:
    radial-gradient(circle at top right, color-mix(in oklab, var(--primary) 6%, transparent), transparent 55%),
    var(--paper);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-1),
              0 0 10px oklch(0.66 0.22 255/0.50),
              0 0 26px oklch(0.60 0.26 258/0.36),
              0 0 56px oklch(0.56 0.27 260/0.24);
}
.sec-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, oklch(0.70 0.17 220) 45%, transparent 90%);
}
.sec-head { display: block; }
.sec-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.sec-kicker::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-tint);
}
.sec-head .sec-title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 13px 0 8px;
}
.sec-head .sec-lede {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 760px;
  margin: 0;
}
@media (max-width: 760px) {
  .sec-head .sec-title { font-size: 23px; }
}

/* Vacantes — card propia + filas modernas en lugar de tabla.
   width:100% es clave: dentro de .view.mapa/.view.provincia (flex column)
   el margin auto solo encogería la card a su contenido. */
.vac-card { width: 100%; max-width: 1400px; margin: 0 auto; padding: 26px 30px; }
.vac-card .sec-head { padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.vac-muni {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 16px;
}
.vac-muni-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.vac-muni-sel {
  min-width: 240px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 14px;
}
.vac-muni-sel:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.vac-muni-sel:disabled { opacity: 0.7; }
.vac-muni-lock { font-size: 11px; color: var(--ink-3); }
.vac-list { display: grid; gap: 10px; }
.vac-row {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-2);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.vac-row:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -20px oklch(0.20 0.10 268 / 0.40);
}
.vac-row.is-mine {
  border-color: color-mix(in oklab, var(--good) 55%, var(--border));
  background: color-mix(in oklab, var(--good) 6%, var(--paper));
}
.vac-info { flex: 1; min-width: 0; }
.vac-nom { font-weight: 600; font-size: 15px; }
.vac-desc { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; max-width: 70ch; }
.vac-req { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.vac-cupos {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--primary-tint); color: var(--primary);
  white-space: nowrap;
}
.vac-cta { display: flex; align-items: center; }
.vac-btn { padding: 8px 18px; font-size: 13px; border-radius: 10px; }
.vac-done { display: inline-flex; align-items: center; gap: 12px; color: var(--good); font-size: 13px; }
.vac-retirar { font-size: 12px; color: var(--danger); }
.vac-otra { color: var(--ink-3); font-size: 12px; }
.vac-msg { margin-top: 14px; font-size: 13px; }
@media (max-width: 760px) {
  .vac-card { padding: 20px 16px; }
  .vac-row { flex-wrap: wrap; gap: 10px; }
  .vac-cta { width: 100%; justify-content: flex-end; }
}

/* Herramienta "¿Dónde puedo ser candidato?" (portada del index) ───────────── */
.cand-section-card { max-width: 1400px; margin: 0 auto; padding: 30px 32px; }
.cand-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.cand-field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.cand-field input, .cand-field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 14px;
}
.cand-field input:focus, .cand-field select:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.cand-form-actions { grid-column: span 2; display: flex; gap: 8px; margin-top: 6px; }
.cand-form-actions .btn { height: 44px; padding: 0 22px; font-size: 14px; }
.cand-result { margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--border-2); }
.cand-result h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 14px; font-weight: 500; }
.cand-section-card .cand-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cand-item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); }
.cand-item.ok { border-color: color-mix(in oklab, var(--good, oklch(0.55 0.14 152)) 35%, var(--border)); background: color-mix(in oklab, var(--good, oklch(0.55 0.14 152)) 6%, var(--paper)); }
.cand-item.no { background: oklch(0.985 0.012 268); }
.cand-mark { font-family: var(--mono); font-size: 16px; font-weight: 700; line-height: 1.2; }
.cand-item.ok .cand-mark { color: oklch(0.45 0.14 152); }
.cand-item.no .cand-mark { color: var(--ink-3); }
.cand-name { font-weight: 500; font-size: 14px; }
.cand-why { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.cand-disclaimer { margin-top: 16px; font-size: 11px; color: var(--ink-3); line-height: 1.55; font-family: var(--mono); letter-spacing: 0.02em; }
@media (max-width: 700px) {
  .cand-form { grid-template-columns: 1fr; }
  .cand-form-actions { grid-column: span 1; }
  .cand-section-card .cand-list { grid-template-columns: 1fr; }
  .cand-section-card { padding: 22px 20px; }
}

/* Precandidatos — el panel de detalle adopta el mismo sistema */
.prov-detail.sec-card { border-radius: 20px; }
.prov-detail.sec-card .pd-head { padding: 24px 26px 18px; }
/* pd-head reducido: solo el badge de estado (el título va afuera, estilo glow) */
.pd-head.pd-head-slim { padding: 14px 22px; justify-content: flex-end; }

/* Títulos de sección (estilo glow, fuera del contenedor) en Nuestros
   Precandidatos: título pegado a su card, más aire antes de cada bloque. */
.view.mapa .mm-intro { margin: 20px 0 0; }
.view.mapa .mm-intro .pd-sub { margin-top: 10px; color: var(--ink-3); }

/* Sección Propuestas embebida en Nuestros Precandidatos: el contenedor raíz
   es la sec-card y adentro van el encabezado, los filtros Y las tarjetas.
   El selector interno (.prp-nivel) pierde su look de card propia. */
.propuestas-embedded { padding: 26px 30px; }
.propuestas-embedded .prp-nivel {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 18px;
}
.propuestas-embedded .prp-list-section { margin-top: 0; }
.propuestas-embedded .prp-nivel .sec-head {
  align-self: stretch;
  text-align: left;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 760px) {
  .propuestas-embedded { padding: 20px 16px; }
}

.prp-nivel {
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 14px;
  align-items: center;
}
.prp-nivel-row {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.prp-nivel-eyebrow { color: var(--ink-3); }
.prp-nivel-seg,
.prp-tema-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.prp-nivel-seg button,
.prp-tema-seg button { padding: 9px 22px; font-size: 13px; }
.prp-tema-seg button { padding: 8px 16px; font-size: 12px; }

/* Hint contextual debajo del selector de nivel de gobierno.
   Cambia según la opción seleccionada. */
.prp-nivel-hint {
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
  max-width: 560px;
  line-height: 1.5;
  margin-top: 2px;
}

/* Filtros de localización debajo del selector de nivel (provincia / municipio) */
.prp-nivel-loc-selects {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
/* Mobile: provincia y municipio en el MISMO row, una al lado de la otra. */
@media (max-width: 700px) {
  .prp-nivel-loc-selects { flex-wrap: nowrap; width: 100%; }
  .prp-nivel-loc-selects .prp-nivel-select { flex: 1 1 0; min-width: 0; }
}
/* Chip de cambio de posición al lado del número de ranking. */
.prp-dest-rank-line { display: inline-flex; align-items: center; gap: 6px; }
.prp-nivel-select {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  min-width: 200px;
  cursor: pointer;
}
.prp-nivel-select:disabled {
  opacity: 0.5; cursor: not-allowed;
  background: var(--bg-2);
}
.prp-nivel-select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

/* Selector de nivel dentro del modal de Nueva Propuesta */
.prp-form-nivel-seg {
  display: inline-flex; gap: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  background: var(--bg-2);
}
.prp-form-nivel-seg button {
  background: transparent;
  border: 0;
  padding: 8px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.prp-form-nivel-seg button:hover { color: var(--ink); }
.prp-form-nivel-seg button.on {
  background: var(--primary);
  color: white;
}
.prp-nivel-seg button.on,
.prp-tema-seg button.on {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}
@media (max-width: 700px) {
  .prp-nivel-seg, .prp-tema-seg { width: 100%; }
  .prp-nivel-seg button { flex: 1; padding: 8px 6px; font-size: 11px; }
  .prp-tema-seg button { padding: 7px 10px; font-size: 11px; }
}

/* ── Segmented control con thumb deslizante (.seg-slider) ──────────────────
   Todas las opciones dentro de un contenedor; una pastilla azul se desliza
   hasta la opción activa. Requiere que el botón activo tenga la clase .on. */
.seg-slider {
  position: relative;
  isolation: isolate;
  /* Grid de columnas iguales, cada una tan ancha como la opción más larga:
     así el thumb (1/N) siempre cubre el texto completo. */
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.seg-slider::before {
  content: '';
  position: absolute; z-index: 0;
  top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--seg-n, 2));
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--primary) 70%, transparent);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.seg-slider button {
  position: relative; z-index: 1;
  flex: 1 1 0; text-align: center; white-space: nowrap;
  transition: color 0.2s ease;
}
/* El botón activo pierde su pastilla propia: la reemplaza el thumb. */
.seg-slider button.on {
  background: transparent;
  box-shadow: none;
  color: #fff;
}
/* Cantidad de opciones (para el ancho y el desplazamiento del thumb). */
.seg-slider:has(button:nth-child(2):last-child) { --seg-n: 2; }
.seg-slider:has(button:nth-child(3):last-child) { --seg-n: 3; }
.seg-slider:has(button:nth-child(4):last-child) { --seg-n: 4; }
/* Posición del thumb según la opción activa. */
.seg-slider:has(button:nth-child(1).on)::before { transform: translateX(0); }
.seg-slider:has(button:nth-child(2).on)::before { transform: translateX(100%); }
.seg-slider:has(button:nth-child(3).on)::before { transform: translateX(200%); }
.seg-slider:has(button:nth-child(4).on)::before { transform: translateX(300%); }
@media (prefers-reduced-motion: reduce) {
  .seg-slider::before { transition: none; }
}

/* ─── Hero vista Propuestas ─── */
.prp-hero {
  max-width: 1400px; margin: 0 auto;
  min-height: 600px;
  padding: 60px 40px;
  text-align: center;
  /* Contenido centrado vertical y horizontalmente dentro del hero. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative;      /* referencia para la lluvia matrix de fondo */
  isolation: isolate;
  overflow: hidden;
}
/* Lluvia estilo Matrix (azul) detrás del texto del hero de Propuestas. */
.prp-hero-rain {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  pointer-events: none;
}
/* Lluvia matrix del hero de Quiénes somos: sobre el video, detrás del texto,
   con máscara radial (visible en los bordes, tenue en el centro). */
.qs-hero-rain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 30%, black 86%);
  mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, transparent 30%, black 86%);
}
.qs-view .hero .h-title { position: relative; z-index: 1; }
/* La cascada arranca a la altura del header: el hero se corre hacia arriba
   sobre el padding superior de .app-content (28px desktop / 16px mobile) y
   recupera esa altura como padding propio — el texto no se mueve, pero el
   canvas de la lluvia llega hasta el borde del header. */
.view.propuestas .prp-hero { margin-top: -28px; padding-top: 88px; padding-bottom: 88px; }
[data-density="compact"] .view.propuestas .prp-hero { margin-top: -18px; padding-top: 78px; }
@media (max-width: 1000px) {
  .view.propuestas .prp-hero { padding-top: 68px; }
  [data-density="compact"] .view.propuestas .prp-hero { padding-top: 58px; }
}
@media (max-width: 760px) {
  .view.propuestas .prp-hero { margin-top: -16px; padding-top: 56px; }
  [data-density="compact"] .view.propuestas .prp-hero { margin-top: -18px; padding-top: 58px; }
}
/* Velo radial al centro para que el texto siga legible sobre la lluvia. */
.prp-hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 70% at center,
    color-mix(in oklab, var(--bg) 92%, transparent) 0%,
    color-mix(in oklab, var(--bg) 55%, transparent) 55%,
    transparent 100%);
}
.prp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid var(--border-2); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper);
}
.prp-hero-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-tint);
  animation: prp-hero-pulse 1.6s ease-in-out infinite;
}
@keyframes prp-hero-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.prp-hero-title {
  font-family: var(--serif);
  font-size: 88px; line-height: 0.95; letter-spacing: -0.035em;
  margin: 28px 0 18px;
  font-weight: 500;
  text-wrap: balance;
}
.prp-hero-title em { font-style: italic; color: var(--primary); font-weight: 400; }
.prp-hero-lede {
  font-size: 19px; line-height: 1.55;
  color: var(--ink-2);
  max-width: 720px;
  margin: 0 auto;
}
.prp-hero-lede em { font-style: italic; color: var(--primary); font-weight: 500; }
.prp-hero-actions { display: flex; gap: 10px; justify-content: center; margin-top: 28px; }
.prp-hero-actions .btn { height: 44px; padding: 0 22px; font-size: 14px; }

/* ─── Propuestas · Cómo funciona (3 pasos bajo el hero) ─── */
.prp-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  /* Aire entre los 3 pasos y el selector de nivel de gobierno de abajo. */
  margin: 18px 0 34px;
}
.prp-step {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 20px;
}
.prp-step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-tint); color: var(--primary);
  font-size: 15px; font-weight: 700;
  border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border));
}
.prp-step-t { font-size: 15px; font-weight: 600; color: var(--ink); margin: 4px 0 6px; }
.prp-step-d { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.prp-step-d strong { color: var(--primary); font-weight: 600; }

/* En la página Propuestas (no embebida), las tarjetas van apiladas a todo el
   ancho — mismo estilo de lista que las propuestas en la vista Provincia. */
.view.propuestas:not(.propuestas-embedded) .prp-dest-grid {
  display: flex; flex-direction: column; gap: 16px;
}
.view.propuestas:not(.propuestas-embedded) .prp-dest-grid .prp-dest-card { width: 100%; }
.view.propuestas:not(.propuestas-embedded) .prp-dest-grid .prp-dest-card:hover {
  border-color: oklch(0.68 0.22 255 / 0.75);
  box-shadow:
    0 0 0 1px  oklch(0.68 0.22 255 / 0.32),
    0 0 10px   oklch(0.66 0.24 258 / 0.42),
    0 0 26px   oklch(0.60 0.26 260 / 0.28),
    0 20px 50px -30px oklch(0.20 0.10 268 / 0.30);
}

@media (max-width: 1000px) {
  .prp-hero { padding: 40px 24px 30px; }
  .prp-hero-title { font-size: 48px; }
  .prp-steps { grid-template-columns: 1fr; }
}

/* ─── Vista Parasitómetro ─── */
.view.castametro { display: flex; flex-direction: column; gap: 14px; }

/* Panquecómetro · ranking de cambios de partido */
.panque-board .panel-head h2 em { font-style: italic; color: var(--primary); font-weight: 400; }
.panque-grid {
  padding: 14px 18px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* Panquecómetro en una sola fila con scroll horizontal (página de Provincia) */
.panque-row {
  padding: 14px 18px 20px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.panque-row .panque-card {
  flex: 0 0 250px;
  scroll-snap-align: start;
}
.panque-card .nc-code {
  background: var(--primary); color: white;
  padding: 2px 8px; border-radius: 6px;
  font-weight: 600;
}
.panque-party-now {
  font-size: 11px; color: var(--ink-3);
  padding: 6px 0; border-top: 1px dashed var(--border-2);
}
.panque-party-now b { color: var(--ink); font-weight: 600; }
.panque-cambios-v { color: oklch(0.50 0.20 25) !important; font-size: 22px !important; font-weight: 700 !important; }
.panque-partidos {
  list-style: none; padding: 0; margin: 0;
  counter-reset: pp;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px;
  color: var(--ink-2);
}
.panque-partidos li {
  counter-increment: pp;
  padding: 3px 6px 3px 20px;
  background: var(--bg-2);
  border-radius: 4px;
  position: relative;
  line-height: 1.3;
}
.panque-partidos li::before {
  content: counter(pp);
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px;
  background: var(--primary); color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
}
/* Neón cíclico en las tarjetas del Panquecómetro: celeste → rojo → violeta →
   amarillo, un color por segundo (ciclo de 4s con cortes duros). Aplica en
   la plataforma Y en el home (ambos usan .panque-card y cargan este CSS). */
@keyframes panqueNeonCiclo {
  0%, 24.99% {
    border-color: oklch(0.78 0.13 230);
    box-shadow: 0 0 8px oklch(0.78 0.13 230 / 0.65), 0 0 22px oklch(0.78 0.13 230 / 0.35);
  }
  25%, 49.99% {
    border-color: oklch(0.60 0.24 27);
    box-shadow: 0 0 8px oklch(0.60 0.24 27 / 0.65), 0 0 22px oklch(0.60 0.24 27 / 0.35);
  }
  50%, 74.99% {
    border-color: oklch(0.63 0.26 305);
    box-shadow: 0 0 8px oklch(0.63 0.26 305 / 0.65), 0 0 22px oklch(0.63 0.26 305 / 0.35);
  }
  75%, 100% {
    border-color: oklch(0.85 0.16 95);
    box-shadow: 0 0 8px oklch(0.85 0.16 95 / 0.65), 0 0 22px oklch(0.85 0.16 95 / 0.35);
  }
}
.panque-card { animation: panqueNeonCiclo 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .panque-card { animation: none; } }
/* "Hoy: La Libertad Avanza" en violeta (partido actual). !important: le gana
   a los colores del <b> definidos en la plataforma y en el home. */
b.panque-lla { color: oklch(0.63 0.26 305) !important; }

@media (max-width: 1200px) { .panque-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .panque-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .panque-grid { grid-template-columns: 1fr; } .panque-grid > *:nth-child(n+9) { display: none; } }
/* Mobile: el slider horizontal de tarjetas (250px fijas) se rompía en
   pantallas angostas → lista VERTICAL de tarjetas a ancho completo.
   OJO: el rediseño mobile del Tablero Nacional (@media 760px, más abajo)
   convierte .nat-card en fila compacta; estas reglas usan selectores con
   .panque-card (más específicos) para devolver la tarjeta del Panquecómetro
   a columna vertical completa. */
@media (max-width: 880px) {
  .panque-row {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 12px 14px 16px;
  }
  .panque-row .panque-card {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: none;
  }
  .panque-row .panque-card,
  .panque-grid .panque-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }
  /* Cabecera: #ranking + jurisdicción en una fila */
  .panque-card .nc-head { flex-direction: row; align-items: center; gap: 10px; max-width: none; flex: none; }
  .panque-card .nc-name { font-size: 12px; color: var(--ink-3); flex: 1; }
  /* Líder: foto + nombre/cargo lado a lado, alineado a la izquierda */
  .panque-card .nc-leader { flex-direction: row; align-items: center; text-align: left; gap: 12px; flex: none; }
  .panque-card .nc-leader img,
  .panque-card .nc-leader .avatar { width: 64px !important; height: 64px !important; font-size: 22px !important; }
  .panque-card .nc-l-info { align-items: flex-start; gap: 2px; min-width: 0; }
  .panque-card .nc-l-name { font-size: 15px; white-space: normal; overflow: visible; }
  .panque-card .nc-l-meta { font-size: 11px; white-space: normal; overflow: visible; max-width: none; }
  /* Stats: dos columnas con separador arriba, como en desktop */
  .panque-card .nc-stats {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 10px; padding-top: 8px; border-top: 1px dashed var(--border-2);
    text-align: left; flex: none;
  }
  .panque-card .nc-stat { align-items: flex-start; }
  .panque-card .panque-partidos { font-size: 11px; }
}

.castametro-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 60px 48px 60px;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: -28px;
  margin-bottom: 14px;
  overflow: hidden;
  background-image:
    linear-gradient(110deg,
      color-mix(in oklab, var(--ink) 90%, transparent) 0%,
      color-mix(in oklab, var(--ink) 55%, transparent) 45%,
      color-mix(in oklab, var(--ink) 25%, transparent) 78%,
      transparent 100%),
    url('../assets/hero-flag.png');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  min-height: 360px;
  color: white;
  isolation: isolate;
}
.castametro-hero-text {
  max-width: 580px;
  padding-left: max(0px, calc((100vw - 1400px) / 2));
  align-self: center;
}
.castametro-hero-eyebrow {
  display: inline-block;
  color: white !important;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.castametro-hero-title {
  font-family: var(--serif);
  font-size: 72px; line-height: 0.98; letter-spacing: -0.025em;
  margin: 0;
  color: white;
  font-weight: 500;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
  text-wrap: balance;
}
.castametro-hero-title em {
  font-style: italic;
  color: oklch(0.78 0.15 25);   /* rojo enfático */
  font-weight: 400;
}
.castametro-hero-lede {
  font-family: var(--serif);
  font-size: 19px; line-height: 1.5;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  margin: 22px 0 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
  max-width: 560px;
}

.castametro-intro {
  text-align: left;
  max-width: 860px;
  margin: 10px 0 24px;
  padding: 0;
}
.castametro-intro-title {
  /* Mismo estilo que los títulos del index (.s-title) */
  font-family: var(--serif);
  font-size: 56px; line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
.castametro-intro-title em,
.mm-title-glow em {
  font-style: italic;
  color: var(--primary);
  font-weight: 400;
  /* Glow neón azul — mismo "estilo imagen" que la portada */
  text-shadow:
    0 0 4px  oklch(0.68 0.22 255 / 0.45),
    0 0 12px oklch(0.60 0.26 258 / 0.30),
    0 0 24px oklch(0.56 0.27 260 / 0.18);
}
.mm-intro {
  text-align: left;
  max-width: 860px;
  margin: 28px 0 20px;
}
.mm-title-glow {
  /* Mismo estilo que los títulos del index (.s-title) */
  font-family: var(--serif);
  font-size: 56px; line-height: 1.02; letter-spacing: -0.02em;
  margin: 10px 0 0; font-weight: 500; color: var(--ink);
  text-wrap: balance;
}
.castametro-intro-text {
  font-family: var(--serif);
  font-size: 19px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}
/* Títulos castametro estilo index — escalado responsive idéntico a .s-title */
@media (max-width: 900px) {
  .castametro-intro-title,
  .mm-title-glow { font-size: 38px; line-height: 1.04; }
}
@media (max-width: 560px) {
  .castametro-intro-title,
  .mm-title-glow { font-size: 28px; line-height: 1.05; }
}

.castametro-hero-stats {
  display: flex; flex-direction: column; gap: 14px;
  align-self: center;
  padding-right: max(0px, calc((100vw - 1400px) / 2));
}
.ch-stat-big {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex; align-items: center; gap: 18px;
  backdrop-filter: blur(4px);
}
.ch-stat-big .ch-stat-v {
  font-family: var(--serif); font-size: 64px; line-height: 1;
  font-weight: 600; color: white;
  letter-spacing: -0.02em;
}
.ch-stat-big .ch-stat-l {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); line-height: 1.45;
}
.ch-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ch-stat-cell {
  padding: 12px 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.10);
}
.ch-stat-cell-v {
  font-family: var(--serif); font-size: 28px; line-height: 1; font-weight: 600;
}
.ch-stat-cell-l {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 4px;
}
.ch-stat-foot {
  font-size: 11px; color: rgba(255,255,255,0.65); text-align: right; letter-spacing: 0.04em;
}
.ch-stat-disclaimer {
  margin-top: 6px;
  font-size: 11px; color: #ffffff; text-align: right;
  letter-spacing: 0.04em; font-style: italic; font-weight: 700;
}

@media (max-width: 1000px) {
  .castametro-hero { grid-template-columns: 1fr; padding: 40px 24px; }
  .castametro-hero-title { font-size: 48px; }
  .castametro-hero-text, .castametro-hero-stats { padding: 0; }
  .ch-stat-big { padding: 14px 18px; }
  .ch-stat-big .ch-stat-v { font-size: 48px; }
}

/* ─── Vista Mapa Municipal ─── */
.mapa-municipal .mm-card {
  padding: 0;
  box-shadow: var(--shadow-1),
              0 0 10px oklch(0.66 0.22 255/0.50),
              0 0 26px oklch(0.60 0.26 258/0.36),
              0 0 56px oklch(0.56 0.27 260/0.24);
}
/* En el Parasitómetro, el mapa unificado se muestra un 20% más chico (ocupa menos). */
.castametro .mm-card { zoom: 0.8; }
/* La lista TOP-10 se muestra completa (sin scroll interno): que entren los 10. */
.castametro .mm-side { max-height: none; overflow-y: visible; }
/* Selector de modo (Antigüedad en el estado / Sueldos), arriba del mapa */
.mm-mode-row {
  display: flex; justify-content: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}
.mm-mode-seg button { padding: 7px 18px; font-size: 13px; }
/* Opción seleccionada con efecto neón. */
.mm-mode-seg button.on {
  background: var(--paper);
  color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary),
              0 0 10px oklch(0.66 0.22 255 / 0.55),
              0 0 22px oklch(0.60 0.26 258 / 0.40);
  text-shadow: 0 0 8px oklch(0.66 0.22 255 / 0.45);
}
.mm-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--ink-2);
}
.mm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mm-sw { width: 16px; height: 16px; border-radius: 3px; display: inline-block; }
.mm-ct { color: var(--ink-3); margin-left: 4px; }

/* Subtítulo del mapa de sueldos (enfoque de transparencia) */
.mm-subt {
  margin: 8px 0 0; max-width: 640px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}

/* Panel de sueldos por cargo */
.sueldo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sueldo-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--paper);
}
.sueldo-cargo { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sueldo-fuente { font-size: 10.5px; color: var(--ink-3); font-weight: 400; margin-top: 3px; }
.sueldo-na { font-size: 12px; color: var(--ink-3); }
.sueldo-monto-wrap { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sueldo-monto {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  padding: 4px 9px; border-radius: 7px; white-space: nowrap;
}
.sueldo-anio { font-size: 11px; color: var(--ink-3); }

.mm-layout {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 0;
  min-height: 720px;
}
.mm-map-wrap {
  padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
}
.mm-svg { width: 100%; height: auto; max-height: 86vh; display: block; }
.mm-side {
  padding: 22px;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; max-height: 86vh;
}
.mm-map-wrap-prov { background: var(--paper); padding: 22px; }
/* Página de provincia: contenedor del mapa 15% más bajo (720px → 612px). */
.mm-layout-prov { min-height: 612px; }
/* Layout sin mapa (sinMapa: p.ej. Sueldos en la página Mapa, donde el mapa
   ya está en el hero): una sola columna con la lista. */
.mm-layout-solo { grid-template-columns: 1fr; min-height: 0; }
.mm-layout-solo .mm-side { border-left: 0; max-height: none; }
.mm-empty { padding: 30px 12px; color: var(--ink-3); text-align: center; }
.mm-empty h3 { font-family: var(--serif); font-size: 22px; margin: 10px 0 8px; color: var(--ink); font-weight: 500; }
.mm-empty p { font-size: 13px; line-height: 1.55; }
.mm-side-top10 { padding: 18px 16px; gap: 10px; }
.mm-selhead { padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.mm-selhead .eyebrow { margin-bottom: 6px; }
.mm-sel-stats { display: flex; gap: 18px; }
.mm-sel-stat { display: flex; flex-direction: column; }
.mm-sel-stat-v { font-family: var(--serif); font-size: 30px; line-height: 1; font-weight: 600; }
.mm-sel-stat-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.mm-top10-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mm-top10-empty { padding: 24px 4px; color: var(--ink-3); text-align: center; }
.mm-top10-item {
  display: grid;
  grid-template-columns: 24px 60px 1fr;
  gap: 10px; align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--paper);
}
.mm-top10-rank { color: var(--ink-3); font-size: 11px; padding-top: 6px; }
.mm-top10-anios {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px;
  min-width: 56px; padding: 8px 4px;
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.mm-top10-anios-v { font-family: var(--serif); font-size: 22px; line-height: 1; font-weight: 600; }
.mm-top10-anios-l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.mm-top10-info { min-width: 0; }
.mm-top10-name { font-weight: 500; font-size: 14px; line-height: 1.2; color: var(--ink); }
.mm-top10-cargo { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.mm-top10-party { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.mm-top10-mandatos { list-style: none; padding: 0; margin: 6px 0 0; font-size: 11px; color: var(--ink-2); line-height: 1.45; }
.mm-top10-mandatos li { padding-left: 10px; position: relative; }
.mm-top10-mandatos li::before { content: '·'; position: absolute; left: 2px; color: var(--ink-3); }

@media (max-width: 1000px) {
  .mm-layout { grid-template-columns: 1fr; }
  .mm-side { border-left: 0; border-top: 1px solid var(--border); max-height: none; }
}

/* ─── Vista Funcionarios (gobernadores e intendentes) ─── */
.view.funcionarios .panel-head { padding: 18px 22px; }
.func-controls {
  display: grid; grid-template-columns: 2fr 2.4fr 1.6fr; gap: 14px;
  padding: 0 22px 14px;
  align-items: end;
}
.func-search input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 14px;
}
.func-search input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
/* Segmented control "flat" para el filtro por tipo (override del .seg pill por defecto) */
.seg.func-tipo-seg {
  display: flex; gap: 0;
  background: var(--paper);
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.seg.func-tipo-seg button {
  flex: 1; padding: 10px 12px;
  border: 0; border-left: 1px solid var(--border);
  background: var(--paper); color: var(--ink-2);
  border-radius: 0;
  font: 500 12px var(--sans);
  cursor: pointer;
  transition: background .1s ease, color .1s ease;
}
.seg.func-tipo-seg button:first-child { border-left: 0; }
.seg.func-tipo-seg button:hover { background: var(--bg-2); color: var(--ink); }
.seg.func-tipo-seg button.on {
  background: var(--primary); color: white;
  box-shadow: none;
}
.seg.func-tipo-seg button.on + button { border-left-color: var(--primary); }
.func-orden { display: flex; flex-direction: column; gap: 4px; }
.func-orden label { font-size: 10px; }
.func-orden select {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 13px;
}

.func-table-wrap { overflow-x: auto; padding: 0 22px 18px; }
.func-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.func-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-2);
  text-align: left; padding: 12px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.func-table tbody td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.4;
}
.func-table tbody tr:hover { background: color-mix(in oklab, var(--primary) 4%, transparent); }
.func-table tbody tr.is-verify .ft-name::before {
  content: '● '; color: oklch(0.65 0.18 50); margin-right: 4px;
}
.ft-name { font-weight: 500; font-size: 14px; color: var(--ink); }
.ft-party { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.ft-tipo { font-size: 10px; color: var(--ink-3); margin-top: 4px; opacity: 0.75; }
tr.is-ex .ft-tipo { font-style: italic; color: oklch(0.55 0.16 25); opacity: 1; font-weight: 600; }
tr.is-ex .ft-name::after {
  content: ' · EX';
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  color: oklch(0.55 0.16 25);
  background: oklch(0.96 0.04 25);
  padding: 2px 6px; border-radius: 4px;
  margin-left: 6px; vertical-align: middle;
}
.ft-cargo { font-weight: 500; min-width: 140px; }
.ft-ciudad { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.ft-mandato {
  min-width: 220px; max-width: 280px;
  font-size: 12px; color: var(--ink-2);
}
.ft-mandato-th { min-width: 220px; }
.ft-anios { font-size: 16px; font-weight: 700; color: var(--primary); text-align: right; min-width: 80px; }
.ft-anios-th { text-align: right; }
.ft-cambios-th { text-align: center; min-width: 110px; }
.ft-cambios { text-align: center; }
.ft-cambios-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 32px; padding: 0 10px;
  border-radius: 8px;
  font-size: 16px; font-weight: 700;
  border: 1px solid;
}
.ft-cambios-badge.is-low {
  background: oklch(0.96 0.03 152);
  color: oklch(0.40 0.14 152);
  border-color: oklch(0.85 0.05 152);
}
.ft-cambios-badge.is-mid {
  background: oklch(0.96 0.04 75);
  color: oklch(0.50 0.16 75);
  border-color: oklch(0.84 0.07 75);
}
.ft-cambios-badge.is-high {
  background: oklch(0.96 0.04 25);
  color: oklch(0.50 0.20 25);
  border-color: oklch(0.84 0.10 25);
}
.ft-partidos-th { min-width: 200px; }
.ft-partido-chips { list-style: none; padding: 0; margin: 0; counter-reset: ftp; display: flex; flex-direction: column; gap: 4px; max-width: 280px; }
.ft-partido-chip {
  counter-increment: ftp;
  font-size: 11px; line-height: 1.3;
  padding: 4px 8px 4px 22px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  position: relative;
  color: var(--ink-2);
}
.ft-partido-chip::before {
  content: counter(ftp);
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  background: var(--primary); color: white;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
}
.func-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 18px;
  gap: 14px; flex-wrap: wrap;
  border-top: 1px solid var(--border);
}
.func-pagination-info { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.func-pagination-info b { color: var(--ink); font-weight: 600; }
.func-pagination-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fp-btn {
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-2);
  font: 500 13px var(--sans);
  border-radius: 8px;
  cursor: pointer;
  transition: all .12s ease;
}
.fp-btn:hover:not(:disabled) { background: var(--bg-2); color: var(--ink); border-color: var(--ink-3); }
.fp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fp-btn.is-active {
  background: var(--primary); color: white;
  border-color: var(--primary);
}
.fp-ellipsis { color: var(--ink-3); padding: 0 4px; }

.func-disclaimer {
  padding: 14px 22px 18px;
  font-size: 11px; color: var(--ink-3); line-height: 1.55;
  letter-spacing: 0.02em;
  border-top: 1px dashed var(--border-2);
}

@media (max-width: 1000px) {
  .func-controls { grid-template-columns: 1fr; gap: 10px; }
  .func-table tbody td, .func-table thead th { padding: 10px 8px; font-size: 12px; }
}

/* Candidatos destacados · slider en movimiento constante */
.destacados-board { margin-bottom: 14px; }
.destacados-marquee {
  --dc-w: 320px;
  position: relative;
  overflow: hidden;
  padding: 14px 18px 20px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.destacados-marquee.is-dragging { cursor: grabbing; }
.destacados-track {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
}
.destacado-card { flex: 0 0 var(--dc-w); width: var(--dc-w); }
@media (max-width: 900px) {
  .destacados-marquee { --dc-w: 280px; }
}
.nat-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  background: var(--paper);
  cursor: pointer;
  transition: background .1s;
  display: flex; flex-direction: column; gap: 12px;
}
.nat-card:hover { background: var(--bg-2); }
.nc-head { display: flex; align-items: center; gap: 10px; }
.nc-code { font-size: 11px; color: var(--ink-3); }
.nc-name { font-size: 14px; font-weight: 500; flex: 1; }
.nc-dip { font-size: 11px; color: var(--ink-3); }
.nc-leader { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.nc-leader .avatar { flex-shrink: 0; }
.nc-l-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: center; }
.nc-l-name { font-size: 15px; font-weight: 500; line-height: 1.2; }
.nc-l-meta { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.nc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 6px; border-top: 1px dashed var(--border-2); }
.nc-stat { display: flex; flex-direction: column; gap: 2px; }
.nc-stat-v { font-size: 15px; font-weight: 600; color: var(--ink); }
.nc-stat-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.nc-foot { display: flex; justify-content: flex-end; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.nc-empty { font-size: 12px; color: var(--ink-3); padding: 18px 0; }
@media (max-width: 900px) {
  .nat-grid { grid-template-columns: 1fr; }
}

/* ─── Candidatos ─── */
.cand-head { padding: 14px 0 22px; }
.ch-title { font-size: 44px; line-height: 1.05; letter-spacing: -0.02em; margin-top: 6px; }
.ch-lede { font-size: 15px; color: var(--ink-2); max-width: 640px; margin-top: 14px; }

.cand-filters {
  display: flex; gap: 22px; padding: 14px 20px;
  margin-bottom: 18px; align-items: center;
}
.cf-cell { display: flex; flex-direction: column; gap: 6px; }
.cf-cell.right { margin-left: auto; }
.cf-cell label { font-size: 10px; }
.cf-cell select {
  height: 34px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--paper); font: inherit; font-size: 13px; color: var(--ink); min-width: 220px;
}

.cand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cand-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--shadow-1);
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
  display: flex; flex-direction: column; gap: 14px;
}
.cand-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cc-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.cc-name { font-size: 16px; font-weight: 500; }
.cc-prof { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.cc-prov { font-size: 11px; padding: 4px 8px; background: var(--primary-tint); color: var(--primary); border-radius: 4px; font-weight: 500; letter-spacing: 0.04em; }
.cc-lema { font-size: 15px; color: var(--ink-2); line-height: 1.3; padding: 8px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.cc-foot { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; align-items: center; }

/* ─── Perfil del precandidato ─── */
.perfil-body-stack { display: flex; flex-direction: column; gap: 36px; }
.perfil-section { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.prop-card.is-clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.prop-card.is-clickable:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.4); }
.prop-ver { margin-top: 14px; align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--primary); }
/* Tab Actividad: Timeline a la izquierda · Galería a la derecha */
.perfil-act-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}
/* Sin los encabezados que tenían estas secciones, el margin-top de 34px de
   .perfil-section dejaba un hueco grande debajo de las tabs. */
.perfil-act-grid .perfil-section { margin-top: 0; }
.perfil-act-side { position: sticky; top: 88px; }
@media (max-width: 880px) {
  .perfil-act-grid { grid-template-columns: 1fr; gap: 36px; }
  .perfil-act-side { position: static; }
}
.perfil-section-h { display: flex; flex-direction: column; gap: 4px; }
.perfil-section-h h2 {
  font-family: var(--serif);
  font-size: 26px; letter-spacing: -0.01em; line-height: 1.1;
  margin: 0; font-weight: 500;
}
.perfil-section-h .ps-count { color: var(--ink-3); font-size: 14px; margin-left: 4px; }

.ph-redes {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 6px;
}
.ph-red {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ph-red:hover { transform: translateY(-1px); border-color: var(--ink-2); background: var(--bg-2); }
.ph-red-handle { font-size: 12px; color: var(--ink-2); letter-spacing: 0.02em; }
.ph-stat-apoyos .ph-stat-v { color: var(--danger, oklch(0.48 0.18 28)); display: inline-flex; align-items: center; }
.mc-red-icon { display: inline-block; vertical-align: middle; margin-right: 6px; line-height: 0; }
.mc-red-icon svg { display: block; border-radius: 4px; }
.ph-stat-votos .ph-stat-v { color: var(--primary, #231D7A); display: inline-flex; align-items: center; }
.cc-pct  { font-family: var(--serif); font-size: 22px; line-height: 1; }
.cc-votos { font-size: 13px; font-weight: 500; }
.cc-dist { font-size: 13px; font-weight: 500; }

/* ─── Perfil ─── */
.perfil-hero {
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px;
  padding: 28px 32px;
  margin-bottom: 20px;
  align-items: center;
}
/* Portada / banner del perfil público */
.perfil-hero.has-cover { overflow: hidden; padding-top: 0; align-items: start; }
.ph-cover {
  grid-column: 1 / -1;
  /* Proporción 4:1 = la del recortador de portada (sin re-recorte). */
  height: auto; aspect-ratio: 4 / 1; min-height: 96px;
  margin: 0 -32px 4px;
  background-size: cover; background-position: center;
  background-color: #222;
}
.ph-cover { z-index: 0; }
.perfil-hero.has-cover .ph-left { margin-top: -70px; position: relative; z-index: 2; }
.perfil-hero.has-cover .ph-avatar-wrap :is(.avatar, img),
.perfil-hero.has-cover .ph-left > :is(.avatar, img) {
  border: 4px solid var(--paper) !important; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.ph-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ph-name { font-size: 44px; line-height: 1.0; letter-spacing: -0.02em; }
.ph-prof { font-size: 12px; color: var(--ink-3); margin-top: 8px; letter-spacing: 0.04em; }
.ph-estudios { font-size: 12px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.04em; }
.ph-estudios::before { content: '🎓'; margin-right: 6px; opacity: 0.8; }
.ph-desc {
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  margin-top: 12px; max-width: 60ch; white-space: pre-wrap;
}
.ph-lema { font-size: 20px; color: var(--ink); margin-top: 18px; line-height: 1.25; max-width: 540px; }
/* ── Insignias del perfil ── */
.ph-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ph-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--bdg, var(--primary)) 38%, var(--border));
  background: color-mix(in oklab, var(--bdg, var(--primary)) 12%, var(--paper));
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  cursor: help; line-height: 1;
}
.ph-badge-ico { font-size: 15px; line-height: 1; }
.ph-badge-name { letter-spacing: -0.01em; }
/* Insignia destacada sobre la foto del perfil */
.ph-avatar-wrap { position: relative; width: 144px; height: 144px; }
/* Menú de tres puntos del perfil (Compartir + Denunciar) */
.ph-menu-wrap { position: relative; display: inline-flex; }
.ph-menu-dots { padding-left: 10px; padding-right: 10px; }
.ph-menu {
  /* Se abre hacia ARRIBA para no quedar tapado por la barra de solapas de abajo. */
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 60;
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.35); padding: 6px; min-width: 168px;
}
.ph-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; background: transparent; border-radius: 8px;
  font-size: 13.5px; color: var(--danger, #c0392b); cursor: pointer; text-align: left;
}
.ph-menu-item:hover { background: color-mix(in oklab, var(--danger, #c0392b) 10%, transparent); }
.ph-avatar-badge {
  position: absolute; right: -4px; bottom: -4px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  background: color-mix(in oklab, var(--bdg, var(--primary)) 16%, var(--paper));
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--bdg, var(--primary)) 45%, var(--border)), 0 3px 10px rgba(0,0,0,.14);
}
/* Insignias · explicación en la pestaña Info */
.ins-card { padding: 6px 8px; }
.ins-list { list-style: none; margin: 0; padding: 0; }
.ins-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 14px; border-bottom: 1px solid var(--border); }
.ins-item:last-child { border-bottom: none; }
.ins-ico {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; line-height: 1;
  background: color-mix(in oklab, var(--bdg, var(--primary)) 14%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--bdg, var(--primary)) 38%, var(--border));
}
.ins-name { font-weight: 600; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ins-desc { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.ins-pin { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); background: var(--primary-tint); border-radius: 999px; padding: 2px 9px; }
.ph-actions { display: flex; gap: 8px; margin-top: 22px; }
.ph-stats { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; background: var(--bg-2); border-radius: var(--r); min-width: 200px; }
.ph-stat-v { font-family: var(--serif); font-size: 30px; line-height: 1; }

/* ── Credencial del precandidato/a · barras de progreso por pasos ── */
.cred-section { display: flex; flex-direction: column; gap: 24px; padding: 24px 30px; margin-bottom: 20px; }
.cred-prog-h { margin-bottom: 16px; }
.cred-bar { display: flex; width: 100%; }
.cred-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; position: relative; }
/* Conector hacia el paso anterior (la "barra" que se llena) */
.cred-step::before {
  content: ''; position: absolute; top: 12px; height: 5px; border-radius: 999px;
  left: -50%; right: 50%; background: var(--bg-2); z-index: 0;
}
.cred-step:first-child::before { display: none; }
.cred-step.filled::before {
  background: var(--primary);
  transform-origin: left center;
  animation: credFill 650ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes credFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cred-dot {
  position: relative; z-index: 1;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; line-height: 1;
  background: var(--bg-2); color: var(--ink-3);
  border: 2px solid var(--bg-2);
  transition: background 200ms ease, border-color 200ms ease;
}
.cred-step.filled .cred-dot { background: var(--primary); color: #fff; border-color: var(--primary); }
.cred-step.st-current .cred-dot { background: #fff; color: var(--primary); border-color: var(--primary); }
.cred-step.st-ok .cred-dot { background: oklch(0.55 0.15 150); border-color: oklch(0.55 0.15 150); color: #fff; }
.cred-step.st-fail .cred-dot { background: oklch(0.55 0.20 25); border-color: oklch(0.55 0.20 25); color: #fff; }
.cred-label { margin-top: 9px; text-align: center; font-size: 12px; line-height: 1.25; color: var(--ink-3); padding: 0 6px; }
.cred-step.filled .cred-label { color: var(--ink); font-weight: 600; }
.cred-step.st-current .cred-label { color: var(--primary); font-weight: 600; }
.cred-step.st-ok .cred-label { color: oklch(0.45 0.15 150); font-weight: 600; }
.cred-step.st-fail .cred-label { color: oklch(0.50 0.20 25); font-weight: 600; }
.cred-owner-tag { color: var(--primary); margin-bottom: 4px; }
/* Tooltip por paso (hover / foco) */
.cred-step { cursor: default; }
.cred-step:focus-visible { outline: none; }
.cred-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 220px;
  background: var(--ink); color: #fff;
  font-size: 11.5px; line-height: 1.35; font-weight: 500; text-align: left;
  padding: 8px 10px; border-radius: 8px;
  box-shadow: 0 12px 28px -10px rgba(20,20,40,0.45);
  opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity 140ms ease, transform 140ms ease;
}
.cred-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.cred-step:hover .cred-tip, .cred-step:focus-within .cred-tip {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
@media (max-width: 600px) {
  .cred-section { padding: 18px 16px; gap: 18px; }
  .cred-label { font-size: 10.5px; padding: 0 2px; }
  .cred-tip { max-width: 160px; }
}

.perfil-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.pt-btn {
  background: transparent; border: 0; padding: 12px 14px;
  font: 500 13px var(--sans); cursor: pointer;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pt-btn.on { color: var(--ink); border-bottom-color: var(--ink); }
.pt-btn:hover { color: var(--ink); }

.prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.prop-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.prop-num { font-size: 11px; color: var(--ink-3); }
.prop-titulo { font-family: var(--serif); font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }
.prop-texto { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.prop-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }

.tray-card { padding: 12px 22px; }
.tray-list { display: flex; flex-direction: column; }
.tray-row {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 22px; padding: 18px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.tray-row:last-child { border-bottom: 0; }
.tr-date { font-size: 12px; color: var(--ink-3); padding-top: 2px; }
.tr-rol { font-weight: 500; font-size: 16px; }
.tr-org { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

.ddjj-card { padding: 22px; }
.ddjj-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ddjj-table { width: 100%; border-collapse: collapse; }
.ddjj-table td { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: top; }
.ddjj-table td:first-child { width: 40%; color: var(--ink-3); }
.ddjj-foot { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-2); font-size: 11px; color: var(--ink-3); }

.coms-wrap { display: flex; flex-direction: column; gap: 14px; }
.coms-form { padding: 18px 22px; }
.cf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cf-tipos { display: flex; gap: 4px; }
.tipo-radio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-2); cursor: pointer;
  font-size: 12px; font-weight: 500;
}
.tipo-radio.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tipo-radio input { display: none; }
.coms-form textarea {
  width: 100%; min-height: 80px;
  border: 1px solid var(--border-2); border-radius: 8px;
  padding: 12px; font: inherit; font-size: 13px;
  resize: vertical;
}
.coms-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.cf-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 10px; }
.cf-note { font-size: 11px; color: var(--ink-3); flex: 1; }
.cf-error {
  margin-top: 10px; padding: 10px 12px;
  font-size: 13px; color: var(--danger);
  background: color-mix(in oklab, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 35%, transparent);
  border-radius: 10px;
}
.btn.primary:disabled { opacity: 0.6; cursor: progress; }
.com-pendiente {
  display: inline-block; align-self: flex-start;
  font-size: 11px; color: oklch(0.50 0.14 75);
  background: var(--accent-tint); padding: 2px 8px; border-radius: 999px;
}

.com-card { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.com-card.t-denuncia { border-left: 3px solid var(--danger); }
.com-card.t-apoyo    { border-left: 3px solid var(--good); }
.com-card.t-pregunta { border-left: 3px solid var(--accent); }
.com-head { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.com-autor { font-size: 13px; font-weight: 500; }
.com-fecha { font-size: 10px; color: var(--ink-3); }
.com-tipo {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  font-weight: 500;
}
.com-tipo.t-denuncia { background: var(--danger-tint); color: var(--danger); }
.com-tipo.t-apoyo    { background: var(--good-tint);  color: var(--good); }
.com-tipo.t-pregunta { background: var(--accent-tint); color: var(--accent-2); }
.com-texto { font-size: 14px; line-height: 1.5; color: var(--ink); margin: 0; }
.com-actions { display: flex; gap: 14px; }

/* ─── Elecciones ─── */
.elec-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 0 22px; gap: 22px; }
.elec-rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.elec-card { overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.elec-card .elec-strip { transition: background 160ms ease; }
.elec-card:hover .elec-strip { background: color-mix(in oklab, var(--ink) 2.5%, transparent); }
.elec-card.is-expanded { border-color: color-mix(in oklab, var(--ink) 18%, var(--border)); }
.elec-card.is-revoc {
  border-color: color-mix(in oklab, var(--danger) 30%, var(--border));
  background:
    linear-gradient(to right, color-mix(in oklab, var(--danger) 6%, transparent), transparent 320px),
    var(--paper);
}
.elec-card.is-revoc::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--danger);
}
.elec-card.is-revoc { position: relative; }
.elec-strip:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: inherit; }

/* Revocatoria chip — shared */
.chip-revoc {
  background: color-mix(in oklab, var(--danger) 12%, transparent) !important;
  color: var(--danger) !important;
  border-color: color-mix(in oklab, var(--danger) 30%, transparent) !important;
  font-weight: 600;
}

/* Origen-denuncia bloque (Elecciones) */
.es-origen {
  margin-top: 14px; padding: 12px 14px;
  background: color-mix(in oklab, var(--ink) 3%, transparent);
  border: 1px dashed var(--border-2);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.es-origen-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-size: 13px; color: var(--ink-2);
}
.es-origen-id { color: var(--ink-3); font-size: 11px; letter-spacing: 0.06em; }
.es-origen-text { flex: 1; min-width: 200px; line-height: 1.45; }
.es-origen-meta { color: var(--ink-3); font-size: 11px; letter-spacing: 0.04em; }
.elec-card.active { border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); box-shadow: 0 1px 0 oklch(0.18 0.025 270 / 0.04), 0 12px 30px -16px oklch(0.45 0.18 268 / 0.20); }

.elec-strip {
  display: grid;
  grid-template-columns: 130px 1fr 220px;
  gap: 28px;
  padding: 22px 26px;
  align-items: start;
}
.es-date { text-align: center; padding-top: 8px; border-right: 1px solid var(--border); padding-right: 10px; }
.es-month { font-size: 11px; color: var(--accent-2); letter-spacing: 0.1em; }
.es-day { font-family: var(--serif); font-size: 60px; line-height: 1; margin: 2px 0; font-weight: 500; }
.es-year { font-size: 11px; color: var(--ink-3); }
.es-body { min-width: 0; }
.es-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.es-title { font-size: 26px; line-height: 1.15; margin: 6px 0; font-weight: 500; }
.es-desc { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 6px 0 14px; }
.es-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 13px;
}
.es-meta .eyebrow { margin-bottom: 4px; }
.es-side {
  padding-left: 22px; border-left: 1px solid var(--border);
  text-align: center; display: flex; flex-direction: column; gap: 6px;
}
.es-side-pct { font-family: var(--serif); font-size: 42px; line-height: 1; color: var(--primary); font-weight: 500; }
.es-side-days { font-family: var(--serif); font-size: 56px; line-height: 1; font-weight: 500; }
.es-side-foot { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

/* Segments expanded list */
.seg-list {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  padding: 14px 26px 20px;
}
.seg-list-head {
  padding: 8px 0 12px;
  color: var(--ink-3);
}
.seg-row {
  display: grid;
  grid-template-columns: 36px 1fr 100px 180px 130px;
  align-items: center; gap: 18px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 8px;
}
.seg-row:last-child { margin-bottom: 0; }
.sr-rank { font-size: 11px; color: var(--ink-3); }
.sr-name { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.2; }
.sr-desc { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }
.sr-cargos { text-align: center; }
.sr-c-num { font-family: var(--serif); font-size: 22px; line-height: 1; font-weight: 500; }
.sr-cargos .eyebrow { margin-top: 4px; }
.sr-part { display: flex; flex-direction: column; gap: 6px; }
.sr-p-num { font-size: 13px; font-weight: 600; }
.sr-action { display: flex; justify-content: flex-end; }
.sr-action .btn { width: 100%; justify-content: center; height: 36px; font-size: 13px; }

.legal-note { padding: 18px 22px; font-size: 13px; color: var(--ink-2); }
.legal-note p { margin: 8px 0 0; line-height: 1.5; }

/* ─── Denuncias ─── */
.den-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 0 22px; gap: 22px; }
.den-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.den-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.den-list-full { display: flex; flex-direction: column; gap: 10px; }
.den-row-full {
  display: grid; grid-template-columns: 200px 1fr 180px;
  gap: 22px; padding: 22px 26px;
}
.drf-left { padding-right: 18px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.drf-id { font-size: 11px; color: var(--ink-3); }
.drf-date { font-size: 12px; }
.drf-autor { font-size: 12px; color: var(--ink-2); }
.drf-autor.anon { color: var(--ink-3); font-style: italic; }
.drf-cat { margin-bottom: 6px; }
.drf-title { font-size: 18px; line-height: 1.25; margin: 4px 0 8px; }
.drf-body { color: var(--ink-2); font-size: 13px; line-height: 1.55; margin: 0 0 14px; }
.drf-foot { display: flex; gap: 12px; align-items: center; }
.drf-right { padding-left: 22px; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.drf-apoyos { text-align: right; }
.drf-ap-num { font-family: var(--serif); font-size: 30px; line-height: 1; }

/* Autoridad denunciada · resumen del target */
.drf-target {
  margin: 4px 0 12px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--ink) 3%, transparent);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.drf-target-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.drf-target-name { font-weight: 600; color: var(--ink); }

/* Bloque de revocatoria activada */
.den-row-full.is-threshold {
  border-color: color-mix(in oklab, var(--danger) 28%, var(--border));
  box-shadow: 0 1px 0 oklch(0.18 0.025 270 / 0.04), 0 14px 36px -22px color-mix(in oklab, var(--danger) 50%, transparent);
}
.drf-revoc {
  margin: 4px 0 14px;
  display: grid; grid-template-columns: 36px 1fr; gap: 12px;
  padding: 14px;
  background: color-mix(in oklab, var(--danger) 6%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--danger) 28%, var(--border));
  border-radius: 10px;
}
.drf-revoc-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--danger);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.drf-revoc-body { display: flex; flex-direction: column; gap: 6px; }
.drf-revoc-body p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.drf-revoc-body strong { color: var(--ink); }
.drf-revoc-elec {
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-size: 13px;
}
.drf-revoc-elec-id { color: var(--ink-3); font-size: 11px; letter-spacing: 0.06em; }
.drf-revoc-elec-title { color: var(--ink); font-weight: 500; flex: 1; min-width: 180px; }
.drf-revoc-elec-date { color: var(--ink-3); font-size: 11px; }

/* Umbral progress (en la columna derecha) */
.drf-umbral { width: 100%; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.drf-umbral-track {
  width: 100%; height: 6px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}
.drf-umbral-fill {
  height: 100%;
  background: color-mix(in oklab, var(--ink) 60%, transparent);
  border-radius: 999px;
  transition: width 240ms ease;
}
.drf-umbral.reached .drf-umbral-fill { background: var(--danger); }
.drf-umbral-meta { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.drf-umbral.reached .drf-umbral-meta { color: var(--danger); font-weight: 600; }
.drf-umbral-sub { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }

/* Modal */
.modal-bg {
  position: fixed; inset: 0;
  background: oklch(0.18 0.025 270 / 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.modal {
  width: min(640px, 100%);
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  background: var(--paper);
  box-shadow: var(--shadow-3);
}
.modal-head { padding: 22px 26px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; }
.modal-head h2 { font-size: 26px; margin-top: 4px; }
.modal-close { background: transparent; border: 0; font-size: 24px; cursor: pointer; color: var(--ink-3); }
.modal-body { padding: 22px 26px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
.modal-foot { padding: 18px 26px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.modal-disclaimer { font-size: 11px; color: var(--ink-3); flex: 1; }

.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row.two > div { display: flex; flex-direction: column; gap: 6px; }
.form-row input, .form-row select, .form-row textarea {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--border-2); border-radius: 8px;
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--paper);
}
.form-row textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 80px; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.form-row input.is-invalid, .form-row textarea.is-invalid, .form-row select.is-invalid { border-color: var(--danger); }
.form-row .form-err { color: var(--danger); font-size: 11px; letter-spacing: 0.02em; }
.form-row .form-hint { color: var(--ink-3); font-size: 11px; letter-spacing: 0.02em; }
.form-req { color: var(--danger); margin-left: 2px; }

/* ─── PersonaAutocomplete ─── */
.pa-wrap { position: relative; }
.pa-control {
  display: flex; align-items: center;
  min-height: 38px; padding: 4px 10px 4px 12px;
  border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--paper);
  cursor: text;
  gap: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.pa-wrap.has-value .pa-control { cursor: default; padding: 6px 10px 6px 6px; min-height: 56px; }
.pa-wrap:focus-within .pa-control { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.pa-wrap.is-invalid .pa-control { border-color: var(--danger); }
.pa-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; color: var(--ink);
  padding: 0; height: 28px;
}
.pa-input::placeholder { color: var(--ink-3); }
.pa-icon { color: var(--ink-3); font-size: 14px; font-family: var(--mono); flex-shrink: 0; }
.pa-wrap.has-value .pa-icon { color: var(--good, oklch(0.62 0.14 152)); font-weight: 700; }

.pa-chip {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 6px;
  background: color-mix(in oklab, var(--ink) 4%, transparent);
  border-radius: 6px;
}
.pa-chip-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 13px;
  flex-shrink: 0;
}
.pa-chip-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; line-height: 1.2; }
.pa-chip-name { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-chip-meta { font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-chip-x {
  margin-left: auto;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-2);
  font-size: 18px; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.pa-chip-x:hover { background: color-mix(in oklab, var(--ink) 10%, transparent); color: var(--ink); }

.pa-pop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px -16px oklch(0.20 0.05 270 / 0.30), 0 2px 6px -2px oklch(0.20 0.05 270 / 0.10);
  z-index: 60;
  max-height: 340px; overflow-y: auto;
  padding: 4px;
}
.pa-empty { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.pa-empty-sub { font-size: 12px; color: var(--ink-3); line-height: 1.4; }

.pa-opt {
  width: 100%;
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.pa-opt.on, .pa-opt:hover { background: color-mix(in oklab, var(--primary) 8%, transparent); }
.pa-opt-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-2); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 12px;
  border: 1px solid var(--border);
}
.pa-opt.on .pa-opt-avatar { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pa-opt-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.pa-opt-name { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-opt-sub { font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-opt-id { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }
.pa-hl { background: color-mix(in oklab, var(--primary) 22%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; }
.pa-foot { padding: 8px 10px 6px; font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; border-top: 1px dashed var(--border-2); margin-top: 4px; }

/* ─── Propuestas ─── */
.prp-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 0 22px; gap: 22px; }
.prp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }

.prp-cats { margin-bottom: 28px; }
.prp-cats-h {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.prp-cats-h h2 { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin-top: 4px; max-width: 540px; }

.prp-cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.prp-cat-card {
  --cat-fill: oklch(0.55 0.15 var(--cat-hue, 268));
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.prp-cat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in oklab, var(--cat-fill) 35%, var(--border)); }
.prp-cat-card.on {
  border-color: var(--cat-fill);
  box-shadow: 0 0 0 1px var(--cat-fill), var(--shadow-2);
  background: color-mix(in oklab, var(--cat-fill) 4%, var(--paper));
}
.pcc-top { display: flex; align-items: center; gap: 12px; }
.pcc-glyph {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cat-fill);
  color: var(--paper);
  border-radius: 10px;
  font-family: var(--serif); font-style: italic; font-size: 18px; font-weight: 500;
  flex-shrink: 0;
}
.pcc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcc-name { font-family: var(--serif); font-size: 17px; line-height: 1.15; }
.pcc-count { font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.pcc-descr { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.pcc-top-prop {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border-2);
}
.pcc-top-title { font-size: 13px; line-height: 1.3; color: var(--ink); margin-top: 2px; }
.pcc-top-meta { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 4px; }
.pcc-cta { margin-top: 4px; justify-content: center; width: 100%; font-size: 12px; }

/* List */
.prp-list-section { margin-top: 18px; }
.prp-list-h { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; gap: 18px; }
.prp-list-h h2 { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin-top: 4px; }
.prp-list { display: flex; flex-direction: column; gap: 16px; }
.prp-row {
  display: grid; grid-template-columns: 56px 1fr 140px;
  gap: 18px; padding: 18px 22px;
  align-items: start;
}
.prp-row-rank {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--serif); font-style: italic; font-size: 17px;
}
.prp-row-mid { min-width: 0; }
.prp-row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.prp-row-title { font-size: 17px; line-height: 1.25; margin: 4px 0 6px; font-weight: 500; }
.prp-row-resumen { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0 0 10px; }
.prp-row-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; gap: 10px; }
.prp-row-right { padding-left: 18px; border-left: 1px solid var(--border); text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.prp-row-ap-num { font-family: var(--serif); font-size: 28px; line-height: 1; }

.prp-empty { padding: 28px 26px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.prp-empty p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0; max-width: 520px; }

/* Responsive */
@media (max-width: 1100px) {
  .prp-cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .prp-kpis { grid-template-columns: 1fr 1fr; }
  .prp-cat-grid { grid-template-columns: 1fr; }
  .prp-row { grid-template-columns: 1fr; }
  .prp-row-right { border-left: 0; padding-left: 0; text-align: left; align-items: flex-start; }
}

/* ─── Propuesta · detalle ─── */
.propuesta-detalle { display: flex; flex-direction: column; gap: 18px; }
/* Fila superior del detalle: "← Volver" + botón "Editar propuesta" (autor). */
.pd-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-editar-btn { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 8px 14px; font-size: 13px; }
.propuesta-detalle > .link { align-self: flex-start; font-size: 13px; }

.pd-hero {
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 14px;
  border-left: 4px solid var(--primary);
}
.pdh-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pdh-cat-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; font-weight: 500; border: 0; }
.pdh-cat-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  color: white;
  font-family: var(--serif); font-style: italic; font-size: 12px; font-weight: 500;
}
.pdh-title {
  font-family: var(--serif);
  font-size: 38px; line-height: 1.1; letter-spacing: -0.02em;
  margin: 4px 0;
  font-weight: 500;
  max-width: 880px;
  text-wrap: balance;
}
.pdh-resumen {
  font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0;
  max-width: 880px;
}
.pdh-meta {
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 22px;
}
.pdh-meta-cell .eyebrow { margin-bottom: 6px; }
.pdh-meta-cell .mono { font-size: 13px; color: var(--ink-2); }
.pdh-meta-author { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pdh-prov { font-size: 11px; color: var(--ink-3); padding: 2px 6px; background: var(--bg-2); border-radius: 4px; }
.pdh-meta-apoyos { font-family: var(--serif); font-size: 28px; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.pdh-meta-cell-apoyos { align-self: stretch; }
.pdh-apoyos-row { display: flex; align-items: center; gap: 12px; margin-top: 2px; }

.pd-layout {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pd-main { display: flex; flex-direction: column; gap: 22px; max-width: 980px; }
/* Secciones a todo el ancho (fuentes y comentarios) — fuera del cap de .pd-main */
.pd-sec-full { max-width: none; width: 100%; }
.propuesta-detalle .pd-sec {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px;
}
.pd-sec-t {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 10px;
}
.pd-sec-p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

.pd-imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pd-img {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-2);
}
.pd-img img { width: 100%; height: auto; display: block; max-height: 320px; object-fit: cover; }
.pd-img figcaption { padding: 8px 12px; font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; border-top: 1px solid var(--border); background: var(--paper); }
.pd-img-graphic { aspect-ratio: 16/10; overflow: hidden; }

.pd-fuentes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pd-fuentes li a { color: var(--primary); text-decoration: none; font-size: 12px; word-break: break-all; }
.pd-fuentes li a:hover { text-decoration: underline; }

/* Comentarios */
.pd-comments { padding-bottom: 6px; }
.pd-comments-h { display: flex; justify-content: space-between; align-items: flex-end; }
.pd-com-form {
  margin: 8px 0 18px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 12px;
}
.pd-com-form textarea {
  border: 1px solid var(--border-2); border-radius: 8px;
  padding: 10px 12px;
  font: inherit; color: var(--ink);
  resize: vertical; min-height: 70px;
  background: var(--paper);
  outline: none;
}
.pd-com-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.pd-com-form-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-com-form-meta { display: flex; flex-direction: column; gap: 1px; }
.pd-com-form-name { font-size: 14px; font-weight: 500; }
.pd-com-form-prov { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }
.pd-com-tipo { margin-left: auto; }
.pd-com-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pd-com-form-hint { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }
.pd-com-locked {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  font-size: 13px;
  color: var(--ink-2);
}

.pd-com-list { display: flex; flex-direction: column; gap: 10px; }
.pd-com-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pd-com-card.t-apoyo    { border-left: 3px solid var(--good); }
.pd-com-card.t-pregunta { border-left: 3px solid var(--primary); }
.pd-com-card.t-critica  { border-left: 3px solid var(--accent); }
.pd-com-card-h { display: flex; align-items: center; gap: 10px; }
.pd-com-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pd-com-card-name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-com-cargo { font-size: 10px; padding: 2px 6px; }
.pd-com-card-sub { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }
.pd-com-card-text { font-size: 14px; line-height: 1.55; color: var(--ink); }
.pd-com-empty { padding: 18px; text-align: center; color: var(--ink-3); font-size: 11px; letter-spacing: 0.04em; background: var(--bg-2); border-radius: 10px; }

/* Sidebar */
.pd-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 70px; }
.pd-side-apoyos { padding: 20px 22px; }
.pd-side-num {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 6px 0 10px;
}
.pd-side-foot { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 6px; }

.pd-side-card { padding: 16px 18px; }
.pd-side-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pd-side-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; gap: 12px;
  border-bottom: 1px dashed var(--border-2);
  font-size: 12px;
}
.pd-side-list li:last-child { border-bottom: 0; }
.pd-side-list li > span:first-child { color: var(--ink-3); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

.pd-side-related { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pd-side-related li { padding: 8px 10px; background: var(--bg-2); border-radius: 8px; cursor: pointer; transition: background 120ms ease; }
.pd-side-related li:hover { background: color-mix(in oklab, var(--primary) 6%, var(--bg-2)); }
.pd-rel-title { font-size: 13px; line-height: 1.3; color: var(--ink); }
.pd-rel-meta { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 4px; }

/* Image uploader (en form) */
.img-uploader {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  background: var(--bg-2);
}
.iu-controls { display: flex; gap: 8px; align-items: center; }
.iu-controls input[type="text"] {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--border-2); border-radius: 8px;
  font: inherit; color: var(--ink);
  background: var(--paper);
  outline: none;
}
.iu-empty { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; padding: 8px 4px; }
.iu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.iu-thumb { position: relative; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.iu-thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.iu-remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink); color: var(--bg);
  border: 0; cursor: pointer;
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.iu-cap { padding: 6px 8px; font-size: 10px; color: var(--ink-3); letter-spacing: 0.02em; border-top: 1px solid var(--border); }

/* ─── Alta de cuenta ─── */
.alta-cuenta { padding-top: 8px; }
/* Página de Iniciar sesión / Crear cuenta: sin footer del sitio y con el
   contenido compactado para que entre en UNA pantalla sin scroll. */
.app-main:has(.view.alta-cuenta) .f { display: none; }
.app-main:has(.view.alta-cuenta) .app-content { padding-top: 12px; padding-bottom: 12px; }
.alta-cuenta .ac-card { padding: 22px 28px; gap: 14px; }
.alta-cuenta .ac-head { gap: 4px; }
.alta-cuenta .ac-title { font-size: 28px; margin: 0; }
.alta-cuenta .ac-lede { font-size: 13.5px; line-height: 1.45; }
.alta-cuenta .ac-social { gap: 8px; }
.alta-cuenta .ac-social-btn { height: 42px; }
.alta-cuenta .ac-email-btn { height: 44px; }
.alta-cuenta .ac-divider { margin: 0 auto; }
.alta-cuenta .ac-form { gap: 10px; }
.alta-cuenta .ac-form input { padding: 9px 12px; }
.ac-wrap {
  display: grid;
  /* Sin la columna lateral de requisitos legales: una sola columna centrada. */
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 560px;
  margin: 0 auto;
}
.ac-wrap-form { grid-template-columns: 1fr; max-width: 820px; }
.ac-back { display: inline-block; margin-bottom: 12px; font-size: 13px; }

.ac-card { padding: 36px 40px; display: flex; flex-direction: column; gap: 24px; }
.ac-head { display: flex; flex-direction: column; gap: 8px; }
.ac-title {
  font-family: var(--serif);
  font-size: 38px; letter-spacing: -0.02em; line-height: 1.05;
  margin: 4px 0;
  font-weight: 500;
}
.ac-lede { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 540px; }

/* Columna de botones acotada y centrada (los botones ocupaban todo el ancho
   de la tarjeta en desktop). Aplica a redes, divisor "o" y botón de email. */
.ac-social { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin-left: auto; margin-right: auto; }
.ac-divider, .ac-email-btn { max-width: 420px; margin-left: auto; margin-right: auto; }
.ac-email-btn { display: flex; }
.ac-social-btn {
  /* Logo a la izquierda (slot fijo) + texto: así el logo y el inicio de
     "Continuar" quedan alineados en columna entre todos los botones. */
  display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  width: 100%;
  height: 50px; padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: var(--paper);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
  cursor: pointer;
  transition: border-color 120ms, transform 120ms, background 120ms;
}
.ac-social-btn:hover { border-color: var(--ink-2); transform: translateY(-1px); }
/* Chip blanco detrás de cada logo → visible sobre cualquier color de botón
   (los logos de X y TikTok son cuadrados negros y se perdían en el botón negro). */
.ac-social-btn svg { flex-shrink: 0; width: 20px; height: 20px; background: #fff; padding: 2px; border-radius: 7px; box-sizing: content-box; }
.ac-google svg { background: transparent; padding: 2px; }
.ac-google    { background: #fff; color: #202124; border-color: #dadce0; }
.ac-facebook  { background: #1877f2; color: #fff; border-color: #1877f2; }
.ac-instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); color: #fff; border-color: transparent; }
.ac-apple     { background: #000; color: #fff; border-color: #000; }
.ac-x         { background: #000; color: #fff; border-color: #000; }
.ac-tiktok    { background: #010101; color: #fff; border-color: #010101; }
.ac-linkedin  { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.ac-facebook:hover, .ac-instagram:hover, .ac-apple:hover, .ac-x:hover, .ac-tiktok:hover, .ac-linkedin:hover { filter: brightness(1.18); border-color: transparent; }

.ac-divider {
  position: relative; text-align: center;
  font-size: 11px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase;
  margin: 4px auto;
}
.ac-divider::before, .ac-divider::after {
  content: ''; position: absolute; top: 50%;
  width: calc(50% - 24px); height: 1px; background: var(--border);
}
.ac-divider::before { left: 0; } .ac-divider::after { right: 0; }
.ac-divider span { background: var(--paper); padding: 0 8px; position: relative; }

.ac-email-btn { width: 100%; height: 50px; justify-content: center; font-size: 15px; }
.ac-foot { font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; }
.ac-foot .link { font-size: 12px; }

.ac-side {
  padding: 22px;
  background: var(--bg-2);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 12px;
  height: fit-content;
}
.ac-side-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ac-side-list li { font-size: 13px; color: var(--ink-2); padding: 8px 12px; background: var(--paper); border-radius: 8px; border: 1px solid var(--border); }
.ac-side-list li::before { content: '✓'; color: var(--good); margin-right: 8px; font-weight: 700; }
.ac-side-note { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; line-height: 1.5; margin-top: 4px; }

/* Provider modal */
.ac-provider-modal { width: min(440px, 100%); padding: 0; overflow: hidden; }
.ac-prov-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.ac-prov-close { background: transparent; border: 0; font-size: 22px; cursor: pointer; margin-left: auto; }
.ac-prov-body-wrap { padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 14px; }
.ac-prov-title { font-family: var(--serif); font-size: 24px; }
.ac-prov-sub { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.ac-prov-accounts { display: flex; flex-direction: column; gap: 6px; }
.ac-prov-account {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--paper); cursor: pointer; font: inherit; color: inherit;
  text-align: left;
  transition: background 120ms;
}
.ac-prov-account:hover { background: var(--bg-2); }
.ac-prov-account-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px;
}
.ac-prov-account-avatar-other { background: var(--bg-2); color: var(--ink-2); border: 1px dashed var(--border-2); font-family: var(--mono); }
.ac-prov-account-body { flex: 1; min-width: 0; }
.ac-prov-account-name { font-size: 14px; font-weight: 500; }
.ac-prov-account-email { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.ac-prov-account-arrow { color: var(--ink-3); font-size: 18px; }
.ac-prov-foot { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; line-height: 1.5; padding-top: 8px; border-top: 1px dashed var(--border-2); }

/* Form */
.ac-form { display: flex; flex-direction: column; gap: 14px; }
.ac-prov-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2); border-radius: 10px;
  border: 1px solid var(--border);
}
.ac-prov-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px;
}
.ac-prov-from { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }
.ac-prov-email { font-size: 13px; color: var(--ink); font-weight: 500; }

.ac-foot-row { display: flex; gap: 8px; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--border); }

.ac-success { text-align: center; align-items: center; padding: 48px 40px; }
.ac-success-mark {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--good); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700;
}
.ac-success-actions { display: flex; gap: 10px; margin-top: 8px; }
.ac-success-meta { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; margin-top: 12px; }

/* Estado de "cuenta creada pero email sin verificar" — color ámbar en lugar de verde */
.ac-success-unverified .ac-success-mark {
  background: #b7791f;          /* ámbar oscuro */
  color: #fff;
}

/* ─── Step: verify-email ─── */
.ac-verify { text-align: center; align-items: center; padding: 44px 40px; gap: 12px; display: flex; flex-direction: column; }
.ac-verify-icon {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.ac-verify-note {
  background: #fff8e6;
  border: 1px solid #f0d68a;
  color: #6e4a00;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  max-width: 520px;
  margin: 12px 0 6px;
  text-align: left;
}
.ac-verify-actions {
  display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 6px;
}
.ac-verify-actions .btn { min-width: 280px; }
.ac-verify-skip { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.ac-verify-foot { font-size: 11px; color: var(--ink-3); margin-top: 14px; max-width: 520px; }

/* ─── Mi Cuenta · chip de verificación de email ─── */
.mc-verif-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 3px 10px;
  cursor: help;
}
.mc-verif-ok {
  background: var(--good-tint);
  color: var(--good);
  border: 1px solid color-mix(in oklab, var(--good) 40%, transparent);
}
.mc-verif-pending {
  background: #fff4d6;
  color: #8a5b00;
  border: 1px solid #f0d68a;
}

/* Banner debajo del header que aparece cuando el email no está verificado */
.mc-verif-banner {
  margin-top: 14px;
  background: #fff8e6;
  border: 1px solid #f0d68a;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.mc-verif-banner-t {
  font-size: 14px; font-weight: 600; color: #6e4a00;
}
.mc-verif-banner-d {
  font-size: 13px; color: #6e4a00; line-height: 1.5;
}
.mc-verif-banner-actions {
  display: flex; gap: 12px; align-items: center; margin-top: 4px; flex-wrap: wrap;
}
.mc-verif-banner-actions .btn { height: 32px; padding: 0 14px; font-size: 12px; }

/* Botón de renuncia a la precandidatura (destructivo). */
.mc-renunciar { height: 34px; padding: 0 14px; font-size: 12.5px; color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, var(--border)); }
.mc-renunciar:hover:not(:disabled) { background: var(--danger-tint, oklch(0.96 0.05 25)); border-color: var(--danger); }
.mc-verif-resend { font-size: 12px; }

/* ─── Visibilidad del perfil ─── */
.mc-vis {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; background: var(--surface, transparent);
}
.mc-vis.is-oculto {
  border-color: color-mix(in oklab, var(--ink-3) 45%, var(--border));
  background: color-mix(in oklab, var(--ink-3) 6%, transparent);
}
.mc-vis-main { display: flex; align-items: center; gap: 14px; }
.mc-vis-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
}
.mc-vis.is-oculto .mc-vis-ico {
  background: color-mix(in oklab, var(--ink-3) 14%, transparent); color: var(--ink-2, var(--ink-3));
}
.mc-vis-txt { flex: 1; min-width: 0; }
.mc-vis-t { font-size: 15px; font-weight: 600; }
.mc-vis-d { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.mc-vis-switch {
  flex-shrink: 0; width: 48px; height: 28px; border-radius: 999px;
  border: none; padding: 0; cursor: pointer; position: relative;
  background: color-mix(in oklab, var(--ink-3) 40%, transparent);
  transition: background 160ms ease;
}
.mc-vis-switch.on { background: var(--primary); }
.mc-vis-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.mc-vis-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; transition: transform 160ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.mc-vis-switch.on .mc-vis-knob { transform: translateX(20px); }
.mc-vis-lock {
  margin-top: 12px; font-size: 12px; line-height: 1.45;
  color: var(--ink-2, var(--ink-3));
  background: color-mix(in oklab, var(--warn, #b8860b) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--warn, #b8860b) 30%, var(--border));
  border-radius: 10px; padding: 10px 12px;
}
.mc-vis-msg { margin-top: 10px; font-size: 12px; color: var(--ink-3); }

/* ─── Admin ─── */
.adm-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 0 22px; gap: 22px; }
.adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.adm-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.adm-search {
  height: 36px; padding: 0 14px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--bg-2);
  font: inherit; color: var(--ink);
  min-width: 240px; outline: none;
}
.adm-search:focus { background: var(--paper); border-color: var(--primary); }

.adm-table-wrap { padding: 0; overflow: hidden; }
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table thead { background: var(--bg-2); }
.adm-table th, .adm-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.adm-table th {
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tr.is-inactive { opacity: 0.55; }
.adm-cell-mono { font-size: 11px; color: var(--ink-2); }
.adm-tipo-select { height: 30px; padding: 0 8px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--paper); font-size: 12px; }

.adm-user-cell { display: flex; align-items: center; gap: 10px; }
.adm-user-body { display: flex; flex-direction: column; gap: 1px; }
.adm-user-name { font-weight: 500; font-size: 13px; }
.adm-user-email { font-size: 11px; color: var(--ink-3); }

.adm-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.adm-pill.is-on  { background: var(--good-tint);   color: var(--good); }
.adm-pill.is-off { background: var(--bg-2);        color: var(--ink-3); }

.adm-empty { padding: 22px; color: var(--ink-3); text-align: center; font-size: 11px; }

.adm-aut-groups { display: flex; flex-direction: column; gap: 14px; }
.adm-aut-group { padding: 0; overflow: hidden; }
.adm-aut-group-h { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.adm-aut-group-t { font-family: var(--serif); font-size: 17px; }
.adm-aut-group-meta { font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }

.adm-prop-cell { display: flex; flex-direction: column; gap: 4px; max-width: 360px; }
.adm-prop-id { font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; }
.adm-prop-title { font-size: 13px; line-height: 1.35; }

.adm-moderation { display: flex; flex-direction: column; gap: 10px; }
.adm-mod-card { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.adm-mod-card.t-apoyo    { border-left: 3px solid var(--good); }
.adm-mod-card.t-pregunta { border-left: 3px solid var(--primary); }
.adm-mod-card.t-critica  { border-left: 3px solid var(--accent); }
.adm-mod-head { display: flex; align-items: center; gap: 12px; }
.adm-mod-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.adm-mod-author { font-size: 14px; font-weight: 500; }
.adm-mod-sub { font-size: 10px; color: var(--ink-3); letter-spacing: 0.04em; }
.adm-mod-context { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--ink-2); }
.adm-mod-context .eyebrow { margin: 0; }
.adm-mod-text { font-size: 14px; line-height: 1.55; color: var(--ink); padding-top: 4px; border-top: 1px dashed var(--border-2); }
.adm-mod-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 6px; border-top: 1px dashed var(--border-2); }

/* ── Hilo de mensajería (chat) — usado en Mensajes (usuario) y bandeja admin ── */
.msg-thread, .adm-mod-thread {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 10px; border-top: 1px dashed var(--border-2);
}
.msg-bubble {
  max-width: 78%; padding: 9px 13px; border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 3px;
}
.msg-bubble.from-user {
  align-self: flex-end; background: var(--primary); color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-bubble.from-admin {
  align-self: flex-start; background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--border-2); border-bottom-left-radius: 4px;
}
.msg-bubble-who { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.85; }
.msg-bubble-text { white-space: pre-wrap; }
.msg-bubble-time { font-size: 10px; opacity: 0.7; align-self: flex-end; }
.msg-bubble.from-admin .msg-bubble-time { align-self: flex-start; }
.msg-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 4px; }
.msg-reply textarea {
  flex: 1; resize: vertical; min-height: 40px;
  padding: 8px 11px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--bg-1);
  font: inherit; font-size: 14px; color: var(--ink);
}
.msg-reply .btn { white-space: nowrap; }

/* ── Vista Mensajes del usuario ── */
.msg-view .msg-new-btn { white-space: nowrap; }
.msg-compose { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.msg-compose-h { font-size: 15px; font-weight: 600; }
.msg-compose .fld { display: flex; flex-direction: column; gap: 5px; }
.msg-compose .fld .l { font-size: 12px; color: var(--ink-2); letter-spacing: 0.02em; }
.msg-compose .fld input, .msg-compose .fld select, .msg-compose .fld textarea {
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--border-2); background: var(--bg-1);
  font: inherit; font-size: 14px; color: var(--ink); resize: vertical;
}
.msg-compose-actions { display: flex; gap: 8px; justify-content: flex-end; }
.msg-list { display: flex; flex-direction: column; gap: 12px; }
.msg-convo { padding: 0; overflow: hidden; }
.msg-convo-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer;
}
.msg-convo.is-open .msg-convo-head { border-bottom: 1px dashed var(--border-2); }
.msg-convo-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-convo-asunto { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.msg-convo-sub { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.msg-convo-chev { color: var(--ink-3); font-size: 12px; }
.msg-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); display: inline-block; }
.msg-convo .msg-thread { padding: 14px 18px; border-top: none; }

/* Burbuja del asistente automático (lado admin, acento distinto) */
.msg-bubble.from-admin.is-auto {
  background: var(--primary-tint); border-color: var(--primary);
}
.msg-bubble.is-auto .msg-bubble-who { color: var(--primary); }

/* Nota de auto-respuesta: la consulta no se deriva al equipo */
.msg-auto-note {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  background: var(--primary-tint); border: 1px solid var(--border-2);
  border-left: 3px solid var(--primary);
  border-radius: 10px; padding: 10px 13px;
}
.msg-auto-note strong { color: var(--ink); }
.msg-auto-pending {
  font-size: 12px; color: var(--ink-3); padding: 6px 2px;
  display: flex; align-items: center; gap: 6px;
}

/* Sidebar admin section */
.side-section-h {
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink-3);
  padding: 16px 14px 4px;
  margin-top: 8px;
  border-top: 1px dashed var(--border);
}
.side-item.is-admin .si-label::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  background: var(--primary); border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}

.user-chip.t-adm  { background: var(--primary-tint); color: var(--primary); }
.user-chip.t-adm::before { content: '★'; }

@media (max-width: 980px) {
  .adm-kpis { grid-template-columns: repeat(2, 1fr); }
  .adm-table { font-size: 12px; }
  .adm-table th, .adm-table td { padding: 10px 12px; }
}
@media (max-width: 700px) {
  .pdh-title { font-size: 28px; }
  .pdh-meta { grid-template-columns: 1fr; }
  .pd-imgs { grid-template-columns: 1fr; }
  .iu-grid { grid-template-columns: repeat(2, 1fr); }
}
.aut-detail { display: flex; flex-direction: column; gap: 16px; }
.aut-detail .pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.aut-detail .pd-name h2 { font-family: var(--serif); font-size: 28px; line-height: 1.1; margin: 4px 0 6px; letter-spacing: -0.01em; }
.aut-detail .pd-sub { font-size: 12px; color: var(--ink-2); }

.aut-alert {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px;
  padding: 14px;
  background: color-mix(in oklab, var(--danger) 6%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--danger) 28%, var(--border));
  border-radius: 10px;
}
.aut-alert-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--danger); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.aut-alert-body { display: flex; flex-direction: column; gap: 6px; }
.aut-alert-body p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.aut-alert-body strong { color: var(--ink); }
.aut-alert-actions { display: flex; gap: 16px; margin-top: 4px; }

.aut-organos { display: flex; flex-direction: column; gap: 18px; }
.aut-organo {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.aut-organo.is-open { border-color: color-mix(in oklab, var(--ink) 16%, var(--border)); }
.aut-organo-h {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background 120ms ease;
}
.aut-organo-h:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.aut-organo-h:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: inherit; }
.aut-organo.is-open .aut-organo-h { border-bottom: 1px dashed var(--border-2); }
.aut-organo-h-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.aut-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 12px; color: var(--ink-2);
  transition: transform 180ms ease;
  flex-shrink: 0;
}
.aut-chevron.open { transform: rotate(90deg); color: var(--ink); }
.aut-organo-t { font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.aut-organo-meta { font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }

.aut-list {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px 10px;
}
.aut-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 8px;
  border-radius: 8px;
  transition: background 120ms ease;
}
.aut-row:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.aut-row.suspendida { background: color-mix(in oklab, var(--danger) 5%, transparent); }
.aut-row-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aut-row-name { font-size: 14px; color: var(--ink); font-weight: 500; }
.aut-row-cargo { font-size: 11px; color: var(--ink-2); letter-spacing: 0.02em; }
.aut-row-meta { text-align: right; }
.aut-row-meta .eyebrow { font-size: 9px; }
.aut-row-desde { font-size: 11px; color: var(--ink-2); }
.aut-row-link { font-size: 12px; }

/* Nat-card overrides para autoridades */
.nat-card.has-issue { border-color: color-mix(in oklab, var(--danger) 35%, var(--border)); }
.nc-issue { color: var(--danger); font-weight: 600; }

@media (max-width: 700px) {
  .aut-row { grid-template-columns: 36px 1fr; }
  .aut-row-meta, .aut-row-link { grid-column: 1 / -1; text-align: left; padding-left: 48px; }
}
.form-check { display: flex; gap: 10px; padding: 12px; background: var(--bg-2); border-radius: 8px; align-items: flex-start; }
.form-check input { margin-top: 3px; }
.form-check span { font-size: 13px; font-weight: 500; }
.fc-hint { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; margin-top: 4px; }

/* ─── Carta ─── */
.carta-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 14px 0 22px; gap: 22px; }
.carta-actions { display: flex; gap: 8px; }

.carta-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
.carta-toc { padding: 16px 14px; max-height: calc(100vh - 220px); overflow-y: auto; position: sticky; top: 80px; }
.toc-head { padding: 0 8px 12px; }
.toc-item {
  display: grid; grid-template-columns: 40px 1fr;
  gap: 10px; align-items: center;
  padding: 10px 8px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left; border-radius: 8px;
  margin-bottom: 2px;
}
.toc-item:hover { background: var(--bg-2); }
.toc-item.on { background: var(--ink); color: var(--bg); }
.toc-num { font-size: 11px; color: var(--ink-3); }
.toc-item.on .toc-num { color: oklch(0.7 0.03 270); }
.toc-name { font-size: 13px; font-weight: 500; line-height: 1.25; }
.toc-arts { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.toc-item.on .toc-arts { color: oklch(0.7 0.03 270); }

.carta-content { padding: 32px 38px; }
.cc-eyebrow { margin-bottom: 8px; }
.cc-title { font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 14px; }
.cc-p { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 14px 0; max-width: 720px; }
.cc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--border-2); }
.cc-card { padding: 16px; background: var(--bg-2); border-radius: var(--r); border: 1px solid var(--border); }
.ccc-art { font-size: 11px; color: var(--primary); margin-bottom: 6px; }
.ccc-t { font-weight: 500; font-size: 14px; line-height: 1.3; margin-bottom: 6px; }
.ccc-d { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.cc-note { margin-top: 28px; padding-top: 16px; border-top: 1px dashed var(--border-2); font-size: 12px; color: var(--ink-3); font-style: italic; }

/* ─── Density compact ─── */
[data-density="compact"] .stat-value { font-size: 30px; }
[data-density="compact"] .hs-title { font-size: 44px; }
[data-density="compact"] .ch-title { font-size: 34px; }
[data-density="compact"] .cand-card { padding: 14px; }
[data-density="compact"] .perfil-hero { padding: 20px 24px; }
[data-density="compact"] .panel-head { padding: 14px 18px; }
[data-density="compact"] .stat { padding: 14px 16px; }

.app-content.is-booth { padding: 0; max-width: none; }

/* ─────────────────────────────────────────────────────────
   CABINA DIGITAL DE VOTACIÓN
   ───────────────────────────────────────────────────────── */
.booth-shell {
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  min-height: calc(100vh - 0px);
}

/* Top bar */
/* En mobile no mostramos el header de la cabina de votación. */
@media (max-width: 700px) { .booth-top { display: none; } }
/* Modo votación en mobile (body.is-votando lo setea app.jsx): pantalla limpia,
   sin el header de la plataforma ni la burbuja del chat de chatbot.js. */
@media (max-width: 700px) {
  body.is-votando .topbar { display: none; }
  body.is-votando .pdf-chat-btn { display: none !important; }
}
.booth-top {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 32px;
  background: var(--ink); color: var(--bg);
  border-bottom: 1px solid var(--border);
}
.booth-brand { display: flex; align-items: center; gap: 12px; flex: 1; }
.booth-brand-mark {
  width: 38px; height: 38px;
  background: var(--bg); color: var(--ink);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 19px;
}
.booth-brand-name { font-size: 17px; line-height: 1.2; }
.booth-brand-meta { font-size: 10px; letter-spacing: 0.1em; color: oklch(0.78 0.025 270); text-transform: uppercase; margin-top: 2px; }
.booth-mesa { font-size: 11px; color: oklch(0.78 0.025 270); letter-spacing: 0.05em; }
.booth-exit {
  background: transparent; border: 1px solid oklch(0.5 0.02 270);
  color: oklch(0.85 0.02 270); border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer; font: 500 12px var(--sans);
  display: inline-flex; align-items: center; gap: 6px;
}
.booth-exit:hover { background: oklch(0.3 0.02 270); color: white; }

/* Steps rail */
.booth-steps {
  display: flex; justify-content: center; gap: 0;
  padding: 22px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}
.bs-item {
  display: flex; align-items: center; gap: 10px;
  position: relative; padding-right: 26px;
}
.bs-item:last-child { padding-right: 0; }
.bs-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1.5px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  transition: all .2s ease;
}
.bs-label {
  font-size: 12px; font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
}
.bs-line {
  position: absolute; right: 0; top: 50%;
  width: 26px; height: 1px;
  background: var(--border-2);
}
.bs-item.on .bs-dot { background: var(--primary); color: white; border-color: var(--primary); }
.bs-item.on .bs-label { color: var(--primary); font-weight: 600; }
.bs-item.done .bs-dot { background: var(--good); color: white; border-color: var(--good); }
.bs-item.done .bs-label { color: var(--ink); }
.bs-item.done .bs-line { background: var(--good); }

/* Main */
.booth-main {
  padding: 48px 24px;
  display: flex; align-items: flex-start; justify-content: center;
}
.booth-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 56px;
  width: min(640px, 100%);
  box-shadow: 0 24px 60px -24px oklch(0.20 0.08 268 / 0.18);
  display: flex; flex-direction: column;
  gap: 20px;
}
.booth-card.wide { width: min(820px, 100%); }
.bc-eyebrow { letter-spacing: 0.12em; }
.bc-title {
  font-size: 48px; line-height: 1.02; letter-spacing: -0.02em;
  font-weight: 500; text-wrap: balance;
  margin: 0;
}
.bc-title-sm {
  font-size: 32px; line-height: 1.1; letter-spacing: -0.015em;
  font-weight: 500; text-wrap: balance;
  margin: 0;
}
.bc-lede {
  font-size: 16px; line-height: 1.55; color: var(--ink-2);
  margin: 0;
}
.bc-foot {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.btn.big { height: 48px; padding: 0 24px; font-size: 15px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn.danger {
  background: color-mix(in oklab, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--danger) 38%, transparent);
  color: var(--danger);
}
.btn.danger:hover { background: color-mix(in oklab, var(--danger) 18%, transparent); }
.cf-ok {
  border-radius: var(--r-md, 10px); padding: 10px 12px; font-size: 13px;
  color: var(--good); background: var(--good-tint);
  border: 1px solid color-mix(in oklab, var(--good) 35%, transparent);
}
/* Checklist de requisitos de precandidatura (Mi cuenta → Proponer candidatura) */
.precand-reqs {
  list-style: none; margin: 14px auto 18px; padding: 0;
  max-width: 320px; text-align: left; display: grid; gap: 8px;
}
.precand-reqs li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink-2);
}
.precand-reqs li .pr-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; font-size: 12px; flex: 0 0 auto;
}
.precand-reqs li.ok { color: var(--ink-1); }
.precand-reqs li.ok .pr-mark { color: var(--good); background: var(--good-tint); }
/* Ítems pendientes: el label es un link para ir a completarlos. */
.precand-req-link { font: inherit; color: var(--primary); font-weight: 600; padding: 0; }
.precand-req-link:hover { text-decoration: underline; }
.precand-reqs li.pend .pr-mark {
  color: var(--ink-3); background: var(--bg-2);
  border: 1px solid var(--border);
}

/* Panel de elegibilidad para el cargo (formulario de postulación) */
.elig-panel {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border);
}
.elig-panel.ok { border-color: color-mix(in oklab, var(--good, #147a45) 45%, var(--border)); background: color-mix(in oklab, var(--good, #147a45) 7%, transparent); }
.elig-panel.pend { border-color: color-mix(in oklab, var(--warn, #b8860b) 40%, var(--border)); background: color-mix(in oklab, var(--warn, #b8860b) 7%, transparent); }
.elig-head { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.elig-panel.ok .elig-head { color: var(--good, #147a45); }
.elig-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.elig-list li { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.elig-list li.ok { color: var(--ink-1); }
.elig-mark { display: inline-block; width: 16px; text-align: center; font-weight: 700; }
.elig-list li.ok .elig-mark { color: var(--good, #147a45); }
.elig-list li.pend .elig-mark { color: var(--warn, #b8860b); }
.elig-detail { color: var(--ink-3); }
.elig-fuente { margin-top: 10px; font-size: 11px; color: var(--ink-3); font-style: italic; }

/* Identidad */
.id-card {
  display: grid; grid-template-columns: auto 1fr; gap: 28px;
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.ic-left { display: flex; flex-direction: column; align-items: center; }
.ic-name { font-family: var(--serif); font-size: 26px; line-height: 1.1; margin-bottom: 14px; }
.ic-table { font-size: 13px; }
.ic-table td { padding: 6px 0; vertical-align: top; }
.ic-table td:first-child { color: var(--ink-3); padding-right: 18px; width: 32%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

.elec-summary {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 16px 22px;
  background: var(--primary-tint);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent);
  border-radius: var(--r);
}
.es-title { font-size: 18px; margin: 4px 0 2px; font-weight: 500; }
.es-meta { font-size: 11px; color: var(--ink-3); }
.es-leg { font-size: 11px; color: var(--ink-2); margin-top: 6px; }

/* Reglas */
.reglas { display: flex; flex-direction: column; gap: 16px; }
.regla {
  display: grid; grid-template-columns: 60px 1fr;
  gap: 18px; align-items: start;
  padding: 18px 22px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.r-num { font-size: 52px; line-height: 1; color: var(--primary); }
.regla h3 { font-family: var(--serif); font-size: 20px; line-height: 1.2; font-weight: 500; margin-bottom: 4px; }
.regla p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* Boleta */
.boleta-meta { font-size: 12px; color: var(--ink-3); margin-top: -4px; }
.boleta { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.boleta-row {
  display: grid; grid-template-columns: 28px auto 1fr auto;
  gap: 16px; align-items: center;
  padding: 16px 20px;
  background: var(--paper);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: all .15s ease;
  position: relative;
}
.boleta-row input { position: absolute; opacity: 0; pointer-events: none; }
.bm-radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: var(--paper);
  position: relative;
  transition: all .15s ease;
}
.boleta-row.on .bm-radio {
  border-color: var(--primary);
}
.boleta-row.on .bm-radio::after {
  content: ''; position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--primary);
}
.boleta-row:hover { border-color: var(--ink-3); background: var(--bg-2); }
.boleta-row.on { border-color: var(--primary); background: var(--primary-tint); }
.bm-name { font-size: 16px; font-weight: 500; }
.bm-prof { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.bm-lema { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.3; }
.bm-meta { text-align: right; }
.bm-pct { font-family: var(--serif); font-size: 22px; line-height: 1; font-weight: 500; }
.boleta-row.blanco { border-style: dashed; }
.bm-blanco-icon {
  width: 48px; height: 48px;
  background: var(--bg-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--ink-3);
  font-family: var(--serif);
}
.bm-blanco-icon.big { width: 64px; height: 64px; font-size: 28px; }

/* Revisión */
.revis {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rev-line {
  padding: 16px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 140px 1fr;
  gap: 24px; align-items: center;
}
.rev-line:last-child { border-bottom: 0; }
.rev-line.big { background: var(--primary-tint); padding: 24px 22px; align-items: start; }
.rev-val { font-size: 15px; font-weight: 500; }
.rev-voto { display: flex; gap: 18px; align-items: center; }
.rv-name { font-family: var(--serif); font-size: 26px; line-height: 1.1; font-weight: 500; }
.rv-prof { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.rv-lema { font-size: 14px; color: var(--ink-2); margin-top: 6px; }

/* Firma */
.firma-box {
  display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: start;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.fb-icon {
  width: 50px; height: 50px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
}
.fb-t { font-family: var(--serif); font-size: 18px; line-height: 1.2; font-weight: 500; margin-bottom: 4px; }
.firma-box p { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0; }

.ack {
  display: grid; grid-template-columns: 22px 1fr;
  gap: 14px; align-items: start;
  padding: 18px 22px;
  background: var(--accent-tint);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: var(--r);
  cursor: pointer;
}
.ack input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); }
.ack span { font-size: 13.5px; line-height: 1.55; color: var(--ink); }

/* Comprobante */
.ok-mark {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--good-tint);
  color: var(--good);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 6px;
  box-shadow: 0 0 0 8px color-mix(in oklab, var(--good) 12%, transparent);
}
.booth-card .ok-mark + .bc-eyebrow { text-align: center; }
.booth-card .ok-mark ~ .bc-title { text-align: center; }

.comprobante {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.cmp-head {
  display: flex; justify-content: space-between; align-items: center; gap: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border-2);
}
.cmp-folio { font-size: 22px; margin-top: 4px; font-weight: 500; }
.qr {
  display: grid; gap: 1px;
  background: var(--paper);
  padding: 6px;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  width: 84px; height: 84px;
  grid-template-rows: repeat(12, 1fr);
}
.qr-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; }
.qr-px { background: var(--paper); }
.qr-px.on { background: var(--ink); }

.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table td { padding: 8px 0; font-size: 13px; vertical-align: top; }
.cmp-table td:first-child { width: 38%; }
.cmp-table tr { border-bottom: 1px dashed var(--border-2); }
.cmp-table tr:last-child { border-bottom: 0; }

.cmp-hash {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.cmp-hash-val {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  word-break: break-all;
  margin: 8px 0;
  cursor: pointer;
  padding: 8px 0;
}
.cmp-hash-val:hover { color: var(--primary); }
.cmp-hash-note { font-size: 11px; color: var(--ink-3); line-height: 1.5; }

.cmp-verify {
  font-size: 11px; color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex; gap: 6px; align-items: center;
}
.cv-url { color: var(--primary); font-weight: 600; }

/* Booth footer */
.booth-foot {
  display: flex; justify-content: space-between;
  padding: 14px 32px;
  background: var(--ink); color: oklch(0.65 0.025 270);
  font-size: 10px; letter-spacing: 0.08em;
}

@media (max-width: 800px) {
  .booth-top { padding: 14px 18px; flex-wrap: wrap; gap: 10px; }
  .booth-mesa { display: none; }
  .booth-steps { padding: 14px 12px; overflow-x: auto; justify-content: flex-start; }
  .booth-card { padding: 30px 24px; border-radius: 14px; }
  .bc-title { font-size: 32px; }
  .bc-title-sm { font-size: 24px; }
  .id-card, .firma-box, .regla, .boleta-row { grid-template-columns: 1fr; }
  .rev-line { grid-template-columns: 1fr; gap: 8px; }
}

/* ─── Foto de perfil ─── */
.mc-avatar-img {
  /* Mismo tamaño que la foto en Mi Perfil (.ph-avatar-wrap: 144px). */
  width: 144px; height: 144px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--border-2);
  flex-shrink: 0;
}
.uw-avatar-img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.foto-uploader {
  display: flex; gap: 24px; align-items: center;
  padding: 18px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.foto-preview {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px dashed var(--border-2);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.foto-empty {
  font-family: var(--serif);
  font-size: 36px; color: var(--ink-3);
  letter-spacing: -0.02em;
}
.foto-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.foto-actions .btn { min-width: 160px; justify-content: center; }
.foto-hint { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

/* ─── User widget (sidebar) ─── */
.user-widget {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 18px;
  cursor: pointer;
  text-align: left;
  font: inherit; color: inherit;
  transition: all .12s;
}
.user-widget:hover { border-color: var(--ink-3); }
.user-widget.active { border-color: var(--primary); background: var(--primary-tint); }
.uw-name { font-size: 13px; font-weight: 500; line-height: 1.2; }
.uw-meta { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.uw-prov { font-size: 10px; color: var(--ink-3); }
.uw-arrow { color: var(--ink-3); font-size: 18px; }

.user-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font: 600 10px var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.user-chip.t-bas  { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--border-2); }
.user-chip.t-afil { background: var(--good-tint); color: var(--good); }
.user-chip.t-afil::before { content: '✓'; }
.user-chip.topbar-chip { padding: 4px 10px; font-size: 11px; }

/* ─── Mi cuenta ─── */
.mc-head {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px;
  padding: 26px 32px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}
.mc-head-left { display: flex; gap: 22px; align-items: center; }

/* Portada / banner estilo redes sociales */
.mc-profile-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}
.mc-cover {
  position: relative;
  /* Misma proporción 4:1 que el recortador de portada: lo que se encuadra ahí
     es exactamente lo que se ve acá (sin re-recorte del background cover). */
  height: auto; aspect-ratio: 4 / 1; min-height: 96px;
  background: linear-gradient(120deg, oklch(0.62 0.16 258), oklch(0.52 0.21 288));
  background-size: cover; background-position: center;
}
.mc-cover-btns { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 2; }
.mc-cover-btn {
  border: none; cursor: pointer; font-size: 12.5px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; color: #fff;
  background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(4px);
  transition: background 120ms ease;
}
.mc-cover-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.6); }
.mc-cover-btn:disabled { opacity: 0.6; cursor: default; }
/* La tarjeta ya provee borde/sombra/radio: el header interno se aplana */
.mc-head--cover { border: none; border-radius: 0; box-shadow: none; margin-bottom: 0; padding-top: 16px; }
.mc-head--cover .mc-head-left { align-items: flex-start; }
/* La portada es un elemento posicionado; sin esto pintaría por encima del
   avatar. Elevamos el avatar para que quede POR DELANTE de la portada. */
.mc-cover { z-index: 0; }
.mc-avatar-wrap { margin-top: -74px; flex-shrink: 0; position: relative; z-index: 2; }
.mc-avatar-wrap .mc-avatar-img,
.mc-avatar-wrap .avatar {
  border: 4px solid var(--paper) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.mc-name { font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; margin: 8px 0; }
.mc-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mc-cta-card {
  background: var(--primary-tint);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent);
  border-radius: var(--r);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.mc-cta-card.afil { background: var(--good-tint); border-color: color-mix(in oklab, var(--good) 25%, transparent); }
.mc-cta-t { font-family: var(--serif); font-size: 22px; line-height: 1.15; font-weight: 500; }
.mc-cta-card p { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.mc-cta-card .btn { align-self: flex-start; margin-top: 6px; }
.mc-rights { list-style: none; padding: 0; margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.mc-rights li { padding: 4px 0; display: flex; gap: 8px; align-items: center; }
.mc-rights .mono { color: var(--good); font-weight: 700; }
.mc-next .mono { color: var(--primary); }

.mc-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.mc-tabs .pt-btn.locked { color: var(--ink-3); }
.lock-i { margin-left: 6px; font-size: 11px; }

/* ─── Tu participación en el PDF (Difusión + Referidos) ─── */
.mc-particip { padding: 28px 32px; margin-bottom: 16px; }
.mc-particip-h { margin-bottom: 8px; }
.mc-particip-seg {
  position: relative;
  padding: 22px 22px 24px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-2);
  margin-top: 18px;
}
.mc-particip-seg.seg-difusion { border-left: 3px solid var(--primary); }
.mc-particip-seg.seg-referidos { border-left: 3px solid var(--good); }
.mc-particip-seg-h {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
/* Segmentos colapsables (<details>/<summary>) */
.mc-particip-seg > summary.mc-particip-seg-h { cursor: pointer; list-style: none; }
.mc-particip-seg > summary.mc-particip-seg-h::-webkit-details-marker { display: none; }
.mc-particip-seg .seg-chev { margin-left: auto; flex-shrink: 0; color: var(--ink-3); font-size: 14px; transition: transform .2s ease; }
.mc-particip-seg[open] > summary .seg-chev { transform: rotate(180deg); }
.mc-particip-seg-n {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 15px; font-weight: 700;
  color: #fff; background: var(--ink);
}
.seg-difusion .mc-particip-seg-n { background: var(--primary); }
.seg-referidos .mc-particip-seg-n { background: var(--good); }
.mc-particip-seg-meta { min-width: 0; }
.mc-particip-seg-t { font-size: 20px; line-height: 1.15; margin: 2px 0 0; font-weight: 600; }
@media (max-width: 720px) {
  .mc-particip { padding: 20px 18px; }
  .mc-particip-seg { padding: 18px 16px; }
}

.mc-form { padding: 28px 32px; }
.mc-form-t { font-size: 30px; line-height: 1.1; margin: 6px 0 8px; font-weight: 500; }
/* Pestaña Propuestas de Mi Cuenta */
.mc-props-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mc-props-sec { margin: 20px 0 10px; }
.mc-props-empty { color: var(--ink-3); font-size: 14px; margin: 4px 0 6px; }
.mc-props-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-prop-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--paper); cursor: pointer;
  transition: border-color .14s ease, transform .1s ease, box-shadow .14s ease;
}
.mc-prop-row:hover { border-color: var(--primary); box-shadow: 0 6px 18px -12px oklch(0.20 0.10 268 / 0.3); }
.mc-prop-main { flex: 1; min-width: 0; }
.mc-prop-titulo { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-prop-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.mc-prop-apoyos { font-size: 13px; color: var(--ink-2); flex: none; }
.mc-prop-arrow { color: var(--primary); font-weight: 700; flex: none; }
.mc-form-d { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0 0 22px; max-width: 640px; }
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.mc-grid .form-row label { font-size: 10px; }

.mc-section {
  padding-top: 18px;
  margin-bottom: 18px;
  border-top: 1px solid var(--border);
}
.mc-section:first-of-type { border-top: 0; padding-top: 0; }
.mc-section-h { padding: 0 0 14px; color: var(--ink-3); letter-spacing: 0.12em; }

/* Modal extra wide */
.modal.modal-wide { width: min(900px, 100%); max-height: calc(100vh - 64px); }
.modal-sub { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; max-width: 540px; line-height: 1.5; }

.ficha-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ficha-grid .form-row label { font-size: 10px; }

/* ─── Trayectoria (Mi cuenta) ─── */
.mc-tray-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 22px;
  margin-bottom: 22px;
}
.mc-tray-list { display: flex; flex-direction: column; gap: 10px; }
.mc-tray-row {
  display: grid; grid-template-columns: 160px 1fr auto;
  gap: 22px; align-items: start;
  padding: 18px 20px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.mt-date { font-size: 12px; color: var(--ink-3); padding-top: 4px; }
.mt-rol-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt-rol { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.2; }
.mt-org { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.mt-desc { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 8px 0 0; }
.mt-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.mt-actions .link.danger:hover { color: var(--danger); border-bottom-color: var(--danger); }
.mt-tag {
  font: 600 10px var(--mono);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--ink-2);
}
.mt-tag.t-laboral      { background: var(--primary-tint); color: var(--primary); border-color: transparent; }
.mt-tag.t-voluntariado { background: var(--good-tint); color: var(--good); border-color: transparent; }
.mt-tag.t-publico      { background: var(--accent-tint); color: var(--accent-2); border-color: transparent; }
.mt-tag.t-partidario   { background: oklch(0.95 0.04 320); color: oklch(0.42 0.18 320); border-color: transparent; }
.mt-tag.t-estudios     { background: oklch(0.95 0.03 200); color: oklch(0.42 0.13 200); border-color: transparent; }
.mt-tag.t-militancia   { background: oklch(0.96 0.04 30);  color: oklch(0.50 0.18 30); border-color: transparent; }

.tray-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.te-icon { font-size: 40px; color: var(--ink-3); line-height: 1; }
.tray-empty h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 8px 0 4px; }
.tray-empty p { font-size: 14px; color: var(--ink-2); max-width: 420px; margin: 0 0 12px; line-height: 1.5; }

.tray-tipo-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.afil-trace {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 18px;
  margin: 18px auto 0;
  max-width: 420px;
  font-size: 12px;
  display: grid; gap: 6px;
}
.afil-trace span { color: var(--ink-3); margin-right: 8px; }

.locked-card {
  padding: 56px 32px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.locked-card .lc-icon { font-size: 36px; opacity: 0.6; }
.locked-card h2 { font-size: 28px; line-height: 1.1; font-weight: 500; }
.locked-card p { max-width: 480px; color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0; }

.cand-tipo-seg { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.cand-tipo-seg .tipo-radio { padding: 8px 14px; }

.actividad { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.act-row {
  display: grid; grid-template-columns: 120px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.act-date { font-size: 11px; color: var(--ink-3); }
.act-t { font-size: 14px; }
.act-tag {
  font: 600 10px var(--mono);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-2);
  color: var(--ink-3);
  border: 1px solid var(--border-2);
}
.act-tag.t-voto { background: var(--primary-tint); color: var(--primary); border-color: transparent; }
.act-tag.t-denuncia { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
.act-tag.t-seguridad { background: var(--accent-tint); color: var(--accent-2); border-color: transparent; }

/* Booth: lock screen */
.lock-circle {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
}

/* ─── Responsive ─── */
@media (max-width: 860px) {
  .sidebar { width: 260px; }
  .kpi-grid, .nat-grid, .den-kpis { grid-template-columns: repeat(2, 1fr); }
  .cand-grid, .prop-grid, .cc-grid, .prox-grid { grid-template-columns: repeat(2, 1fr); }
  .cols-2, .mapa-grid, .carta-layout { grid-template-columns: 1fr; }
  .hs-title { font-size: 38px; }
}
@media (max-width: 700px) {
  .kpi-grid, .nat-grid, .den-kpis, .cand-grid, .prop-grid, .cc-grid, .prox-grid { grid-template-columns: 1fr; }
  .elec-strip, .den-row-full, .perfil-hero { grid-template-columns: 1fr; }
  .es-date, .es-side, .drf-left, .drf-right { border: 0; padding: 0; }
  .seg-row { grid-template-columns: 1fr; gap: 8px; }
  .es-meta { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   📱 MOBILE — adaptaciones globales para plataforma.html
   ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Sidebar más estrecha en pantallas chicas */
  .sidebar { width: min(86vw, 320px); padding: 24px 18px 18px; }

  /* Topbar compacta */
  .topbar { padding: 10px 14px; gap: 10px; }
  .topbar-menu { width: 38px; height: 38px; }
  /* Logo 10% más chico en mobile (53px → ~48px) */
  .topbar-brand img { height: 48px; width: auto; }
  /* Logo CENTRADO en el header mobile (absoluto sobre la barra; el
     hamburger queda a la izquierda y las acciones a la derecha). */
  .topbar, .app-main .topbar { position: relative; }
  .topbar-brand {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  /* (El selector de idioma se muestra solo a visitantes no hispanohablantes;
     esa lógica vive en app/i18n.js vía la clase .i18n-foreign en <html>.) */
  .crumbs { font-size: 12px; gap: 6px; }
  .crumbs .sep { font-size: 10px; }
  .search { height: 38px; padding: 0 10px; min-width: 0; max-width: none; }
  .search input { font-size: 13px; }
  .search .kbd { display: none; }
  .topbar-actions { gap: 4px; }
  .topbar-actions .btn { padding: 0 10px; height: 36px; font-size: 12px; }

  /* Contenido general */
  .app-content { padding: 16px 12px 60px; }
  .card { border-radius: 12px; }
  .panel-head { padding: 14px 14px 10px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .panel-head h2 { font-size: 18px; line-height: 1.2; }
  .panel-head .eyebrow { font-size: 9px; }

  /* Hero del mapa */
  .mapa-hero { min-height: auto; padding: 30px 18px 30px; grid-template-columns: 1fr; gap: 18px; }
  .mapa-hero-title { font-size: 38px; }
  .mapa-hero-lede { font-size: 16px; max-width: none; }
  .mapa-hero-text { padding-left: 0; margin-top: 0; }
  .mapa-hero-map .mapa-svg { width: 100%; }
  .mapa-hero-map .mapa-svg svg { max-height: 520px; }
  .mapa-hero-map { transform: none !important; padding: 0; }

  /* Hero Parasitómetro */
  .castametro-hero { padding: 28px 16px; gap: 18px; }
  .castametro-hero-title { font-size: 38px; }
  .castametro-hero-lede { font-size: 15px; }
  .ch-stat-big { padding: 12px 14px; gap: 14px; }
  .ch-stat-big .ch-stat-v { font-size: 38px; }
  .ch-stat-big .ch-stat-l { font-size: 10px; }
  .ch-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .ch-stat-cell { padding: 10px 8px; }
  .ch-stat-cell-v { font-size: 22px; }
  .ch-stat-cell-l { font-size: 8px; }

  /* Parasitómetro layout principal */
  .castametro-intro h2 { font-size: 22px; }
  .castametro-lede { padding: 0 14px 4px; font-size: 13px; }

  /* Mapa Parasitómetro (provincial map) */
  .mm-layout { grid-template-columns: 1fr; min-height: 0; }
  .mm-side { border-left: 0; border-top: 1px solid var(--border); max-height: none; padding: 14px; }
  .mm-map-wrap { padding: 10px; }
  .mm-svg { max-height: 60vh; }
  .mm-legend { padding: 10px 14px; gap: 10px; font-size: 11px; }
  .mm-sw { width: 12px; height: 12px; }
  .mm-top10-item { grid-template-columns: 20px 48px 1fr; padding: 8px; gap: 8px; }
  .mm-top10-anios { min-width: 44px; padding: 6px 2px; }
  .mm-top10-anios-v { font-size: 18px; }
  .mm-top10-name { font-size: 13px; }
  .mm-top10-cargo, .mm-top10-party { font-size: 10px; }

  /* Tablero nacional "Líderes por jurisdicción": en móvil, fila compacta y
     escaneable (provincia · líder · apoyos) en vez de 24 tarjetas altas apiladas. */
  .nat-grid { padding: 12px; gap: 8px; }
  .nat-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
  .nc-head { flex-direction: column; align-items: flex-start; gap: 1px; flex: 0 0 auto; max-width: 88px; }
  .nc-code { font-size: 14px; font-weight: 700; color: var(--ink); }
  .nc-name { font-size: 10px; font-weight: 500; color: var(--ink-3); line-height: 1.15; flex: none; }
  .nc-leader { flex-direction: row; text-align: left; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
  .nc-leader .avatar { width: 42px !important; height: 42px !important; font-size: 16px !important; }
  .nc-l-info { align-items: flex-start; gap: 1px; min-width: 0; }
  .nc-l-name { font-size: 14px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nc-l-meta { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
  .nc-stats { display: flex; flex: 0 0 auto; border-top: 0; padding-top: 0; gap: 0; text-align: right; }
  .nc-stat { align-items: flex-end; gap: 0; }
  .nc-stat-v { font-size: 17px; }
  .nc-stat-l { font-size: 9px; }
  .nc-empty { padding: 0; flex: 1 1 auto; text-align: left; }

  /* Mapa-grid (Mapa view detalle + listado) */
  .mapa-grid { gap: 12px; margin-bottom: 12px; }
  .prov-detail { padding: 0; }
  .pd-head { padding: 14px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .pd-name h2 { font-size: 20px; }
  .pd-nivel { padding: 0 14px 12px; flex-direction: column; gap: 10px; align-items: stretch !important; }
  .pd-nivel .seg { width: 100%; }
  .pd-nivel .seg button { flex: 1; padding: 8px 6px; font-size: 11px; }
  .pd-top { padding: 14px; flex-direction: column; gap: 10px; align-items: flex-start; }
  .pd-title { font-size: 16px; }

  /* Cand-row (lista de precandidatos por jurisdicción): se vuelve apilada */
  .cand-list { padding: 0 14px 14px; }
  .cand-row {
    grid-template-columns: 32px 80px 1fr;
    grid-template-areas:
      "rank avatar mid"
      "bio  bio    bio"
      "bar  bar    bar"
      "pct  pct    pct"
      "ctr  ctr    ctr";
    row-gap: 10px;
    padding: 14px 4px;
  }
  .cand-row .cr-rank { grid-area: rank; }
  .cand-row .avatar { grid-area: avatar; width: 70px !important; height: 70px !important; font-size: 24px !important; }
  .cand-row .cr-mid { grid-area: mid; min-width: 0; }
  .cand-row .cr-bio { grid-area: bio; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cand-row .cr-bar { grid-area: bar; }
  .cand-row .cr-pct { grid-area: pct; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .cand-row .cp-num { font-size: 18px; }
  .cand-row .cr-counters { grid-area: ctr; flex-direction: row; gap: 8px; }
  .cand-row .cr-counter { flex: 1; justify-content: center; }
  .cand-row .cr-apoyo-block { width: 100%; justify-content: space-between; gap: 8px; }
  .cand-row .cr-apoyo-btn { padding: 7px 14px; font-size: 12px; }
  .cand-row-empty {
    grid-template-columns: 32px 70px 1fr;
    grid-template-areas:
      "rank avatar mid"
      "cta  cta    cta";
  }
  .cand-row-empty .cre-avatar { grid-area: avatar; width: 70px; height: 70px; justify-self: center; }
  .cand-row-empty .cre-msg { grid-area: mid; }
  .cand-row-empty .cre-cta { grid-area: cta; justify-self: stretch; }
  .cand-row-empty .cre-btn { width: 100%; justify-content: center; }

  /* Sliders (Candidatos destacados) */
  .destacados-marquee { padding: 10px 12px 14px; }

  /* Funcionarios table — controles + tabla con scroll horizontal */
  .func-controls { grid-template-columns: 1fr; gap: 10px; padding: 0 14px 12px; }
  .func-table-wrap { padding: 0 0 12px; }
  .func-table tbody td, .func-table thead th { padding: 8px 6px; font-size: 11px; }
  .ft-name { font-size: 13px; }
  .ft-anios { font-size: 14px; min-width: 50px; }
  .ft-mandato, .ft-mandato-th { min-width: 180px; max-width: 220px; }
  .ft-partidos-th { min-width: 150px; }
  .ft-partido-chips { max-width: 200px; }
  .seg.func-tipo-seg { overflow-x: auto; }
  .seg.func-tipo-seg button { white-space: nowrap; flex: 0 0 auto; min-width: 90px; padding: 9px 12px; }

  /* Modales */
  .modal { width: min(96vw, 480px) !important; padding: 18px !important; max-height: 90vh; overflow-y: auto; }
  .modal-head h2 { font-size: 18px !important; }

  /* Calendario / Elecciones */
  .es-meta { grid-template-columns: 1fr; }

  /* Perfil del precandidato */
  .perfil-hero { padding: 18px 14px; gap: 14px; }
  .perfil-hero.has-cover { padding-top: 0; }
  .ph-cover { height: auto; margin: 0 -14px 4px; }  /* 4:1 también en mobile */
  .perfil-hero.has-cover .ph-left { margin-top: -56px; }
  .ph-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Booth (Votación) — full-screen on mobile */
  .app-content.is-booth { padding: 0; }
}

/* ── Mobile ≤480: el header compartido debe entrar completo (sin scroll lateral) ── */
@media (max-width: 480px) {
  /* Que la marca y las acciones puedan encogerse en vez de desbordar */
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar-brand { min-width: 0; flex-shrink: 1; }
  .topbar-brand img { height: 40px; }
  .topbar-actions { gap: 6px; min-width: 0; flex-shrink: 1; }
  .topbar-auth-cta { gap: 8px !important; min-width: 0; }
  /* Botones de auth compactos — sobrescribe los estilos inline del JSX */
  .topbar-auth-cta .link { font-size: 12px !important; white-space: nowrap; }
  .topbar-auth-cta .btn.primary {
    height: 34px !important; padding: 0 12px !important;
    font-size: 12px !important; white-space: nowrap;
  }
  /* Red de seguridad: ningún medio empuja el ancho más allá del viewport */
  img, svg, video, iframe, canvas { max-width: 100%; }
}

/* iPhone SE / pantallas muy chicas */
@media (max-width: 380px) {
  .topbar { padding: 8px 10px; gap: 6px; }
  .topbar-brand img { height: 38px; }
  .topbar-auth-cta { gap: 6px !important; }
  .topbar-auth-cta .link { font-size: 11px !important; }
  .topbar-auth-cta .btn.primary { padding: 0 10px !important; font-size: 11px !important; }
  .crumbs { display: none; } /* en super-chicas, dejá sólo búsqueda + brand */
  .mapa-hero-title { font-size: 30px; }
  .castametro-hero-title { font-size: 30px; }
  .ch-stat-big .ch-stat-v { font-size: 30px; }
  .panel-head h2 { font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Permanencia de Datos — vista
   ───────────────────────────────────────────────────────────────────────── */

.view.permanencia {
  display: flex; flex-direction: column; gap: 48px;
}

/* Hero — layout: top en 2 columnas (texto · blockchain anim), counters debajo */
.perm-hero {
  display: flex; flex-direction: column; gap: 24px;
  padding: 40px 0 10px;
}
.perm-hero-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.perm-hero-text { display: flex; flex-direction: column; gap: 14px; }
.perm-hero-eyebrow { color: var(--primary); }
.perm-hero-title {
  font-size: 64px; line-height: 1.02; letter-spacing: 0;
  margin: 0;
}
.perm-hero-title em { color: var(--primary); font-style: normal; }
.perm-hero-lede {
  font-size: 17px; line-height: 1.6; color: var(--ink-2);
  margin-top: 4px;
}

/* ─── Constelación de cubos wireframe + líneas conectoras ───────────────
   6 cubos 3D flotando en distintas posiciones, conectados por líneas SVG
   con glow azul. Cada cubo está hecho de 6 caras transparentes con borde →
   se ve como esqueleto/wireframe. Cada uno gira sobre sus 3 ejes a velocidad
   diferente, y flota verticalmente con un bob suave. Mismo look que las
   imágenes "blockchain network" que circulan en internet. */
.perm-cubes-bg {
  position: relative;
  width: 100%;
  min-height: 360px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.perm-cubes-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
/* Líneas SVG conectoras: pintan el "grafo" entre cubos. Tiene su propio glow
   filter (feGaussianBlur + feMerge) y un pulso lento para sentir actividad. */
.perm-cubes-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.perm-cubes-lines line {
  stroke: var(--primary);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.55;
}

/* Cubo wireframe — 6 caras transparentes con borde glow azul, estático */
.perm-cube {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin-left: calc(var(--s) / -2);
  margin-top:  calc(var(--s) / -2);
  transform-style: preserve-3d;
  /* Rotación estática en la pose base (sin animación) */
  transform: rotateX(var(--rx-base)) rotateY(var(--ry-base));
  z-index: 1;
}
.cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 1.5px solid var(--primary);
  box-shadow:
    0 0 12px color-mix(in oklab, var(--primary) 50%, transparent),
    inset 0 0 0 1px color-mix(in oklab, var(--primary) 22%, transparent);
  /* Tint sutil del paper adentro para que las caras se sientan como "vidrio" */
  background: color-mix(in oklab, var(--primary) 4%, transparent);
}
.cf-front  { transform: translateZ(calc(var(--s) / 2)); }
.cf-back   { transform: translateZ(calc(var(--s) / -2)) rotateY(180deg); }
.cf-left   { transform: translateX(calc(var(--s) / -2)) rotateY(-90deg); }
.cf-right  { transform: translateX(calc(var(--s) / 2))  rotateY(90deg); }
.cf-top    { transform: translateY(calc(var(--s) / -2)) rotateX(90deg); }
.cf-bottom { transform: translateY(calc(var(--s) / 2))  rotateX(-90deg); }

/* (Animaciones eliminadas — cubos y líneas estáticos) */

.perm-counters {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 24px;
  padding: 22px; background: var(--paper); border: 1px solid var(--border);
  border-radius: 14px;
}
.perm-counter-v {
  font-family: var(--serif); font-size: 36px; line-height: 1; letter-spacing: 0;
  color: var(--primary);
}
.perm-counter-l {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 8px;
}

/* Arquitectura: 4 pasos en fila */
.perm-arch-title {
  font-size: 32px; margin: 8px 0 20px;
}
.perm-arch-flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 12px; align-items: stretch;
}
.perm-arch-step {
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.perm-arch-step-num {
  font-size: 11px; letter-spacing: 0.15em; color: var(--primary);
}
.perm-arch-step-t {
  font-family: var(--serif); font-size: 17px; line-height: 1.15;
}
.perm-arch-step-d {
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
}
.perm-arch-arrow {
  align-self: center;
  font-family: var(--mono); color: var(--primary); font-size: 18px;
  opacity: 0.5;
}

/* Tipos de evento */
.perm-types-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
  margin-top: 14px;
}
.perm-type-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 10px; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 150ms, transform 150ms;
}
.perm-type-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.perm-type-card.is-active {
  border-color: var(--primary); background: var(--primary-tint);
}
.perm-type-glyph {
  width: 28px; height: 28px; border-radius: 6px;
  color: white; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.05em;
}
.perm-type-v {
  font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink);
}
.perm-type-l {
  font-size: 11px; color: var(--ink-3);
}

/* Verificador */
.perm-verify {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: start;
  padding: 28px;
}
.perm-verify-title {
  font-size: 28px; margin: 8px 0 6px;
}
.perm-verify-lede {
  font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0;
}
.perm-verify-form { display: flex; flex-direction: column; gap: 12px; }
.perm-verify-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-2);
  font-size: 13px; color: var(--ink); letter-spacing: 0.02em;
}
.perm-verify-input:focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.perm-verify-result {
  padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border);
}
.perm-verify-result.ok { border-color: var(--good); background: var(--good-tint); }
.perm-verify-result.no { border-color: var(--danger); background: var(--danger-tint); }
.perm-verify-result-h {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em;
  font-weight: 700; margin-bottom: 8px;
}
.perm-verify-result.ok .perm-verify-result-h { color: oklch(0.40 0.13 155); }
.perm-verify-result.no .perm-verify-result-h { color: oklch(0.45 0.18 25); }
.perm-verify-result-d { font-size: 12px; line-height: 1.5; }
.perm-verify-result-summary {
  margin-top: 10px; font-size: 13px; font-style: italic; color: var(--ink-2);
}

/* Ledger en vivo */
.perm-ledger-h {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.perm-ledger-title {
  font-size: 26px; margin: 6px 0 0;
}
.perm-ledger-filter { color: var(--primary); font-size: 13px; font-weight: 400; }
.perm-ledger-refresh {
  font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em;
  text-transform: uppercase;
}
.perm-ledger-empty {
  padding: 40px; text-align: center; color: var(--ink-3);
  border: 1px dashed var(--border); border-radius: 12px;
  background: var(--bg-2);
}
.perm-ledger-table {
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
}
.perm-ledger-row {
  display: grid;
  grid-template-columns: 110px 90px 160px 130px 1fr 80px;
  gap: 14px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; align-items: center;
}
.perm-ledger-row:last-child { border-bottom: 0; }
.perm-ledger-head {
  background: var(--bg-2); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.perm-ledger-date { color: var(--ink-2); }
.perm-ledger-type-chip {
  display: inline-block; padding: 3px 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 600;
}
.perm-ledger-type-chip.t-propuesta   { background: oklch(0.95 0.06 25);  color: oklch(0.40 0.18 25); }
.perm-ledger-type-chip.t-comentario  { background: oklch(0.95 0.05 230); color: oklch(0.40 0.16 230); }
.perm-ledger-type-chip.t-apoyo       { background: oklch(0.95 0.06 28);  color: oklch(0.45 0.18 28); }
.perm-ledger-type-chip.t-voto        { background: oklch(0.95 0.06 268); color: oklch(0.30 0.18 268); }
.perm-ledger-type-chip.t-denuncia    { background: oklch(0.95 0.06 15);  color: oklch(0.40 0.20 15); }
.perm-ledger-type-chip.t-padron      { background: oklch(0.95 0.05 155); color: oklch(0.40 0.14 155); }
.perm-ledger-type-chip.t-acta        { background: oklch(0.95 0.06 75);  color: oklch(0.40 0.14 75); }
.perm-ledger-hash {
  cursor: pointer; color: var(--primary); font-size: 12px;
}
.perm-ledger-hash:hover { text-decoration: underline; }
.perm-ledger-status {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  padding: 3px 6px; border-radius: 4px; white-space: nowrap;
}
.perm-ledger-status.s-pending_bitcoin     { background: oklch(0.95 0.06 75);  color: oklch(0.42 0.14 75); }
.perm-ledger-status.s-confirmed            { background: var(--good-tint);     color: oklch(0.40 0.13 155); }
.perm-ledger-status.s-pending_ots_install  { background: var(--bg-2);          color: var(--ink-3); }
.perm-ledger-status.s-calendar_unreachable { background: var(--danger-tint);   color: oklch(0.42 0.18 25); }
.perm-ledger-summary {
  font-size: 12px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.perm-ledger-ots-link {
  font-size: 11px; color: var(--primary); text-decoration: none;
  padding: 4px 8px; border: 1px solid var(--primary); border-radius: 4px;
}
.perm-ledger-ots-link:hover { background: var(--primary-tint); }

/* Verify yourself */
.perm-verify-self h2 {
  font-size: 32px; margin: 8px 0 12px;
}
.perm-verify-self h2 em { color: var(--primary); font-style: normal; }
.perm-verify-self-lede {
  font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 760px;
}
.perm-verify-self-steps {
  list-style: none; padding: 0; margin: 22px 0 0;
  display: flex; flex-direction: column; gap: 14px; max-width: 820px;
}
.perm-verify-self-steps > li {
  display: flex; gap: 14px; padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 10px;
}
.perm-step-num {
  font-size: 14px; color: var(--primary); font-weight: 600; min-width: 24px;
}
.perm-verify-self-steps code {
  background: var(--bg-2); padding: 2px 6px; border-radius: 4px;
  font-size: 13px; color: var(--ink);
}

/* FAQ qué sí / qué no */
.perm-faq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px;
}
.perm-faq-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px;
}
.perm-faq-yes { border-color: oklch(0.70 0.10 155); }
.perm-faq-no  { border-color: oklch(0.70 0.12 25); }
.perm-faq-tag {
  display: inline-block; padding: 4px 10px; border-radius: 4px;
  font-size: 10px; letter-spacing: 0.15em; font-weight: 700;
  margin-bottom: 14px;
}
.perm-faq-yes .perm-faq-tag { background: var(--good-tint); color: oklch(0.40 0.13 155); }
.perm-faq-no  .perm-faq-tag { background: var(--danger-tint); color: oklch(0.45 0.18 25); }
.perm-faq-card ul {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.perm-faq-card li { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* Tech footer */
.perm-tech {
  display: flex; flex-wrap: wrap; gap: 18px; row-gap: 6px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); padding: 18px 0 4px;
  border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 900px) {
  .perm-hero-title { font-size: 42px; }
  .perm-hero-top { grid-template-columns: 1fr; gap: 24px; }
  .perm-blockchain-anim { min-height: 260px; }
  /* En mobile achicamos el radio del anillo para que no se corten los bloques */
  .perm-bc-block { transform: rotateY(calc(var(--i) * 45deg)) translateZ(140px); }
  .perm-counters { grid-template-columns: repeat(2, 1fr); }
  .perm-arch-flow { grid-template-columns: 1fr; gap: 8px; }
  .perm-arch-arrow { display: none; }
  .perm-types-grid { grid-template-columns: repeat(4, 1fr); }
  .perm-verify { grid-template-columns: 1fr; }
  .perm-ledger-row {
    grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 14px 12px;
    font-size: 12px;
  }
  .perm-ledger-head { display: none; }
  .perm-faq-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Footer unificado (.f / .f-grid / .f-brand / .f-col / .f-foot)
   Mismo markup que las páginas estáticas (donaciones / quienes-somos /
   index / etc.). Movido aquí para que la plataforma React también lo use.
   ───────────────────────────────────────────────────────────────────────── */
footer.f {
  background: var(--ink);
  color: oklch(0.7 0.02 270);
  padding: 60px 40px 30px;
  margin-top: 80px;
}
footer.f .f-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(2, 1fr);
  gap: 50px;
}
footer.f .f-brand { display: flex; flex-direction: column; gap: 14px; max-width: 320px; }
footer.f .f-brand .nav-brand-mark { background: transparent; width: 50px; height: 50px; border-radius: 50%; display: block; object-fit: cover; }
footer.f .f-brand .nav-brand-name { color: var(--bg); }
footer.f .f-brand .nav-brand-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: oklch(0.6 0.02 270); text-transform: uppercase; margin-top: 2px; }
footer.f .f-brand p { font-size: 13px; line-height: 1.6; }
footer.f .f-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: oklch(0.85 0.02 270); margin-bottom: 16px; font-weight: 500; }
footer.f .f-col a { display: block; padding: 4px 0; font-size: 13px; color: oklch(0.7 0.02 270); text-decoration: none; }
footer.f .f-col a:hover { color: white; }
footer.f .f-foot {
  max-width: 1400px;
  margin: 50px auto 0;
  padding-top: 24px;
  border-top: 1px solid oklch(0.3 0.02 270);
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
}
@media (max-width: 1000px) {
  /* La marca ocupa la fila de arriba; Plataforma y Contacto quedan como
     dos columnas paralelas a la misma altura (también en mobile). */
  footer.f .f-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  footer.f .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  footer.f { padding: 40px 16px 24px; margin-top: 48px; }
  footer.f .f-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  footer.f .f-foot { flex-direction: column; gap: 6px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   ViewCrearPropuesta — página dedicada para creación de propuesta con
   evaluación IA en 3 dimensiones (legal · técnica · económica).
   ───────────────────────────────────────────────────────────────────────── */

.view.crear-propuesta {
  display: flex; flex-direction: column; gap: 28px;
  max-width: 980px; margin: 0 auto;
}

.cp-back {
  align-self: flex-start;
  font-size: 13px;
  color: var(--ink-2);
  padding: 4px 0;
}
.cp-back:hover { color: var(--primary); }

/* Hero / intro */
.cp-hero {
  padding: 24px 0 8px;
}
.cp-hero-title {
  font-size: 48px; line-height: 1.04;
  margin: 10px 0 18px;
  letter-spacing: -0.02em;
}
.cp-hero-title em { color: var(--primary); font-style: normal; }
.cp-hero-lede {
  font-size: 16px; line-height: 1.6;
  color: var(--ink-2);
  max-width: 760px;
}

/* Sections con número grande tipo paso 1/2/3 */
.cp-opcional { font-size: 0.62em; font-weight: 400; color: var(--ink-3); letter-spacing: 0.02em; }
.cp-section-h {
  font-size: 22px;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Form section */
.cp-form-section {
  padding: 30px;
  display: flex; flex-direction: column; gap: 18px;
}
.cp-form-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Sección evaluación */
.cp-eval-section { display: flex; flex-direction: column; gap: 14px; }
/* Nota: la IA determina nivel/jurisdicción/eje. */
.cp-ia-nota {
  margin: 0 0 6px; padding: 12px 14px; border-radius: 10px;
  background: color-mix(in oklab, var(--primary) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border));
  color: var(--ink-2); font-size: 13px; line-height: 1.5;
}
/* Clasificación devuelta por la IA (chips). */
.cp-clasif { padding: 14px 16px; }
.cp-clasif-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cp-clasif-chip {
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border));
  color: var(--ink-2);
}
.cp-clasif-chip strong { color: var(--primary); }

/* Loading state */
.cp-eval-loading {
  padding: 30px;
  display: flex; align-items: center; gap: 22px;
}
.cp-eval-spinner {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid color-mix(in oklab, var(--primary) 25%, var(--border));
  border-top-color: var(--primary);
  animation: cp-spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
.cp-eval-loading-t {
  font-size: 18px;
  margin-top: 4px;
}
.cp-eval-loading-d {
  font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 6px;
}

/* Error state */
.cp-eval-error {
  padding: 24px;
  border-color: var(--danger);
  background: var(--danger-tint);
}
.cp-eval-error code {
  font-family: var(--mono); font-size: 12px;
  background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px;
}

/* Stale warning */
.cp-eval-stale {
  padding: 14px 18px; font-size: 12px;
  color: oklch(0.45 0.14 75); border-color: oklch(0.70 0.10 75);
  background: oklch(0.97 0.06 75);
  display: flex; align-items: center; flex-wrap: wrap;
}

/* Grid de las 3 cards de dimensión */
.cp-eval-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* Antecedentes: banda a todo el ancho (no lleva veredicto). */
.cp-eval-card.cp-eval-antecedentes { grid-column: 1 / -1; }
.cp-eval-card {
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 14px;
  border-left: 4px solid var(--primary);
  position: relative;
}
.cp-eval-legal     { border-left-color: oklch(0.45 0.18 268); }
.cp-eval-tecnica   { border-left-color: oklch(0.45 0.16 200); }
.cp-eval-economica { border-left-color: oklch(0.48 0.16 40); }

.cp-eval-card-h {
  display: flex; align-items: flex-start; gap: 12px;
}
.cp-eval-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--primary) 12%, var(--paper));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--primary);
  font-weight: 600;
  flex-shrink: 0;
}
.cp-eval-legal     .cp-eval-icon { color: oklch(0.45 0.18 268); background: oklch(0.96 0.04 268); }
.cp-eval-tecnica   .cp-eval-icon { color: oklch(0.45 0.16 200); background: oklch(0.96 0.04 200); }
.cp-eval-economica .cp-eval-icon { color: oklch(0.48 0.16 40);  background: oklch(0.96 0.04 40); }
.cp-eval-card-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cp-eval-card-desc {
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.cp-eval-verdict {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  align-self: flex-start;
}
.cp-eval-verdict.v-ok   { background: var(--good-tint);   color: oklch(0.40 0.13 155); }
.cp-eval-verdict.v-warn { background: oklch(0.96 0.06 75); color: oklch(0.45 0.14 75); }
.cp-eval-verdict.v-bad  { background: var(--danger-tint); color: oklch(0.45 0.18 25); }
.cp-eval-verdict.v-info { background: var(--bg-2);        color: var(--ink-2); }
.cp-eval-comment {
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* Sección publicar (paso 3) */
.cp-publish-section {
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.cp-publish-lede {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 720px;
}
.cp-publish-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 8px;
}
.btn.primary.big {
  height: 48px;
  padding: 0 26px;
  font-size: 15px;
}

/* ─── Datos destacados (form previo a publicar) ─────────────────────── */
.cp-destacado-section {
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.cp-stat-pair {
  display: grid; grid-template-columns: 0.5fr 1fr; gap: 10px;
}

/* ─── Frase + cifras destacadas en la card de propuesta (estilo insignia) ── */
.prp-dest-frase {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--primary);
  margin: 0;
}
.prp-dest-card.prp-dest-2 .prp-dest-frase { color: oklch(0.45 0.16 200); }
.prp-dest-card.prp-dest-3 .prp-dest-frase { color: oklch(0.48 0.18 28); }
.prp-dest-card.prp-dest-4 .prp-dest-frase { color: oklch(0.30 0 0); }
.prp-dest-card.prp-dest-5 .prp-dest-frase { color: oklch(0.42 0.13 155); }
.prp-dest-card.prp-dest-6 .prp-dest-frase { color: oklch(0.42 0.20 320); }

/* ─── Frase + cifras destacadas en el hero del detalle (estilo insignia) ── */
.pdh-frase {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--primary);
  margin: 4px 0 0;
  text-wrap: balance;
}
.pdh-stats {
  display: flex; flex-wrap: wrap; gap: 36px;
  padding: 18px 0 4px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
.pdh-stat-v {
  font-family: var(--serif);
  font-size: 30px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.pdh-stat-l {
  font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.06em;
  margin-top: 6px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .cp-hero-title { font-size: 36px; }
  .cp-eval-grid { grid-template-columns: 1fr; }
  .cp-eval-loading { flex-direction: column; align-items: flex-start; }
  .cp-stat-pair { grid-template-columns: 1fr; }
  .pdh-frase { font-size: 18px; }
  .pdh-stats { gap: 24px; }
}

/* ─── Likes en comentarios de propuestas (PropuestaDetalle) ──────────── */
.pd-comments-sort {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.pd-com-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.pd-com-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms, background 150ms, transform 120ms;
  -webkit-appearance: none;
  appearance: none;
}
.pd-com-like:hover {
  color: oklch(0.55 0.18 28);
  border-color: oklch(0.65 0.14 28);
  background: oklch(0.97 0.04 28);
}
.pd-com-like:active { transform: scale(0.94); }
.pd-com-like.is-liked {
  color: oklch(0.55 0.18 28);
  border-color: oklch(0.55 0.18 28);
  background: oklch(0.96 0.06 28);
  font-weight: 600;
}
.pd-com-like svg { display: block; }
.pd-com-like .mono { font-size: 11px; }

/* ─── Insignia comments widget (páginas estáticas de propuestas) ─────── */
section#insigniaComments {
  max-width: 880px;
  margin: 60px auto 0;
  padding: 36px 40px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.insig-comments-h { margin-bottom: 22px; }
.insig-comments-t {
  font-size: 26px;
  margin: 6px 0 0;
  letter-spacing: -0.01em;
}
.insig-comments-sort {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* Formulario */
.insig-comments-form {
  border: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.insig-com-form-h {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.insig-com-form-meta { display: flex; flex-direction: column; }
.insig-com-form-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.insig-com-locked {
  padding: 14px 16px; border-radius: 10px;
  background: var(--bg-2); border: 1px dashed var(--border);
  color: var(--ink-3); font-size: 13px; text-align: center;
}
.insig-com-input-name {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--paper);
  font: inherit;
  font-size: 14px;
}
.insig-com-input-name:focus {
  outline: 2px solid var(--primary); outline-offset: 1px;
  border-color: var(--primary);
}
.insig-com-textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.insig-com-textarea:focus {
  outline: 2px solid var(--primary); outline-offset: 1px;
  border-color: var(--primary);
}
.insig-com-form-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.insig-com-form-hint {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}

/* Avatar circular con iniciales */
.insig-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--primary) 14%, var(--paper));
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.insig-avatar-img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
/* Avatar/nombre clickeables → perfil del autor */
.insig-com-avatar-link {
  display: inline-flex;
  border-radius: 50%;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.insig-com-avatar-link:hover { opacity: 0.82; }
.insig-com-name-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}
.insig-com-name-link:hover { text-decoration: underline; color: var(--primary); }

/* Avatar/nombre clickeables en comentarios del SPA (PropuestaDetalle / Perfil) */
.pd-com-avatar-link {
  display: inline-flex;
  padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.pd-com-avatar-link:hover { opacity: 0.82; }
.pd-com-name-link {
  padding: 0; border: none; background: none; cursor: pointer;
  color: inherit;
  font: inherit;
  font-weight: inherit;
}
.pd-com-name-link:hover { text-decoration: underline; color: var(--primary); }

/* Listado */
.insig-comments-list {
  display: flex; flex-direction: column; gap: 14px;
}
.insig-com-empty {
  padding: 28px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.06em;
  background: var(--bg-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.insig-com-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 12px;
}
.insig-com-card-h {
  display: flex; align-items: flex-start; gap: 12px;
}
.insig-com-card-meta { flex: 1; min-width: 0; }
.insig-com-card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.insig-com-card-sub {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  margin-top: 2px;
  text-transform: uppercase;
}
.insig-com-card-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Badges de moderación */
.insig-mod-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.insig-pending  { color: oklch(0.40 0.14 75); background: oklch(0.94 0.08 75); }
.insig-rejected { color: oklch(0.42 0.20 28); background: oklch(0.94 0.06 28); }
.insig-mod-reason {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  background: oklch(0.97 0.02 28);
  border-left: 3px solid oklch(0.55 0.18 28);
  padding: 8px 10px;
  margin: 0;
  border-radius: 0 6px 6px 0;
}

/* Like button (igual estilo que .pd-com-like del React platform) */
.insig-com-card-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.insig-com-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms, background 150ms, transform 120ms;
}
.insig-com-like:hover {
  color: oklch(0.55 0.18 28);
  border-color: oklch(0.65 0.14 28);
  background: oklch(0.97 0.04 28);
}
.insig-com-like:active { transform: scale(0.94); }
.insig-com-like.is-liked {
  color: oklch(0.55 0.18 28);
  border-color: oklch(0.55 0.18 28);
  background: oklch(0.96 0.06 28);
  font-weight: 600;
}
.insig-com-like svg { display: block; }
.insig-com-like .mono { font-size: 11px; }

@media (max-width: 700px) {
  section#insigniaComments { padding: 24px 16px; margin-top: 40px; }
  .insig-comments-t { font-size: 22px; }
}

/* ─── Ajustes EXCLUSIVOS de móvil (al final del archivo para ganar el cascade) ─── */
@media (max-width: 700px) {
  /* Auth (alta/login): una columna, card centrada */
  .ac-wrap { grid-template-columns: 1fr; max-width: 460px; gap: 18px; }
  .ac-card { padding: 26px 20px; }
  /* Headers de 2 columnas (Mi cuenta, back office afiliaciones) → 1 columna.
     Antes la card lateral (verificá teléfono / botones) se amontonaba y desbordaba. */
  .mc-head { grid-template-columns: 1fr !important; padding: 20px 18px; }
  .mc-cover { height: auto; }  /* mantiene el 4:1 del recortador también en mobile */
  .mc-avatar-wrap { margin-top: -58px; }
  /* Formularios: campos a una columna, sin desbordar por el costado
     (el input de fecha en iOS tiene un ancho mínimo que rompía la grilla). */
  .mc-grid { grid-template-columns: 1fr !important; }
  .mc-grid input, .mc-grid select, .mc-grid textarea {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  }
  /* Tablas del back office: scroll horizontal en vez de cortarse */
  .adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Padding más ajustado y footer a lo ancho real de la pantalla */
  .app-content { padding-left: 16px; padding-right: 16px; }
  footer.f { padding: 40px 18px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Página de propuesta estilo "insignia" (PropuestaDetalle con .pagina)
   Reproduce el lenguaje visual de las páginas insignia estáticas
   (compras-publicas.html etc.) dentro de la SPA.
   ═══════════════════════════════════════════════════════════════════════ */
.pd-insignia { margin: 14px 0 8px; }

/* ─── Hero ─── */
.pdi-hero {
  display: grid; grid-template-columns: 1fr 0.62fr; gap: 48px; align-items: center;
  padding: 28px 0 44px;
}
.pdi-hero-left { max-width: 720px; }
.pdi-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid var(--border-2); border-radius: 999px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--paper);
}
.pdi-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint);
}
.pdi-title {
  font-family: var(--serif);
  font-size: 56px; line-height: 1.0; letter-spacing: -0.03em;
  margin: 22px 0 18px; font-weight: 500; text-wrap: balance;
}
.pdi-title em { font-style: italic; color: var(--primary); font-weight: 400; }
.pdi-lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 580px; }
.pdi-actions { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.pdi-actions .btn { height: 46px; padding: 0 22px; font-size: 15px; }

/* Compartir propuesta + pop-up de difusión */
.pd-share-wrap { position: relative; display: inline-flex; }
.pd-share-pop {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  z-index: 50; width: 300px; max-width: 84vw;
  background: var(--paper); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 16px 14px; box-shadow: 0 24px 60px -24px oklch(0.20 0.10 268 / 0.45);
  text-align: left;
}
.pd-share-pop::before {
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: var(--paper);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.pd-share-pop-x { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-3); }
.pd-share-pop-t { font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 6px; padding-right: 14px; }
.pd-share-pop-d { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0 0 12px; }
.pd-share-pop-cta { width: 100%; justify-content: center; }
@media (max-width: 560px) {
  .pd-share-pop { left: auto; right: 0; transform: none; }
  .pd-share-pop::before { left: auto; right: 40px; transform: rotate(45deg); }
}
.pdi-author { margin-top: 18px; font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }

.pdi-stats { display: flex; flex-direction: column; gap: 14px; }
.pdi-stat-card {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 22px;
}
.pdi-stat-card .l {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.pdi-stat-card .v {
  font-family: var(--serif); font-size: 34px; line-height: 1; font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em;
}
.pdi-stat-card .v em { font-style: italic; color: var(--primary); }
.pdi-stat-card .d { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; }

/* ─── Marquee ─── */
.pdi-strip {
  background: var(--ink); color: var(--bg);
  padding: 16px 0; overflow: hidden;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em;
  border-radius: 14px;
}
.pdi-strip-track {
  display: flex; gap: 56px; white-space: nowrap;
  animation: pdi-scroll 80s linear infinite;
}
.pdi-strip-track span::before { content: '·'; margin-right: 56px; opacity: 0.5; }
@keyframes pdi-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── Secciones narrativas ─── */
.pdi-s { padding: 52px 0; }
.pdi-s-head { max-width: 780px; margin-bottom: 0; }
.pdi-s-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--ink-3); text-transform: uppercase;
}
.pdi-s-title {
  font-family: var(--serif); font-size: 42px; line-height: 1.04;
  letter-spacing: -0.02em; margin: 14px 0 16px; font-weight: 500; text-wrap: balance;
}
.pdi-s-title em { font-style: italic; color: var(--primary); font-weight: 400; }
.pdi-s-lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.pdi-pilares + *, .pdi-s-head + .pdi-pilares { margin-top: 36px; }

/* ─── Pilares ─── */
.pdi-pilares {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; margin-top: 36px;
}
.pdi-pilar {
  background: var(--paper); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 12px; min-height: 240px;
}
.pdi-pilar-num { font-size: 11px; letter-spacing: 0.1em; color: var(--primary); }
.pdi-pilar-t {
  font-family: var(--serif); font-size: 21px; line-height: 1.2;
  letter-spacing: -0.01em; font-weight: 500; margin: 0;
}
.pdi-pilar-t em { font-style: italic; color: var(--primary); font-weight: 400; }
.pdi-pilar-d { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0; }

/* ─── Antecedente internacional ─── */
.pdi-intl-card {
  margin-top: 32px; padding: 28px 30px;
  background: linear-gradient(140deg, color-mix(in oklab, var(--primary) 8%, var(--paper)), var(--paper));
  border: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border));
  border-radius: 18px;
}
.pdi-intl-text { font-size: 16px; line-height: 1.6; color: var(--ink); margin: 0; }
.pdi-intl-result {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
}
.pdi-intl-result-l { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); }
.pdi-intl-result-v { font-family: var(--serif); font-size: 20px; line-height: 1.25; color: var(--ink); font-weight: 500; }
.pdi-pilar-list { list-style: none; padding: 0; margin: 6px 0 0; }
.pdi-pilar-list li {
  font-size: 12px; color: var(--ink-2); padding: 4px 0 4px 14px;
  position: relative; line-height: 1.45;
}
.pdi-pilar-list li::before {
  content: '·'; position: absolute; left: 2px; color: var(--primary); font-weight: 700;
}

/* ─── Quote ─── */
.pdi-quote {
  background: var(--ink); color: var(--bg);
  border-radius: 22px; padding: 60px 44px; text-align: center;
}
.pdi-quote-text {
  font-family: var(--serif); font-style: italic;
  font-size: 32px; line-height: 1.25; letter-spacing: -0.015em;
  max-width: 900px; margin: 0 auto; font-weight: 400; text-wrap: balance;
}
.pdi-quote-text em { font-style: italic; color: oklch(0.80 0.10 270); }
.pdi-quote-att {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(0.72 0.03 270); margin-top: 26px;
}

/* ─── CTA ─── */
.pdi-cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-2, var(--primary)));
  color: white; border-radius: 22px; padding: 56px 44px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: center;
}
.pdi-cta-t {
  font-family: var(--serif); font-size: 38px; line-height: 1.06;
  letter-spacing: -0.02em; font-weight: 500; margin: 0;
}
.pdi-cta-t em { font-style: italic; font-weight: 400; }
.pdi-cta-d { font-size: 16px; opacity: 0.92; margin-top: 14px; line-height: 1.55; max-width: 520px; }
.pdi-cta-actions { display: flex; flex-direction: column; gap: 10px; }
.pdi-cta-actions .btn { width: 100%; justify-content: center; height: 50px; font-size: 15px; }
.pdi-cta-actions .btn.primary { background: white; color: var(--primary); }

@media (max-width: 900px) {
  .pdi-hero { grid-template-columns: 1fr; gap: 28px; padding: 18px 0 32px; }
  .pdi-title { font-size: 38px; }
  .pdi-s { padding: 38px 0; }
  .pdi-s-title { font-size: 30px; }
  .pdi-pilares { grid-template-columns: 1fr; }
  .pdi-quote { padding: 44px 26px; }
  .pdi-quote-text { font-size: 24px; }
  .pdi-cta { grid-template-columns: 1fr; padding: 40px 26px; }
  .pdi-cta-t { font-size: 30px; }
}

/* ── Página de provincia ── */
.view.provincia { display: flex; flex-direction: column; gap: 22px; }
.view.provincia .prov-propuestas,
.view.provincia .prov-cands { padding: 24px; }
.view.provincia .prov-loading { color: var(--ink-3); padding: 12px 0; }
.view.provincia .prov-empty {
  color: var(--ink-3);
  background: var(--surface-2, color-mix(in oklab, var(--ink) 4%, transparent));
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  font-size: 14px;
}
.view.provincia .prov-cand-list { display: flex; flex-direction: column; }

/* ════════════════════════════════════════════════════════════════════════
   Timeline · posteos de usuarios (estilo Twitter) + Galería de imágenes
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Composer ─── */
.post-composer { padding: 16px; margin-bottom: 16px; }
.post-composer .pc-row { display: flex; gap: 12px; align-items: flex-start; }
.pc-text {
  flex: 1; min-height: 64px; resize: vertical; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--bg);
  color: var(--ink); line-height: 1.5;
}
.pc-text:focus { outline: none; border-color: var(--primary); }
.pc-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 56px; }
.pc-thumb { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; }
.pc-thumb img, .pc-thumb video { width: 100%; height: 100%; object-fit: cover; }
.pc-url { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0 56px; }
.pc-url input {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit;
  background: var(--bg); color: var(--ink);
}
.pc-url input:focus { outline: none; border-color: var(--primary); }
.pc-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin: 12px 0 0 56px; gap: 12px;
  /* Si no entra todo en una línea, el botón Publicar baja en vez de
     desbordar el borde derecho de la tarjeta. */
  flex-wrap: wrap;
}
.pc-actions > .btn { margin-left: auto; }
.pc-tools { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
@media (max-width: 700px) {
  /* Sin la sangría del avatar: en mobile ese ancho extra empujaba el
     botón Publicar fuera del contenedor. */
  .pc-actions, .pc-imgs, .pc-url, .pc-msg { margin-left: 0; }
}
.pc-tool {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.pc-tool:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pc-tool.on { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
.pc-tool:disabled { opacity: .5; cursor: not-allowed; }
.pc-msg { margin: 8px 0 0 56px; color: var(--ink-3); font-size: 12px; }

/* ─── Emoji picker (composer del feed) ─── */
.emoji-picker { position: relative; display: inline-flex; }
.emoji-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60;
  width: 280px; max-height: 220px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  padding: 8px; background: var(--paper, #fff);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(10, 14, 44, 0.18);
}
.emoji-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px; border-radius: 8px;
}
.emoji-btn:hover { background: var(--bg-2, #f0f0f6); }

/* ─── Timeline list ─── */
.timeline-list { display: flex; flex-direction: column; gap: 14px; }

/* ─── Tipografía estilo Twitter/X para los posteos ───
   Chirp es propietaria; usamos su misma cadena de respaldo del sistema. */
.post-card,
.post-composer,
.post-coms,
.post-com-field .mention-wrap textarea,
.pc-text {
  font-family: "TwitterChirp", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
}

/* ─── Post card ─── */
.post-card { padding: 16px; }
.post-card:hover { box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.post-head { display: flex; align-items: center; justify-content: space-between; }
.post-author {
  display: flex; align-items: center; gap: 10px; background: none; border: none;
  padding: 0; cursor: pointer; text-align: left;
}
.post-author-meta { display: flex; flex-direction: column; line-height: 1.2; }
.post-author-name { font-weight: 600; color: var(--ink); }
.post-author:hover .post-author-name { color: var(--primary); }
.post-date { color: var(--ink-3); font-size: 12px; }
.post-del {
  background: none; border: none; cursor: pointer; opacity: .5; font-size: 15px;
  padding: 4px;
}
.post-del:hover { opacity: 1; }
.post-rechazado {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 8px;
  background: oklch(0.96 0.04 30); color: oklch(0.45 0.14 30); font-size: 12px;
}
.post-text { margin: 12px 0 0; white-space: pre-wrap; line-height: 1.55; color: var(--ink); }
/* Guardas anti-desborde: URLs/palabras largas no deben estirar la card del
   post más allá del viewport (en mobile quedaban cortadas por la derecha). */
.perfil-act-grid, .perfil-act-grid > *, .perfil-body-stack, .perfil-section { min-width: 0; }
.post-card { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.post-card .post-text, .post-share-msg, .post-link-title, .post-link-dom { overflow-wrap: anywhere; word-break: break-word; }
.post-link, .post-link-body { min-width: 0; }
.post-media { margin: 12px 0 0; display: grid; gap: 4px; border-radius: 12px; overflow: hidden; }
.post-media-1 { grid-template-columns: 1fr; }
.post-media-2, .post-media-4 { grid-template-columns: 1fr 1fr; }
.post-media-3 { grid-template-columns: 1fr 1fr; }
.post-media-3 img:first-child, .post-media-3 video:first-child { grid-row: span 2; }
.post-media img, .post-media video { width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.post-link {
  display: flex; margin: 12px 0 0; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; text-decoration: none; color: inherit; background: var(--bg);
}
.post-link:hover { border-color: var(--primary); }
.post-link-img { width: 120px; height: 96px; object-fit: cover; flex: 0 0 auto; }
.post-link-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 14px; }
.post-link-dom { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.post-link-title { font-weight: 600; color: var(--ink); }
.post-actions { display: flex; align-items: center; gap: 18px; margin: 14px 0 0; }
.post-act {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  cursor: pointer; color: var(--ink-2); font-size: 14px; padding: 4px 0;
}
.post-act:hover { color: var(--primary); }
.post-act.on { color: oklch(0.55 0.20 20); }
.post-share-msg { color: var(--primary); font-size: 12px; margin-left: 4px; }

/* ─── Detalle de posteo ─── */
.post-view-stack { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.post-card.post-detail { cursor: default; }
.post-card.post-detail .post-text { font-size: 17px; }

/* ─── Comentarios del posteo ─── */
.post-coms { }
.post-coms-h { font-size: 15px; margin: 0 0 12px; color: var(--ink); }
.post-com-box { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
/* ── Autocompletado de menciones (@) en textareas ───────────────────────── */
.mention-wrap { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mention-wrap > textarea { width: 100%; box-sizing: border-box; }
.mention-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  max-height: 280px; overflow-y: auto;
  background: var(--bg, #fff); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 15, 40, 0.16); padding: 4px;
}
.mention-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: 9px; background: transparent;
  cursor: pointer; text-align: left; font: inherit; color: var(--ink);
}
.mention-item.on, .mention-item:hover { background: var(--line); }
.mention-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mention-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-handle { font-size: 12px; color: var(--ink-3); }
.mention-empty { padding: 10px 12px; font-size: 13px; color: var(--ink-3); }

.post-com-field { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.post-com-field textarea {
  min-height: 52px; resize: vertical; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font: inherit; background: var(--bg); color: var(--ink);
}
.post-com-field textarea:focus { outline: none; border-color: var(--primary); }
.post-com-send { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.post-com-list { display: flex; flex-direction: column; gap: 14px; }
.post-com { display: flex; gap: 10px; align-items: flex-start; }
.post-com.pending { opacity: .7; }
.post-com-av { background: none; border: none; padding: 0; cursor: pointer; }
.post-com-body {
  flex: 1; background: var(--bg-2, #f6f6f8); border-radius: 12px; padding: 8px 12px;
}
.post-com-meta { display: flex; align-items: center; gap: 8px; }
.post-com-author { font-weight: 600; font-size: 13px; color: var(--ink); }
.post-com-text { margin: 2px 0 4px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.post-com-like {
  background: none; border: none; cursor: pointer; color: var(--ink-3); font-size: 12px; padding: 0;
}
.post-com-like.on { color: oklch(0.55 0.20 20); }

/* ─── Galería ─── */
.gal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.gal-cell {
  border: none; padding: 0; cursor: pointer; border-radius: 10px; overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--bg-2, #eee);
}
.gal-cell img, .gal-cell video { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.gal-cell:hover img, .gal-cell:hover video { transform: scale(1.05); }
.gal-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.88);
  display: grid; place-items: center; padding: 24px;
}
.gal-lb-fig { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.gal-lb-fig img, .gal-lb-fig video { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.gal-lb-fig figcaption { color: #fff; margin-top: 10px; font-size: 13px; }
.gal-lb-close {
  position: absolute; top: 16px; right: 20px; background: none; border: none;
  color: #fff; font-size: 34px; cursor: pointer; line-height: 1;
}
.gal-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15);
  border: none; color: #fff; font-size: 32px; width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer;
}
.gal-lb-prev { left: 20px; }
.gal-lb-next { right: 20px; }
.gal-lb-nav:hover { background: rgba(255,255,255,.3); }

/* ─── Galería · editor (MiCuenta) ─── */
.gal-uploader { margin-top: 10px; }
.gal-edit-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-top: 12px;
}
.gal-edit-item { position: relative; }
.gal-edit-item img, .gal-edit-item video {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line);
}
.gal-cap-input {
  width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 8px; font-size: 12px; background: var(--bg); color: var(--ink);
}
.mc-galeria-save { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }

/* Actividad de la provincia · lista de posteos top */
.view.provincia .prov-actividad-list { display: flex; flex-direction: column; gap: 14px; }
.view.provincia .prov-actividad .post-card { box-shadow: none; }

/* ─── Feed ciudadano ─────────────────────────────────────────────────────── */
.view.feed .feed-hero { margin-bottom: 18px; }
.view.feed .feed-hero h1 { font-size: 30px; letter-spacing: -0.02em; margin: 4px 0 6px; }
.view.feed .feed-lead { color: var(--ink-3); font-size: 14px; margin: 0; }

/* Título + subtítulo de la militancia (entre el hero y los chips de provincia) */
.view.feed .feed-militancia-hero {
  margin: 22px 0 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.view.feed .feed-militancia-hero h2 {
  font-size: 26px; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--ink);
}
.view.feed .feed-militancia-hero p {
  margin: 0; max-width: 640px;
  color: var(--ink-2); font-size: 15px; line-height: 1.5;
}
.view.feed .feed-militancia-em { color: var(--primary); font-weight: 700; }

/* Selector de feed por provincia — chips horizontales (Todas + 24 jurisdicciones) */
.view.feed .feed-prov-bar {
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 12px; margin-bottom: 12px;
  scrollbar-width: thin;
}
.view.feed .feed-prov-bar::-webkit-scrollbar { height: 6px; }
.view.feed .feed-prov-bar::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
.view.feed .feed-prov-chip {
  flex: none; cursor: pointer; white-space: nowrap;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--paper);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em;
  color: var(--ink-2);
  box-shadow: 0 1px 2px oklch(0.20 0.10 268 / 0.04);
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.view.feed .feed-prov-chip:hover { border-color: var(--primary); color: var(--ink); }
.view.feed .feed-prov-chip.on {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 6px 16px -8px oklch(0.55 0.24 264 / 0.55);
}

.feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.feed-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.feed-tabs { margin: 0; }
/* Mobile: el selector "Toda la actividad / Los que sigues" pegado al
   composer de nuevo post (compensa el gap de 16px de .feed-main). */
@media (max-width: 880px) {
  .view.feed .feed-tabs { margin-top: -12px; }
}
.feed-empty { padding: 28px 24px; text-align: center; color: var(--ink-3); }
.feed-empty p { margin: 0 0 14px; }
.feed-empty .btn { display: inline-flex; }

/* Columna derecha "A quién seguir" (sticky) */
.feed-rail { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.wtf-card { padding: 6px 0 10px; overflow: hidden; }
.wtf-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; padding: 12px 18px 6px; margin: 0; }
.wtf-empty { padding: 10px 18px 14px; color: var(--ink-3); font-size: 13px; }
.wtf-list { display: flex; flex-direction: column; }
.wtf-row { display: flex; align-items: center; gap: 10px; padding: 9px 18px; }
.wtf-row:hover { background: var(--bg); }
.wtf-who { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.wtf-meta { display: flex; flex-direction: column; min-width: 0; }
.wtf-name { font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.wtf-who:hover .wtf-name { text-decoration: underline; }
.wtf-check { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 9px; line-height: 1; flex: none; }
.wtf-sub { font-size: 12px; color: var(--ink-3); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtf-follow { flex: none; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; padding: 7px 16px; cursor: pointer; transition: opacity .15s ease; }
.wtf-follow:hover { opacity: 0.85; }
.wtf-follow:disabled { opacity: 0.5; cursor: default; }
.wtf-more { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 18px 4px; color: var(--primary); font-size: 14px; font-weight: 600; cursor: pointer; }
.wtf-more:hover { text-decoration: underline; }

/* Tarjeta "Cuentas con IA" */
.wtf-ia .wtf-title { display: flex; align-items: center; gap: 8px; }
.wtf-ia-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 999px; padding: 2px 8px; }
.wtf-ia-lead { padding: 0 18px 6px; margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.wtf-check-ia { background: linear-gradient(135deg, var(--primary), #6d5ae6); font-size: 10px; }

@media (max-width: 900px) {
  .feed-layout { grid-template-columns: 1fr; }
  .feed-rail { position: static; order: -1; }
}

/* ═══════════ Vista Swipe — votación por apoyo (Tinder) ═══════════ */
.sw-view { max-width: 460px; margin: 0 auto; padding: 6px 0 28px; display: flex; flex-direction: column; min-height: 100%; position: relative; }
.sw-head { text-align: center; margin-bottom: 14px; }
.sw-head .ch-title { font-size: 26px; }
.sw-progress { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 14px; color: var(--ink-3); font-size: 12px; }
.sw-progress-bar { width: 140px; height: 5px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.sw-progress-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .35s ease; }
.sw-apoyos { color: var(--good); font-weight: 600; }

/* intro / fin / test */
.sw-intro, .sw-end, .sw-test { text-align: center; padding: 30px 26px; }
.sw-intro h1, .sw-end h1, .sw-test h1 { font-size: 26px; margin: 8px 0 10px; }
.sw-intro p { color: var(--ink-2); max-width: 380px; margin: 0 auto 16px; line-height: 1.5; }
.sw-test { text-align: left; }
.sw-test .eyebrow { text-align: left; }
.sw-test-lede { color: var(--ink-2); line-height: 1.5; margin: 0 0 4px; }
.sw-test-prog { color: var(--ink-3); font-size: 12px; margin: 6px 0 10px; }
.sw-qlist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
.sw-q { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 14px; }
.sw-q-text { display: flex; gap: 10px; font-size: 15px; line-height: 1.35; margin-bottom: 12px; }
.sw-q-num { color: var(--primary); font-weight: 600; flex: none; }
.sw-likert { display: flex; align-items: flex-start; gap: 4px; padding: 4px 0 0; }
.sw-lk-opt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 4px 1px; }
.sw-lk { border: 2px solid var(--border-2); background: var(--paper); border-radius: 50%; flex: none; transition: transform .12s ease, border-color .15s, background .15s; }
.sw-lk.s2 { width: 30px; height: 30px; }
.sw-lk.s1 { width: 24px; height: 24px; }
.sw-lk.s0 { width: 18px; height: 18px; }
.sw-lk-opt:hover .sw-lk { transform: scale(1.15); }
.sw-lk-opt.on.neg .sw-lk { background: var(--primary); border-color: var(--primary); }
.sw-lk-opt.on.pos .sw-lk { background: var(--good); border-color: var(--good); }
.sw-lk-opt.on.neu .sw-lk { background: var(--ink-3); border-color: var(--ink-3); }
.sw-lk-cap { font-size: 9.5px; line-height: 1.2; color: var(--ink-3); text-align: center; }
.sw-lk-opt.on .sw-lk-cap { font-weight: 600; color: var(--ink); }
.sw-lk-opt.on.neg .sw-lk-cap { color: var(--primary); }
.sw-lk-opt.on.pos .sw-lk-cap { color: var(--good); }

/* Barras por eje del test de 4 ejes (estilo 8values) */
.sw-axbars { display: grid; gap: 12px; margin-top: 10px; }
.sw-axbar-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 4px;
}
.sw-axbar-name { font-weight: 700; color: var(--ink-2); }
.sw-axbar-track {
  position: relative; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-2), color-mix(in oklab, var(--primary) 14%, var(--bg-2)));
  border: 1px solid var(--border);
}
.sw-axbar-track::before {
  content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: var(--border-2);
}
.sw-axbar-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--primary); border: 2.5px solid var(--paper);
  box-shadow: 0 1px 5px oklch(0.20 0.10 268 / 0.35);
}
.sw-axbars.compact { gap: 8px; margin-top: 8px; }
.sw-axbars.compact .sw-axbar-track { height: 6px; }
.sw-axbars.compact .sw-axbar-dot { width: 12px; height: 12px; border-width: 2px; }
/* Header de cada eje dentro del formulario del test */
.sw-q-axhead {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary); font-weight: 600; margin: 20px 0 2px;
}
.sw-q-axhead:first-child { margin-top: 0; }
/* Resultado del test extendido del precandidato (Mi Cuenta) */
.sw-test-result { margin-top: 14px; padding: 18px 20px; }
.sw-test-result .sw-profile-label { font-family: var(--serif); font-size: 20px; margin: 2px 0 4px; }
.sw-test-saved { font-size: 11px; color: var(--good); margin-bottom: 8px; }

/* perfil + brújula + filtro */
.sw-profile { display: flex; gap: 16px; align-items: center; text-align: left; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; margin: 6px 0 16px; }
.sw-profile-info { flex: 1; min-width: 0; }
.sw-profile-label { font-family: var(--serif); font-size: 18px; margin: 2px 0; }
.sw-profile-coords { font-size: 11px; color: var(--ink-3); }
.sw-redo { font-size: 12px; margin-top: 6px; display: inline-block; }
.sw-compass { flex: none; }
.sw-compass .cmp-bg { fill: var(--paper); stroke: var(--border); }
.sw-compass .cmp-axis { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 2 3; }
.sw-compass .cmp-other { fill: var(--ink-3); opacity: .38; }
.sw-compass .cmp-me { fill: var(--primary); stroke: var(--paper); stroke-width: 2; }
.sw-filter { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 0 0 16px; flex-wrap: wrap; }
.sw-filter .eyebrow { margin: 0; }
.sw-legend { display: flex; gap: 8px; justify-content: center; margin: 0 0 18px; flex-wrap: wrap; }
.sw-legend > div { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
.sw-key { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 600; }
.sw-key.pass { color: var(--ink-2); background: var(--bg-2); }
.sw-key.like { color: var(--good); background: var(--good-tint); }

/* mazo */
/* Flecha para volver a Nuestros Precandidatos, arriba de la tarjeta. */
/* Botón "Regresar…": en el gutter izquierdo (fuera de la columna centrada del
   mazo) para que la tarjeta suba hasta el header. En pantallas sin gutter cae
   arriba de la tarjeta como antes. */
.sw-back-row {
  position: absolute; top: 2px; right: 100%; margin-right: 18px;
  width: max-content; max-width: 260px;
  border: 0; background: none; padding: 6px 0; text-align: right; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--primary); cursor: pointer;
}
.sw-back-row:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .sw-back-row {
    position: static; right: auto; margin: 0 auto 10px;
    width: 100%; max-width: 400px; padding: 0 4px; text-align: left; white-space: normal;
  }
}
/* La altura del mazo la da la tarjeta de arriba (que está en flujo, no
   absoluta): con poco contenido (sin trayectoria, etc.) la tarjeta se acorta
   y los botones de voto quedan a la vista sin scroll; con mucho contenido se
   capea y el cuerpo scrollea adentro como siempre. */
.sw-deck { position: relative; margin: 0 auto 18px; width: 100%; max-width: 400px; touch-action: none; }
/* ── Modo votación (mazo activo): la PÁGINA no scrollea — solo el interior
   de la tarjeta del precandidato. El mazo se estira al alto disponible y
   el excedente de la bio scrollea dentro de la card. */
/* Lock de página en modo votación (sin scroll de página, solo dentro de la
   tarjeta): SOLO mobile. En desktop la vista scrollea normal y la tarjeta
   toma su alto natural (evita que el mazo quede roto/aplastado). */
@media (max-width: 880px) {
  .app-shell:has(.view.sw-votando),
  .app-main:has(.view.sw-votando) {
    min-height: 0;
    height: 100vh; height: 100dvh;
    overflow: hidden;
  }
  .app-main:has(.view.sw-votando) .app-content {
    min-height: 0; flex: 1 1 auto;
    display: flex; flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
  }
  .view.sw-votando { flex: 1 1 auto; min-height: 0; padding-bottom: 10px; }
  .view.sw-votando .sw-deck { flex: 1 1 auto; min-height: 0; }
  .view.sw-votando .sw-card.top { height: 100%; max-height: 100%; }
}
/* El scroll táctil vertical DENTRO de la tarjeta sigue habilitado aunque el
   mazo bloquee los gestos de página (touch-action del deck). */
.sw-card.top .sw-card-body { touch-action: pan-y; }
.sw-card {
  position: absolute; inset: 0;
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--ink) 10%, var(--border));
  border-radius: 22px;
  box-shadow: 0 1px 2px oklch(0.20 0.10 268 / 0.06), 0 30px 60px -30px oklch(0.20 0.10 268 / 0.40);
  overflow: hidden; display: flex; flex-direction: column;
  will-change: transform; user-select: none;
}
.sw-card.top .sw-card-body { overflow-y: auto; }
.sw-card.top {
  cursor: grab;
  position: relative;
  min-height: 380px; max-height: min(88vh, 800px);
}
/* ── Desktop: modo votación más ancho (aprovecha la pantalla) y cuerpo de la
   tarjeta en DOS columnas para mejor distribución. ─────────────────────── */
@media (min-width: 881px) {
  /* Contenedor de votación a ancho completo, DEBAJO del botón "Regresar"
     (que pasa a flujo normal arriba, en vez de absoluto a la izquierda). */
  .view.sw-view.sw-votando { max-width: none; }
  .sw-votando .sw-back-row {
    position: static; right: auto; margin: 0 0 14px;
    width: auto; max-width: none; text-align: left; padding: 0;
  }
  .sw-votando .sw-deck { max-width: none; }
  .sw-votando .sw-card.top { min-height: 460px; max-height: min(84vh, 900px); }
  .sw-votando .sw-card-photo { height: 140px; }
  .sw-votando .sw-card .sw-card-body {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 30px; row-gap: 2px; align-content: start;
    padding: 10px 26px 20px;
  }
  /* Lema, perfil político y botón "ver ficha" ocupan todo el ancho; los
     bloques de detalle (estudios, trayectoria, propuestas, fundamentación,
     ejes) se reparten en las dos columnas. */
  .sw-votando .sw-card .sw-card-body > .sw-lema,
  .sw-votando .sw-card .sw-card-body > .sw-det-pol,
  .sw-votando .sw-card .sw-card-body > .sw-verperfil { grid-column: 1 / -1; }
}
.sw-card.top:active { cursor: grabbing; }
/* Banner corto con el hue del candidato; el avatar lo solapa desde abajo. */
.sw-card-photo { position: relative; height: 96px; flex: none; }
/* Carta de propuesta en modo votación: acota la fundamentación para no
   desbordar la carta. */
.sw-prop-fund {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.5;
}
/* Botón "Crear nueva propuesta" al fondo de la lista, centrado. */
.prp-foot-propose { display: flex; justify-content: center; margin-top: 18px; }
.prp-foot-propose .btn.primary { min-width: 260px; }
.sw-card-photo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 18% 110%, oklch(1 0 0 / 0.35), transparent 55%);
  pointer-events: none;
}
.sw-niv {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  background: oklch(1 0 0 / 0.88); backdrop-filter: blur(4px);
  padding: 5px 11px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink); max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Carta de propuesta: tag de distrito (arriba-derecha) y autor (abajo-izq). */
.sw-card-prop .sw-niv { max-width: calc(60% - 18px); }
.sw-prop-tag {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  background: oklch(0.55 0.24 258); color: #fff;
  padding: 5px 11px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: 0 0 12px oklch(0.60 0.24 258 / 0.5);
}
.sw-prop-autor {
  position: absolute; left: 12px; bottom: 10px; z-index: 1;
  background: oklch(0.20 0.03 260 / 0.72); backdrop-filter: blur(4px);
  padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
  color: #eaf2ff; max-width: calc(100% - 24px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-prop-ejes li { margin-bottom: 2px; }
/* Cabecera: avatar con anillo solapando el banner + nombre al lado. */
.sw-head {
  display: flex; align-items: flex-end; gap: 14px;
  /* Menos solapamiento con el banner: el nombre queda con aire debajo. */
  padding: 0 18px; margin-top: -26px;
  position: relative; z-index: 2; flex: none;
}
.sw-head .sw-avatar {
  width: 88px; height: 88px; font-size: 32px; flex: none;
  border: 3px solid var(--paper);
  box-shadow: 0 6px 18px -6px oklch(0.20 0.10 268 / 0.35);
}
.sw-avatar-img { object-fit: cover; object-position: center top; background: var(--bg-2); }
/* ── Test político del candidato: bloque clickeable + modal de respuestas ── */
.sw-ctest-click { cursor: pointer; }
.sw-ctest-click:hover { border-color: var(--primary); }
.sw-ctest-open { font-size: 12px; font-weight: 600; margin-top: 6px; display: inline-block; }
.sw-ctest-ov {
  position: fixed; inset: 0; z-index: 220;
  background: oklch(0.2 0.03 270 / 0.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 18px;
}
.sw-ctest-modal { width: 100%; max-width: 540px; max-height: 86vh; overflow-y: auto; padding: 20px 22px; }
.sw-ctest-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.sw-ctest-name { margin: 3px 0 2px; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.sw-ctest-sub { font-size: 11px; color: var(--ink-3); }
.sw-ctest-x {
  border: 0; background: var(--bg-2); border-radius: 50%;
  width: 32px; height: 32px; font-size: 18px; line-height: 1; cursor: pointer; flex: none;
}
.sw-ctest-x:hover { background: var(--border); }
.sw-ctest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sw-ctest-list .sw-ctest-axhead {
  border: 0; padding: 10px 0 0; border-radius: 0;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary);
}
.sw-ctest-modal .sw-axbars { margin-bottom: 16px; }
.sw-ctest-list li { border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; }
.sw-ctest-q { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.sw-ctest-a { margin-top: 6px; font-size: 12px; font-weight: 700; }
.sw-ctest-a.v2  { color: var(--good); }
.sw-ctest-a.v1  { color: oklch(0.50 0.12 152); }
.sw-ctest-a.v0  { color: var(--ink-3); }
.sw-ctest-a.vm1 { color: oklch(0.55 0.13 60); }
.sw-ctest-a.vm2 { color: var(--danger); }
.sw-head-txt { min-width: 0; padding-bottom: 2px; }
.sw-match { position: absolute; top: 44px; right: 12px; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); padding: 4px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.sw-match.hi { color: var(--good); } .sw-match.mid { color: var(--accent-2); } .sw-match.lo { color: var(--ink-3); }
.sw-avatar { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 500; font-size: 38px; }
.sw-avatar.sm { width: 36px; height: 36px; font-size: 14px; }
.sw-yatag { position: absolute; bottom: 12px; left: 12px; background: var(--good); color: white; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.sw-card-body { padding: 8px 18px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sw-name { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
.sw-prof { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: 0.03em; }
/* Bloques de la credencial: separados por filetes, eyebrow en primario. */
.sw-card .sw-det-block { border-top: 1px solid var(--border); padding-top: 12px; margin: 12px 0 0; }
.sw-card .sw-det-block .eyebrow { color: var(--primary); }
.sw-card .sw-det-tray li { position: relative; padding-left: 14px; }
.sw-card .sw-det-tray li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); opacity: 0.5;
}
.sw-card .sw-det-tray-yr { min-width: 68px; font-size: 11.5px; }
.sw-estudios { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.sw-lema {
  font-size: 15.5px; font-style: italic; color: var(--ink-2);
  margin-top: 8px; line-height: 1.4;
  padding-left: 12px; border-left: 3px solid color-mix(in oklab, var(--primary) 45%, transparent);
}
.sw-affrow { margin: 12px 0 4px; padding-top: 0; }
.sw-affrow-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sw-affrow-pct { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.sw-affrow-pct.hi { color: var(--good); } .sw-affrow-pct.mid { color: var(--accent-2); } .sw-affrow-pct.lo { color: var(--ink-3); }
.sw-bar { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.sw-bar-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.sw-verperfil {
  margin-top: 14px; align-self: stretch; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  border-radius: 12px; padding: 9px 0; background: transparent;
  text-decoration: none; transition: background 140ms ease, border-color 140ms ease;
}
.sw-verperfil:hover { background: color-mix(in oklab, var(--primary) 7%, transparent); border-color: var(--primary); text-decoration: none; }

/* sellos */
.sw-stamp { position: absolute; z-index: 5; top: 56px; font-family: var(--mono); font-weight: 600; font-size: 21px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px; border-radius: 10px; border: 3px solid; opacity: 0; pointer-events: none; }
.sw-stamp.like { right: 18px; transform: rotate(11deg); color: var(--good); border-color: var(--good); }
.sw-stamp.pass { left: 18px; transform: rotate(-11deg); color: var(--ink-3); border-color: var(--ink-3); }

/* acciones */
.sw-actions { display: flex; align-items: center; justify-content: center; gap: 14px; }
.sw-act { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--border); background: var(--paper); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); transition: transform .12s ease, box-shadow .12s ease; color: var(--ink-2); }
.sw-act:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.sw-act:active { transform: scale(.93); }
.sw-act svg { width: 24px; height: 24px; }
.sw-act.pass { color: var(--ink-3); }
.sw-act.like { color: var(--good); width: 64px; height: 64px; }
.sw-act.undo { width: 46px; height: 46px; color: var(--ink-3); }
.sw-act:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }

/* ── Votación valorada: 5 opciones (me disgusta → me gusta mucho) ── */
.sw-legend-5 { gap: 6px 14px; }
.sw-legend-5 .sw-key { font-size: 16px; width: auto; height: auto; background: none; border: 0; }
.sw-voto-row { display: flex; align-items: stretch; justify-content: center; gap: 8px; flex-wrap: nowrap; }
.sw-voto { flex: 1 1 0; min-width: 0; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 6px; border-radius: 14px; border: 1px solid var(--border); background: var(--paper); cursor: pointer; box-shadow: var(--shadow-1); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.sw-voto:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.sw-voto:active { transform: scale(.95); }
.sw-voto:disabled { opacity: .4; cursor: default; transform: none; box-shadow: none; }
.sw-voto-emoji { font-size: 24px; line-height: 1; }
.sw-voto-lbl { font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.15; }
.sw-voto.vd:hover { border-color: #e5484d; } .sw-voto.vd .sw-voto-lbl { color: #c62a2f; }
.sw-voto.nd:hover { border-color: #e8915b; }
.sw-voto.nu:hover { border-color: var(--ink-3); }
.sw-voto.mg:hover { border-color: var(--accent-2); }
.sw-voto.mm:hover { border-color: var(--good); } .sw-voto.mm .sw-voto-lbl { color: var(--good); }
.sw-voto-row .sw-act.undo { flex: 0 0 auto; align-self: center; }
@media (max-width: 560px) { .sw-voto-lbl { font-size: 10.5px; } .sw-voto { min-width: 0; padding: 9px 5px; } .sw-voto-emoji { font-size: 20px; } }

/* toast */
.sw-toast { text-align: center; margin: 0 auto 12px; max-width: 340px; background: var(--ink); color: var(--paper); padding: 9px 14px; border-radius: 99px; font-size: 13px; }

/* fin */
.sw-end .ok-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--good-tint); color: var(--good); display: grid; place-items: center; }
.sw-end-sub { color: var(--ink-2); margin: 0 auto 6px; max-width: 360px; }
.sw-liked-list { display: flex; flex-direction: column; gap: 8px; text-align: left; margin: 16px 0 18px; }
.sw-liked-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; }
.sw-liked-row:hover { background: var(--bg-2); }
.sw-liked-row .lr-name { font-weight: 500; font-size: 14px; }
.sw-liked-row .lr-prof { font-size: 11px; color: var(--ink-3); }
.sw-liked-row .lr-aff { margin-left: auto; font-size: 11px; font-weight: 700; }
.sw-liked-row .lr-aff.hi { color: var(--good); } .sw-liked-row .lr-aff.mid { color: var(--accent-2); } .sw-liked-row .lr-aff.lo { color: var(--ink-3); }
.sw-liked-row .lr-star { margin-left: 10px; color: var(--good); }
.sw-end-foot { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 520px) {
  /* Tope pensado para que la fila de botones de voto entre en pantalla
     debajo de la tarjeta (flecha de regreso + botones ≈ 175px). */
  .sw-card.top { max-height: calc(100vh - 175px); max-height: calc(100dvh - 175px); }
  .sw-card-photo { height: 84px; }
  /* El avatar solapa el banner pero el texto arranca recién debajo de él:
     con align-end un nombre largo crecía hacia arriba y pisaba el banner. */
  .sw-head { margin-top: -36px; gap: 12px; align-items: flex-start; }
  .sw-head .sw-avatar { width: 76px; height: 76px; font-size: 27px; }
  .sw-head-txt { padding-top: 44px; padding-bottom: 0; }
  .sw-name { font-size: 21px; }
}

/* ── Ficha maximizada dentro de la votación ── */
.sw-detalle { padding: 0; overflow: hidden; }
.sw-det-back { display: inline-block; padding: 14px 18px 4px; font-size: 13px; }
.sw-det-hero { position: relative; height: 150px; display: grid; place-items: center; }
.sw-avatar.lg { width: 110px; height: 110px; font-size: 40px; }
.sw-det-hero .sw-match { position: absolute; top: 14px; right: 14px; }
.sw-det-hero .sw-yatag { position: absolute; bottom: 12px; left: 14px; }
.sw-det-body { padding: 16px 20px 8px; }
.sw-det-niv { font-size: 11px; color: var(--ink-3); }
.sw-det-name { font-size: 24px; margin: 4px 0 2px; }
.sw-det-prof { font-size: 12px; color: var(--ink-3); }
.sw-det-lema { font-style: italic; font-size: 16px; color: var(--ink-2); margin: 10px 0 18px; line-height: 1.4; }
.sw-det-block { margin: 0 0 18px; }
.sw-det-block .eyebrow { margin-bottom: 7px; }
.sw-det-estudios { font-size: 14px; color: var(--ink); }
.sw-det-tray { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.sw-det-tray li { display: flex; gap: 10px; font-size: 13px; line-height: 1.35; }
.sw-det-tray-yr { color: var(--ink-3); flex: none; min-width: 80px; }
.sw-det-tray-rol { color: var(--ink); }
/* Propuestas del precandidato en la tarjeta de votación */
.sw-det-props { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.sw-det-props li { font-size: 13px; line-height: 1.35; }
.sw-det-prop-link {
  border: 0; background: none; padding: 0; text-align: left; font: inherit; cursor: pointer;
  color: var(--primary); font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.sw-det-prop-link::before { content: '›'; color: var(--primary); font-weight: 700; }
.sw-det-prop-link:hover { text-decoration: underline; }
.sw-det-props-more { color: var(--ink-3); font-size: 12px; }
.sw-det-pol {
  display: flex; gap: 16px; align-items: center;
  background: linear-gradient(140deg, color-mix(in oklab, var(--primary) 7%, var(--paper)), var(--paper));
  border: 1px solid color-mix(in oklab, var(--primary) 20%, var(--border));
  border-radius: var(--r-lg); padding: 14px;
}
.sw-card .sw-det-pol { border-top: 1px solid color-mix(in oklab, var(--primary) 20%, var(--border)); }
.sw-det-pol-label { font-family: var(--serif); font-size: 17px; margin: 2px 0; }
.sw-det-pol-aff { font-weight: 700; font-size: 13px; }
.sw-det-pol-aff.hi { color: var(--good); } .sw-det-pol-aff.mid { color: var(--accent-2); } .sw-det-pol-aff.lo { color: var(--ink-3); }
.sw-det-stats { display: flex; gap: 28px; margin: 4px 0 16px; }
.sw-det-stat-v { font-family: var(--serif); font-size: 22px; color: var(--primary); }
.sw-det-actions { display: flex; gap: 10px; padding: 12px 20px 18px; border-top: 1px solid var(--border); }
.sw-det-actions .btn { flex: 1; justify-content: center; gap: 6px; }

/* ═══════════ Tablero de difusión ═══════════ */
.view.difusion { max-width: 760px; margin: 0 auto; }
.dif-head { margin-bottom: 16px; }
.dif-head .ch-lede { max-width: 560px; }
/* Difusión embebida (dentro de Mi cuenta, debajo de afiliaciones) */
.difusion-embed { display: flex; flex-direction: column; gap: 16px; }
.difusion-embed > * { margin: 0 !important; }
.dif-embed-head { padding-top: 2px; }
.dif-embed-head .ch-lede { max-width: 620px; font-size: 13.5px; }
/* En el panel embebido (Mi cuenta · segmento Difusión) aplanamos las tarjetas
   para que el contenido fluya dentro del segmento, consistente con Referidos. */
.difusion-embed .card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.difusion-embed > section + section { padding-top: 18px; border-top: 1px solid var(--border); }
.view.difusion { max-width: 820px; margin-left: auto; margin-right: auto; }
.dif-hero { background:
    radial-gradient(85% 120% at 50% -12%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(130% 150% at 50% 42%, var(--primary), var(--primary-2)); color: #fff; border: 0; padding: 22px 26px 18px; }
.dif-hero .eyebrow { color: rgba(255,255,255,.85); }
.dif-hero-main { display: flex; align-items: center; gap: 16px; }
.dif-nivel-ico { font-size: 44px; line-height: 1; }
.dif-nivel-txt { flex: 1; min-width: 0; }
.dif-identity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dif-nivel-nombre { font-family: var(--serif); font-size: 24px; font-weight: 500; margin-top: 2px; }
.dif-puntaje { text-align: right; flex: none; padding-left: 14px; }
.dif-puntaje .eyebrow { white-space: nowrap; }
.dif-puntaje-num { font-size: 40px; font-weight: 700; line-height: 1; }
.dif-prog { margin-top: 16px; }
.dif-prog-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.dif-prog-bar > i { display: block; height: 100%; background: #fff; border-radius: 99px; transition: width .4s ease; }
.dif-prog-lbl { font-size: 12px; color: rgba(255,255,255,.92); margin-top: 8px; }
.dif-formula { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 14px; text-align: center; letter-spacing: .02em; }
.dif-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.dif-metric { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 98px; }
.dif-metric-v { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--ink); }
.dif-metric .eyebrow { margin-top: 4px; }
.dif-link { margin-bottom: 14px; }
.dif-link-row { display: flex; gap: 8px; margin: 10px 0 12px; }
.dif-link-input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); font-size: 13px; color: var(--ink-2); }
.dif-share-btn { width: 100%; justify-content: center; }
.dif-skel { height: 70px; border-radius: var(--r); background: var(--bg-2); margin-top: 10px; }
.dif-premios { margin-bottom: 14px; }
.dif-premios-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dif-premio { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); }
.dif-premio.ok { border-color: var(--good); background: var(--good-tint); }
.dif-premio-ico { font-size: 22px; flex: none; }
.dif-premio-mid { flex: 1; min-width: 0; }
.dif-premio-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.dif-premio-nom { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dif-premio-bar { height: 7px; border-radius: 99px; background: color-mix(in oklab, var(--ink) 9%, transparent); overflow: hidden; }
.dif-premio-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.dif-premio.ok .dif-premio-bar > i { background: var(--good); }
.dif-premio-meta { font-size: 12px; color: var(--ink-3); flex: none; white-space: nowrap; }
.dif-premio.ok .dif-premio-meta { color: var(--good); font-weight: 600; }
.dif-refs { margin-bottom: 14px; }
.dif-refs-funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.dif-refs-cell { text-align: center; background: var(--bg-2); border-radius: var(--r); padding: 12px 6px; }
.dif-refs-num { font-family: var(--serif); font-size: 22px; color: var(--primary); }
.dif-posts-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dif-post { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); }
.dif-post-txt { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dif-post-ap { font-size: 12.5px; color: var(--ink-3); flex: none; }
.dif-post-share { flex: none; height: 32px; padding: 0 12px; font-size: 12px; }
.dif-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.dif-avatar-ini { display: grid; place-items: center; background: rgba(255,255,255,.2); color: #fff; font-family: var(--serif); font-size: 22px; font-weight: 500; }
.dif-identity-name { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.dif-identity-sub { font-size: 12.5px; color: rgba(255,255,255,.9); margin-top: 2px; }
.dif-social { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dif-soc { flex: 1 1 84px; min-width: 84px; min-height: 42px; padding: 9px 8px; border-radius: var(--r); border: 1px solid var(--border); background: var(--paper); cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.dif-soc:hover { background: var(--bg-2); }
.dif-soc.wa { color: #128c7e; } .dif-soc.tg { color: #229ED9; } .dif-soc.fb { color: #1877F2; }
.dif-material, .dif-yacomp { margin-bottom: 14px; }
.dif-material-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dif-mat { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); }
.dif-mat-thumb { position: relative; width: 72px; height: 72px; border-radius: var(--r); overflow: hidden; flex: none; background: var(--bg-2); display: grid; place-items: center; }
.dif-mat-media { width: 100%; height: 100%; object-fit: cover; }
.dif-mat-ph { font-size: 28px; }
.dif-mat-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; background: rgba(0,0,0,.28); }
.dif-mat-body { flex: 1; min-width: 0; }
.dif-mat-txt { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dif-mat-meta { font-size: 11.5px; color: var(--ink-3); margin: 4px 0 8px; }
.dif-mat-share { height: 34px; padding: 0 16px; }
.dif-mat-thumb.is-video { cursor: pointer; }
.dif-mat.playing { flex-direction: column; align-items: stretch; }
.dif-mat-player { width: 100%; border-radius: var(--r); background: #000; max-height: 60vh; }
.dif-mat.playing .dif-mat-body { width: 100%; }
.post-material { background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1; opacity: .45; padding: 4px; margin-left: auto; }
.post-material:hover { opacity: .8; }
.post-material.on { opacity: 1; }
.post-material.on + .post-del { margin-left: 4px; }

@media (max-width: 560px) {
  .dif-refs-funnel { grid-template-columns: repeat(3, 1fr); }
  .dif-puntaje-num { font-size: 32px; }
  .dif-hero { padding: 18px 18px 16px; }
  .dif-metrics { gap: 8px; }
  .dif-metric { min-height: 82px; padding: 12px 8px; }
  .dif-metric-v { font-size: 23px; }
  .dif-metric .eyebrow { font-size: 9.5px; }
}

/* ─── Consola de administración (back office) ────────────────────────────────
   Home con contadores en vivo + lanzador de procesos + auditoría. */
.view.console { max-width: 1100px; }
.console-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.console-sec {
  display: flex; align-items: center; gap: 12px;
  margin: 32px 0 14px; font-size: 1.35rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink);
}
.console-sec .link { margin-left: auto; font-size: 13px; font-weight: 500; }

.console-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.console-card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.console-card:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -28px oklch(0.30 0.10 268 / 0.45);
}
.console-card-n { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.console-card-l { font-weight: 650; color: var(--ink); margin-top: 2px; }
.console-card-s { font-size: 12px; color: var(--ink-2); }
.console-card-go {
  position: absolute; top: 16px; right: 16px; font-size: 18px; opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
.console-card:hover .console-card-go { opacity: 1; transform: translateX(2px); }

.console-launch {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.console-launch-item {
  text-align: left; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .15s ease, background .15s ease;
}
.console-launch-item:hover { border-color: var(--primary); background: var(--paper); }
.console-launch-item .cl-label { font-weight: 650; color: var(--ink); }
.console-launch-item .cl-hint { font-size: 11px; color: var(--ink-2); }

/* Auditoría · lista compacta (preview) + tabla completa */
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.audit-row:last-child { border-bottom: 0; }
.audit-when { color: var(--ink-2); font-size: 12px; min-width: 110px; }
.audit-actor { font-weight: 600; color: var(--ink); }
.audit-act { color: var(--ink); }
.audit-det { color: var(--ink-2); font-size: 12px; }

.audit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-table th, .audit-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.audit-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-2); font-weight: 650;
}
.audit-table tbody tr:hover { background: var(--bg-2); }

/* Link discreto "Acceso autoridades" en el footer */
.f-admin-link { opacity: 0.75; text-decoration: underline; }
.f-admin-link:hover { opacity: 1; }

/* Hilo de conversación admin↔precandidato (modal de precandidatos) */
.pc-thread {
  max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 10px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
}
.pc-msg { max-width: 80%; padding: 8px 11px; border-radius: 12px; font-size: 13px; }
.pc-msg.mio  { align-self: flex-end; background: var(--primary); color: #fff; }
.pc-msg.suyo { align-self: flex-start; background: var(--paper); border: 1px solid var(--border); color: var(--ink); }
.pc-msg-txt { white-space: pre-wrap; word-break: break-word; }
.pc-msg-meta { font-size: 10px; margin-top: 3px; opacity: .7; }

/* ─── Consola admin · shell del frontend separado (admin.html) ───────────────*/
.admin-page { background: var(--bg-2, #f3f4f8); }
.admin-boot { min-height: 100vh; display: grid; place-items: center; color: var(--ink-2); font-size: 15px; }

/* Login / sin acceso */
.admin-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.admin-login-card { width: 100%; max-width: 410px; padding: 30px 30px 26px; }
.admin-login-sep { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12px; margin: 16px 0; }
.admin-login-sep::before, .admin-login-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* App shell */
.admin-app { min-height: 100vh; display: flex; flex-direction: column; }
.admin-topbar {
  position: sticky; top: 0; z-index: 20; flex: 0 0 auto;
  height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: var(--paper); border-bottom: 1px solid var(--border);
}
.admin-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.admin-brand span { font-weight: 700; font-size: 15px; }
.admin-burger { display: none; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--ink); padding: 4px 6px; }
.admin-top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.admin-whoami { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.admin-roletag { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700; letter-spacing: .02em; }
.admin-roletag.is-admin { color: oklch(0.36 0.20 268); background: var(--primary-tint); }
.admin-roletag.is-aut   { color: oklch(0.48 0.12 70);  background: oklch(0.95 0.06 80); }
.admin-logout { height: 34px; padding: 0 14px; font-size: 13px; }

.admin-body { flex: 1; display: flex; min-height: 0; }
.admin-nav {
  flex: 0 0 232px; border-right: 1px solid var(--border); background: var(--bg-2);
  padding: 14px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.admin-nav-item {
  text-align: left; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  display: flex; flex-direction: column; gap: 1px; transition: background .12s ease, border-color .12s ease;
  position: relative;
}
.admin-nav-item:hover { background: var(--paper); }
.admin-nav-item.active { background: var(--paper); border-color: var(--border); box-shadow: var(--shadow-1); }
.admin-nav-item .ani-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.admin-nav-item .ani-hint { font-size: 10px; color: var(--ink-3); }
/* Badge de notificaciones (cantidad de novedades desde la última visita). */
.admin-nav-item .ani-badge {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.admin-nav-scrim { display: none; }

.admin-main { flex: 1; overflow-y: auto; padding: 28px 32px 60px; min-width: 0; }

@media (max-width: 860px) {
  .admin-burger { display: block; }
  .admin-nav {
    position: fixed; left: 0; top: 56px; bottom: 0; width: 250px; z-index: 30;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-2, 0 20px 60px -30px rgba(0,0,0,.4));
  }
  .admin-nav.is-open { transform: none; }
  .admin-nav-scrim { display: block; position: fixed; inset: 56px 0 0 0; background: rgba(0,0,0,.32); z-index: 25; }
  .admin-main { padding: 18px 16px 48px; }
  .admin-whoami { display: none; }
}

/* Input genérico de la consola (alta de denuncias/coherencia, etc.) */
.inp {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 14px; min-width: 0;
  transition: border-color .15s ease;
}
.inp::placeholder { color: var(--ink-3); }
.inp:focus { outline: none; border-color: var(--primary); }
select.inp { cursor: pointer; }

/* Campo etiquetado (label arriba + control full-width). Usado en formularios del
   back office: aviso a todos, mensaje a precandidato, etc. */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field > label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field > input, .field > textarea, .field > select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 14px;
}
.field > textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.field > input:focus, .field > textarea:focus, .field > select:focus {
  outline: none; border-color: var(--primary);
}
.field > input::placeholder, .field > textarea::placeholder { color: var(--ink-3); }

/* ─── Editor de texto enriquecido (consola · comunicaciones) ──────────────────*/
.rte-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--paper); }
.rte-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 7px 8px; background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.rte-b {
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
  font: inherit; font-size: 13px; line-height: 1; padding: 6px 9px; border-radius: 7px;
  cursor: pointer; white-space: nowrap;
}
.rte-b:hover { background: var(--paper); color: var(--ink); border-color: var(--border); }
.rte-b:active { transform: translateY(1px); }
.rte-b:disabled { opacity: .5; cursor: default; }
.rte-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); }
.rte {
  min-height: 200px; max-height: 520px; overflow-y: auto;
  padding: 16px 18px; color: var(--ink); font-size: 15px; line-height: 1.7;
  outline: none;
}
.rte:empty::before { content: attr(data-ph); color: var(--ink-3); }
.rte:focus { box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--primary) 28%, transparent); }
.rte p { margin: 0 0 14px; }
.rte h2 { margin: 18px 0 8px; font-size: 19px; color: var(--primary); font-weight: 700; }
.rte h3 { margin: 16px 0 6px; font-size: 16px; color: var(--primary); font-weight: 700; }
.rte ul, .rte ol { margin: 0 0 14px; padding-left: 22px; }
.rte li { margin: 0 0 5px; }
.rte a { color: var(--primary); text-decoration: underline; font-weight: 600; }
.rte blockquote {
  margin: 0 0 14px; padding: 8px 14px; border-left: 3px solid #C9982F;
  background: var(--bg-2); color: var(--ink-2); font-style: italic;
}
.rte img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 8px 0; }
.rte-err { padding: 8px 14px; color: var(--danger); font-size: 13px; border-top: 1px solid var(--border); }
.rte-dragover {
  box-shadow: inset 0 0 0 2px var(--primary);
  background: color-mix(in oklch, var(--primary) 6%, transparent);
}
.rte-drophint {
  padding: 7px 14px; font-size: 12px; text-align: center; color: var(--primary);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  border-top: 1px dashed var(--primary);
}

/* ─── Selector de destinatarios (consola · comunicaciones) ───────────────────*/
.com-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.com-chip {
  border: 1px solid var(--border); background: var(--paper); color: var(--ink-2);
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.com-chip:hover { border-color: var(--primary); color: var(--ink); }
.com-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.com-chip-n {
  font-size: 11px; font-weight: 700; background: var(--bg-2); color: var(--ink-2);
  border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
}
.com-chip.on .com-chip-n { background: rgba(255,255,255,.22); color: #fff; }
.btn-sm { padding: 6px 12px !important; font-size: 13px !important; }
.com-userlist {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 10px; background: var(--paper);
}
.com-userrow {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.com-userrow:last-child { border-bottom: none; }
.com-userrow:hover { background: var(--bg-2); }
.com-userrow.on { background: color-mix(in oklch, var(--primary) 8%, transparent); }
.com-userrow input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
.com-user-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.com-user-name { font-size: 14px; color: var(--ink); font-weight: 600; }
.com-user-sub { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-user-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--primary); background: color-mix(in oklch, var(--primary) 12%, transparent);
  border-radius: 6px; padding: 2px 7px; flex: none;
}
.com-dest-total {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px;
}
.com-dest-total strong { font-size: 18px; color: var(--primary); }

/* ─── Correos automáticos (consola · comunicaciones + usuarios) ──────────────*/
.eml-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.eml-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  background: var(--paper); display: flex; flex-direction: column; gap: 6px;
}
.eml-card-tag {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary);
  background: color-mix(in oklch, var(--primary) 10%, transparent);
  padding: 3px 8px; border-radius: 999px;
}
.eml-card-asunto { font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--ink); }
.eml-card-desc { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.eml-card-meta { font-size: 11px; color: var(--ink-3); }
.eml-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; }
.eml-stat { font-weight: 600; }
.eml-stat.ok   { color: var(--good); }
.eml-stat.fail { color: var(--danger); }

.eml-log { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.eml-log-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.eml-log-row:last-child { border-bottom: none; }
.eml-log-row:hover { background: var(--bg-2); }
.eml-log-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.eml-log-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eml-log-sub { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eml-log-ts { font-size: 11px; color: var(--ink-3); flex: none; }
.eml-pill {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.eml-pill.ok   { background: var(--good-tint);   color: var(--good); }
.eml-pill.fail { background: var(--danger-tint); color: var(--danger); }

/* Badges por usuario (tabla de Usuarios) */
.eml-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.eml-badge {
  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--ink-3); line-height: 1.5;
  white-space: nowrap;
}
.eml-badge:hover { border-color: var(--primary); }
.eml-badge.ok   { background: var(--good-tint);   color: var(--good);   border-color: transparent; }
.eml-badge.fail { background: var(--danger-tint); color: var(--danger); border-color: transparent; }
.eml-badge.none { color: var(--ink-3); }

/* ─── Mapa de afiliados (consola · afiliaciones) ─────────────────────────────*/
.mapa-toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.mapa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mapa-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 2px; vertical-align: middle; }
.mapa-wrap { position: relative; }
.afil-map { height: 560px; width: 100%; border-radius: 14px; border: 1px solid var(--border); z-index: 0; }
.mapa-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; background: color-mix(in oklch, var(--paper) 78%, transparent);
  border-radius: 14px; font-size: 13px; padding: 20px; z-index: 500;
}
.mapa-foot { font-size: 12px; color: var(--ink-3); margin-top: 10px; line-height: 1.6; }
/* Punto de afiliado (divIcon de Leaflet) */
.afil-dot span {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.afil-dot-form span {
  width: 18px; height: 18px; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 10px rgba(225,29,72,.6);
}
/* El mapa no debe tapar modales/sidebar de la consola */
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 400 !important; }

/* ─── Admin · Puntos de Afiliación ───────────────────────────────────────────*/
.ap-wrap { display: flex; flex-direction: column; gap: 18px; }
.ap-head .ch-lede { max-width: 720px; }
.ap-grid { display: grid; grid-template-columns: minmax(320px, 1fr) 1.4fr; gap: 18px; align-items: start; }
.ap-form { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ap-form-h { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.ap-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ap-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-dir { display: flex; gap: 8px; }
.ap-dir .inp { flex: 1; min-width: 0; }
.ap-dir .btn { white-space: nowrap; flex-shrink: 0; }
.ap-coords { font-size: 11px; color: var(--ink-3); margin-top: -2px; }
.ap-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; margin-top: 2px; }
.ap-check input { width: 16px; height: 16px; }
.ap-msg { font-size: 12.5px; border-radius: 10px; padding: 8px 12px; }
.ap-msg.ok { color: var(--good, #147a45); background: color-mix(in oklab, #147a45 10%, transparent); }
.ap-msg.err { color: var(--danger, #c0392b); background: color-mix(in oklab, #c0392b 10%, transparent); }
.ap-actions { display: flex; gap: 8px; margin-top: 4px; }
.ap-map { padding: 12px; }
.ap-map-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ap-map-filter { width: auto; min-width: 190px; }
.ap-map-el { height: 460px; border-radius: 12px; overflow: hidden; }
/* Mini-mapa de centros en el modal de Mi Cuenta */
.ca-map { height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.ap-map-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; font-size: 13px; line-height: 1.5; color: var(--ink-2);
  background: var(--bg-2, #f4f5f9); border-radius: 12px;
}
.ap-list { padding: 6px 0; }
.ap-list-h { padding: 12px 16px 8px; }
.ap-empty { padding: 18px 16px; color: var(--ink-3); font-size: 13px; }
.ap-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
.ap-item.is-edit { background: color-mix(in oklab, var(--primary) 6%, transparent); }
.ap-item.is-off { opacity: .6; }
.ap-item-main { flex: 1; min-width: 0; cursor: pointer; }
.ap-item-nom { font-weight: 600; font-size: 14px; }
.ap-item-off { font-size: 10px; color: var(--danger, #c0392b); text-transform: uppercase; letter-spacing: .06em; margin-left: 6px; }
.ap-item-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.ap-item-noloc { color: var(--danger, #c0392b); }
.ap-item-acts { display: flex; gap: 6px; flex-shrink: 0; }
.ap-mini { height: 30px; padding: 0 12px; font-size: 12px; }
.ap-del { color: var(--danger, #c0392b); border: 1px solid color-mix(in oklab, var(--danger, #c0392b) 40%, var(--border)); background: transparent; }
.ap-del:hover { background: color-mix(in oklab, var(--danger, #c0392b) 10%, transparent); }
@media (max-width: 900px) {
  .ap-grid { grid-template-columns: 1fr; }
  .ap-map-el { height: 340px; }
}

/* ─── Admin · Elecciones (reglas por provincia) ──────────────────────────────*/
.elec-wrap { display: flex; flex-direction: column; gap: 18px; }
.elec-bar { padding: 14px 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.elec-bar .inp { min-width: 240px; }
.elec-bar-info { font-size: 12px; color: var(--ink-3); }
/* Control de la cuenta regresiva de la votación (prender/apagar + fecha). */
.elec-cdown { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.elec-cdown-row { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.elec-cdown-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-3); }
.elec-cdown-row .inp { min-width: 200px; }
.elec-cdown-sw { flex-direction: row !important; align-items: center; gap: 9px !important; font-size: 14px !important; color: var(--ink-1) !important; font-weight: 600; cursor: pointer; }
.elec-cdown-sw input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.elec-form { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.elec-sec-h { color: var(--ink-3); letter-spacing: .1em; }
.elec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.elec-cargos { display: flex; flex-direction: column; gap: 6px; }
.elec-cargo-block { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.elec-cargo-nom { font-weight: 600; font-size: 14px; }
.elec-listas { width: 100%; border-collapse: collapse; font-size: 13px; }
.elec-listas th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 4px 8px; font-weight: 500; border-bottom: 1px solid var(--border); }
.elec-listas th.num, .elec-listas td.num { text-align: right; }
.elec-listas td { padding: 4px 8px; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.elec-listas td .inp { width: 84px; text-align: right; padding: 5px 8px; }
.elec-total { font-weight: 700; color: var(--primary); }
.elec-simple { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.elec-simple label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.elec-simple .inp { width: 90px; text-align: right; }
.elec-total-lbl { font-size: 13px; color: var(--ink-2); }
.elec-nota { font-size: 12.5px; }
.elec-verify { font-size: 12.5px; color: var(--ink-2); background: var(--warn-bg, #fff7ed); border: 1px solid var(--warn-border, #fed7aa); border-radius: 8px; padding: 8px 12px; margin: 0 0 6px; }
.elec-concejo { display: flex; flex-direction: column; gap: 10px; }
.elec-concejo-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.elec-concejo-bar .inp { min-width: 220px; max-width: 320px; }
.elec-concejo-info { font-size: 12px; color: var(--ink-2); }
.elec-uniforme { font-size: 12.5px; color: var(--ink-2); margin: 0; }
.btn.ghost.sm, .btn.sm { padding: 6px 12px; font-size: 13px; }
@media (max-width: 820px) {
  .elec-concejo-bar .inp { min-width: 0; width: 100%; max-width: none; }
  .elec-grid { grid-template-columns: 1fr; }
  .elec-listas td .inp { width: 64px; }
}

/* ─── Registro de accesos (consola · seguridad) ──────────────────────────────*/
.acc-table { width: 100%; font-size: 13px; }
.acc-row {
  display: grid; grid-template-columns: 120px 1.4fr 70px 1.6fr 1.1fr 1.2fr;
  gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); align-items: center;
}
.acc-row:last-child { border-bottom: none; }
.acc-row > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-head { background: var(--bg-2); font-weight: 700; color: var(--ink-2); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; }
.acc-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 6px; padding: 2px 7px; }
.acc-tag.is-login { color: #2e9e57; background: color-mix(in oklch, #2e9e57 14%, transparent); }
.acc-tag.is-gate { color: var(--ink-2); background: var(--bg-2); }
@media (max-width: 760px) {
  .acc-row { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .acc-head { display: none; }
}

/* ─── Cupos fundacionales · contador por distrito (Mi cuenta) ─────────────────*/
.cupos-banner {
  --cupos-glow: 0.55 0.22 275;            /* L C H del glow neón (azul-violeta) */
  border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: 16px; padding: 18px 20px; background: var(--paper); margin: 0 0 18px;
  box-shadow: 0 0 9px oklch(var(--cupos-glow) / 0.45), 0 0 22px oklch(var(--cupos-glow) / 0.25);
  animation: cupos-neon 2.4s ease-in-out infinite;
}
.cupos-banner.is-win  { --cupos-glow: 0.62 0.18 150; border-left-color: oklch(0.55 0.15 150); background: var(--good-tint, oklch(0.96 0.03 155)); }
.cupos-banner.is-full { --cupos-glow: 0.60 0.02 270; border-left-color: var(--ink-3); }
.cupos-banner.is-soft { --cupos-glow: 0.60 0.02 270; border-left-color: var(--border); }
@keyframes cupos-neon {
  0%, 100% { box-shadow: 0 0 8px oklch(var(--cupos-glow) / 0.40), 0 0 18px oklch(var(--cupos-glow) / 0.22); }
  50%      { box-shadow: 0 0 14px oklch(var(--cupos-glow) / 0.62), 0 0 32px oklch(var(--cupos-glow) / 0.38); }
}
@media (prefers-reduced-motion: reduce) {
  .cupos-banner { animation: none; }
}
.cupos-head { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.cupos-emoji { font-size: 18px; }
.cupos-msg { color: var(--ink-2); margin: 8px 0 12px; line-height: 1.5; font-size: 14px; }
.cupos-msg strong { color: var(--ink); }
/* Progreso de afiliación embebido dentro del banner (estado "reservado"). */
.cupos-afil { margin: 6px 0 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cupos-bar { display: block; height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.cupos-bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s ease; }
.is-win .cupos-bar-fill { background: oklch(0.55 0.15 150); }
.is-full .cupos-bar-fill { background: var(--ink-3); }
.cupos-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.cupos-count { font-size: 12px; color: var(--ink-2); }
.cupos-cta { height: 36px; padding: 0 16px; }
.cupos-foot .link { margin-left: auto; font-size: 13px; }
.cupos-tabla { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.cupos-tabla-row { display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.cupos-tabla-row .ct-name { color: var(--ink); }
.cupos-tabla-row.is-mine .ct-name { font-weight: 700; color: var(--primary); }
.cupos-tabla-row .ct-num { color: var(--ink-2); min-width: 92px; text-align: right; }
.cupos-tabla-load { color: var(--ink-3); padding: 10px 0; font-size: 13px; }
@media (max-width: 560px) { .cupos-tabla-row { grid-template-columns: 92px 1fr auto; } }

/* ─────────────────────────────────────────────────────────
   CUENTA REGRESIVA A LA PRIMERA VOTACIÓN
   Cortina de la Votación Ciudadana hasta la fecha configurada en el back
   office (Admin → Elecciones). Apagada desde ahí, vuelve el tablero completo.
   Gemela de .m-cdown en app/mobile/mobile.css.
   ───────────────────────────────────────────────────────── */
/* El contador usa TODO el alto útil: se le saca el padding al contenedor y el
   alto exacto (viewport menos lo que haya arriba) lo mide el componente y lo
   escribe en --vot-cdown-h — así no dependemos de la altura del header. */
body.is-cdown .app-content { padding: 0; max-width: none; }
/* Sin hueco blanco entre el contador (fondo oscuro) y el footer (fondo oscuro):
   el margin-top del footer dejaba una banda clara. */
body.is-cdown footer.f { margin-top: 0; }

.view.vot-cdown {
  min-height: var(--vot-cdown-h, 88vh);
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px; color: #eaf2ff;
  background:
    radial-gradient(110% 80% at 50% 0%, oklch(0.36 0.16 265 / 0.62), transparent 62%),
    linear-gradient(165deg, #0b1030 0%, #0e1447 52%, #0a0f2b 100%);
}
.vot-cdown-inner { width: 100%; max-width: 620px; text-align: center; }
.vot-cdown-eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: oklch(0.86 0.08 220);
}
.vot-cdown-title {
  margin: 12px 0 0; font-family: var(--serif); font-size: clamp(28px, 5vw, 44px);
  line-height: 1.18; font-weight: 800; color: #fff;
  text-shadow: 0 0 22px oklch(0.70 0.20 250 / 0.55);
}
.vot-cdown-lead { margin: 16px 0 0; font-size: 16px; color: oklch(0.88 0.05 240); }
.vot-cdown-ya { font-weight: 700; color: #7ef0b0; }
.vot-cdown-clock {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0 0;
}
.vot-cdown-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 6px; border-radius: 16px;
  background: oklch(0.30 0.10 265 / 0.5);
  border: 1px solid oklch(0.72 0.15 240 / 0.42);
  box-shadow: inset 0 0 26px oklch(0.60 0.24 260 / 0.14);
}
.vot-cdown-cell b {
  font-family: var(--mono); font-size: clamp(28px, 6vw, 40px); line-height: 1;
  font-weight: 700; color: #8fe3ff; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px oklch(0.80 0.15 220 / 0.7);
}
.vot-cdown-cell span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: oklch(0.82 0.06 235);
}
.vot-cdown-nota {
  margin: 26px auto 0; max-width: 46ch; font-size: 15px; line-height: 1.6;
  color: oklch(0.84 0.05 240);
}
.vot-cdown-cta {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 0;
}
.vot-cdown-btn {
  flex: 1 1 240px; max-width: 320px; padding: 15px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
  background: oklch(0.32 0.09 265 / 0.55);
  border: 1px solid oklch(0.78 0.15 235 / 0.45);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.vot-cdown-btn.is-primary {
  background: linear-gradient(135deg, oklch(0.45 0.20 262), oklch(0.55 0.24 258));
  border-color: oklch(0.78 0.15 235 / 0.55);
  text-shadow: 0 0 10px oklch(0.70 0.20 250 / 0.8);
  box-shadow: 0 0 16px oklch(0.66 0.22 255 / 0.5), inset 0 0 20px oklch(0.70 0.20 250 / 0.18);
}
.vot-cdown-btn:hover { filter: brightness(1.12); }
.vot-cdown-btn:active { transform: scale(.98); }
@media (max-width: 560px) {
  .view.vot-cdown { padding: 32px 16px; }
  .vot-cdown-clock { gap: 8px; }
  .vot-cdown-cell { padding: 14px 4px; border-radius: 13px; }
}

/* Segmento "Seguí la batalla" · redes sociales (usado en index/home y páginas de contacto). */
.idx-redes { text-align: center; max-width: 720px; margin: 0 auto; }
.idx-redes-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; }
.idx-redes-text { color: var(--ink-2); font-size: 19px; line-height: 1.55; margin: 8px auto 24px; max-width: 580px; }
.idx-redes-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.idx-redes-links a { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease; }
.idx-redes-links a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.12); background: var(--ink); color: var(--paper); }
.idx-redes-links svg { width: 22px; height: 22px; fill: currentColor; }