﻿.elecciones-page {
    max-width: 1160px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    color: #17334a;
}
.elecciones-volver { display: inline-block; margin-bottom: 24px; color: #174f78; text-underline-offset: 3px; }
.elecciones-page h1 { margin: 0 0 12px; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; }
.elecciones-intro { max-width: 65ch; margin-bottom: 28px; color: #435768; }
.elecciones-buscador { padding: 24px; background: #fff; border: 1px solid #d6e0e8; border-radius: 12px; }
.elecciones-campos { display: flex; align-items: stretch; gap: 12px; }
.elecciones-campos .form-control { flex: 1; min-width: 0; min-height: 46px; font-size: 1rem; }
.elecciones-campos .btn { min-height: 46px; flex-shrink: 0; padding-inline: 24px; }
.elecciones-ayuda { margin: 12px 0 0; font-size: .94rem; color: #435768; }
.elecciones-error { display: block; margin-top: 8px; color: #a02222; }
.elecciones-estado { margin: 24px 0 12px; font-weight: 600; }
.elecciones-mensaje { padding: 24px; background: #fff; border: 1px solid #d6e0e8; border-radius: 12px; }
.elecciones-mensaje h2 { font-size: 1.25rem; font-weight: 700; }
.elecciones-mensaje p { margin: 0; max-width: 65ch; }
.elecciones-tabla { overflow-x: auto; background: #fff; border: 1px solid #d6e0e8; border-radius: 12px; }
.elecciones-resultados { width: 100%; margin: 0; font-size: .95rem; }
.elecciones-resultados th { padding: 16px; background: #edf3f7; color: #17334a; white-space: nowrap; }
.elecciones-resultados td { padding: 16px; vertical-align: middle; border-top: 1px solid #e3e9ee; }
.elecciones-resultados td:first-child { font-weight: 700; white-space: nowrap; }
.elecciones-resultados td:nth-child(2) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.elecciones-resultados tbody tr:hover td { background: #f6f9fb; }
.elecciones-prealerta { display: inline-block; padding: 4px 10px; border-radius: 6px; background: #edf1f4; color: #354958; white-space: nowrap; }
.elecciones-prealerta-si { background: #e2f1e8; color: #225736; }
.elecciones-page :focus-visible { outline: 3px solid #176a9b; outline-offset: 3px; }
.elecciones-page ::selection { background: #cee6f5; color: #17334a; }
.elecciones-campos input { caret-color: #174f78; }
@media (max-width: 575px) {
    .elecciones-page { padding: 20px 12px 32px; }
    .elecciones-buscador { padding: 18px; }
    .elecciones-campos { flex-direction: column; }
    .elecciones-campos .btn { width: 100%; }
    .elecciones-resultados th, .elecciones-resultados td { padding: 12px; }
}

.elecciones-acceso { max-width: 720px; }
.elecciones-acceso .elecciones-buscador h2 { font-size: 1.3rem; margin-bottom: 12px; }
.elecciones-acceso label { display: block; font-weight: 600; margin: 18px 0 6px; }
.elecciones-acceso .form-control { min-height: 44px; }
.elecciones-acceso .btn { display: block; margin: 24px 0 16px; min-height: 44px; }
.elecciones-acceso .elecciones-mensaje p + p { margin-top: 8px; }
.elecciones-acceso a { text-underline-offset: 3px; }
.elecciones-relacionada { display: block; margin-top: 2px; font-size: .74rem; color: #6b4e00; background: #fff4d6; border-radius: 4px; padding: 1px 6px; width: fit-content; }
/* ── Búsqueda: resultados ───────────────────────────────────────────────────────────────────── */
.elecciones-paso { margin: 0 0 8px; font-size: .85rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #5b6f7e; }
.elecciones-guia { display: inline-flex; align-items: center; gap: 8px; }
.elecciones-seleccion { margin: 0; }
.elecciones-seleccion input { width: 18px; height: 18px; accent-color: #174f78; cursor: pointer; }
.elecciones-etiqueta { display: none; }
.elecciones-nota { font-size: .85rem; color: #5b6f7e; }
.elecciones-boton-prealertar { min-height: 40px; white-space: nowrap; }

/* ── Confirmación de identidad (vista B) ─────────────────────────────────────────────────────── */
.elecciones-identidad { max-width: 640px; margin: 0 auto; }
.elecciones-tarjeta { padding: 32px; background: #fff; border: 1px solid #d6e0e8; border-radius: 12px; box-shadow: 0 2px 10px rgba(23, 51, 74, .06); }
.elecciones-tarjeta h2 { margin: 0 0 20px; font-size: 1.5rem; font-weight: 700; }
.elecciones-subtitulo { margin: 0 0 8px; font-size: .9rem; font-weight: 600; color: #5b6f7e; }
.elecciones-guias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.elecciones-chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #eaf3fa; color: #174f78; font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; }
.elecciones-pregunta { margin: 0 0 12px; font-weight: 600; }
.elecciones-tipos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.elecciones-tipos input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.elecciones-tipos label { display: flex; align-items: center; justify-content: center; margin: 0; min-height: 56px; padding: 12px 16px; border: 2px solid #d6e0e8; border-radius: 10px; background: #fff; font-weight: 600; cursor: pointer; transition: border-color .15s, background-color .15s; }
.elecciones-tipos label:hover { border-color: #8fb3cc; }
.elecciones-tipos input:checked + label { border-color: #174f78; background: #eaf3fa; color: #174f78; }
.elecciones-tipos input:focus-visible + label { outline: 3px solid #176a9b; outline-offset: 3px; }
.elecciones-documento { max-width: 320px; }
.elecciones-documento .form-control { min-height: 46px; font-size: 1rem; }
.elecciones-documento .elecciones-ayuda { margin-top: 8px; }
.elecciones-acciones { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #e3e9ee; }
.elecciones-acciones .btn { flex: 0 0 auto; min-width: 150px; min-height: 46px; margin: 0; }

/* ── Tablet ────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .elecciones-resultados th, .elecciones-resultados td { padding: 12px; }
    .elecciones-resultados td:first-child, .elecciones-resultados td:nth-child(2) { white-space: normal; }
}

/* ── Móvil: cada resultado es una tarjeta y la identificación va en una sola columna ───────── */
@media (max-width: 767px) {
    .elecciones-tabla { overflow: visible; background: transparent; border: 0; }
    .elecciones-resultados, .elecciones-resultados tbody, .elecciones-resultados tr, .elecciones-resultados td { display: block; width: 100%; }
    .elecciones-resultados thead { display: none; }
    .elecciones-resultados tr { margin-bottom: 12px; padding: 12px 16px; background: #fff; border: 1px solid #d6e0e8; border-radius: 12px; }
    .elecciones-resultados td { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 6px 0; border: 0; white-space: normal; }
    .elecciones-resultados tbody tr:hover td { background: transparent; }
    .elecciones-resultados td:first-child { display: block; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid #e3e9ee; font-size: 1.05rem; }
    .elecciones-resultados td:last-child { display: block; padding-top: 10px; }
    .elecciones-etiqueta { display: inline; font-size: .82rem; font-weight: 600; color: #5b6f7e; }
    .elecciones-boton-prealertar { display: block; width: 100%; text-align: center; }
    .elecciones-tarjeta { padding: 20px 16px; }
    .elecciones-tipos { grid-template-columns: 1fr; }
    .elecciones-documento { max-width: none; }
    .elecciones-acciones { flex-direction: column-reverse; }
    .elecciones-acciones .btn { width: 100%; }
}
