/* static/styles.css */
:root {
    /* --- PALETA SEMÁFORO (HOUSEKEEPING) --- */
    --limpia: #2e7d32;       /* Verde Fuerte */
    --sucia: #c62828;        /* Rojo Fuerte */
    --repaso: #f9a825;       /* Amarillo/Naranja */
    --cliente: #1565c0;      /* Azul Fuerte */
    --salida: #00838f;       /* Cyan Oscuro */
    --bloqueada: #212121;    /* Negro Suave */
    
    /* --- COLORES INTERFAZ --- */
    --primary: #003b78;      /* Azul Corporativo */
    --bg-app: #f0f2f5;       /* Gris muy clarito de fondo */
    --white: #ffffff;
    --text-main: #333333;
    --text-muted: #666666;
    
    /* --- SOMBRAS Y BORDES --- */
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --radius: 12px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-app);
    color: var(--text-main);
    margin: 0;
    padding-bottom: 80px; /* Espacio extra abajo para móvil */
}

/* --- LAYOUT GENERAL --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

/* --- HEADER / BARRA SUPERIOR --- */
.top-bar {
    background: var(--primary);
    color: var(--white);
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.brand-area {
    display: flex;
    flex-direction: column;
}

.app-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.hotel-subtitle {
    font-size: 0.8rem;
    opacity: 0.8;
}

.user-area {
    text-align: right;
    font-size: 0.85rem;
}

.role-badge {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
}

/* --- NAVEGACIÓN (Scroll horizontal en móvil) --- */
.nav-scroll {
    background: var(--white);
    padding: 10px 15px;
    display: flex;
    gap: 10px;
    overflow-x: auto; /* Permite deslizar con el dedo */
    white-space: nowrap;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-btn {
    display: inline-block;
    padding: 8px 16px;
    background: #eef2f6;
    color: var(--primary);
    text-decoration: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.2s;
}

.nav-btn.active {
    background: var(--primary);
    color: var(--white);
}

.nav-btn-danger {
    background: #ffebee;
    color: #c62828;
}

/* --- TARJETAS DE HABITACIÓN (GRID) --- */
.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.room-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    border-left: 8px solid #ccc;
    cursor: pointer;
    transition: transform 0.1s;
}

.room-card:active {
    transform: scale(0.98); /* Efecto de pulsar botón */
}

/* Bordes Semáforo */
.border-limpia { border-left-color: var(--limpia); }
.border-sucia { border-left-color: var(--sucia); }
.border-cliente { border-left-color: var(--cliente); }
.border-salida { border-left-color: var(--salida); }
.border-bloqueada { border-left-color: var(--bloqueada); }
.border-supervisada { border-left-color: var(--repaso); }

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

.room-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #333;
}

