/* ===========================
   ESTILOS GENERALES
=========================== */

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


body{

    font-family:'Poppins',sans-serif;

    background:#f5f7fb;

    color:#2c3e50;

}



.contenedor{

    width:min(1200px,95%);

    margin:auto;

}



/* ===========================
   HEADER
=========================== */


header{

    background:linear-gradient(135deg,#1565C0,#0D47A1);

    color:white;

    padding:45px 20px;

    text-align:center;

}



header h1{

    font-size:2.3rem;

    font-weight:700;

}



header p{

    margin-top:10px;

    opacity:.9;

}




/* ===========================
   HERO
=========================== */


.hero{

    padding:40px 20px;

    text-align:center;

}



.hero h2{

    font-size:1.9rem;

    margin-bottom:15px;

}



.hero p{

    color:#666;

}





/* ===========================
   BARRA SUPERIOR
=========================== */


.barra-superior{

    position:sticky;

    top:0;

    background:white;

    box-shadow:0 2px 15px rgba(0,0,0,.08);

    padding:18px 0;

    z-index:999;

}



.barra-flex{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}





#btnContinuar{


    background:#1565C0;


    color:white;


    border:none;


    padding:14px 28px;


    border-radius:12px;


    cursor:pointer;


    font-size:16px;


    transition:.25s;


}



#btnContinuar:hover{


    transform:translateY(-2px);


}






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


.buscador{


    margin:40px 0;


}



.buscador input{


    width:100%;


    padding:16px;


    border-radius:12px;


    border:1px solid #ddd;


    font-size:17px;


}





/* ===========================
   GRILLA NUMEROS
=========================== */


#grillaNumeros{


    display:grid;


    grid-template-columns:repeat(auto-fill,minmax(70px,1fr));


    gap:12px;


    margin-bottom:60px;


}





.numero{


    background:white;


    border-radius:12px;


    height:65px;


    display:flex;


    align-items:center;


    justify-content:center;


    cursor:pointer;


    font-weight:600;


    transition:.2s;


    box-shadow:0 2px 8px rgba(0,0,0,.08);


}




.numero:hover{


    transform:translateY(-4px);


    box-shadow:0 10px 18px rgba(0,0,0,.12);


}






/* ===========================
   ESTADOS NUMEROS
=========================== */


.numero.disponible{


    background:#fff;


    color:#333;


    border:1px solid #ddd;


}



.numero.seleccionado{


    background:#2563eb;


    color:white;


    border:2px solid #1d4ed8;


}



.numero.reservado{


    background:#facc15;


    color:#000;


    border:2px solid #ca8a04;


    cursor:not-allowed;


}



.numero.vendido{


    background:#dc2626;


    color:white;


    border:2px solid #991b1b;


    cursor:not-allowed;


}




.numero.reservado:hover,
.numero.vendido:hover{


    transform:none;


    box-shadow:0 2px 8px rgba(0,0,0,.08);


}






/* ===========================
   MODAL RESERVA
=========================== */


.modal{


    position:fixed;


    inset:0;


    display:none;


    justify-content:center;


    align-items:center;


    background:rgba(0,0,0,.75);


    z-index:99999;


}


/* El JS ahora controla la visibilidad agregando/quitando
   esta clase (classList), en vez de usar style.display inline.
   Esto evita conflictos de especificidad con las reglas de abajo. */
.modal.activo{


    display:flex;


}




.ventana{


    position:relative;


    width:min(500px,90%);


    background:white;


    border-radius:18px;


    padding:50px 30px 30px;


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


    animation:aparecer .25s ease;


}




@keyframes aparecer{


    from{


        opacity:0;


        transform:translateY(20px) scale(.98);


    }


    to{


        opacity:1;


        transform:translateY(0) scale(1);


    }


}
/* ===========================
   CONTINUACIÓN MODAL RESERVA
=========================== */


.ventana h2{

    margin-bottom:10px;

    font-size:28px;

}




.ventana input,
.ventana textarea{


    width:100%;


    margin-top:15px;


    padding:14px;


    border-radius:10px;


    border:1px solid #ddd;


    font-family:inherit;


    font-size:15px;


}



.ventana textarea{


    min-height:90px;


    resize:vertical;


}




.ventana button:not(.cerrar-modal){


    width:100%;


    margin-top:20px;


    padding:15px;


    border:none;


    border-radius:10px;


    background:#1565C0;


    color:white;


    cursor:pointer;


    font-size:16px;


    transition:.2s;


}




.ventana button:not(.cerrar-modal):hover{


    background:#0D47A1;


}






/* ===========================
   BOTÓN CERRAR MODAL
=========================== */


