/* =========================================================
   CRM ELECTORAL
   STYLE.CSS LIMPIO
========================================================= */


/* =========================================================
   RESET GENERAL
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html {
    width: 100%;
    min-height: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
}


/* =========================================================
   LOGIN
========================================================= */

body:not(.index-page) {
    background: linear-gradient(135deg, #0d47a1, #1565c0);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.loginBox {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 18px;
    padding: 35px 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
}

.logo {
    font-size: 70px;
    text-align: center;
    margin-bottom: 10px;
}

.loginBox h1 {
    text-align: center;
    color: #0d47a1;
    font-size: 28px;
}

.loginBox h2 {
    text-align: center;
    color: #666;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 30px;
}


/* =========================================================
   INPUTS GENERALES
========================================================= */

input {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 17px;
    outline: none;
    transition: .3s;
}

input:focus {
    border-color: #1565c0;
    box-shadow: 0 0 8px rgba(21,101,192,.25);
}


/* =========================================================
   BOTONES GENERALES
========================================================= */

button {
    width: 100%;
    border: none;
    background: #1565c0;
    color: #fff;
    padding: 16px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: .2s;
}

button:hover {
    background: #0d47a1;
}

button:active {
    transform: scale(.98);
}


/* =========================================================
   MENSAJE LOGIN
========================================================= */

#msg {
    margin-top: 20px;
    text-align: center;
    font-size: 15px;
    color: #d32f2f;
}


/* =========================================================
   LOGIN - CELULAR
========================================================= */

@media (max-width: 480px) {

    .loginBox {
        padding: 30px 20px;
    }

    .loginBox h1 {
        font-size: 24px;
    }

    .loginBox h2 {
        font-size: 15px;
    }
}


/* =========================================================
   INDEX / CRM ELECTORAL
========================================================= */

body.index-page {

    display: block;

    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background: linear-gradient(
        135deg,
        #0d47a1,
        #1565c0
    );

    overflow-x: hidden;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

body.index-page .app {

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

    margin: 0 auto;

    padding: 30px 25px 50px;
}


/* =========================================================
   CABECERA
========================================================= */

.topBar {

    width: 100%;

    color: #ffffff;

    margin-bottom: 25px;
}

.titulo {

    font-size: 30px;
    font-weight: bold;
    line-height: 1.15;
}

.subtitulo {

    font-size: 17px;
    opacity: .9;

    margin-top: 4px;
}


/* =========================================================
   ZONA SUPERIOR
========================================================= */

/*
   En PC:
   BIENVENIDO + BUSCAR
   quedan uno al lado del otro.

   En celular:
   pasan automáticamente uno debajo del otro.
*/

body.index-page .welcomeCard,
body.index-page .searchCard {

    background: #ffffff;

    border-radius: 20px;

    box-shadow: 0 8px 25px rgba(0,0,0,.15);

}


/* =========================================================
   BIENVENIDA
========================================================= */

body.index-page .welcomeCard {

    padding: 25px;

    text-align: center;
}

body.index-page .welcomeCard h2 {

    color: #666;

    font-size: 19px;

    margin-bottom: 8px;
}

body.index-page .welcomeCard h1 {

    color: #1565c0;

    font-size: 32px;

    margin-bottom: 15px;

    word-break: break-word;
}

.badgeRol {

    display: inline-block;

    background: #1565c0;

    color: #ffffff;

    padding: 9px 20px;

    border-radius: 25px;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 1px;
}


/* =========================================================
   BUSCADOR
========================================================= */

body.index-page .searchCard {

    padding: 25px;
}

.searchCard h3 {

    color: #1565c0;

    text-align: center;

    margin-bottom: 20px;

    font-size: 23px;
}

.searchCard input {

    width: 100%;

    height: 52px;

    margin-bottom: 15px;

    font-size: 18px;
}

.searchCard button {

    width: 100%;

    height: 54px;

    font-size: 18px;
}


/* =========================================================
   PC
========================================================= */

@media (min-width: 701px) {

    /*
       =====================================================
       PC / ESCRITORIO
       =====================================================

       Tres zonas superiores:
       1. CRM Electoral
       2. Bienvenido
       3. Buscar Elector

       La ficha queda centrada debajo.
       El diseño del celular no se modifica.
    */

    body.index-page .app {

        display: grid;

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

        grid-template-columns: minmax(260px, 1fr) 280px 400px;

        grid-template-areas:
            "top welcome search"
            "top resultado resultado"
            "top ficha ficha";

        column-gap: 25px;
        row-gap: 0;

        align-items: start;

        margin: 0 auto;
        padding: 35px 25px 50px;
    }


    /* CRM ELECTORAL */

    body.index-page .topBar {

        grid-area: top;

        width: 100%;

        margin: 0;

        padding-top: 45px;

        align-self: start;
    }


    body.index-page .titulo {

        font-size: 30px;
        line-height: 1.15;
    }


    body.index-page .subtitulo {

        font-size: 17px;
        margin-top: 4px;
    }


    /* BIENVENIDO */

    body.index-page .welcomeCard {

        grid-area: welcome;

        width: 100%;

        padding: 25px 20px;

        margin: 0;

        text-align: center;
    }


    body.index-page .welcomeCard h2 {

        font-size: 19px;
        margin-bottom: 8px;
    }


    body.index-page .welcomeCard h1 {

        font-size: 30px;
        line-height: 1.15;

        margin-bottom: 15px;

        word-break: break-word;
    }


    /* BUSCADOR */

    body.index-page .searchCard {

        grid-area: search;

        width: 100%;

        padding: 25px;

        margin: 0;
    }


    .searchCard h3 {

        font-size: 23px;
        line-height: 1.2;

        margin-bottom: 20px;
    }


    .searchCard input {

        width: 100%;
        height: 52px;

        font-size: 18px;
        margin-bottom: 15px;
    }


    .searchCard button {

        width: 100%;
        height: 54px;

        font-size: 18px;
    }


    /* RESULTADO VACÍO */

    body.index-page #resultado {

        grid-area: resultado;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    /* FICHA DEL ELECTOR */

    body.index-page #fichaElector {

        grid-area: ficha;

        width: 100%;

        max-width: 560px;

        margin: 25px auto 30px;

        box-sizing: border-box;
    }

}


