:root{

    --azul:#0b2d72;
    --celeste:#4fa3e6;
    --celeste-claro:#e9f4ff;

    --gris-fondo:#f3f6fa;
    --gris-borde:#d9e2ec;

    --texto:#263238;
    --texto-secundario:#6b7280;

    --blanco:#ffffff;

    --sombra:0 10px 25px rgba(0,0,0,.08);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:"Roboto", Arial, Helvetica, sans-serif;

    background:var(--gris-fondo);

    color:var(--texto);

}

.contenedor{

    width:95%;
    max-width:700px;

    margin:40px auto;

}

/******************************
            CABECERA
******************************/

.cabecera{

    background:var(--blanco);

    border-radius:12px 12px 0 0;

    box-shadow:var(--sombra);
	background: linear-gradient(to bottom, var(--celeste-claro), #FFFFFF);
    overflow:hidden;

}

.logos{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

}

.logo-cooperativa{

    width:320px;
    max-width:70%;

}

.logo-lista{

    width:110px;

}

.cabecera h1{

    background:var(--celeste);

    color:white;

    text-align:center;

    padding:18px;

    font-size:2rem;

}

.fecha{

    text-align:center;

    padding:20px;

    color:var(--texto-secundario);

    font-size:1.1rem;

}

/******************************
            BUSCADOR
******************************/

.busqueda{

    background:var(--blanco);

    padding:35px;

    box-shadow:var(--sombra);

}

label{

    display:block;

    margin-bottom:10px;

    color:var(--azul);

    font-weight:bold;

    font-size:1.1rem;

}

input{

    width:100%;

    padding:16px;

    border:2px solid var(--gris-borde);

    border-radius:8px;

    font-size:1.2rem;

    transition:.25s;

}

input:focus{

    outline:none;

    border-color:var(--celeste);

}

button{

    width:100%;

    margin-top:25px;

    padding:16px;

    border:none;

    border-radius:8px;

    background:var(--azul);

    color:white;

    font-size:1.2rem;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

button:hover{

    background:var(--celeste);

}

/******************************
          RESULTADO
******************************/

.resultado{

    background:var(--blanco);

    margin-top:25px;

    border-radius:12px;

    box-shadow:var(--sombra);

    overflow:hidden;

}

.resultado-vacio{

    padding:45px;

    text-align:center;

}

.resultado-vacio h2{

    color:var(--azul);

    margin-bottom:15px;

}

.resultado-vacio p{

    color:var(--texto-secundario);

    line-height:1.6;

}

/******************************
 TARJETA DEL RESULTADO
******************************/

.tarjeta-datos{
    padding:30px;
    border-top:4px solid #0b2d72;
}

.tarjeta-datos h2{

    color:var(--azul);

    margin-bottom:25px;

}

.dato{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    padding:14px 0;

    border-bottom:1px solid #ececec;

}

.dato:last-child{

    border-bottom:none;

}

.etiqueta{

    color:var(--texto-secundario);

    font-weight:bold;

    min-width:150px;

}

.valor{

    flex:1;

    text-align:right;

    font-weight:bold;

    color:var(--texto);

}

.tarjeta-votacion{

    padding:28px;

    border-top:4px solid #168845;

    background:linear-gradient(115deg, #f2fbf6 0%, #ffffff 58%, #f4fbf7 100%);

}

.badge-votacion{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:8px 14px;

    border-radius:6px;

    background:#168845;

    color:white;

    font-weight:bold;

    font-size:.95rem;

    box-shadow:0 3px 8px rgba(22,136,69,.18);

}

.badge-votacion svg,
.direccion-votacion svg,
.recordatorio-votacion svg,
.icono-votacion svg{

    width:18px;

    height:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:3;

    stroke-linecap:round;

    stroke-linejoin:round;

    flex:none;

}

.contenido-votacion{

    display:grid;

    grid-template-columns:125px 1px 1fr;

    gap:30px;

    align-items:center;

    margin-top:28px;

}

.sector-votacion{

    color:#111827;

}

.sector-votacion span{

    display:block;

    color:#4b5563;

    font-size:1rem;

    font-weight:bold;

    letter-spacing:0;

}

.sector-votacion strong{

    display:block;

    margin-top:4px;

    color:#168845;

    font-size:5rem;

    line-height:.9;

}

.separador-votacion{

    width:1px;

    height:100px;

    background:#d7e4dc;

}

.detalle-votacion{

    min-width:0;

}

.titulo-votacion{

    display:flex;

    align-items:center;

    gap:16px;

}

.titulo-votacion h2{

    margin:0;

    color:#168845;

    font-size:2rem;

    line-height:1.15;

}

.icono-votacion{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    background:#dff5e9;

    color:#168845;

    flex:none;

}

.direccion-votacion{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:18px;

    color:#4b5563;

    font-size:1rem;

    font-weight:bold;

}

.direccion-votacion svg{

    color:#4b5563;

    width:20px;

    height:20px;

}

.recordatorio-votacion{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:30px;

    padding:16px 24px;

    border:1px solid #dcefe4;

    border-radius:8px;

    background:#f0fbf4;

    color:#374151;

}

.recordatorio-votacion svg{

    color:#168845;

    fill:#168845;

    stroke:#168845;

    width:24px;

    height:24px;

}

.recordatorio-votacion p{

    margin:0;

    line-height:1.45;

}

.pie-pagina{

    margin-top:18px;

    padding:0px 18px 8px;

    text-align:right;

    color:var(--texto-secundario);

    font-size:.65rem;

}

.ok{

    color:#2e7d32;

}

.error{

    color:#c62828;

}

/******************************
        RESPONSIVE
******************************/

@media (max-width:700px){

    .contenedor{

        width:96%;

        margin:20px auto;

    }

    .logos{

        flex-direction:column;

        gap:20px;

    }

    .logo-cooperativa{

        max-width:100%;
        width:260px;

    }

    .logo-lista{

        width:90px;

    }

    .cabecera h1{

        font-size:1.5rem;

    }

    .busqueda{

        padding:25px;

    }

    .dato{

        flex-direction:column;

        gap:6px;

    }

    .valor{

        text-align:left;

    }

    .tarjeta-votacion{

        padding:22px;

    }

    .contenido-votacion{

        grid-template-columns:1fr;

        gap:20px;

    }

    .separador-votacion{

        width:100%;

        height:1px;

    }

    .sector-votacion strong{

        font-size:4rem;

    }

    .center-text {
      text-align: center;
    }

    .titulo-votacion{

        align-items:flex-start;

    }

    .titulo-votacion h2{

        font-size:1.5rem;

    }

    .recordatorio-votacion{

        align-items:flex-start;

        padding:14px 16px;

    }

}