.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: white;
    border-bottom: 1px solid #ddd;
}

.header .center {
    font-weight: 600;
    font-size: 18px;
}

.header button {
    border: none;
    background: #17C964;
    color: white;
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
}

.header button:hover {
    background: #129e4f;
    transition: all 0.2s ease-in-out 0.1s;
    ;
}
.center{
    display: none;
}
.center button {
    border: none;
    background: transparent;
    color: #1B1B29;
    padding: 5px 10px;
    border-radius: 25px;
    cursor: pointer;
}

.center button:hover {
    background: #cccccc4f;
}

#monthPicker {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    color: #2c3e50;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

#monthPicker:hover {
    border-color: #3498db;
    background-color: #fcfdfe;
}

#monthPicker:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

#monthPicker::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    filter: invert(0.4);
    transition: all 0.2s;
}

#monthPicker::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(0, 0, 0, 0.05);
}



.wrapper {
    /* padding: 10px; */
    background-color: #fff;
}

.calendar-scroll {
    overflow-x: auto;
    scroll-behavior: smooth;
}

#calendar {
    display: grid;
    width: 100%;
    /* min-width: 800px; */
    max-height: calc(100vh - 142px);
    position: relative;
    color: #1B1B29;
    /* font-family: Arial, Helvetica, sans-serif; */
    user-select: none;
    -moz-user-select: none;
}

.cell {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    height: 32px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-cell {
    background: #fafafa;
    font-weight: 600;
    border-bottom: 2px solid #1B1B29;
}

.room {
    background: #f8f9fb;
    font-weight: 600;
    /* justify-content: flex-start; */
    text-align: center;
}

/* 🔥 CELDAS PASADAS */
.cell.pasado {
    background: #F8F9FB;
    cursor: not-allowed;

}

.reserva-bar {
    position: absolute;
    color: #fff;
    border-radius: 2px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    z-index: 1;
    text-transform: uppercase;

}

.reservado {
    /* background-color: #b4e1ff;
    border: 1px solid #47abee; */
    background: linear-gradient(135deg, #50b4f7, #2980b9);
}

.checkin {
    /* background-color: #c7b7b0;
    border: 1px solid #5e4940; */
    background: linear-gradient(135deg, #d4774b, #7a3b1a);
}

.mantenimiento {
    /* background-color: #f0e5c2;
    border: 1px solid #ffc341; */
    background: linear-gradient(135deg, #e7b71a, #b38b07);
}


/* MODAL */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    /* Cambiamos display:none por flex siempre */
    align-items: center;
    justify-content: center;
    z-index: 9999;

    /* Control de visibilidad para la transición */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Estado activo: Visible */
.modal.show {
    opacity: 1;
    visibility: visible;
}

/* El contenido del modal también puede tener su propio efecto */
.modal-content {
    background: white;
    padding: 25px;
    width: 360px;
    border-radius: 12px;
    position: relative;

    /* Efecto de "subida" */
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Cuando el padre tiene .show, el contenido sube a su posición original */
.modal.show .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    cursor: pointer;
}

.modal input,
.modal select {
    width: 100%;
    padding: 9px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.error {
    border-color: #e74c3c !important;
}

.error-text {
    font-size: 11px;
    color: #e74c3c;
    margin-top: -6px;
    margin-bottom: 8px;
}

.modal button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 6px;
    margin-top: 5px;
}

.save {
    background: #2ecc71;
    color: white
}

.closeFORM {
    background: #e74c3c;
    color: white
}









/* encabezado */
.header-pro {
    position: sticky;
    top: 0;
    background: #1B1B29;
    z-index: 10;
    border-bottom: 2px solid #1B1B29;
    /* padding: 5px 0; */
    text-align: center;
    align-items: center;
    color: #fff;
}

/* columna habitaciones fija */
.room {
    position: sticky;
    left: 0;
    background: #F8F9FB;
    z-index: 4;
}
.cell.room {
    display: flex;
    flex-direction: column;  
    justify-content: center;
    align-items: center; 
    line-height: 1.2;
    /* border-left: 4px solid rgba(0,0,0,0.2); */
}

/* esquina superior izquierda */
.header-cell.room {
    z-index: 10;
}


.day-number {
    font-weight: 600;
    font-size: 12px;
    margin-top: 8px;
}

.day-name {
    font-size: 10px;
    color: #6b7280;
    font-size: 250;
}

/* hoy */
.today-badge {
    /* background: linear-gradient(135deg, #F3A049, #ffab3c); */
    /* background-color: #FFEAA7; */

    color: #F3A049;
    /* padding: 0 10px; */
    padding-top: 8px;
    /* width: 100%; */
    height: calc(100% + 2px);
    margin-top: 0;
    border-left: 2px solid  #F3A049;
    border-right: 2px solid  #F3A049;

}

.header-cell.room {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    background: #1B1B29;
    /* border-right: 1px solid #e5e7eb; */
    border: none;
    border-bottom: 2px solid #1B1B29;
    font-weight: bold;
    height: 42px;
    color: #fff;
}

.room-number {
    font-weight: bold;
    font-size: 12px;
}

.room-type {
    font-size: 11px;
    color: #666;
}


.tipo-simple {
    background-color: #d0e7ff; border-bottom:1px solid #3498db; border-left: 5px solid #3498db;border-right: 1px solid #3498db
}

.tipo-matrimonial {
    background-color: #d4f8d4;border-bottom:1px solid #2ecc71; border-left: 5px solid #2ecc71;border-right: 1px solid #2ecc71
}

.tipo-triple {
    background-color: #ffe0b3;border-bottom:1px solid #e67e22; border-left: 5px solid #e67e22;border-right: 1px solid #e67e22
}
.tipo-doble {
    background-color: #eedefd;border-bottom:1px solid #d7adff;   border-left: 5px solid #d7adff;border-right: 1px solid #d7adff
}
.tipo-suite-ejecutiva {
    background-color: #fce3e3;border-bottom:1px solid #ffa4a4; border-left: 5px solid #ffa4a4;border-right: 1px solid #ffa4a4
}


/* .cell {
    border-width: 1px;
} */
@media (max-width: 991px) {
    /* .reserva-bar {} */
}