/* =========================================================
   AJUSTES PC - EVITAR DESBORDES
========================================================= */

@media (min-width: 701px) {

    body.index-page .app > * {
        min-width: 0;
    }

    body.index-page .searchCard input,
    body.index-page .searchCard button {
        max-width: 100%;
    }

    body.index-page .ficha-elector {
        overflow: hidden;
    }

}


/* =========================================================
   RESULTADO
========================================================= */

body.index-page #resultado {

    width: 100%;

    margin-top: 20px;
}


/* =========================================================
   FICHA DEL ELECTOR
========================================================= */

body.index-page .ficha-elector {

    width: 100%;

    max-width: 560px;

    margin: 25px auto 30px;

    box-sizing: border-box;
}


/*
   IMPORTANTE:
   NO ponemos display:none !important aquí.

   El HTML comienza con:
   style="display:none;"

   y app.js lo cambia a:
   display:block

   después de realizar la búsqueda.
*/


/* =========================================================
   CABECERA DEL ELECTOR
========================================================= */

.elector-header {

    width: 100%;

    background: #ffffff;

    border-radius: 24px;

    padding: 28px 22px 24px;

    text-align: center;

    box-shadow: 0 8px 25px rgba(0,0,0,.12);

    margin-bottom: 16px;
}

.elector-icon {

    width: 64px;
    height: 64px;

    margin: 0 auto 10px;

    border-radius: 50%;

    background: #1769c2;

    display: flex;

    align-items: center;
    justify-content: center;
}

.elector-titulo {

    color: #1769c2;

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 12px;
}

.elector-nombre {

    color: #111111;

    font-size: 25px;

    font-weight: 800;

    line-height: 1.25;

    text-transform: uppercase;

    margin-bottom: 16px;

    word-break: break-word;
}

.elector-cedula {

    color: #555555;

    font-size: 16px;
}

.elector-cedula strong {

    color: #1769c2;

    font-size: 20px;

    margin-left: 5px;
}


/* =========================================================
   TARJETAS DE DATOS
========================================================= */

.dato-card {

    width: 100%;

    background: #ffffff;

    border-radius: 20px;

    padding: 20px;

    box-shadow: 0 6px 20px rgba(0,0,0,.10);

    box-sizing: border-box;
}

.dato-label {

    color: #1769c2;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: .5px;

    margin-bottom: 10px;
}


/* =========================================================
   LOCAL
========================================================= */

