/* =============================================================================
   PARTICIPA COMAS :: estilos del PANEL DE SIMULACIÓN interactiva
   -----------------------------------------------------------------------------
   ⚠️ PROTOTIPO DE DEMOSTRACIÓN · Datos 100 % ficticios.
   No es una plataforma oficial de la Municipalidad de Comas.

   Hoja de estilos autocontenida: sin CDNs, sin webfonts, sin JavaScript de
   terceros. Todos los iconos son SVG en línea y todos los gráficos están
   hechos a mano con CSS (barras, medidores, rankings). Debe verse bien sin
   conexión a internet.

   ÍNDICE
     1.  Variables de diseño (tokens)
     2.  Base y reset
     3.  Utilidades
     4.  Banner legal fijo
     5.  Cabecera oscura institucional
     6.  Pestañas pegajosas
     7.  Layout: secciones, tarjetas y rejillas
     8.  Componentes
         8.1  Avisos y mensajes
         8.2  Botones
         8.3  Etiquetas (chips) y contadores
         8.4  Formularios
         8.5  Filtros y buscador
         8.6  Listas y tarjetas de proyecto (.item)
         8.7  Barras, medidores y rankings
         8.8  Indicadores en vivo (.stat) y distribución
         8.9  Feed de actividad
         8.10 Carrito / papeleta de voto
         8.11 Obras y estados
         8.12 Carga y estados vacíos
         8.13 Pasos del proceso
     9.  Pie de página
    10.  Responsive
    11.  Accesibilidad, impresión y movimiento reducido
   ============================================================================= */


/* =============================================================================
   1. VARIABLES DE DISEÑO
   Escala de espaciado 4/8/12/16/24/32, radios consistentes y transiciones
   de 150–200 ms para todas las microinteracciones.
   ============================================================================= */
:root {
  /* --- Marca (rojo institucional llevado a nivel producto) --- */
  --rojo-700: #8c0f1f;
  --rojo-600: #b01029;
  --rojo-500: #c8102e;
  --rojo-400: #e23a52;
  --rojo-300: #ff8a9b;   /* acento legible sobre fondos oscuros (AA) */
  --rojo-050: #fff1f3;

  /* --- Semánticos --- */
  --verde-700: #0f6b40;
  --verde-600: #17814c;
  --verde-500: #22a15f;
  --ambar-700: #8a5a06;
  --ambar-600: #b8710a;
  --ambar-500: #e8a52c;
  --azul-700: #3730a3;

  /* --- Neutros --- */
  --tinta-900: #14141a;
  --tinta-800: #232329;
  --tinta-700: #3c3c45;
  --gris-600: #52525b;
  --gris-500: #6b7280;
  --gris-100: #f4f4f6;
  --gris-050: #fafafb;
  --borde: #e6e6ea;
  --borde-fuerte: #d5d5dd;

  /* --- Espaciado --- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  /* --- Radios --- */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 22px;
  --r-full: 999px;

  /* --- Sombras --- */
  --s-1: 0 1px 2px rgba(16, 16, 20, .05), 0 1px 3px rgba(16, 16, 20, .04);
  --s-2: 0 2px 6px rgba(16, 16, 20, .06), 0 8px 20px -14px rgba(16, 16, 20, .22);
  --s-3: 0 12px 32px -16px rgba(16, 16, 20, .35);

  /* --- Movimiento --- */
  --t: 160ms cubic-bezier(.4, 0, .2, 1);
  --curva: cubic-bezier(.22, .68, .35, 1);

  /* --- Alto del banner legal (lo recalcula el script con el alto real) --- */
  --alto-banner: 44px;

  color-scheme: light;
}

@media (max-width: 900px) { :root { --alto-banner: 60px; } }
@media (max-width: 560px) { :root { --alto-banner: 76px; } }


/* =============================================================================
   2. BASE Y RESET
   ============================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--alto-banner);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta-800);
  background:
    radial-gradient(120% 60% at 50% -10%, #fdfdfe 0%, #f6f6f8 55%, #f2f2f5 100%) fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
button { font: inherit; }

/* Los números se alinean siempre: es un panel de datos. */
.stat__valor, .item__monto, .dato strong, .marcador__cifra, #disponible,
#elegido, .medidor__valor, .dist__valor, .feed__tiempo, .contador,
#reloj, .barra-presupuesto strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Foco visible y consistente en todo el producto */
:focus-visible {
  outline: 3px solid rgba(200, 16, 46, .45);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
.cabecera :focus-visible,
footer :focus-visible { outline-color: var(--rojo-300); }

/* Saltar al contenido (lectores de pantalla y teclado) */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--rojo-700);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--r-2) 0;
  text-decoration: none;
}
.salto-contenido:focus { left: 0; }

