/* ==============================
   AGENDA DECORACIONES LIZAVALA
   ============================== */


/* HERO */

.agenda-hero {

    background: linear-gradient(
        135deg,
        #fce4ec,
        #fff
    );

    padding: 70px 20px;
    text-align: center;

}


.agenda-contenido h1 {

    font-size: 42px;
    color: #b76e79;
    margin-bottom: 15px;

}


.agenda-contenido p {

    font-size: 18px;
    color: #666;
    max-width: 600px;
    margin: auto;

}



/* INFORMACION */

.agenda-info {

    display:flex;
    justify-content:center;
    padding:40px 20px;

}


.info-card {

    background:white;
    width:90%;
    max-width:700px;

    padding:30px;

    border-radius:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    text-align:center;

}


.info-card h3 {

    color:#c2185b;
    font-size:25px;

}


.info-card p {

    color:#666;

}



/* LEYENDA */

.leyenda {

    display:flex;
    justify-content:center;
    gap:30px;
    margin-top:25px;
    flex-wrap:wrap;

}


.leyenda div {

    display:flex;
    align-items:center;
    gap:8px;

    color:#555;

}


.leyenda span {

    width:18px;
    height:18px;
    border-radius:50%;

}


.disponible {

    background:#81c784;

}


.medio {

    background:#ffd54f;

}


.ocupado {

    background:#e57373;

}



/* CALENDARIO */


.calendario-section {

    padding:50px 20px;
    display:flex;
    justify-content:center;

}


.calendario {

    background:white;

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

    padding:30px;

    border-radius:30px;

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

}



/* CABECERA */

.calendario-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}


.calendario-header h2 {

    color:#b76e79;
    font-size:30px;

}


.calendario-header button {

    background:#f8bbd0;

    border:none;

    width:45px;
    height:45px;

    border-radius:50%;

    font-size:25px;

    cursor:pointer;

}



/* DIAS */

.dias-semana {

    display:grid;

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

    text-align:center;

    font-weight:bold;

    color:#b76e79;

    margin-bottom:15px;

}



.dias {

    display:grid;

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

    gap:12px;

}



.dia {

    height:80px;

    background:#fafafa;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    color:#555;

    cursor:pointer;

    transition:.3s;

}



.dia:hover {

    transform:translateY(-5px);

}



/* ESTADOS */

.disponible-dia {

    background:#c8e6c9;

}



.medio-dia {

    background:#fff59d;

}



.ocupado-dia {

    background:#ffcdd2;

}




/* FORMULARIO */


.reserva {

    padding:50px 20px;

    display:flex;

    justify-content:center;

}


.form-card {

    background:white;

    width:95%;

    max-width:600px;

    padding:35px;

    border-radius:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.1);

}


.form-card h2 {

    text-align:center;

    color:#b76e79;

    margin-bottom:25px;

}



.form-card form {

    display:flex;

    flex-direction:column;

    gap:15px;

}



.form-card input,
.form-card select,
.form-card textarea {


    padding:15px;

    border-radius:15px;

    border:1px solid #ddd;

    font-size:16px;

}



.form-card textarea {

    height:120px;

    resize:none;

}



.form-card button {


    background:#d81b60;

    color:white;

    border:none;

    padding:15px;

    border-radius:20px;

    font-size:18px;

    cursor:pointer;

}



.form-card button:hover {


    background:#ad1457;

}

.otro-evento{

    display:none;

    margin-top:15px;

}

.dias{

animation: cambiarMes .35s ease;

}


@keyframes cambiarMes{

from{

opacity:0;
transform:translateX(30px);

}


to{

opacity:1;
transform:translateX(0);

}

}

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


.calendario-section{

width:100%;
padding:20px;

}



.calendario{

    width:95%;
    max-width:900px;
    margin:auto;
    padding:25px;

}



.dias{

display:grid;
grid-template-columns:repeat(7,1fr);
gap:8px;

}



.dia{

    height:70px;
display:flex;
align-items:center;
justify-content:center;

font-size:18px;
cursor:pointer;

border-radius:12px;

}



.dias-semana{

display:grid;
grid-template-columns:repeat(7,1fr);
text-align:center;

font-weight:bold;

}



@media(max-width:600px){



.calendario{

padding:10px;

}



.calendario-header{

display:flex;
justify-content:space-between;
align-items:center;

}



.calendario-header h2{

font-size:20px;

}



.dias{

gap:5px;

}



.dia{

font-size:15px;
border-radius:8px;

}



.dias-semana span{

font-size:13px;

}


#seleccionarAnio{

width:90px;

}



}




/* ==========================
   CALENDARIO ADAPTATIVO
========================== */


.calendario-section{

    width:100%;
    padding:30px 10px;

}



.dias{

    width:100%;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;

}



.dia{

    width:100%;
    height:auto;
    aspect-ratio:1/1;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:15px;

    font-size:18px;

}



/* TABLET */

@media(max-width:768px){


.calendario{

    width:100%;
    padding:15px;

}



.calendario-header h2{

    font-size:22px;

}



.dia{

    font-size:15px;

}


}



/* CELULAR */

@media(max-width:480px){


.calendario-section{

    padding:10px;

}



.calendario{

    border-radius:20px;

}



.dias{

    gap:5px;

}



.dia{

    border-radius:10px;

    font-size:14px;

}



.dias-semana span{

    font-size:12px;

}


}


/* ==============================
   SELECTOR DE MES Y AÑO
   ============================== */

.selector-fecha{

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;

}


.selector-fecha h2{

    margin:0;

    font-size:26px;

    color:#b85c8e;

    font-weight:700;

    text-align:center;

}




#seleccionarAnio{

    width:90px;

    padding:6px 12px;

    border-radius:20px;

    border:2px solid #e8a7c7;

    background:#fff7fb;

    color:#b85c8e;

    font-size:15px;

    font-weight:600;

    text-align:center;

    cursor:pointer;

    outline:none;

    transition:.3s;

}




#seleccionarAnio:hover{

    background:#ffe4f0;

    border-color:#d77aa9;

}




#seleccionarAnio:focus{

    box-shadow:0 0 0 3px rgba(216,122,169,.25);

}




.calendario-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}




.calendario-header button{

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#f8b7d2;

    color:white;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

}



.calendario-header button:hover{

    background:#e58ab5;

    transform:scale(1.05);

}