.cerrar-modal{


    position:absolute;


    top:15px;


    right:18px;


    background:none;


    border:none;


    padding:0;


    width:auto;


    height:auto;


    color:#999;


    font-size:34px;


    font-weight:300;


    line-height:1;


    cursor:pointer;


    transition:.2s;


}



.cerrar-modal:hover{


    color:#111;


    transform:scale(1.15);


}







/* ===========================
   LEYENDA ESTADOS NUMEROS
=========================== */


.leyenda-rifa{


    background:white;


    margin:30px auto;


    padding:25px;


    border-radius:18px;


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


}



.leyenda-rifa h3{


    text-align:center;


    color:#1565C0;


    margin-bottom:25px;


}





.leyenda-grid{


    display:grid;


    grid-template-columns:repeat(2,1fr);


    gap:20px;


}





.leyenda-item{


    display:flex;


    align-items:center;


    gap:15px;


}





.color-numero{


    width:65px;


    height:65px;


    border-radius:12px;


    flex-shrink:0;


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


}





.color-numero.disponible{


    background:#ffffff;


    border:1px solid #ddd;


}




.color-numero.seleccionado{


    background:#2563eb;


    border:2px solid #1d4ed8;


}




.color-numero.reservado{


    background:#facc15;


    border:2px solid #ca8a04;


}




.color-numero.vendido{


    background:#dc2626;


    border:2px solid #991b1b;


}





.leyenda-texto{


    display:flex;


    flex-direction:column;


}




.leyenda-texto strong{


    font-size:17px;


    color:#2c3e50;


}




.leyenda-texto span{


    font-size:14px;


    color:#666;


    line-height:1.4;


}






/* ===========================
   CAMPO OBSERVACIONES
=========================== */


#observaciones{


    display:block !important;


    height:100px !important;


    visibility:visible !important;


    opacity:1 !important;


}







/* ===========================
   MODAL AVISO SISTEMA
=========================== */


.modal-aviso{


    position:fixed;


    inset:0;


    display:none;


    justify-content:center;


    align-items:center;


    background:rgba(0,0,0,.65);


    z-index:999999;


}


/* Única fuente de verdad para mostrar el aviso.
   El JS agrega/quita esta clase; ya no depende de style.display inline. */
.modal-aviso.activo{


    display:flex;


}





.ventana-aviso{


    width:min(420px,90%);


    background:white;


    border-radius:20px;


    padding:35px 30px;


    text-align:center;


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


    animation:aparecer .25s ease;


}





.icono-aviso{


    font-size:55px;


    margin-bottom:15px;


}




.ventana-aviso h2{


    color:#1565C0;


    font-size:24px;


    margin-bottom:15px;


}





.ventana-aviso p{


    color:#555;


    line-height:1.5;


    font-size:16px;


}





#cerrarAviso{


    margin-top:25px;


    width:100%;


    padding:14px;


    border:none;


    border-radius:12px;


    background:#1565C0;


    color:white;


    font-size:16px;


    cursor:pointer;


    transition:.2s;


}





#cerrarAviso:hover{


    background:#0D47A1;


    transform:translateY(-2px);


}/* ===========================
   FOOTER
=========================== */


footer{


    background:#0D47A1;


    color:white;


    text-align:center;


    padding:25px;


}







/* ===========================
   MOVIL
=========================== */


@media(max-width:700px){



    header h1{


        font-size:1.7rem;


    }



    .hero h2{


        font-size:1.5rem;


    }



    #grillaNumeros{


        grid-template-columns:repeat(auto-fill,minmax(55px,1fr));


        gap:8px;


    }




    .numero{


        height:55px;


        font-size:14px;


    }




    .ventana{


        padding:45px 20px 20px;


    }




    .ventana h2{


        font-size:24px;


    }





    .cerrar-modal{


        top:12px;


        right:15px;


        font-size:30px;


    }





    .leyenda-grid{


        grid-template-columns:1fr;


    }





    .color-numero{


        width:55px;


        height:55px;


    }





    /* Ya no se sobreescriben top/left/width/height aquí:
       .modal-aviso ya usa "inset:0" en su regla base, que sigue
       el viewport visual real. Forzar 100vw/100vh en móvil es lo que
       causaba que el popup se dibujara fuera del área visible en
       Chrome Android (por el comportamiento de la barra de
       direcciones). Solo ajustamos lo cosmético para móvil. */
    .modal-aviso{


        background:rgba(0,0,0,.75);


        z-index:9999999;


    }





    .ventana-aviso{


        width:90%;


        max-width:380px;


        padding:30px 20px;


    }





    .icono-aviso{


        font-size:45px;


    }



}