/* Sprite de iconos SVG: presente pero sin ocupar espacio */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Tamaños base de los iconos en línea */
.icono { display: block; width: 20px; height: 20px; flex: none; }
.icono--mini { width: 16px; height: 16px; }
.icono--escudo { width: 26px; height: 26px; }
.icono--aviso { width: 20px; height: 20px; margin-top: 2px; }


/* =============================================================================
   3. UTILIDADES
   ============================================================================= */
.contenedor {
  width: min(1240px, 92vw);
  margin-inline: auto;
}

/* Cualquier elemento oculto con [hidden] debe ganar a los display de abajo */
[hidden] { display: none !important; }

.ayuda {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--gris-600);
}
.ayuda strong { color: var(--tinta-700); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--gris-100);
  color: var(--tinta-800);
}


/* =============================================================================
   4. BANNER LEGAL FIJO
   Texto obligatorio e íntegro del prototipo.
   ============================================================================= */
#banner {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 9px 14px;
  background:
    linear-gradient(90deg, var(--rojo-700) 0%, var(--rojo-500) 52%, var(--rojo-400) 100%);
  color: #fff;
  box-shadow: 0 2px 14px rgba(20, 20, 26, .38);
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}

.banner__texto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  max-width: 1100px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.banner__etiqueta {
  flex: none;
  padding: 1px 9px;
  border-radius: var(--r-full);
  background: #fff;
  color: var(--rojo-700);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* =============================================================================
   5. CABECERA OSCURA INSTITUCIONAL
   ============================================================================= */
.cabecera {
  position: relative;
  overflow: hidden;
  color: #f5f5f8;
  background:
    radial-gradient(120% 150% at 10% -20%, rgba(226, 58, 82, .30) 0%, rgba(226, 58, 82, 0) 58%),
    radial-gradient(90% 130% at 100% 0%, rgba(200, 16, 46, .24) 0%, rgba(200, 16, 46, 0) 62%),
    linear-gradient(158deg, #111117 0%, #1a1119 52%, #241018 100%);
  border-bottom: 3px solid var(--rojo-500);
}

/* Trama de datos sutil: da la sensación de "panel", no de folleto */
.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 110% at 18% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(130% 110% at 18% 0%, #000 0%, transparent 72%);
}

.cabecera__interior,
.cabecera__etiquetas { position: relative; z-index: 1; }

.cabecera__interior {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-4) 0 var(--e-3);
}

/* --- Marca ficticia --- */
.marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-width: 0;
}
.marca__escudo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(150deg, var(--rojo-400), var(--rojo-700));
  box-shadow: 0 6px 18px -8px rgba(226, 58, 82, .9),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}
.marca__texto { min-width: 0; }
.marca__texto strong {
  display: block;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #fff;
}
.marca__linea {
  display: block;
  font-size: .76rem;
  color: #b9b9c6;
}

/* --- Marcador del presupuesto simulado --- */
.marcador { min-width: 0; }
.marcador__etiqueta {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #a9a9b8;
}
.marcador__cifra {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: #fff;
}
.marcador__nota {
  display: block;
  font-size: .72rem;
  color: #9a9aa9;
}

/* --- Cromo de tiempo real --- */
.vivo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  font-size: .76rem;
  color: #c6c6d2;
}
.vivo__indicador {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.vivo__pulso {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35e07f;
  box-shadow: 0 0 0 0 rgba(53, 224, 127, .65);
  animation: pulso 1.8s var(--curva) infinite;
}
.vivo__dato {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.vivo__dato .icono { color: var(--rojo-300); }
#reloj { font-weight: 700; color: #fff; letter-spacing: .02em; }
#ultima-actualizacion { color: #a9a9b8; }

/* app.js añade esta clase cuando el sondeo de /api/vivo falla dos veces */
#en-vivo.en-vivo--caido {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .05);
  color: #e2a1ab;
}
#en-vivo.en-vivo--caido .vivo__pulso {
  background: #e2707f;
  animation: none;
  box-shadow: none;
}

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(53, 224, 127, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(53, 224, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 224, 127, 0); }
}

/* --- Etiquetas de honestidad del prototipo --- */
.cabecera__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  padding-bottom: var(--e-4);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: var(--e-3);
}


/* =============================================================================
   6. PESTAÑAS PEGAJOSAS
   Cinco pestañas siempre visibles: en móvil se reparten en 5 columnas
   iguales (nada de scroll horizontal).
   ============================================================================= */
.pestanas {
  position: sticky;
  top: var(--alto-banner);
  z-index: 60;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 10px 26px -22px rgba(16, 16, 20, .8);
}

