/* Una sola apariencia clara: el logo va sobre blanco y la pantalla debe leerse en una sala iluminada. */
:root {
  color-scheme: light;
  --azul: #045894;          /* azul del logo: identifica a la Lista 100 */
  --azul-oscuro: #033e6b;
  --rojo-logo: #e3141f;
  --tinta: #0b2a45;
  --tinta-2: #47617a;
  --tinta-3: #6d8499;
  --fondo: #eef3f8;
  --papel: #ffffff;
  --linea: #d5e0ea;
  --barra-otros: #8ea4b8;
  --carril: #e3ebf2;
  --bien: #17693a;  --bien-f: #e1f3e8;
  --alerta: #8a5300; --alerta-f: #fdf0d5; --alerta-m: #e39a12;
  --mal: #a3201a;   --mal-f: #fbe4e2;
  --fuente: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fuente-angosta: "Arial Narrow", "Roboto Condensed", "Segoe UI", Roboto, Arial, sans-serif;
  --arcoiris: linear-gradient(90deg, #f6c915, #ee8921, #e3147f, #6a2c91, #1b5fae, #0ea0dd, #f6c915, #e3141f, #8cc63f, #f6c915);
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.4 var(--fuente); font-variant-numeric: tabular-nums; }
h1, h2, h3, p { margin: 0; text-wrap: balance; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
[hidden] { display: none !important; }
.oculto-a11y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--linea); background: var(--papel); font-weight: 600; }
.btn:hover { border-color: var(--azul); }
.btn-primario { background: var(--azul); color: #fff; border-color: var(--azul); }
.btn-primario:hover { background: var(--azul-oscuro); }
.btn-grande { width: 100%; min-height: 56px; font-size: 18px; }
.btn-peligro { color: var(--mal); border-color: #e4b4b1; }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-texto { border: 0; background: none; padding: 8px; color: var(--azul); font-weight: 600; min-height: 44px; }

.campo { display: grid; gap: 4px; }
.campo label { font-weight: 600; font-size: 14px; }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #a9bccd; border-radius: 8px; background: #fff; }
.aviso { padding: 12px 14px; border-radius: 8px; font-size: 15px; }
.aviso-mal { background: var(--mal-f); color: var(--mal); }
.aviso-alerta { background: var(--alerta-f); color: var(--alerta); }
.aviso-bien { background: var(--bien-f); color: var(--bien); }
.aviso-info { background: #e2eef8; color: var(--azul-oscuro); }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip-aceptada { background: var(--bien-f); color: var(--bien); }
.chip-revision { background: var(--alerta-f); color: var(--alerta); }
.chip-devuelta, .chip-mal { background: var(--mal-f); color: var(--mal); }
.chip-pendiente { background: var(--carril); color: var(--tinta-2); }
.lista { display: inline-grid; place-items: center; white-space: nowrap; min-width: 3em; padding: .1em .45em; border-radius: 6px; background: #dfe7ee; color: var(--tinta); font-weight: 700; }
.lista-propia { background: var(--azul); color: #fff; }
.franja { height: 5px; background: var(--arcoiris); }

/* ---------- Acceso y veedor (teléfono) ---------- */
.movil { max-width: 520px; margin: 0 auto; min-height: 100%; background: var(--fondo); }
.movil-cab { background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.movil-cab img { height: 48px; width: auto; display: block; }
.movil-cuerpo { display: grid; gap: 16px; padding-block: 16px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.acceso-logo { background: #fff; padding: 20px 16px 12px; text-align: center; }
.acceso-logo img { width: min(100%, 360px); height: auto; }
.tarjeta { background: var(--papel); border-radius: 10px; padding: 16px; display: grid; gap: 12px; }
.junta-titulo { font-size: 26px; font-weight: 700; line-height: 1.15; }
.junta-sub { color: var(--tinta-2); font-size: 15px; }
.fila-voto { display: grid; grid-template-columns: auto minmax(0, 1fr) 96px; align-items: center; gap: 10px; padding-block: 6px; border-top: 1px solid var(--linea); }
.fila-voto:first-of-type { border-top: 0; }
.fila-voto label { font-weight: 600; font-size: 15px; line-height: 1.2; min-width: 0; }
.fila-voto label small { display: block; font-weight: 400; color: var(--tinta-2); }
.fila-voto .lista { width: 4.9em; min-width: 0; padding-inline: 0; font-size: 14px; }
.fila-voto input { width: 96px; height: 52px; text-align: center; font-size: 24px; font-weight: 700; border: 1px solid #a9bccd; border-radius: 8px; background: #fff; }
.fila-sola { grid-template-columns: minmax(0, 1fr) 96px; }
.suma { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 8px; font-weight: 600; background: var(--carril); }
.suma.ok { background: var(--bien-f); color: var(--bien); }
.suma.no { background: var(--alerta-f); color: var(--alerta); }
.foto-caja { display: grid; gap: 10px; }
.foto-caja img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; background: var(--carril); }
.foto-boton { display: flex; align-items: center; justify-content: center; min-height: 64px; border: 2px dashed #8ea4b8; border-radius: 10px; font-weight: 600; color: var(--azul-oscuro); cursor: pointer; text-align: center; padding: 10px; }
.foto-boton:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }
.revision-fila { display: flex; justify-content: space-between; gap: 12px; padding-block: 9px; border-top: 1px solid var(--linea); font-size: 16px; }
.revision-fila:first-child { border-top: 0; }
.revision-fila strong { font-size: 22px; line-height: 1.1; }
.revision-fila.total { border-top: 2px solid var(--tinta); }
.lista-juntas { display: grid; gap: 10px; }
.junta-boton { display: grid; gap: 4px; text-align: left; background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; padding: 14px; }
.grupo-botones { display: grid; gap: 10px; }
.estado-grande { text-align: center; display: grid; gap: 8px; padding-block: 12px; }
.estado-grande strong { font-size: 24px; line-height: 1.2; }

/* ---------- Pantalla de resultados ---------- */
.p { --u: clamp(12.5px, 1.55vh, 30px); font-size: var(--u); height: 100%; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); background: var(--fondo); }
.p-cab { background: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 1.6em; padding-left: max(16px, 1.6em); min-height: 8.4em; }
.p-banner { align-self: stretch; width: 37em; background: var(--rojo-logo); clip-path: polygon(2.4em 0, 100% 0, 100% 100%, 0 100%); }
.p-banner-azul { height: 100%; margin-left: .55em; background: var(--azul); clip-path: polygon(2.4em 0, 100% 0, 100% 100%, 0 100%); display: flex; align-items: center; justify-content: flex-end; position: relative; overflow: hidden; }
.p-banner-texto { position: absolute; left: 3em; top: 50%; transform: translateY(-50%); width: 19em; color: #fff; display: grid; gap: .1em; z-index: 1; }
.p-banner-texto small { font-size: .85em; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .9; }
.p-banner-texto strong { font-size: 1.5em; line-height: 1.1; font-weight: 700; }
.p-banner-texto span { font-size: .95em; opacity: .95; }
.p-banner img { height: 100%; width: 15em; object-fit: cover; object-position: 60% 30%; display: block; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%); mask-image: linear-gradient(to right, transparent 0, #000 28%); }
.p-logo { height: 7em; width: auto; display: block; }
.p-titulo h1 { font-size: 2.3em; line-height: 1.1; font-weight: 700; }
.p-titulo p { color: var(--tinta-2); font-size: 1.15em; }
.p-estado { padding-block: .4em; text-align: right; display: grid; gap: .15em; justify-items: end; }
.p-reloj { font-size: 2.1em; font-weight: 700; line-height: 1; }
.p-vivo { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; font-size: 1em; color: var(--bien); }
.p-vivo i { width: .7em; height: .7em; border-radius: 50%; background: currentColor; animation: latido 2s infinite; }
.p-vivo.caido { color: #fff; background: var(--mal); padding: .1em .6em; border-radius: 4px; }
.p-vivo.caido i { animation: none; }
.p-acciones { display: flex; gap: .4em; }
.p-acciones button { border: 0; background: none; color: var(--tinta-3); font-size: .85em; padding: .1em .3em; min-height: 24px; }
@keyframes latido { 50% { opacity: .35; } }
.p-rotulo { background: var(--azul-oscuro); color: #fff; font-weight: 600; font-size: 1.05em; padding: .3em max(16px, 1.6em); }
.p-rotulo.prueba { background: var(--alerta-m); color: #1c1200; }
.p-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2em; padding: 1.2em max(16px, 1.6em); min-height: 0; }
.p-col { display: grid; gap: 1.2em; min-height: 0; min-width: 0; }
.p-col-der { grid-template-rows: auto minmax(0, 1fr); }
.p-panel { background: #fff; border-radius: .6em; padding: 1.1em 1.3em; min-width: 0; min-height: 0; }
.p-etiqueta { font-size: .95em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); }
.p-candidatos { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: .8em; }
.p-titular { font-size: 2.05em; font-weight: 700; line-height: 1.15; }
.p-filas { display: flex; flex-direction: column; justify-content: space-around; gap: .5em; min-height: 0; }
.p-fila { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) auto; column-gap: .9em; row-gap: .3em; align-items: center; }
.p-fila .lista { grid-row: span 2; font-size: 1.35em; min-width: 0; width: 100%; padding: .35em .1em; align-self: center; }
.muchas { gap: .2em; }
.muchas .p-fila { row-gap: .1em; }
.muchas .p-fila-nombre { font-size: 1.12em; }
.muchas .p-fila-nombre small { display: inline; font-size: .8em; margin-left: .5em; }
.muchas .p-fila-num strong { font-size: 1.8em; }
.muchas .p-carril { height: .8em; }
.muchas .lista { font-size: 1.15em; padding: .2em .1em; }
.p-fila-nombre { font-size: 1.3em; font-weight: 600; line-height: 1.15; min-width: 0; }
.p-fila-nombre small { font-size: .72em; font-weight: 400; color: var(--tinta-2); display: block; }
.p-fila-num { text-align: right; line-height: 1; white-space: nowrap; font-size: 1.05em; color: var(--tinta-2); }
.p-fila-num strong { font-size: 2.3em; color: var(--tinta); font-family: var(--fuente-angosta); font-weight: 700; margin-right: .2em; }
.p-carril { grid-column: 2 / 4; height: 1.25em; background: var(--carril); border-radius: 4px; overflow: hidden; }
.p-barra { display: block; height: 100%; background: var(--barra-otros); border-radius: 0 4px 4px 0; transition: width .8s ease; min-width: 0; }
.p-fila.propia .p-barra { background: var(--azul); }
.p-fila.propia .p-fila-nombre { color: var(--azul); }
.p-avance { display: grid; gap: .55em; }
.p-avance-num { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; flex-wrap: wrap; }
.p-avance-num strong { font-size: 3.6em; line-height: 1; font-family: var(--fuente-angosta); }
.p-avance-num span { font-size: 1.25em; color: var(--tinta-2); }
.p-segmentos { display: flex; gap: 2px; height: 1.4em; background: var(--carril); border-radius: 4px; overflow: hidden; }
.p-segmentos i { display: block; height: 100%; transition: width .8s ease; }
.p-seg-ok { background: var(--azul); }
.p-seg-rev { background: var(--alerta-m); }
.p-leyenda { display: flex; flex-wrap: wrap; gap: .2em 1.3em; font-size: 1.02em; }
.p-leyenda b { font-size: 1.15em; }
.p-leyenda i { display: inline-block; width: .75em; height: .75em; border-radius: 2px; margin-right: .35em; }
.p-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; padding-top: .55em; border-top: 1px solid var(--linea); }
.p-datos div { display: grid; }
.p-datos span { font-size: .92em; color: var(--tinta-2); line-height: 1.15; }
.p-datos strong { font-size: 1.55em; line-height: 1.2; }
.p-cantones { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .4em; overflow: hidden; }
.p-tabla-caja { overflow: auto; min-height: 0; }
.p-tabla { width: 100%; height: 100%; border-collapse: collapse; font-size: 1.08em; }
.p-tabla th { text-align: left; font-size: .8em; font-weight: 600; color: var(--tinta-2); padding: .1em .4em .25em; white-space: nowrap; }
.p-tabla td { padding: .2em .4em; border-top: 1px solid var(--linea); white-space: nowrap; }
.p-tabla .n { text-align: right; }
.p-tabla th.n { text-align: right; }
.p-mini { display: inline-block; vertical-align: middle; width: 5.2em; height: .6em; background: var(--carril); border-radius: 3px; overflow: hidden; margin-right: .5em; }
.p-mini i { display: block; height: 100%; background: var(--azul); }
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .p { --u: 14px; height: auto; min-height: 100%; }
  .p-cab { grid-template-columns: minmax(0, 1fr) auto; gap: .6em; padding-right: max(16px, 1.6em); padding-top: .5em; }
  .p-banner { grid-column: 1 / -1; order: 4; width: auto; height: 96px; margin-left: calc(-1 * max(16px, 1.6em)); margin-right: calc(-1 * max(16px, 1.6em)); clip-path: none; }
  .p-banner-azul { margin-left: 0; clip-path: none; }
  .p-banner-texto { left: max(16px, 1.6em); width: calc(100% - 150px); }
  .p-banner img { width: 150px; }
  .p-logo { height: 58px; }
  .p-titulo { grid-column: 1 / -1; order: 3; }
  .p-titulo h1 { font-size: 1.5em; }
  .p-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .p-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-titular { font-size: 1.5em; }
  .p-filas { gap: 1.1em; }
  .p-fila { grid-template-columns: 5.2em minmax(0, 1fr); }
  .p-fila .lista { font-size: 1.1em; grid-row: span 3; }
  .muchas .p-fila-nombre small { display: block; margin-left: 0; }
  .p-fila-num { text-align: left; }
  .p-carril { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .p-barra, .p-segmentos i { transition: none; } .p-vivo i { animation: none; } }

/* ---------- Supervisor ---------- */
.s { min-height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.s-cab { background: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); }
.s-cab img { height: 50px; width: auto; display: block; }
.s-pestanas { display: flex; flex-wrap: wrap; gap: 4px; }
.s-pestanas button { border: 0; background: none; padding: 8px 12px; min-height: 44px; font-weight: 600; border-radius: 8px; color: var(--tinta-2); }
.s-pestanas button[aria-selected="true"] { background: var(--azul); color: #fff; }
.s-cuerpo { padding-block: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.s-cuerpo.ancho { grid-template-columns: minmax(0, 1fr); }
.s-lista { display: grid; gap: 8px; max-height: calc(100vh - 150px); overflow: auto; }
.s-item { display: grid; gap: 4px; text-align: left; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 10px 12px; }
.s-item[aria-current="true"] { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.s-item-sup { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-weight: 700; }
.s-item small { color: var(--tinta-2); }
.s-detalle { background: #fff; border-radius: 10px; padding: 16px; display: grid; gap: 14px; min-width: 0; }
.s-doble { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.s-doble img { width: 100%; border-radius: 8px; background: var(--carril); }
.s-num { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; align-items: center; padding-block: 4px; }
.s-num input { height: 42px; width: 96px; text-align: center; font-weight: 700; font-size: 18px; border: 1px solid #a9bccd; border-radius: 6px; }
.s-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.s-tabla-caja { overflow-x: auto; background: #fff; border-radius: 10px; }
.s-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.s-tabla th { text-align: left; padding: 8px 10px; color: var(--tinta-2); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.s-tabla td { padding: 6px 10px; border-top: 1px solid var(--linea); }
.s-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.s-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.s-filtros .campo { flex: 1 1 220px; }
.s-pin { font-size: 32px; font-weight: 700; letter-spacing: .12em; }
.historial { font-size: 14px; display: grid; gap: 6px; color: var(--tinta-2); }
@media (max-width: 800px) { .s-cuerpo { grid-template-columns: minmax(0, 1fr); } .s-lista { max-height: 320px; } }

/* ---------- Barra de la demostración ---------- */
.demo-barra { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: #1c1200; color: #fff; padding: 5px 12px; font-size: 14px; }
.demo-barra a { color: #fff; padding: 4px 10px; border-radius: 6px; text-decoration: none; font-weight: 600; }
.demo-barra a[aria-current="true"] { background: var(--alerta-m); color: #1c1200; }
.demo-activa .p { height: calc(100% - 38px); }