.local-card {

    margin-bottom: 16px;
}

.local-nombre {

    color: #111111;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.35;

    text-transform: uppercase;

    word-break: break-word;
}


/* =========================================================
   MESA + ORDEN
========================================================= */

.mesa-orden {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-bottom: 16px;
}

.dato-grande {

    text-align: center;

    padding: 20px 10px;
}

.dato-grande .dato-label {

    margin-bottom: 5px;
}

.dato-valor {

    color: #111111;

    font-size: 42px;

    font-weight: 900;

    line-height: 1.1;
}


/* =========================================================
   TELÉFONO
========================================================= */

.telefono-card {

    width: 100%;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}

.telefono-card .dato-label {

    margin-bottom: 0;
}

.telefono-valor {

    color: #111111;

    font-size: 20px;

    font-weight: 700;

    text-align: right;

    word-break: break-word;
}


/* =========================================================
   BOTÓN ENTREGA
========================================================= */

.btn-entrega {

    width: 100%;

    min-height: 65px;

    border: none;

    border-radius: 18px;

    background: #278b36;

    color: #ffffff;

    font-size: 19px;

    font-weight: 900;

    padding: 15px 20px;

    margin-bottom: 15px;

    box-shadow: 0 7px 18px rgba(0,0,0,.18);
}

.btn-entrega:disabled {

    opacity: 1;

    cursor: default;
}

.btn-entrega.entrega-registrada {

    background: #278b36;
}


/* =========================================================
   DETALLE DE ENTREGA
========================================================= */

#infoEntrega {

    width: 100%;

    background: #f1f8f3;

    border: 2px solid #28a745;

    border-radius: 20px;

    margin-top: 15px;

    padding: 20px;

    box-sizing: border-box;

    box-shadow: 0 5px 15px rgba(0,0,0,.12);
}


/*
   NO usar display:none !important.
   El JavaScript controla su visibilidad.
*/

#infoEntrega .titulo-entrega {

    color: #218838;

    font-size: 20px;

    font-weight: 800;

    text-align: center;

    margin-bottom: 18px;
}

#infoEntrega .entrega-confirmada {

    text-align: center;

    color: #218838;

    font-weight: 800;

    font-size: 18px;

    line-height: 1.3;

    margin-bottom: 15px;
}

#infoEntrega .dato-entrega {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding: 12px 0;

    border-bottom: 1px solid #d5e8d9;
}

#infoEntrega .dato-entrega:last-child {

    border-bottom: none;
}

#infoEntrega .dato-entrega strong {

    color: #555;

    font-size: 16px;
}