.pestanas__fila {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e-1);
  padding: 6px 0;
}

.pestana {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 50px;
  padding: 7px 4px;
  border: none;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--gris-600);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.pestana__icono { width: 20px; height: 20px; }
.pestana__texto {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pestana:hover { color: var(--rojo-700); background: var(--rojo-050); }
.pestana.activa {
  color: var(--rojo-700);
  background: var(--rojo-050);
  box-shadow: inset 0 0 0 1px rgba(200, 16, 46, .16);
}
.pestana.activa::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 2px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--rojo-500);
}


/* =============================================================================
   7. LAYOUT: SECCIONES, TARJETAS Y REJILLAS
   ============================================================================= */
main { padding: var(--e-5) 0 var(--e-6); }

.seccion { display: none; }
.seccion.activa {
  display: block;
  animation: aparecer 200ms var(--curva) both;
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  padding: var(--e-5);
  box-shadow: var(--s-1);
}

.tarjeta h2 {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--tinta-900);
}
/* Acento institucional a la izquierda de cada título de tarjeta */
.tarjeta h2::before {
  content: "";
  flex: none;
  width: 3px;
  height: 1.05em;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--rojo-400), var(--rojo-700));
}

.tarjeta__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-bottom: var(--e-3);
}

/* Cabecera de sección (título grande + contexto) */
.panel-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin: 0 0 var(--e-4);
}
.panel-cabecera h2 {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.018em;
  color: var(--tinta-900);
}
.panel-cabecera p {
  margin-top: 2px;
  font-size: .82rem;
  color: var(--gris-600);
}

.rejilla-dos {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}
.rejilla-dos--paneles,
.rejilla-dos--propuestas,
.rejilla-dos--votar { margin-bottom: var(--e-5); }

/* Rejilla de indicadores en vivo */
.rejilla-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}

/* Rejilla de obras */
.rejilla-obras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
  gap: var(--e-5);
}
.rejilla-obras > .cargando { grid-column: 1 / -1; }


/* =============================================================================
   8. COMPONENTES
   ============================================================================= */

/* ---------------------------------------------------- 8.1 Avisos y mensajes - */
.aviso-caja {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  padding: var(--e-4);
  border: 1px solid rgba(200, 16, 46, .16);
  border-left: 4px solid var(--rojo-500);
  border-radius: var(--r-2);
  background: linear-gradient(180deg, #fff6f7, #fff);
  color: #5c1019;
  font-size: .87rem;
  line-height: 1.55;
}
.aviso-caja .icono { color: var(--rojo-500); }
.aviso-caja strong { color: var(--rojo-700); }

.mensaje {
  margin-top: var(--e-3);
  padding: 11px var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.5;
}
.mensaje--ok {
  background: #eefaf3;
  border-color: #bfe6cf;
  color: var(--verde-700);
}
.mensaje--error {
  background: #fef3f4;
  border-color: #f6ccd3;
  color: #9b1122;
}


/* ------------------------------------------------------------- 8.2 Botones -- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 11px var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--rojo-500), var(--rojo-600));
  color: #fff;
  font-size: .88rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(140, 15, 31, .28),
              0 10px 22px -14px rgba(140, 15, 31, .7);
  transition: background var(--t), color var(--t), box-shadow var(--t),
              transform var(--t), border-color var(--t);
}
.boton:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--rojo-600), var(--rojo-700));
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(140, 15, 31, .26),
              0 16px 28px -16px rgba(140, 15, 31, .85);
}
.boton:active:not(:disabled) { transform: translateY(0); }
.boton:disabled,
.boton[aria-disabled="true"] {
  background: #e4e4e9;
  border-color: var(--borde-fuerte);
  color: #8b8b96;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.boton--secundario {
  background: #fff;
  border-color: rgba(200, 16, 46, .32);
  color: var(--rojo-700);
  box-shadow: var(--s-1);
}
.boton--secundario:hover:not(:disabled) {
  background: var(--rojo-050);
  border-color: var(--rojo-500);
  color: var(--rojo-700);
}
.boton--secundario:disabled {
  background: var(--gris-100);
  border-color: var(--borde);
  color: #9a9aa4;
}

.boton--mini {
  min-height: 34px;
  padding: 6px 13px;
  font-size: .78rem;
}
.boton--bloque { width: 100%; }


/* -------------------------------------------- 8.3 Etiquetas y contadores ---- */
.chip {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid rgba(200, 16, 46, .14);
  border-radius: var(--r-full);
  background: var(--rojo-050);
  color: var(--rojo-700);
  font-size: .71rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.chip--mini { font-size: .66rem; padding: 1px 8px; }
.chip--ambar {
  background: #fff7e6;
  border-color: rgba(184, 113, 10, .26);
  color: var(--ambar-700);
}
.chip--contador {
  min-width: 30px;
  padding: 2px 10px;
  background: var(--rojo-500);
  border-color: var(--rojo-600);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  text-align: center;
}

/* Etiqueta de bloque que se refresca en vivo */
.chip--vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eafaf1;
  border-color: rgba(23, 129, 76, .24);
  color: var(--verde-700);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .66rem;
}
.latido {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde-500);
  animation: pulso 1.8s var(--curva) infinite;
}

