/* ==========================================================================
   PROCESO ELECTORAL ESTUDIANTIL UNAH 2026
   Hoja de Estilos Principal (UI/UX & Accesibilidad - ESCALA DE GRISES)
   ========================================================================== */

/* --- 1. VARIABLES DEL SISTEMA (ESCALA DE GRISES) --- */
:root {
    --primary-blue: #1A1A1A; /* Gris casi negro puro */
    --accent-yellow: #595959; /* Gris medio-oscuro para hovers y acentos */
    --unah-red: #4A4A4A; 
    
    /* Textos ajustados para pasar la validación de WAVE */
    --text-dark: #222222; /* Contraste altísimo (Ratio 15.5:1) */
    --text-muted: #545454; /* Gris oscuro seguro para párrafos (Ratio 5.5:1 - Pasa WCAG AA) */
    
    --bg-light: #FFFFFF;
    --bg-light-alt: #F0F0F0; /* Gris de fondo un poco más notorio */
    --border-color: #CCCCCC; /* Bordes más definidos */
}


/* --- 2. GLOBALES Y TIPOGRAFÍA --- */
.container, .container-fluid {
    font-family: 'Raleway', sans-serif;
}

h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

h4.text-muted {
    font-size: 1.2rem;
    color: var(--text-muted) !important;
    font-weight: 500;
}

h6 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.2rem;
}

input[type="text"] {
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Indicador de carga (Spinner) */
.spinner {
    left: 50%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin: 0 auto;
    animation: rotation .6s infinite linear;
    border: 6px solid rgba(26, 26, 26, 0.15);
    border-top-color: rgba(26, 26, 26, 0.8);
    border-radius: 100%;
}


/* --- 3. UTILIDADES Y COLORES (THEMING) --- */
.EvColor, .EvColorLightBlue, .EvColorBlue, .Unahaux1, .cl-claveunica { background-color: var(--primary-blue); color: var(--bg-light); }
.EvColorGris, .EvColorGrisLight { background-color: var(--bg-light-alt); }
.mati-hide, .hidden, .d-none, .bootstrap-icons { display: none !important; }
.blured { filter: blur(100px) !important; }
.crossOut { background: url("/assets/images/sistema_seguro.jpg") repeat; }
.btn { cursor: pointer; }

/* Logotipos Institucionales en Escala de Grises */
.logo {
    max-height: 120px;
    width: auto;
    display: block;
    margin: 0 auto;
}
.logoEV { max-height: 50px; }
.logo-hc { display: none !important; } /* Oculto por defecto, visible en alto contraste */

.logo-normal {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}
.logo-normal:hover {
    filter: grayscale(0%); /* Vuelve al color al pasar el mouse (opcional) */
}


/* Mensajes de error del sistema */
.error {
    width: 100%;
    padding: 0;
    font-size: 80%;
    color: var(--bg-light);
    background-color: var(--unah-red);
    border-radius: 0 0 5px 5px;
    box-sizing: border-box;
}
.error.active { padding: 0.3em; }


/* --- 4. COMPONENTES: PAPELETA Y TARJETAS (CARDS) --- */
.question {
    margin-bottom: 2rem;
    position: relative;
}

.card {
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    background-color: var(--bg-light) !important;
}

.card-header {
    background-color: var(--primary-blue) !important;
    padding: 15px 20px !important;
    border-bottom: none !important;
    position: relative !important;
    z-index: 100;
}

.card-header h5 {
    color: var(--bg-light) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.card-body {
    padding: 20px;
    position: relative;
    background: var(--bg-light);
    border-radius: 0 0 10px 10px;
}

/* Badges (Contadores de selección) */
.card-header h5 .badge {
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-left: 10px !important;
    transition: all 0.3s ease !important;
}

/* Estados del Badge interactivo */
.card-header h5 .badge.EvColor { background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; color: var(--bg-light) !important; }
.card-header h5 .badge.bg-success { background-color: var(--accent-yellow) !important; color: #FFFFFF !important; border: 1px solid var(--accent-yellow) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; }
.card-header h5 .badge.bg-warning { background-color: var(--unah-red) !important; color: var(--bg-light) !important; border: 1px solid var(--unah-red) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; }

/* Opciones de Candidatos (Checkbox Logic) */
.ballot { display: none; }

.ballot + label {
    width: 100%;
    min-height: 110px;
    background: var(--bg-light);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    display: flex;
    align-items: stretch;
    height: 100%;
}

.ballot + label:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.ballot:checked + label {
    border-left-color: var(--primary-blue);
    background-color: var(--bg-light-alt);
}

/* Prevención de desbordamiento (Overflow) para textos dinámicos */
.ballot + label .row.flex-nowrap .col {
    min-width: 0 !important;
    padding-right: 15px !important;
}

.ballot + label .candidate-name, 
.ballot + label .small.text-muted {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
}

.ballot + label { height: auto !important; }

/* Estructura interna de la opción */
.ballot + label .row { width: 100%; margin: 0; align-items: center; flex: 1; }
.ballot + label .col-2 { display: flex; justify-content: center; align-items: center; padding: 0 8px; }
.ballot + label .col-10 { padding-left: 18px; display: flex; align-items: center; }

.candidate-name {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--text-dark);
    padding: 0;
    margin: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.image-option {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
}

/* Marcas de selección visual */
.marca, .marca-square {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.ballot + label .marca { cursor: pointer; background: url("/assets/images/papeleta_mark.png") center no-repeat; height: 50px; width: 50px; display: inline-block; filter: grayscale(100%); }
.ballot:checked + label .marca { background: url("/assets/images/papeleta_marked.png") center no-repeat; height: 50px; width: 50px; display: inline-block; filter: grayscale(100%); }

.ballot + label .marca-square {
    border: 4px solid var(--text-dark);
    border-radius: 15px;
    height: 50px;
    width: 50px;
    display: inline-block;
}

.ballot:checked + label .marca-square {
    background: url("https://evoting.s3.amazonaws.com/UNAH/EleccionesEstudiantiles2026/marca_unah.svg") center no-repeat !important;
    background-size: 70% !important; 
    height: 50px !important;
    width: 50px !important;
    display: inline-block !important;
    padding: 0 !important;
    filter: grayscale(100%);
}


/* --- 5. COMPONENTES DE ACCIÓN (BOTONES PRINCIPALES) --- */
.btn-siguiente {
    position: relative;
    border: 2px solid var(--accent-yellow) !important;
    transition: all 0.3s ease;
    animation: pulse-border 2s infinite;
    background-color: var(--primary-blue) !important;
    color: #FFFFFF !important;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 0.75rem 2rem;
    border-radius: 8px;
}

.btn-siguiente:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(89, 89, 89, 0.2);
    background-color: var(--accent-yellow) !important;
}

#closeVote {
    position: relative;
    border: 2px solid var(--accent-yellow);
    animation: pulse-border-unah 1.5s ease-in-out infinite;
    transition: all 0.3s ease;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 1.5px;
    padding: 1rem 3rem;
    border-radius: 8px;
    background-color: var(--primary-blue);
    color: #FFFFFF;
}

#closeVote:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(89, 89, 89, 0.3);
    background-color: var(--accent-yellow);
    border-color: var(--primary-blue);
}

/* --- ESTILOS PARA EL RESUMEN DE RESPUESTAS (MODAL) --- */
.resume-question-title {
    color: #FFFFFF !important; /* Fuerza el blanco ignorando el gris general */
    font-size: 0.85rem !important; /* Letra de la pregunta más pequeña y sutil */
    font-weight: 500;
    letter-spacing: 0.3px;
}

.resume-answer-text {
    color: var(--text-dark) !important;
    font-size: 0.95rem !important; /* Letra de la respuesta destacada */
    font-weight: 700;
}

/* Soporte para Alto Contraste en el Resumen */
body.high-contrast .resume-question-title,
body.high-contrast .resume-answer-text {
    color: #FFFF00 !important;
}
/* --- 6. MODALES Y BOTONES FLOTANTES (FAB) --- */

/* Estandarización de dimensiones para botones flotantes de UI */
.a11y-toggle-btn, #helpButton {
    width: 75px !important;
    height: 75px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: transform 0.3s ease;
    border: none;
    border-radius: 50% !important;
}

.a11y-toggle-btn:hover, #helpButton:hover {
    transform: scale(1.05);
}

.help-button-container { 
    position: fixed !important;
    bottom: 90px !important; /* <-- Subimos 70px para esquivar el reCAPTCHA */
    right: 20px !important;
    z-index: 9998 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#helpButton { background-color: var(--primary-blue); box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;}
#helpButton .small { font-size: 0.7rem; color: #FFFFFF; }
.logo-wsp { width: 32px; height: 32px; filter: brightness(0) invert(1); }

/* Modal de Ayuda y Contacto */
.modal-header { border-bottom: 1px solid var(--border-color); }
.modal-footer { border-top: 1px solid var(--border-color); padding: 1rem; }

.contacto {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}
.contacto:hover { background-color: var(--bg-light-alt); }
.contacto p { margin: 0 4px 0 0; color: var(--text-muted); }
.contacto a { color: var(--primary-blue); text-decoration: none; font-weight: 700; }
.contacto a:hover { text-decoration: underline; }
.logo_contacto { width: 24px; height: 24px; margin-right: 10px; }

/* Listado de instrucciones de voto */
.modal-body ol { counter-reset: item; list-style-type: none; padding-left: 2rem; }
.modal-body ol li { position: relative; padding-left: 2.5rem; margin-bottom: 1rem; color: var(--text-dark); line-height: 1.5; }
.modal-body ol li:before {
    content: counter(item);
    counter-increment: item;
    background: var(--primary-blue);
    color: var(--bg-light);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.9rem;
}

#helpModal .modal-header { background-color: var(--bg-light-alt); }
#helpModal .modal-body h6 { color: var(--primary-blue); font-weight: 600; }
#helpModal .alert-info { background-color: var(--bg-light-alt); border-color: var(--border-color); color: var(--primary-blue); }

/* Nuevo ícono SVG para el Modal de Soporte */
.unah-modal-icon {
    display: flex;
    align-items: center;
    color: var(--primary-blue);
    margin-right: 15px;
}

.unah-modal-icon svg {
    width: 24px;
    height: 24px;
}

/* Color amarillo brillante para el Modo de Alto Contraste */
body.high-contrast .unah-modal-icon,
body.high-contrast .alert-info span {
    color: #FFFF00 !important;
}
/* --- 7. ACCESIBILIDAD (A11Y) --- */

/* Enfoque visible de elementos para navegación por teclado (WCAG 2.1) */
*:focus-visible {
    outline: 3px solid var(--accent-yellow) !important;
    outline-offset: 2px !important;
}

.a11y-widget {
    position: fixed;
    bottom: 175px !important; /* <-- 90px (fondo) + 75px (alto botón ayuda) + 10px (margen) */
    right: 20px !important;
    z-index: 9999;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.a11y-toggle-btn {
    background-color: var(--primary-blue);
    color: var(--bg-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.a11y-toggle-btn svg {
    width: 35px !important;
    height: 35px !important;
}

/* Panel Desplegable A11Y */
.a11y-menu {
    position: absolute;
    bottom: 75px;
    right: 0; /* <-- Alineamos a la derecha del botón para que abra hacia adentro */
    left: auto; /* <-- Quitamos la alineación izquierda anterior */
    background: var(--bg-light);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    width: 220px;
    border: 1px solid var(--border-color);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    transform: translateY(0);
}

.a11y-menu.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

.a11y-menu button {
    background: transparent;
    border: none;
    padding: 12px 15px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    color: var(--text-dark);
    border-radius: 8px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.a11y-menu button svg {
    color: var(--primary-blue);
    width: 20px;
    flex-shrink: 0;
}

.a11y-menu button:hover {
    background: var(--bg-light-alt);
    color: var(--primary-blue);
}

.a11y-menu button.btn-reset {
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    margin-top: 5px;
    color: var(--unah-red);
}

/* Perfil: Fuente Legible (Excluye íconos estructurales) */
body.readable-font *:not(i):not([class*="fa-"]):not([class*="bi-"]) {
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.1em !important;
}

/* Perfil: Modo Alto Contraste (Ratio > 21:1 según WAVE) */
body.high-contrast { background-color: #000000 !important; color: #FFFFFF !important; }

/* Intercambio de logotipos para visibilidad sobre fondo oscuro */
body.high-contrast .logo-normal { display: none !important; }
body.high-contrast .logo-hc { display: block !important; }

body.high-contrast .EvColorGrisLight,
body.high-contrast .container-fluid,
body.high-contrast .EvColor {
    background-color: #000000 !important;
    border-top: 1px solid #FFFF00 !important;
    border-bottom: 1px solid #FFFF00 !important;
}

/* Restructuración de UI en tarjetas y papeleta (Alto Contraste) */
body.high-contrast .card { background-color: #111111 !important; border: 1px solid #FFFF00 !important; box-shadow: none !important; }
body.high-contrast .card-header,
body.high-contrast .EvColorBlue { background-color: #000000 !important; border-bottom: 1px solid #FFFF00 !important; border: 1px solid #FFFF00 !important; }
body.high-contrast .card-body,
body.high-contrast .ballot + label { background-color: #111111 !important; border: 1px solid #333333 !important; }

/* Selección y estado activo (Alto Contraste) */
body.high-contrast .ballot:checked + label { background-color: #222222 !important; border: 2px solid #FFFF00 !important; }
body.high-contrast .marca-square { border-color: #FFFF00 !important; background-color: #000000 !important; }
body.high-contrast .ballot:checked + label .marca-square { filter: brightness(0) invert(1); }

/* Tipografía en Alto Contraste */
body.high-contrast h3, body.high-contrast h4, body.high-contrast h5,
body.high-contrast .candidate-name, body.high-contrast .text-muted,
body.high-contrast .small { color: #FFFF00 !important; }

body.high-contrast p, body.high-contrast label, body.high-contrast li,
body.high-contrast .subtitle { color: #FFFFFF !important; }

/* Alertas y Botones primarios (Alto Contraste) */
body.high-contrast .alert-warning { background-color: #000000 !important; border: 2px solid #FFFF00 !important; color: #FFFF00 !important; }
body.high-contrast .btn-siguiente, body.high-contrast #closeVote,
body.high-contrast .a11y-menu, body.high-contrast .a11y-toggle-btn { background-color: #000000 !important; color: #FFFF00 !important; border: 2px solid #FFFF00 !important; }
body.high-contrast .a11y-toggle-btn svg, body.high-contrast .a11y-menu button svg { color: #FFFF00 !important; fill: currentColor !important; }
body.high-contrast .a11y-menu button { color: #FFFFFF !important; }
body.high-contrast .a11y-menu button:hover { background-color: #333333 !important; }

/* Botón de Ayuda y Modal (Alto Contraste) */
body.high-contrast #helpButton { background-color: #000000 !important; border: 2px solid #FFFF00 !important; }
body.high-contrast #helpButton .small { color: #FFFF00 !important; }
body.high-contrast .logo-wsp { filter: invert(89%) sepia(85%) saturate(763%) hue-rotate(357deg) brightness(105%) contrast(106%) !important; }
body.high-contrast .modal-content { background-color: #000000 !important; border: 2px solid #FFFF00 !important; }
body.high-contrast #helpModal .modal-header, body.high-contrast .modal-footer { background-color: #111111 !important; border-bottom: 1px solid #FFFF00 !important; border-top: 1px solid #FFFF00 !important; }
body.high-contrast #helpModal .modal-title, body.high-contrast #helpModal .modal-body h6,
body.high-contrast #helpModal .modal-body p, body.high-contrast #helpModal .modal-body li { color: #FFFF00 !important; }
body.high-contrast #helpModal .modal-body a { color: #FFFFFF !important; text-decoration: underline; }
body.high-contrast .logo_contacto { filter: invert(1) !important; }
body.high-contrast .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; }
body.high-contrast .modal-body ol li:before { background: #000000 !important; color: #FFFF00 !important; border: 1px solid #FFFF00 !important; }
body.high-contrast #helpModal .alert-info { background-color: #111111 !important; border: 1px solid #FFFF00 !important; color: #FFFF00 !important; }
body.high-contrast .modal-footer .btn { background-color: #000000 !important; color: #FFFF00 !important; border: 2px solid #FFFF00 !important; }
body.high-contrast .modal-footer .btn:hover { background-color: #333333 !important; }

/* --- CORRECCIONES DE MODALES Y RESUMEN EN ALTO CONTRASTE --- */
body.high-contrast .btn.EvColorGrisLight,
body.high-contrast button#cancelButton {
    background-color: #000000 !important;
    color: #FFFF00 !important;
    border: 2px solid #FFFF00 !important;
    box-shadow: none !important;
}

body.high-contrast .btn.EvColorGrisLight:hover,
body.high-contrast button#cancelButton:hover {
    background-color: #333333 !important;
}

body.high-contrast h6,
body.high-contrast .modal-content h6,
body.high-contrast .modal-content li {
    color: #FFFF00 !important;
}

body.high-contrast label {
    color: #FFFFFF !important;
}

.widgets-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.8) !important;
    pointer-events: none !important;
}

/* --- 8. ANIMACIONES Y KEYFRAMES --- */
@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(89, 89, 89, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(89, 89, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(89, 89, 89, 0); }
}

@keyframes pulse-border-unah {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(89, 89, 89, 0.6); }
    50% { transform: scale(1.02); box-shadow: 0 0 0 15px rgba(89, 89, 89, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(89, 89, 89, 0); }
}


/* --- 9. AJUSTES RESPONSIVOS (DISPOSITIVOS MÓVILES) --- */




/* --- NUEVA ESTRUCTURA DE ENCABEZADOS (AGRUPADORES) --- */

/* 1. La barra superior gris medio (Agrupador) */
.unah-category-header {
    background-color: #595959; /* Gris medio */
    padding: 12px 20px;
    border-radius: 8px; /* Bordes redondeados suaves */
    margin-bottom: 6px; /* La leve separación con la tarjeta de abajo */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.unah-category-header h5 {
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* 2. La tarjeta principal de la pregunta */
.unah-question-card {
    border-radius: 8px !important; 
    border-top: none !important;
}

/* 3. La barra secundaria gris oscuro (Instrucción) */
.unah-question-header {
    background-color: var(--primary-blue) !important; /* Gris casi negro */
    padding: 10px 20px !important;
    border-radius: 8px 8px 0 0 !important; /* Redondeado arriba para tener identidad propia */
    border-bottom: 1px solid var(--border-color) !important;
}

.unah-question-header h6 {
    font-size: 0.9rem !important; /* Texto un poco más pequeño según la imagen */
    font-weight: 400 !important;
    color: #FFFFFF !important;
}

/* 4. Estilo del contador de opciones */
.unah-badge-info {
    background-color: transparent !important;
    border: 1px solid var(--accent-yellow) !important;
    color: var(--accent-yellow) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 3px 8px !important;
}

/* 5. Ajustes para el Modo Alto Contraste */
body.high-contrast .unah-category-header { background-color: #333333 !important; border: 2px solid #FFFF00 !important; }
body.high-contrast .unah-category-header h5 { color: #FFFF00 !important; }

/* --- Estilos para el Logo del Partido --- */
.image-party {
    width: 65px; 
    height: 65px;
    object-fit: contain; 
    margin-right: 10px;
    /* Eliminamos el filter: grayscale y la transition */
}


/* ==========================================================================
   ESTRUCTURA RESPONSIVA: IMÁGENES Y TEXTO (PC vs Móvil)
   ========================================================================== */

/* 1. Envoltorio principal (Al lado del checkbox) */
.unah-content-wrapper {
    display: flex;
    flex-direction: row; /* En PC: Fotos y Texto uno al lado del otro */
    align-items: center;
    width: 100%;
    min-width: 0;
}

/* 2. Contenedor específico de las dos imágenes (ESCRITORIO) */
.unah-images-container {
    display: flex;
    flex-direction: column; /* Apila las fotos en columna también en PC */
    align-items: center;
    padding-right: 20px;
}

/* Imágenes apiladas y cuadradas en PC */
.unah-images-container .image-party { 
    width: 80px !important; 
    height: 80px !important; 
    margin-right: 0 !important; 
    margin-bottom: 8px !important; /* <-- ¡Aquí le damos 8px de respiro! */
    border-radius: 0 !important; 
    order: 1 !important; 
    object-fit: cover;
}

.unah-images-container .image-option { 
    width: 80px !important; 
    height: 80px !important; 
    margin-right: 0 !important; 
    margin-bottom: 0 !important; 
    border-radius: 0 !important; /* Elimina el círculo, lo hace cuadrado */
    order: 2 !important; /* Foto Abajo */
    object-fit: cover;
}

/* 3. Contenedor de Textos */
.unah-text-container {
    flex: 1;
    min-width: 0; 
}


/* --- COMPORTAMIENTO MÓVIL --- */
/* ==========================================================================
   9. AJUSTES RESPONSIVOS (DISPOSITIVOS MÓVILES - UNIFICADO)
   Layout Vertical para Papeleta UNAH 2026
   ========================================================================== */
   @media (max-width: 768px) {
    /* --- Generales y UI --- */
    .logo { margin-bottom: 1rem; max-height: 110px; }
    h3 { font-size: 1.4rem; text-align: center; }
    h4.text-muted { font-size: 1.1rem; text-align: center; }
    .col-4, .col-8 { text-align: center !important; }
    
    /* FABs (Botones flotantes accesibilidad/ayuda) */
    .a11y-toggle-btn, #helpButton { width: 55px !important; height: 55px !important; }
    .a11y-toggle-btn svg { width: 30px !important; height: 30px !important; }
    .logo-wsp { width: 26px !important; height: 26px !important; }
    #helpButton .small { font-size: 0.65rem !important; margin-top: 2px !important; }

    /* --- Rediseño de la Tarjeta de Candidato --- */
    .ballot + label { 
        padding: 15px 10px !important; 
        min-height: 80px; 
        align-items: flex-start !important; /* Mantiene el checkbox arriba si la tarjeta crece */
    }
    
    .marca, .marca-square { 
        width: 35px; 
        height: 35px; 
        margin-top: 20px; /* Baja un poquito el checkbox para centrarlo visualmente con el bloque principal */
    }

    /* Envoltorio principal (Columna derecha) */
    .unah-content-wrapper {
        flex-direction: column !important; /* Apila Imágenes arriba y Texto abajo */
        align-items: center !important; /* Centra todo horizontalmente */
        padding-left: 10px !important;
        padding-right: 0 !important;
    }

    /* Contenedor de Imágenes */
    .unah-images-container {
        flex-direction: column !important; /* Apila Partido arriba, Candidato abajo */
        align-items: center !important; /* Centra las fotos */
        width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important; /* Espacio antes del nombre */
    }
    
    .unah-images-container .image-party {
        width: 80px !important;
        height: 80px !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important; /* Espacio entre logo y foto candidato */
        order: 1 !important; 
    }

    .unah-images-container .image-option {
        width: 65px !important;
        height: 65px !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 50% !important; /* Protege el círculo en versión móvil */
        order: 2 !important; /* Fuerza la foto a ir segundo (abajo) */
    }
    
    /* Contenedor de Texto */
    .unah-text-container {
        width: 100% !important;
        text-align: center !important;
    }
    
    .unah-text-container .candidate-name {
        text-align: center !important;
        justify-content: center !important;
        font-size: 1.1rem !important;
        margin-bottom: 2px !important;
    }

    .unah-text-container .small.text-muted {
        text-align: center !important;
    }
}

/* ==========================================================================
   UI CUSTOM: CAMPO DE CONTRASEÑA Y OJO
   ========================================================================== */
   .position-relative {
    position: relative !important;
}

.input-pass-unah {
    padding-right: 45px !important; /* Deja un hueco para que el texto no pise al ojo */
}

.ojo-pass-unah {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    color: #545454 !important;
    z-index: 10 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}