/* ============================================================
   SISTEMA DE VOTACIÓN SIMULACRO 2026 - CORRECCIÓN DE ESPACIOS
   ============================================================ */

body { 
    font-family: 'Segoe UI', Arial, sans-serif; 
    background-color: #2c3e50; 
    margin: 0; padding: 0; 
    overflow-x: hidden;
    background-image: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)), url('tu-fondo-opcional.jpg');
    background-size: cover;
    background-attachment: fixed;
}

/* --- 1. PANTALLA DE INICIO --- */
#pantalla-inicio { 
    display: flex; justify-content: center; align-items: center; 
    min-height: 100vh; padding: 20px; box-sizing: border-box;
}

.card-inicio { 
    background: #ffffff; padding: 40px 30px; border-radius: 20px; 
    text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.4); 
    width: 100%; max-width: 420px; 
}

.form-control {
    width: 100%; padding: 15px; margin-bottom: 20px;
    border: 2px solid #bdc3c7; border-radius: 10px; font-size: 16px; box-sizing: border-box;
}

.btn-inicio {
    width: 100%; padding: 16px; background: #b71c1c; color: white;
    border: none; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer;
}

/* --- 2. CONTENEDOR DE CÉDULA --- */
.cedula-scroll { 
    display: flex; flex-wrap: nowrap; overflow-x: auto; 
    gap: 15px; padding: 20px 15px 160px 15px; 
    background-color: #bdc3c7; min-height: 100vh; justify-content: center;
}

@media (max-width: 1300px) {
    .cedula-scroll { justify-content: flex-start; }
}

/* --- 3. COLUMNAS (ANCHO FIJO 250px) --- */
.columna-voto { 
    width: 250px; min-width: 250px; flex-shrink: 0; 
    border: 2.5px solid #000; display: flex; flex-direction: column; 
    background: #fff; box-sizing: border-box;
}

/* Colores de fondo */
.columna-voto[data-tipo="p"]  { background-color: #e3f2fd; } 
.columna-voto[data-tipo="sn"] { background-color: #fce4ec; } 
.columna-voto[data-tipo="sr"] { background-color: #f3e5f5; } 
.columna-voto[data-tipo="d"]  { background-color: #e8f5e9; } 
.columna-voto[data-tipo="pa"] { background-color: #fff9c4; } 

.columna-voto h4 { 
    background: #000; color: #fff; margin: 0; padding: 10px; 
    font-size: 12px; text-transform: uppercase; text-align: center; 
    height: 60px; display: flex; align-items: center; justify-content: center; 
}

/* --- 4. FILAS (AJUSTE PARA QUE NO HAYA ESPACIOS) --- */
.op-partido { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; /* TODO SE PEGA A LA DERECHA */
    height: 110px; 
    padding: 0 5px; /* Un poco menos de padding lateral */
    border-bottom: 2px solid #000; 
    cursor: pointer; 
    box-sizing: border-box;
}

.op-partido.seleccionado { background-color: #ffff00 !important; }

/* Nombre del Partido: crece para empujar al resto a la derecha */
.nombre-partido { 
    flex: 1; 
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: #000;
    line-height: 1.1; padding-right: 5px; word-wrap: break-word;
    text-align: left;
}

/* --- 5. BLOQUES PEGADOS (SIN ESPACIOS) --- */

/* Contenedor de Símbolo para Presidente */
.contenedor-doble {
    display: flex;
    align-items: center;
    gap: 2px; /* Espacio mínimo entre símbolo y foto */
    flex-shrink: 0;
}

/* Contenedor de Logo para otros cargos */
.contenedor-logo {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border: 2.5px solid #000; background: #fff;
    flex-shrink: 0;
    margin-right: 2px; /* Espacio mínimo antes de los números */
    position: relative !important;
}

/* Bloque de casilleros numéricos */
.voto-preferencial { 
    display: flex; 
    gap: 2px; /* Casilleros pegaditos */
    align-items: center; 
    flex-shrink: 0;
}

/* Las casillas cuadradas */
.casilla-voto {
    position: relative !important; 
    width: 44px; height: 52px;
    border: 2.5px solid #000; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; flex-shrink: 0;
}

.logo-partido, .img-cedula { width: 38px; height: 38px; object-fit: contain; }

/* --- 6. LA MARCA X --- */
.fila-p.seleccionado .casilla-voto:first-child::before,
.op-partido.seleccionado .contenedor-logo::before {
    content: "X"; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #b71c1c; font-size: 65px; font-weight: bold; z-index: 10; line-height: 0;
}

/* --- 7. INPUTS (GRANDES Y JUNTOS) --- */
.input-num { 
    width: 40px; height: 48px; 
    text-align: center; font-size: 28px; font-weight: 900; 
    border: 2.5px solid #000; background: #fff; outline: none;
    box-sizing: border-box;
}

/* --- 8. BOTÓN FINALIZAR --- */
.contenedor-botones {
    position: fixed; bottom: 0; left: 0; width: 100%;
    padding: 25px 0; background: linear-gradient(transparent, rgba(44,62,80,0.95));
    display: flex; justify-content: center; z-index: 3000;
}

.btn-accion { 
    background: #FF0000; color: white; border: 3px solid #fff; 
    padding: 18px 60px; font-size: 22px; font-weight: bold; 
    border-radius: 60px; cursor: pointer; text-transform: uppercase;
}