/* Estados de resultado que genera app.js */
.chip--ok {
  background: #eafaf1;
  border-color: rgba(23, 129, 76, .24);
  color: var(--verde-700);
}
.chip--no {
  background: var(--gris-100);
  border-color: var(--borde-fuerte);
  color: var(--gris-600);
}
.chip--demo {
  background: #eef2ff;
  border-color: rgba(55, 48, 163, .2);
  color: var(--azul-700);
}
.chip--nuevo {
  background: #fff7e6;
  border-color: rgba(184, 113, 10, .26);
  color: var(--ambar-700);
}

/* Variantes para la cabecera oscura */
.chip--oscuro {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #dcdce4;
  font-weight: 700;
}
.chip--oscuro.chip--fuerte {
  background: var(--rojo-300);
  border-color: transparent;
  color: #4a0710;
  letter-spacing: .07em;
}
.chip--oscuro.chip--tenue { color: #a9a9b8; }

/* Contador rojo de la pestaña "Votar" */
.contador {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--rojo-500);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 2px 6px -2px rgba(140, 15, 31, .8);
}


/* ---------------------------------------------------------- 8.4 Formularios - */
.formulario { display: grid; gap: var(--e-4); }

.campo { display: grid; gap: 5px; min-width: 0; }

.campo__etiqueta {
  font-size: .79rem;
  font-weight: 700;
  color: var(--tinta-800);
}
.campo__req { color: var(--rojo-500); }
.campo__ayuda {
  font-size: .73rem;
  line-height: 1.45;
  color: var(--gris-500);
}

.fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
}

input[type="text"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 10px;
  background: #fff;
  color: var(--tinta-900);
  font: inherit;
  font-size: .9rem;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
textarea {
  min-height: 92px;
  padding: 11px 12px;
  line-height: 1.5;
  resize: vertical;
}
input::placeholder,
textarea::placeholder { color: #9d9da8; }
input:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus) { border-color: #bdbdc8; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--rojo-500);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .16);
}
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--gris-100);
  color: #8b8b96;
  cursor: not-allowed;
}

/* Select con flecha dibujada en SVG en línea (nada externo) */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
select:disabled { cursor: not-allowed; }

/* Prefijo S/ en el campo de monto */
.campo__prefijo { position: relative; display: block; }
.campo__prefijo-marca {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .85rem;
  font-weight: 800;
  color: var(--gris-500);
  pointer-events: none;
}
.campo__prefijo input { padding-left: 38px; }
.campo__prefijo input:focus-visible ~ .campo__prefijo-marca { color: var(--rojo-600); }

.formulario__acciones { display: grid; gap: var(--e-2); }
/* Dos acciones apiladas (confirmar / vaciar): una columna siempre, para que
   ninguna quede demasiado estrecha en la columna lateral. */
.formulario__acciones--doble { grid-template-columns: 1fr; }
.formulario__nota {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .73rem;
  line-height: 1.45;
  color: var(--gris-500);
}
.formulario__nota .icono { color: var(--gris-500); margin-top: 1px; }


/* ------------------------------------------------- 8.5 Filtros y buscador --- */
.filtros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.buscador { position: relative; margin-bottom: var(--e-3); }
.buscador__icono {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gris-500);
  pointer-events: none;
}
.buscador input { padding-left: 40px; }

.lista__nota {
  margin: 0 0 var(--e-3);
  font-size: .76rem;
  font-weight: 700;
  color: var(--rojo-700);
}