.status-pill {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

/* Fondos Semáforo */
.bg-limpia { background: var(--limpia); }
.bg-sucia { background: var(--sucia); }
.bg-cliente { background: var(--cliente); }
.bg-salida { background: var(--salida); }
.bg-bloqueada { background: var(--bloqueada); }
.bg-supervisada { background: var(--repaso); color: #333; }

.card-body {
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 2px 0;
}

/* Alertas visuales dentro de la tarjeta */
.alert-box {
    margin-top: 5px;
    padding: 6px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}
.alert-sabanas { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.alert-obs { background: #ffebee; color: #c62828; font-size: 0.8rem; }

/* --- BLOQUE DE PRÓXIMA ENTRADA (Dentro de la tarjeta) --- */
.next-arrival-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 2px dashed #ccc; /* Línea discontinua para separar */
    background-color: #f9f9f9;
    margin-left: -15px; /* Truco para que ocupe todo el ancho */
    margin-right: -15px;
    margin-bottom: -12px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
}

.next-arrival-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.next-data {
    font-size: 0.85rem;
    color: #555;
    display: flex;
    justify-content: space-between;
}

/* --- FORMULARIOS --- */
.form-card {
    background: var(--white);
    padding: 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 600px;
    margin: 0 auto; /* Centrado */
}

input, select, textarea {
    width: 100%; /* Full width en móvil */
    padding: 12px;
    margin: 8px 0 20px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem; /* Texto grande para móvil */
}

button {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

/* --- PARTES DE TRABAJO --- */

/* Selector visual grande */
.type-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.type-option {
    flex: 1;
    padding: 15px;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
    background: white;
}

/* Colores activos */
.type-option.pisos-active {
    background-color: #f57c00; /* Naranja */
    color: white;
    border-color: #e65100;
}

.type-option.sstt-active {
    background-color: #0277bd; /* Azul */
    color: white;
    border-color: #01579b;
}

/* Historial dentro de la tarjeta */
.history-timeline {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
    font-size: 0.8rem;
    display: none; /* Oculto por defecto */
}

.history-item {
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

.history-show-btn {
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
    margin-top: 5px;
    display: inline-block;
}

/* --- BADGES DE ESTADO EN PARTES --- */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

/* Etiqueta de petición de cliente */
.client-badge {
    display: inline-flex;
    align-items: center;
    background-color: #e0f2f1; /* Verde azulado muy claro */
    color: #00695c;            /* Verde azulado oscuro */
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid #80cbc4;
}

.client-badge i {
    margin-right: 4px;
    font-style: normal;
    font-size: 1rem;
}

/* Colores específicos */
.status-badge.pendiente {
    background-color: #fee2e2; /* Rojo claro fondo */
    color: #991b1b;            /* Rojo oscuro texto */
    border: 1px solid #f87171;
}

.status-badge.escalado {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #f87171;
    position: relative; /* Para añadir un icono si queremos */
}

.status-badge.en_proceso {
    background-color: #fef3c7; /* Amarillo claro fondo */
    color: #92400e;            /* Naranja oscuro texto */
    border: 1px solid #fbbf24;
}

.status-badge.completado {
    background-color: #dcfce7; /* Verde claro fondo */
    color: #166534;            /* Verde oscuro texto */
    border: 1px solid #4ade80;
}

/* --- TABLAS (Para usuarios y listas largas) --- */
.table-responsive {
    overflow-x: auto;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

th {
    background: #f8f9fa;
    color: var(--primary);
    font-weight: 700;
}

/* --- SEPARADORES DE PLANTA --- */
.floor-header {
    background-color: var(--bg-app); /* El mismo color del fondo para que no sea transparente */
    color: var(--primary);
    padding: 15px 10px 5px 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    
    /* MAGIA STICKY: Se queda pegado arriba al hacer scroll */
    position: sticky;
    top: 60px; /* Ajustado para que no tape la barra de menú superior */
    z-index: 90; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ajuste para que la primera planta no tenga tanto margen arriba */
.floor-header:first-of-type {
    margin-top: 0;
}

/* --- ESTILOS DE LOGOS --- */

/* En el Header (Barra superior) */
.header-logo {
    height: 40px; /* Tamaño discreto para la barra */
    width: auto;
    object-fit: contain;
    margin-right: 10px;
    border-radius: 4px;
    background: white; /* Por si el logo tiene fondo transparente, que se vea bien sobre el azul */
    padding: 2px;
}

/* En el Login (Más grandes) */
.login-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.login-logo-img {
    height: 80px; /* Tamaño grande para el login */
    width: auto;
    object-fit: contain;
}

/* --- MENSAJES FLASH --- */
.flash-messages {
    padding: 10px 15px;
}
.flash {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 500;
}
/* --- NOTIFICACIONES FLOTANTES (ESTILO WHATSAPP/FACEBOOK) --- */
.noti-dropdown {
    display: none; /* Oculto por defecto */
    position: fixed; /* Flota sobre todo, ignorando el scroll */
    top: 60px; /* Justo debajo de la barra azul */
    right: 10px; /* Pegado a la derecha */
    width: 320px; /* Ancho para PC */
    max-width: 95vw; /* En móvil ocupa el 95% del ancho */
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); /* Sombra potente para que destaque */
    z-index: 9999; /* Siempre encima de todo */
    overflow: hidden;
}

.noti-header {
    background: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.noti-body {
    max-height: 60vh; /* Si hay muchas, hace scroll dentro de la cajita */
    overflow-y: auto;
}

.noti-item {
    display: block;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

.noti-item:hover {
    background: #f1f8ff; /* Azulito al pasar el ratón */
}

.noti-item:last-child {
    border-bottom: none;
}

.noti-date {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 4px;
    display: block;
}

.noti-close-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
}

/* LATE CHECK OUT (Morado) */
.bg-late_check_out {
    background-color: #6f42c1 !important; /* Morado */
    color: white;
}

/* Borde de la tarjeta */
.border-late_check_out {
    border-left: 5px solid #6f42c1 !important;
}

.flash-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.flash-error { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }