/* ==========================================================================
   ESTILOS GENERALES Y SIDEBAR - HOTEL DEL LLANO
   ========================================================================== */
body { 
    background-color: #f4f7f6; 
}

.sidebar { 
    min-height: 100vh; 
    background: #ffffff; 
    border-right: 1px solid #dee2e6; 
}

.sidebar img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 150px; 
    padding: 10px;
}

/* Navegación activa Verde Esmeralda uniforme */
.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    background-color: #198754 !important; 
    color: white !important;
}

.nav-link {
    color: #495057; 
    font-weight: 500;
}

.nav-link:hover {
    color: #198754; 
}

/* ==========================================================================
   MÓDULO DE CHAT EN VIVO (ESTILO WHATSAPP)
   ========================================================================== */
.chat-container { 
    height: 75vh; 
    background: #e5ddd5; 
    border-radius: 8px; 
}

.messages-area { 
    height: 65vh; 
    overflow-y: auto; 
    padding: 20px; 
}

.message { 
    margin-bottom: 15px; 
    padding: 10px 15px; 
    border-radius: 15px; 
    max-width: 70%; 
}

.incoming { 
    background: white; 
    align-self: flex-start; 
}

.outgoing { 
    background: #dcf8c6; 
    align-self: flex-end; 
    margin-left: auto; 
}

.contact-item { 
    cursor: pointer; 
    transition: 0.3s; 
}

.contact-item:hover { 
    background-color: #f8f9fa; 
}

.unread-chat {
    border-left: 4px solid #198754 !important; 
}

/* ==========================================================================
   MÓDULO GESTIÓN DE RESERVAS (TABLA INTELIGENTE)
   ========================================================================== */
th[onclick] {
    transition: 0.2s;
    user-select: none; 
    cursor: pointer;
}

th[onclick]:hover {
    background-color: #212529 !important; 
    color: #198754 !important; 
}

.tabla-reservas-scroll {
    max-height: 72vh; 
    min-height: 50vh; 
    overflow-y: auto;  
    background-color: #ffffff; 
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.tabla-reservas-scroll table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}