/* ------------------------------------- 8.6 Listas y tarjetas de proyecto ---- */
.lista {
  display: grid;
  gap: var(--e-3);
  max-height: min(64vh, 640px);
  overflow-y: auto;
  padding: 2px 6px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: #d3d3db transparent;
}
.lista--compacta { max-height: none; }
.lista::-webkit-scrollbar { width: 10px; }
.lista::-webkit-scrollbar-track { background: transparent; }
.lista::-webkit-scrollbar-thumb {
  background: #d8d8e0;
  border: 3px solid #fff;
  border-radius: var(--r-full);
}
.lista::-webkit-scrollbar-thumb:hover { background: #c3c3ce; }

.item {
  position: relative;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 16, 20, .04);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t),
              background var(--t);
}
/* Riel de color a la izquierda: identifica cada proyecto */
.item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rojo-400);
  opacity: .8;
}
.item:hover {
  border-color: #dcdce4;
  box-shadow: var(--s-2);
  transform: translateY(-1px);
}
.item--elegido {
  border-color: #bfe6cf;
  background: linear-gradient(180deg, #f2fbf6, #fff);
}
.item--elegido::before { background: var(--verde-600); opacity: 1; }

/* Proyecto que no alcanza el corte del presupuesto simulado (lo marca app.js) */
.item--fuera {
  background: linear-gradient(180deg, #fcfcfd, #fff);
  border-style: dashed;
}
.item--fuera::before { background: var(--gris-500); opacity: .55; }
.item--fuera .item__titulo { color: var(--tinta-700); }
.item--fuera .ranking__relleno { background: linear-gradient(90deg, #8b8b96, #b9b9c4); }

.item__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}
.item__titulo {
  min-width: 0;
  font-size: .94rem;
  font-weight: 750;
  line-height: 1.35;
  color: var(--tinta-900);
  overflow-wrap: anywhere;
}
.item__monto {
  flex: none;
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--rojo-050);
  color: var(--rojo-700);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.item--elegido .item__monto {
  background: #e6f7ee;
  color: var(--verde-700);
}
.item__meta {
  margin: var(--e-2) 0 0;
  font-size: .77rem;
  line-height: 1.7;
  color: var(--gris-600);
}
.item__meta .chip { vertical-align: 1px; margin-left: 3px; }
.item__desc {
  margin: var(--e-2) 0 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--tinta-700);
}
.item__acciones {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  margin-top: var(--e-3);
}
.item__acciones .ayuda { font-size: .74rem; }


/* ------------------------------- 8.7 Barras, medidores y rankings ---------- */
.barra {
  position: relative;
  height: 10px;
  border-radius: var(--r-full);
  background: #ececef;
  box-shadow: inset 0 1px 2px rgba(16, 16, 20, .10);
  overflow: hidden;
}
.barra--gruesa { height: 14px; }

.barra__relleno {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #12864f, #2fbd74);
  transform-origin: left center;
  animation: llenar 700ms var(--curva) both;
  transition: width 320ms var(--curva), background 200ms linear;
}
/* Brillo sutil: da volumen sin recurrir a degradados chillones */
.barra__relleno::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 46%);
}
/* Estados del presupuesto (los aplica app.js al superar 80 % o excederse) */
.barra__relleno--alto { background: linear-gradient(90deg, #a8680a, var(--ambar-500)); }
.barra__relleno--excedido { background: linear-gradient(90deg, var(--rojo-600), #ef4d64); }

@keyframes llenar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Medidor grande del fondo simulado */
.medidor { display: grid; gap: var(--e-3); margin-bottom: var(--e-3); }
.medidor__cifras {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
}
.medidor__bloque { min-width: 0; }
.medidor__bloque--fin { text-align: right; }
.medidor__etiqueta {
  display: block;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-500);
}
.medidor__valor {
  display: block;
  font-size: 1.34rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--tinta-900);
}
.medidor__valor--suave { color: var(--verde-700); }
.medidor__nota {
  display: block;
  margin-top: 3px;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--gris-600);
}
.medidor__pista { margin-top: var(--e-1); }
.medidor__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  font-size: .74rem;
  color: var(--gris-600);
}

/* Ranking comparativo (lo genera app.js dentro de #lista-resultados y #top-proyectos) */
.ranking__barra {
  height: 8px;
  margin-top: var(--e-3);
  border-radius: var(--r-full);
  background: #eeeef1;
  box-shadow: inset 0 1px 2px rgba(16, 16, 20, .08);
  overflow: hidden;
}
.ranking__relleno {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rojo-700), var(--rojo-400));
  transform-origin: left center;
  animation: llenar 700ms var(--curva) both;
}


/* --------------------- 8.8 Indicadores en vivo y distribución por categoría - */
.stat {
  position: relative;
  display: grid;
  gap: 1px;
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: #fff;
  box-shadow: var(--s-1);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--rojo-400), var(--rojo-700));
}
.stat:hover {
  border-color: #dcdce4;
  box-shadow: var(--s-2);
  transform: translateY(-1px);
}
.stat--alerta::before { background: linear-gradient(180deg, var(--ambar-500), #a8680a); }

.stat__icono {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  color: rgba(200, 16, 46, .3);
}
.stat--alerta .stat__icono { color: rgba(184, 113, 10, .4); }

.stat__etiqueta {
  padding-right: 22px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gris-500);
}
.stat__valor {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--tinta-900);
  overflow-wrap: anywhere;
}
.stat__nota {
  font-size: .71rem;
  line-height: 1.4;
  color: var(--gris-500);
}

