/* buscoalgomas.es · /cambio-de-agujas/ — estilos propios de la encuesta satírica (solo añaden sobre base.css). */

.contenedor.estrecho{max-width:820px}

/* ---- hero ---- */
.etiqueta-grande{font-size:.82rem;padding:7px 14px;background:rgba(127,167,255,.1);margin-bottom:14px}
.hero-agujas .sobre{margin-top:4px}
.aviso-marco{text-align:left;max-width:820px;margin:8px auto 0}
.aviso-marco p{margin:.3em 0}
.aviso-marco strong{color:var(--texto)}
.aviso-marco a{color:var(--texto)}

/* ---- pregunta y tablero ---- */
.pregunta{font-size:clamp(1.35rem,3vw,1.9rem);max-width:900px;margin:0 auto 26px;text-align:center}
.tablero{display:grid;gap:26px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){.tablero{grid-template-columns:1fr}}
.figura-agujas{margin:0}
.figura-agujas figcaption{text-align:center;margin-top:8px}

/* SVG del cambio de agujas */
.agujas{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--borde);box-shadow:var(--sombra)}
.agujas .balasto{fill:var(--fondo-2)}
.agujas .traviesas{fill:none;stroke:#3a3326;stroke-width:26;stroke-dasharray:6 14;stroke-linecap:butt}
.agujas .rail{fill:none;stroke:#5a6274;stroke-width:3;stroke-linecap:round;transition:stroke .4s,opacity .4s}
.agujas .via[data-carril]{opacity:.62;transition:opacity .4s}
.agujas .mastil{stroke:#5a6274;stroke-width:3;stroke-linecap:round}
.agujas .lampara{fill:#2a1a1f;stroke:#5a6274;stroke-width:2;transition:fill .4s,filter .4s}
.agujas .placa rect{fill:var(--tarjeta);stroke:#5a6274;stroke-width:2;transition:stroke .4s}
.agujas .placa text{fill:var(--texto-2);font-family:var(--serif);font-size:20px;font-weight:600;transition:fill .4s}
.agujas .eje{fill:var(--acento);stroke:#1a1405;stroke-width:2}
.agujas .palanca{stroke:var(--acento);stroke-width:4;stroke-linecap:round}
.agujas .pomo{fill:var(--acento-2)}
.agujas .brazo{transform-origin:0 0;transform:rotate(0deg);transition:transform .7s cubic-bezier(.4,0,.2,1)}
.agujas .tren rect{fill:var(--acento);stroke:#1a1405;stroke-width:1.5}
.agujas .tren .ventana{fill:#fff2c4;stroke:none}
.agujas .tren .rueda{fill:#1a1405;stroke:#5a6274;stroke-width:1.5}
.agujas .tren{opacity:0;transition:opacity .4s}
.agujas.con-tren .tren{opacity:1}
.agujas[data-elegido="1"] .brazo{transform:rotate(-38deg)}
.agujas[data-elegido="2"] .brazo{transform:rotate(0deg)}
.agujas[data-elegido="3"] .brazo{transform:rotate(38deg)}
.agujas[data-elegido="1"] .via[data-carril="1"],
.agujas[data-elegido="2"] .via[data-carril="2"],
.agujas[data-elegido="3"] .via[data-carril="3"]{opacity:1}
.agujas[data-elegido="1"] .via[data-carril="1"] .rail,
.agujas[data-elegido="2"] .via[data-carril="2"] .rail,
.agujas[data-elegido="3"] .via[data-carril="3"] .rail{stroke:var(--acento-2)}
.agujas[data-elegido="1"] .via[data-carril="1"] .lampara,
.agujas[data-elegido="2"] .via[data-carril="2"] .lampara,
.agujas[data-elegido="3"] .via[data-carril="3"] .lampara{fill:var(--verde);filter:drop-shadow(0 0 6px rgba(95,174,122,.9))}
.agujas[data-elegido="1"] .via[data-carril="1"] .placa rect,
.agujas[data-elegido="2"] .via[data-carril="2"] .placa rect,
.agujas[data-elegido="3"] .via[data-carril="3"] .placa rect{stroke:var(--acento-2)}
.agujas[data-elegido="1"] .via[data-carril="1"] .placa text,
.agujas[data-elegido="2"] .via[data-carril="2"] .placa text,
.agujas[data-elegido="3"] .via[data-carril="3"] .placa text{fill:var(--acento-2)}

/* ---- formulario: los tres carriles ---- */
.formulario-voto .carriles{margin:0;padding:14px 16px 16px;border-color:var(--borde);background:var(--tarjeta)}
.formulario-voto legend{color:var(--acento-2)}
.carril{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center;margin:0 0 10px;padding:12px 14px;border:1px solid var(--borde);border-radius:12px;background:var(--fondo);cursor:pointer;font-weight:400;min-height:56px;transition:border-color .2s,background .2s}
.carril:last-of-type{margin-bottom:0}
.carril:hover{border-color:var(--acento)}
.carril:has(input:checked){border-color:var(--acento-2);background:rgba(201,162,39,.09)}
.carril:has(input:focus-visible){outline:2px solid var(--acento-2);outline-offset:2px}
.carril input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--acento)}
.carril .num{width:32px;height:32px;border-radius:50%;background:var(--fondo-2);border:1px solid var(--borde);color:var(--acento-2);font-family:var(--serif);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.carril:has(input:checked) .num{background:var(--acento);color:#1a1405;border-color:var(--acento)}
.carril .texto{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.carril .nombre{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--texto);line-height:1.25}
.etiqueta.coloquial{border-color:var(--vela);color:var(--vela);font-size:.62rem;padding:3px 8px}
.formulario-voto[data-votado="1"] .carril{cursor:default}
.formulario-voto[data-votado="1"] .carril:hover{border-color:var(--borde)}
.formulario-voto[data-votado="1"] .carril:has(input:checked):hover{border-color:var(--acento-2)}
.nota-voto{margin:12px 0 0}

/* ---- resultado de tu voto ---- */
.resultado-voto{margin:22px auto 0;max-width:720px;text-align:center;border-color:var(--acento)}
.resultado-voto:focus{outline:2px solid var(--acento-2);outline-offset:3px}
.sobre-resultado{color:var(--acento);text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:600;margin:0 0 6px}
.resultado-texto{font-family:var(--serif);font-size:1.3rem;margin:0 0 .4em;line-height:1.35}
.resultado-texto b{color:var(--acento-2);font-weight:600}
#resultado-nota:empty{display:none}

/* ---- barras de resultados ---- */
.barras{margin:18px 0 10px;display:grid;gap:16px}
.fila-barra{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:16px 18px}
.cabecera-barra{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.cabecera-barra .num{width:28px;height:28px;border-radius:50%;background:var(--fondo);border:1px solid var(--borde);color:var(--acento-2);font-family:var(--serif);font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.cabecera-barra .nombre{font-family:var(--serif);font-size:1.1rem;font-weight:600;flex:1 1 160px}
.cabecera-barra .porcentaje{font-family:var(--serif);font-size:1.6rem;color:var(--acento-2);font-weight:600;min-width:3.2ch;text-align:right}
.barras .barra{height:16px}
.fila-barra[data-carril="2"] .barra>span{background:var(--acento-2)}
.fila-barra[data-carril="3"] .barra>span{background:var(--vela)}
.fila-barra .recuento{margin:8px 0 0}
.fila-barra.mio{border-color:var(--acento)}
.fila-barra.mio .nombre::after{content:" · tu voto";color:var(--acento);font-family:var(--sans);font-size:.8rem;font-weight:600}
.enlaces-serios .tarjeta h3{color:var(--acento-2)}
.enlaces-serios .tarjeta p{margin-bottom:0;color:var(--texto-2)}
.patrocinio{margin-top:22px}

@media (prefers-reduced-motion:reduce){
  .agujas .brazo,.agujas .rail,.agujas .via[data-carril],.agujas .lampara{transition:none}
}
@media print{.agujas,.formulario-voto .boton-fila{display:none}}