:root{

    --azul:#0A2342;
    --dorado:#C8A349;
    --blanco:#FFFFFF;

}

body{

    background:#f4f6f9;
    font-family:'Segoe UI', sans-serif;

}

.contenedor-principal{

    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(
        135deg,
        #0A2342,
        #123B72
    );

}

.login-box{

    background:white;
    width:600px;
    padding:50px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.2);

}

.logo-pgr{

    width:220px;
    margin-bottom:20px;

}

h1{

    font-weight:700;
    color:#0A2342;

}

h2{

    font-size:22px;
    color:#C8A349;
    margin-bottom:30px;

}

.btn-pgr{

    background:#0A2342;
    color:white;
    width:100%;
    margin-top:20px;
    padding:12px;
    font-weight:600;

}

.btn-pgr:hover{

    background:#123B72;
    color:white;

}

.logo-votacion{

    width:180px;
    margin-bottom:20px;

}

.titulo-principal{

    color:#0A2342;
    font-weight:700;

}

.planilla-card{

    border:none;
    border-radius:20px;
    overflow:hidden;
    background:white;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
    transition:.3s;
    cursor:pointer;
    height:100%;

}

.planilla-card:hover{

    transform:translateY(-5px);
    box-shadow:0 20px 40px rgba(0,0,0,.18);

}

.card-img-top{

    height:520px;
    object-fit:contain;
    background:white;
    padding:10px;

}

.btn-confirmar{

    background:#0A2342;
    color:white;
    border:none;
    border-radius:12px;
    padding:15px 60px;
    font-size:22px;
    font-weight:700;
    box-shadow:0 10px 25px rgba(10,35,66,.25);

}

.btn-confirmar:hover{

    background:#123B72;
    color:white;

}

/* ===================================
   SELECTOR DE PLANILLA
=================================== */

.opcion-voto{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    cursor:pointer;
    margin-top:10px;
    margin-bottom:5px;

}

.opcion-voto input[type="radio"]{

    display:none;

}

.check-cuadrado{

    width:42px;
    height:42px;
    border:3px solid #555;
    background:#fff;
    position:relative;
    transition:all .3s ease;
    border-radius:4px;

}

.texto-seleccionar{

    font-size:22px;
    font-weight:700;
    color:#222;

}

.opcion-voto input:checked + .check-cuadrado{

    background:#28a745;
    border-color:#28a745;

}

.opcion-voto input:checked + .check-cuadrado::after{

    content:"✓";
    color:white;
    font-size:32px;
    font-weight:bold;
    position:absolute;
    left:8px;
    top:-4px;

}

/* ===================================
   TARJETA SELECCIONADA
=================================== */

.planilla-card.seleccionada{

    border:4px solid #28a745 !important;
    box-shadow:0 0 20px rgba(40,167,69,.35);

}

/* ===================================
   VOTO EN BLANCO
=================================== */

.voto-blanco-icono{

    font-size:120px;
    color:var(--azul);

}

/* ===================================
   RESPONSIVE
=================================== */

@media (max-width: 768px){

    .card-img-top{

        height:350px;

    }

    .btn-confirmar{

        width:100%;

    }

    .texto-seleccionar{

        font-size:16px;

    }

}

/* ===================================
   CAMPO IDENTIDAD LOGIN
=================================== */

.campo-identidad{

    text-align:center;
    font-size:40px;
    font-weight:700;
    letter-spacing:4px;

    height:85px;

    border:2px solid var(--dorado);
    border-radius:12px;

    color:var(--azul);

}

.campo-identidad::placeholder{

    text-align:center;
    font-size:24px;
    color:#999;
    letter-spacing:2px;

}

.campo-identidad:focus{

    border-color:var(--azul);

    box-shadow:0 0 10px rgba(10,35,66,.25);

}

/* Solo números grandes y centrados */

.campo-identidad,
.campo-identidad:focus{

    text-align:center;

}