/* Distribución por categoría, 100 % CSS */
.dist { display: grid; gap: var(--e-3); margin-bottom: var(--e-3); }
.dist__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px var(--e-3);
  align-items: baseline;
}
.dist__nombre {
  min-width: 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--tinta-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dist__valor {
  font-size: .78rem;
  font-weight: 800;
  color: var(--rojo-700);
  white-space: nowrap;
}
.dist__pista {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: var(--r-full);
  background: #eeeef1;
  box-shadow: inset 0 1px 2px rgba(16, 16, 20, .07);
  overflow: hidden;
}
.dist__relleno {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rojo-700), var(--rojo-400));
  transform-origin: left center;
  animation: llenar 700ms var(--curva) both;
}


/* ------------------------------------------------------- 8.9 Feed actividad - */
.feed {
  display: grid;
  gap: var(--e-2);
  max-height: 430px;
  overflow-y: auto;
  padding: 2px 6px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: #d3d3db transparent;
}
.feed::-webkit-scrollbar { width: 10px; }
.feed::-webkit-scrollbar-thumb {
  background: #d8d8e0;
  border: 3px solid #fff;
  border-radius: var(--r-full);
}

/* Cada evento: punto de estado · texto · marca de tiempo.
   El marcado lo genera app.js: .actividad__item--voto|propuesta|obra */
.actividad__item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: var(--e-2) var(--e-3);
  align-items: start;
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: #fff;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.actividad__item > div { min-width: 0; }
.actividad__item:hover {
  background: var(--gris-050);
  border-color: #dcdce4;
  box-shadow: var(--s-1);
}
/* El movimiento más reciente se destaca con un riel rojo */
.actividad__item:first-child {
  border-left: 3px solid var(--rojo-500);
  background: linear-gradient(180deg, #fffafa, #fff);
}

.actividad__punto {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--rojo-500);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .14);
}
.actividad__item--voto .actividad__punto {
  background: var(--verde-600);
  box-shadow: 0 0 0 3px rgba(23, 129, 76, .16);
}
.actividad__item--obra .actividad__punto {
  background: var(--ambar-600);
  box-shadow: 0 0 0 3px rgba(184, 113, 10, .18);
}
.actividad__item--propuesta .actividad__punto {
  background: var(--rojo-500);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .14);
}

.actividad__titulo {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--tinta-900);
  overflow-wrap: anywhere;
}
.actividad__detalle {
  margin-top: 2px;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--gris-600);
  overflow-wrap: anywhere;
}
.actividad__hora {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gris-500);
  white-space: nowrap;
}


/* ------------------------------------- 8.10 Carrito / papeleta de voto ----- */
.carrito__resumen {
  margin-bottom: var(--e-3);
  font-size: .8rem;
  font-weight: 700;
  color: var(--rojo-700);
}

.carrito { display: grid; gap: var(--e-2); }

.carrito__linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-2);
  align-items: center;
  padding: 9px var(--e-3);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--verde-600);
  border-radius: var(--r-2);
  background: #fbfdfc;
  font-size: .85rem;
  animation: aparecer 180ms var(--curva) both;
}
.carrito__linea > span:first-child {
  min-width: 0;
  color: var(--tinta-800);
  overflow-wrap: anywhere;
}
.carrito__linea > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.carrito__linea strong { color: var(--verde-700); }

.carrito__quitar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--rojo-600);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.carrito__quitar:hover { background: var(--rojo-050); color: var(--rojo-700); }

.barra-presupuesto {
  margin: var(--e-4) 0;
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: var(--gris-050);
}
.barra-presupuesto__texto {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-bottom: var(--e-2);
}
.barra-presupuesto__dato { min-width: 0; }
.barra-presupuesto__dato--fin { text-align: right; }
.barra-presupuesto__etiqueta {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-500);
}
.barra-presupuesto strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tinta-900);
}
#disponible { color: var(--verde-700); }


/* ------------------------------------------------------ 8.11 Obras y estados */
.obra {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  background: #fff;
  box-shadow: var(--s-1);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.obra:hover {
  border-color: #dcdce4;
  box-shadow: var(--s-3);
  transform: translateY(-2px);
}

/* La imagen es un degradado que inyecta app.js en el atributo style */
.obra__imagen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 158px;
  padding: var(--e-4);
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 9px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.obra__imagen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .075) 0 2px, rgba(255, 255, 255, 0) 2px 9px),
    radial-gradient(95% 95% at 50% 125%, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 72%);
}
.obra__imagen::after {
  content: "SIMULACIÓN · ilustración";
  position: absolute;
  left: 10px;
  bottom: 9px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: rgba(12, 12, 16, .62);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.obra__cuerpo {
  display: grid;
  align-content: start;
  gap: var(--e-2);
  flex: 1;
  padding: var(--e-4);
}
/* Fila superior de la tarjeta de obra: estado + zona (la genera app.js) */
.obra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  flex-wrap: wrap;
}
.obra__fila .ayuda { font-weight: 700; }
.obra__cuerpo h3 {
  font-size: .9rem;
  font-weight: 750;
  color: var(--tinta-900);
  overflow-wrap: anywhere;
}
.obra__cuerpo p {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--tinta-700);
}
.obra__cuerpo .ayuda { font-size: .75rem; color: var(--gris-500); }
.obra__cuerpo .barra { margin-top: var(--e-1); }

.estado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.estado--planificado { background: #eef2ff; color: var(--azul-700); }
.estado--ejecucion   { background: #fff5e6; color: var(--ambar-700); }
.estado--finalizado  { background: #eafaf1; color: var(--verde-700); }
.estado--paralizado  { background: #fef2f3; color: #99131f; }


/* ------------------------------------------- 8.12 Carga y estados vacíos --- */
.cargando {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-2);
  background: #fbfbfd;
  color: var(--gris-600);
  font-size: .85rem;
  font-weight: 600;
  overflow: hidden;
}
/* Esqueleto 1: giro */
.cargando::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(200, 16, 46, .18);
  border-top-color: var(--rojo-500);
  animation: girar 780ms linear infinite;
}
/* Esqueleto 2: brillo que recorre la caja */
.cargando::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 68%);
  transform: translateX(-100%);
  animation: brillo 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes brillo { to { transform: translateX(100%); } }

.vacio {
  padding: var(--e-5) var(--e-4);
  border: 1px dashed #d9d9e2;
  border-radius: var(--r-2);
  background: linear-gradient(180deg, #fdfdfe, #f7f7f9);
  color: var(--gris-600);
  font-size: .86rem;
  line-height: 1.55;
  text-align: center;
}


/* --------------------------------------------- 8.13 Pasos del proceso ----- */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--e-3);
}
.paso {
  display: grid;
  align-content: start;
  gap: var(--e-2);
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-3);
  background: #fff;
  box-shadow: var(--s-1);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.paso:hover {
  border-color: #dcdce4;
  box-shadow: var(--s-2);
  transform: translateY(-2px);
}
.paso__numero {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--rojo-400), var(--rojo-700));
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}
.paso h3 {
  font-size: .95rem;
  font-weight: 750;
  color: var(--tinta-900);
}
.paso p {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--gris-600);
}
.paso .boton { justify-self: start; margin-top: var(--e-1); }


/* =============================================================================
   9. PIE DE PÁGINA
   El texto legal es EXACTO y obligatorio.
   ============================================================================= */