#infoEntrega .dato-entrega span {

    color: #111;

    font-size: 16px;

    font-weight: 700;

    text-align: right;

    word-break: break-word;
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 700px) {

    body.index-page {

        padding: 0;

        overflow-x: hidden;
    }

    body.index-page .app {

        width: 100%;

        max-width: 100%;

        display: block;

        padding: 15px 12px 40px;
    }


    /* CABECERA */

    body.index-page .topBar {

        width: 100%;

        margin-bottom: 18px;

        padding: 5px 8px;
    }

    .titulo {

        font-size: 27px;

        line-height: 1.15;
    }

    .subtitulo {

        font-size: 16px;
    }


    /* BIENVENIDA */

    body.index-page .welcomeCard {

        width: 100%;

        margin: 0 0 18px;

        padding: 22px 18px;
    }

    body.index-page .welcomeCard h2 {

        font-size: 19px;
    }

    body.index-page .welcomeCard h1 {

        font-size: 32px;

        line-height: 1.15;
    }


    /* BUSCADOR */

    body.index-page .searchCard {

        width: 100%;

        margin: 0 0 20px;

        padding: 22px 18px;
    }

    .searchCard h3 {

        font-size: 27px;

        line-height: 1.2;

        margin-bottom: 20px;
    }

    .searchCard input {

        height: 62px;

        font-size: 23px;

        padding: 15px;
    }

    .searchCard button {

        height: 62px;

        font-size: 23px;
    }


    /*
       RESULTADO VACÍO:
       não ocupa espaço.
    */

    body.index-page #resultado {

        width: 100%;

        margin: 0;

        padding: 0;
    }


    /* FICHA */

    body.index-page .ficha-elector {

        width: 100%;

        max-width: 100%;

        margin: 20px 0 30px;
    }


    /* ELECTOR */

    .elector-header {

        width: 100%;

        padding: 28px 15px 24px;

        border-radius: 24px;
    }

    .elector-icon {

        width: 64px;
        height: 64px;
    }

    .elector-titulo {

        font-size: 27px;

        margin-bottom: 12px;
    }

    .elector-nombre {

        font-size: 28px;

        line-height: 1.2;
    }

    .elector-cedula {

        font-size: 20px;
    }

    .elector-cedula strong {

        font-size: 22px;
    }


    /* LOCAL */

    .local-card {

        padding: 20px;

        margin-bottom: 16px;
    }

    .dato-label {

        font-size: 18px;
    }

    .local-nombre {

        font-size: 24px;

        line-height: 1.25;
    }


    /* MESA / ORDEN */

    .mesa-orden {

        grid-template-columns: 1fr 1fr;

        gap: 12px;

        margin-bottom: 16px;
    }

    .dato-grande {

        padding: 18px 8px;
    }

    .dato-valor {

        font-size: 42px;
    }


    /* TELÉFONO */

    .telefono-card {

        padding: 20px;

        margin-bottom: 18px;
    }

    .telefono-card .dato-label {

        font-size: 18px;
    }

    .telefono-valor {

        font-size: 23px;
    }


    /* ENTREGA */

    .btn-entrega {

        width: 100%;

        min-height: 68px;

        font-size: 20px;

        line-height: 1.2;

        padding: 14px 10px;

        margin-bottom: 15px;
    }


    /* DETALLE */

    #infoEntrega {

        width: 100%;

        margin-top: 10px;

        padding: 24px 18px;

        border-radius: 20px;
    }

    #infoEntrega .titulo-entrega {

        font-size: 25px;

        line-height: 1.2;
    }

    #infoEntrega .entrega-confirmada {

        font-size: 21px;

        line-height: 1.3;
    }

    #infoEntrega .dato-entrega {

        gap: 10px;

        align-items: flex-start;
    }

    #infoEntrega .dato-entrega strong {

        flex: 0 0 48%;

        font-size: 17px;
    }

    #infoEntrega .dato-entrega span {

        flex: 1;

        font-size: 17px;

        text-align: right;
    }
}


/* =========================================================
   CELULARES MUY PEQUEÑOS
========================================================= */

@media (max-width: 380px) {

    body.index-page .app {

        padding-left: 10px;
        padding-right: 10px;
    }

    .titulo {

        font-size: 25px;
    }

    .searchCard h3 {

        font-size: 24px;
    }

    .elector-nombre {

        font-size: 24px;
    }

    .local-nombre {

        font-size: 21px;
    }

    .dato-valor {

        font-size: 36px;
    }

    .telefono-valor {

        font-size: 20px;
    }

    #infoEntrega .titulo-entrega {

        font-size: 22px;
    }
}
/* ===========================================================
   ÚLTIMAS ENTREGAS
=========================================================== */

.ultimasEntregasCard {
    background: #ffffff;
    border-radius: 35px;
    margin: 30px 20px;
    padding: 28px 20px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.ultimasEntregasTitulo {
    color: #1769b5;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 22px;
}

#ultimasEntregasLista {
    width: 100%;
}

.sinEntregas {
    color: #666;
    font-size: 18px;
    padding: 15px;
}

.entregaItem {
    background: #f5f7f9;
    border-radius: 18px;
    padding: 16px 14px;
    margin-bottom: 12px;
    text-align: left;
    border-left: 5px solid #1769b5;
}

.entregaNombre {
    color: #1769b5;
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 6px;
}

.entregaDatos {
    color: #555;
    font-size: 16px;
    line-height: 1.5;
}

.entregaHora {
    font-weight: 700;
    color: #222;
}

.entregaUsuario {
    font-weight: 600;
}
/* ===========================================================
   BOTÓN VER TODAS LAS ENTREGAS
=========================================================== */

.btnVerTodasEntregas {
    width: 100%;
    margin-top: 10px;
    padding: 15px 20px;

    border: none;
    border-radius: 18px;

    background: #1769b5;
    color: #ffffff;

    font-size: 17px;
    font-weight: 800;

    cursor: pointer;

    transition: transform 0.15s ease,
                opacity 0.15s ease;
}

.btnVerTodasEntregas:active {
    transform: scale(0.97);
    opacity: 0.85;
}