footer {
  margin-top: var(--e-7);
  padding: var(--e-6) 0 var(--e-6);
  background: linear-gradient(180deg, #14141b, #0d0d12);
  color: #c6c6d2;
  border-top: 3px solid var(--rojo-600);
}
.pie__interior { display: grid; gap: var(--e-4); }

.pie-legal {
  padding: var(--e-4);
  border: 1px solid rgba(255, 255, 255, .08);
  border-left: 4px solid var(--rojo-500);
  border-radius: var(--r-2);
  background: rgba(255, 255, 255, .04);
  color: #f1f1f5;
  font-size: .88rem;
  line-height: 1.55;
}
.pie-legal strong { color: var(--rojo-300); }

.pie__columnas {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.pie-marca {
  font-size: .8rem;
  line-height: 1.55;
  color: #a9a9b8;
}
.pie-marca strong { color: #e6e6ee; }
.pie-marca--fino { color: #8f8f9e; }
.pie-marca code {
  background: rgba(255, 255, 255, .1);
  color: #e6e6ee;
}


/* =============================================================================
   10. RESPONSIVE (móvil primero, con mejoras progresivas)
   ============================================================================= */

/* --- Tabletas --- */
@media (min-width: 560px) {
  .cabecera__interior {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e-3) var(--e-5);
  }
  .marcador { text-align: right; }
  .vivo { grid-column: 1 / -1; }
}

@media (min-width: 720px) {
  .pestanas__fila {
    grid-template-columns: repeat(5, minmax(0, 172px));
    justify-content: center;
    gap: var(--e-2);
    padding: 8px 0;
  }
  .pestana {
    flex-direction: row;
    gap: var(--e-2);
    min-height: 52px;
    padding: 8px var(--e-3);
    font-size: .85rem;
  }
  .pestana.activa::after { left: 16%; right: 16%; bottom: 0; }
  .rejilla-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Escritorio --- */
@media (min-width: 900px) {
  .cabecera__interior {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--e-5);
  }
  .vivo { grid-column: auto; justify-content: flex-end; }
  .tarjeta { padding: var(--e-5); }
  .rejilla-dos--paneles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .rejilla-dos--propuestas { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }
  .rejilla-dos--votar { grid-template-columns: minmax(300px, 372px) minmax(0, 1fr); }
}

@media (min-width: 1120px) {
  .rejilla-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Columna pegajosa: solo cuando hay altura suficiente para no cortar el
   formulario (si la tarjeta es más alta que la ventana, molesta en vez de ayudar) */
@media (min-width: 1040px) and (min-height: 880px) {
  .tarjeta--pegajosa {
    position: sticky;
    top: calc(var(--alto-banner) + 86px);
  }
}

/* --- Móviles --- */
@media (max-width: 720px) {
  /* En móvil el scroll natural de la página es mejor que un panel con scroll */
  .lista, .feed {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  main { padding: var(--e-4) 0 var(--e-5); }
  .tarjeta { padding: var(--e-4); border-radius: var(--r-2); }
  .panel-cabecera { align-items: flex-start; }
  .contenedor { width: min(1240px, 94vw); }

  .marca__texto strong { font-size: 1.04rem; }
  .marcador__cifra { font-size: 1.36rem; }
  .vivo { font-size: .73rem; }

  .filtros { grid-template-columns: 1fr; }
  .rejilla-stats { gap: var(--e-2); }
  .rejilla-obras { gap: var(--e-4); }
  .stat__valor { font-size: 1.16rem; }
  .medidor__valor { font-size: 1.18rem; }

  .boton { padding: 11px var(--e-4); }
  .pie__columnas { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .fila { grid-template-columns: 1fr; }
  .banner__texto { font-size: .76rem; }
  .item { padding: var(--e-3); }
  .item__monto { font-size: .78rem; }
}

/* --- 360 px: el mínimo soportado, sin scroll horizontal --- */
@media (max-width: 400px) {
  .contenedor { width: 92vw; }
  .banner__texto { font-size: .72rem; }
  .pestana { font-size: .66rem; padding: 6px 2px; gap: 2px; }
  .pestana__icono { width: 18px; height: 18px; }
  .contador { top: 2px; right: 2px; }
  .rejilla-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: var(--e-3) var(--e-2) var(--e-3) var(--e-3); }
  .stat__icono { display: none; }
  .stat__etiqueta { padding-right: 0; }
  .stat__valor { font-size: 1.06rem; }
  .marca__escudo { width: 38px; height: 38px; }
  .icono--escudo { width: 22px; height: 22px; }
  .medidor__cifras { flex-direction: column; align-items: flex-start; gap: var(--e-2); }
  .medidor__bloque--fin { text-align: left; }
  .feed__evento { grid-template-columns: 28px minmax(0, 1fr); gap: var(--e-2); }
  .feed__marca { width: 28px; height: 28px; border-radius: 8px; }
}


/* =============================================================================
   11. ACCESIBILIDAD, IMPRESIÓN Y MOVIMIENTO REDUCIDO
   ============================================================================= */

/* Si el sistema pide menos movimiento, se apaga todo sin perder información:
   las barras siguen mostrando su ancho real y los paneles su estado final. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .vivo__pulso { animation: none !important; box-shadow: none !important; }
  .cargando::after { animation: none !important; opacity: 0 !important; }
  .cargando::before { animation: none !important; border-top-color: var(--rojo-500); }
  .item:hover, .obra:hover, .paso:hover, .stat:hover, .boton:hover { transform: none; }
}

/* Modo de alto contraste (Windows) */
@media (forced-colors: active) {
  .item::before, .stat::before, .dist__relleno, .ranking__relleno,
  .barra__relleno, .vivo__pulso { forced-color-adjust: none; }
  .barra, .ranking__barra, .dist__pista { border: 1px solid CanvasText; }
}

/* Impresión: dashboard legible en papel */
@media print {
  #banner { position: static; }
  .pestanas { position: static; }
  .seccion { display: block !important; }
  .salto-contenido { display: none; }
  .tarjeta, .stat, .item, .obra, .paso { box-shadow: none; break-inside: avoid; }
  .cabecera, footer { background: #fff !important; color: #000 !important; }
  .cabecera__etiquetas, .chip { border-color: #999; }
}