@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* --- Tokens y Configuración Base --- */
:root {
    --ui-font-size: 14px;
    --bg-base: #0B0F19;
    --bg-surface: rgba(17, 24, 39, 0.65);
    --bg-surface-hover: rgba(31, 41, 55, 0.8);
    
    
    
    --color-secondary: #0F172A;
    
    /* Estados de Hospitalidad */
    --color-pending: #EF4444;      /* Rojo Carmesí (Requiere Atención) */
    --color-assigned: #3B82F6;     /* Azul Zafiro (Asignado) */
    --color-progress: #F59E0B;     /* Ámbar Cálido (En Progreso) */
    --color-completed: #10B981;    /* Verde Esmeralda (Completado) */
    --color-out-service: #6B7280;  /* Gris Pizarra (Fuera de Servicio) */
    
    --font-heading: 'Outfit', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

[x-cloak] {
    display: none !important;
}

html {
    font-size: var(--ui-font-size);
    transition: font-size 120ms ease;
}

body {
    background-color: var(--bg-base);
    color: #F3F4F6;
    font-family: var(--font-body);
    overflow-x: hidden;
}

html[data-theme="light"] body {
    background-color: #f8fafc;
    color: #0f172a;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* --- Efecto Glassmorphism Premium --- */
.glass-panel {
    background: var(--bg-surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
    border-color: rgba(var(--tenant-primary-rgb), 0.2);
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
}

.glass-card:hover {
    background: rgba(var(--tenant-primary-rgb), 0.05);
    transform: translateY(-2px);
    border-color: rgba(var(--tenant-primary-rgb), 0.2);
}

.gf-table-scroll {
    max-height: calc(100vh - 24rem);
    overflow: auto;
}

.gf-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #1f2430;
    color: #e5e7eb;
}

.gf-table-scroll thead tr {
    background: #1f2430;
}

/* --- Botones y Elementos Interactivos --- */
.btn-tenant {
    background: linear-gradient(135deg, var(--tenant-primary) 0%, var(--tenant-secondary) 100%);
    color: #0F172A;
    font-weight: 600;
    letter-spacing: 0.025em;
    border-radius: 8px;
    box-shadow: 0 4px 14px 0 rgba(var(--tenant-primary-rgb), 0.3);
    transition: all 0.2s ease-in-out;
}

.btn-tenant:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(var(--tenant-primary-rgb), 0.45);
    filter: brightness(1.1);
}

.btn-tenant:active {
    transform: translateY(1px);
}

/* --- Indicadores de Estado de Habitaciones (Rooms Matrix) --- */
.room-badge {
    position: relative;
    overflow: hidden;
}

.room-vacant-clean {
    border-left: 4px solid var(--color-completed);
    background: rgba(16, 185, 129, 0.08);
}
.room-vacant-dirty {
    border-left: 4px solid var(--color-progress);
    background: rgba(245, 158, 11, 0.08);
}
.room-occupied-clean {
    border-left: 4px solid #8B5CF6; /* Violeta Amatista */
    background: rgba(139, 92, 246, 0.08);
}
.room-occupied-dirty {
    border-left: 4px solid var(--color-pending);
    background: rgba(239, 68, 68, 0.08);
}
.room-out-of-service {
    border-left: 4px solid var(--color-out-service);
    background: rgba(107, 114, 128, 0.08);
}

/* --- Estilos Semánticos para Solicitudes / Tickets en Modo Oscuro (Predeterminado) --- */
.glass-card.req-pending {
    border-left: 4px solid var(--color-pending);
    background: rgba(239, 68, 68, 0.06);
}
.glass-card.req-assigned {
    border-left: 4px solid var(--color-assigned);
    background: rgba(59, 130, 246, 0.06);
}
.glass-card.req-in-progress {
    border-left: 4px solid var(--color-progress);
    background: rgba(245, 158, 11, 0.06);
}
.glass-card.req-completed {
    border-left: 4px solid var(--color-completed);
    background: rgba(16, 185, 129, 0.06);
}
.glass-card.req-cancelled {
    border-left: 4px solid var(--color-out-service);
    background: rgba(107, 114, 128, 0.06);
}

/* --- Lógica Unificada para Bordes Superiores en el CRUD de Habitaciones (Modo Oscuro) --- */
.border-t-4.room-vacant-clean {
    border-top-color: var(--color-completed) !important;
    border-left: none !important;
    background: rgba(16, 185, 129, 0.04);
}
.border-t-4.room-vacant-dirty {
    border-top-color: var(--color-progress) !important;
    border-left: none !important;
    background: rgba(245, 158, 11, 0.04);
}
.border-t-4.room-occupied-clean {
    border-top-color: #8B5CF6 !important;
    border-left: none !important;
    background: rgba(139, 92, 246, 0.04);
}
.border-t-4.room-occupied-dirty {
    border-top-color: var(--color-pending) !important;
    border-left: none !important;
    background: rgba(239, 68, 68, 0.04);
}
.border-t-4.room-out-of-service {
    border-top-color: var(--color-out-service) !important;
    border-left: none !important;
    background: rgba(107, 114, 128, 0.04);
}

/* --- Barra de Scroll Personalizada --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tenant-primary);
}

/* --- Burbujas de Chat Premium --- */
.chat-bubble-guest {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px 16px 16px 4px;
    align-self: flex-start;
}

.chat-bubble-staff {
    background: linear-gradient(135deg, rgba(var(--tenant-primary-rgb), 0.25) 0%, rgba(var(--tenant-primary-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--tenant-primary-rgb), 0.2);
    border-radius: 16px 16px 4px 16px;
    align-self: flex-end;
    color: #F9FAF5;
}

.chat-bubble-bot {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 16px 16px 16px 4px;
    align-self: flex-start;
    position: relative;
}

/* --- Animaciones de Pulsación y Carga --- */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 4px rgba(239, 68, 68, 0.4), inset 0 0 2px rgba(239, 68, 68, 0.2);
    }
    50% {
        box-shadow: 0 0 16px rgba(239, 68, 68, 0.75), inset 0 0 8px rgba(239, 68, 68, 0.3);
    }
}

.pulse-urgent {
    animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes slide-in-bottom {
    from {
        transform: translateY(12px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-in {
    animation: slide-in-bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.text-gold {
    color: var(--tenant-primary);
}
.border-gold {
    border-color: var(--tenant-primary);
}

/* --- Modo Claro Premium (Champagne & Slate) --- */
body.light-mode {
    --bg-base: #F5F7FB;
    --bg-surface: rgba(255, 255, 255, 0.92);
    --bg-surface-hover: rgba(248, 250, 252, 0.98);
    
    --glass-border: rgba(var(--tenant-primary-rgb), 0.18);
    --glass-shadow: 0 10px 40px -10px rgba(var(--tenant-primary-rgb), 0.15);
    
    background-color: var(--bg-base);
    color: #233044;
}

/* Forzar sobreescrituras en elementos Tailwind hardcodeados */
body.light-mode .text-white,
body.light-mode span.text-white {
    color: #0F172A !important;
}

body.light-mode .text-gray-100 {
    color: #0F172A !important;
}

body.light-mode .text-gray-300 {
    color: #334155 !important;
}

body.light-mode .text-gray-400,
body.light-mode .text-gray-500 {
    color: #64748B !important;
}

/* Sidebar y Header */
body.light-mode aside {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tenant-primary-lightmode) 16%, white 84%) 0%,
        color-mix(in srgb, var(--tenant-primary-lightmode) 10%, white 90%) 100%) !important;
    border-right: 1px solid rgba(var(--tenant-primary-rgb), 0.28) !important;
}

body.light-mode header {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(var(--tenant-primary-rgb), 0.18) !important;
}

body.light-mode aside nav button:not(.bg-gold\/15) {
    color: rgb(var(--tenant-secondary-rgb)) !important;
}

body.light-mode aside nav button:not(.bg-gold\/15):hover {
    color: rgb(var(--tenant-secondary-rgb)) !important;
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 18%, white 82%) !important;
}

body.light-mode aside .bg-black\/20 {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 12%, white 88%) !important;
}

body.light-mode aside nav button.bg-tenantPrimary\/15,
body.light-mode aside nav button[aria-current="page"] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--tenant-primary-lightmode) 36%, white 64%) 0%,
        color-mix(in srgb, var(--tenant-primary-lightmode) 22%, white 78%) 100%) !important;
    color: rgb(var(--tenant-primary-rgb)) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.34) !important;
    box-shadow: 0 8px 22px -14px rgba(var(--tenant-primary-rgb), 0.45) !important;
}

body.light-mode aside nav button span,
body.light-mode aside nav button svg {
    color: inherit !important;
    stroke: currentColor !important;
}

body.light-mode aside .truncate,
body.light-mode aside .text-xs,
body.light-mode aside .text-[10px] {
    color: rgb(var(--tenant-secondary-rgb)) !important;
}

body.light-mode aside .text-white,
body.light-mode aside .text-gray-100,
body.light-mode aside .text-gray-300,
body.light-mode aside .text-tenantSecondary {
    color: rgb(var(--tenant-secondary-rgb)) !important;
}

/* Paneles y Cards Glassmorphic */
body.light-mode .glass-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.18) !important;
    box-shadow: 0 10px 30px -10px rgba(var(--tenant-primary-rgb), 0.12) !important;
}

body.light-mode .glass-card {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.12) !important;
    color: #0F172A !important;
}

body.light-mode .glass-card:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.25) !important;
}

/* Formularios e Inputs */
body.light-mode select,
body.light-mode input,
body.light-mode textarea {
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.22) !important;
}

body.light-mode select::placeholder,
body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
    color: #94A3B8 !important; /* Slate 400 */
}

body.light-mode select option {
    background-color: #FFFFFF !important;
    color: #1E293B !important;
}

.form-select option {
    background-color: #151b26;
    color: #ffffff;
}

/* Modales */
body.light-mode .fixed.bg-black\/75 {
    background-color: rgba(15, 23, 42, 0.4) !important; /* Capa semitransparente suave */
}

/* Tablas */
body.light-mode table thead tr {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 10%, white 90%) !important;
    color: #334155 !important;
}

body.light-mode table tbody tr:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.04) !important;
}

/* Burbujas de Chat */
body.light-mode .chat-bubble-guest {
    background: rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #0F172A !important;
}

body.light-mode .chat-bubble-staff {
    background: linear-gradient(135deg, rgba(var(--tenant-primary-rgb), 0.3) 0%, rgba(var(--tenant-primary-rgb), 0.1) 100%) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.3) !important;
    color: #3B2A18 !important;
}

body.light-mode .chat-bubble-bot {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: #064E3B !important;
}

/* Scrollbar */
body.light-mode ::-webkit-scrollbar-thumb {
    background: rgba(var(--tenant-primary-rgb), 0.35) !important;
}
body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--tenant-primary) !important;
}

/* Correcciones de colores específicos en modales y grids */
body.light-mode .bg-black\/30 {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

body.light-mode .bg-black\/20,
body.light-mode .bg-black\/15 {
    background-color: rgba(var(--tenant-primary-rgb), 0.04) !important;
}

body.light-mode .border-white\/5,
body.light-mode .border-white\/10 {
    border-color: rgba(var(--tenant-primary-rgb), 0.15) !important;
}

body.light-mode .bg-white\/5 {
    background-color: rgba(var(--tenant-primary-rgb), 0.05) !important;
}

body.light-mode .bg-white\/10 {
    background-color: rgba(var(--tenant-primary-rgb), 0.10) !important;
}

body.light-mode .hover\:bg-white\/5:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.07) !important;
}

body.light-mode .hover\:bg-white\/10:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.13) !important;
}

body.light-mode .text-tenantPrimary {
    color: rgb(var(--tenant-primary-rgb)) !important;
}

body.light-mode .text-tenantSecondary {
    color: color-mix(in srgb, rgb(var(--tenant-secondary-rgb)) 82%, #0F172A 18%) !important;
}

body.light-mode .bg-tenantPrimary\/10 {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 10%, white 90%) !important;
}

body.light-mode .bg-tenantPrimary\/15 {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 15%, white 85%) !important;
}

body.light-mode .border-tenantPrimary\/20 {
    border-color: color-mix(in srgb, var(--tenant-primary-lightmode) 20%, white 80%) !important;
}

/* --- Correcciones de Contraste y Estados de Hospitalidad en Modo Claro --- */

/* 1. Matriz de Habitaciones (Fuerza color de fondo y borde izquierdo específico de estado - Pastel Sólido) */
body.light-mode .glass-card.room-vacant-clean,
body.light-mode .room-vacant-clean {
    border-left: 4px solid #059669 !important;
    background: #E6F4EA !important;
}
body.light-mode .glass-card.room-vacant-clean .text-emerald-400,
body.light-mode .room-vacant-clean .text-emerald-400 {
    color: #047857 !important;
}

body.light-mode .glass-card.room-vacant-dirty,
body.light-mode .room-vacant-dirty {
    border-left: 4px solid #D97706 !important;
    background: #FEF3C7 !important;
}
body.light-mode .glass-card.room-vacant-dirty .text-amber-400,
body.light-mode .room-vacant-dirty .text-amber-400 {
    color: #B45309 !important;
}

body.light-mode .glass-card.room-occupied-clean,
body.light-mode .room-occupied-clean {
    border-left: 4px solid #7C3AED !important;
    background: #F3E8FF !important;
}
body.light-mode .glass-card.room-occupied-clean .text-purple-400,
body.light-mode .room-occupied-clean .text-purple-400 {
    color: #6D28D9 !important;
}

body.light-mode .glass-card.room-occupied-dirty,
body.light-mode .room-occupied-dirty {
    border-left: 4px solid #DC2626 !important;
    background: #FEE2E2 !important;
}
body.light-mode .glass-card.room-occupied-dirty .text-red-400,
body.light-mode .room-occupied-dirty .text-red-400 {
    color: #B91C1C !important;
}

body.light-mode .glass-card.room-out-of-service,
body.light-mode .room-out-of-service {
    border-left: 4px solid #475569 !important;
    background: #F1F5F9 !important;
}
body.light-mode .glass-card.room-out-of-service .text-gray-400,
body.light-mode .room-out-of-service .text-gray-400 {
    color: #475569 !important;
}

/* 2. Feed de Solicitudes y Tickets (Colores Pastel Sólidos de Alto Contraste) */
body.light-mode .glass-card.req-pending {
    border-left: 4px solid #DC2626 !important;
    background: #FEE2E2 !important;
    color: #991B1B !important;
}
body.light-mode .glass-card.req-assigned {
    border-left: 4px solid #2563EB !important;
    background: #DBEAFE !important;
    color: #1E40AF !important;
}
body.light-mode .glass-card.req-in-progress {
    border-left: 4px solid #D97706 !important;
    background: #FEF3C7 !important;
    color: #92400E !important;
}
body.light-mode .glass-card.req-completed {
    border-left: 4px solid #059669 !important;
    background: #E6F4EA !important;
    color: #065F46 !important;
}
body.light-mode .glass-card.req-cancelled {
    border-left: 4px solid #475569 !important;
    background: #F1F5F9 !important;
    color: #334155 !important;
}

/* 3. Lógica Unificada para Bordes Superiores en el CRUD de Habitaciones (Modo Claro) */
body.light-mode .glass-panel.room-vacant-clean {
    border-top-color: #059669 !important;
    border-left: none !important;
    background: #FAF8F5 !important;
}
body.light-mode .glass-panel.room-vacant-dirty {
    border-top-color: #D97706 !important;
    border-left: none !important;
    background: #FAF8F5 !important;
}
body.light-mode .glass-panel.room-occupied-clean {
    border-top-color: #7C3AED !important;
    border-left: none !important;
    background: #FAF8F5 !important;
}
body.light-mode .glass-panel.room-occupied-dirty {
    border-top-color: #DC2626 !important;
    border-left: none !important;
    background: #FAF8F5 !important;
}
body.light-mode .glass-panel.room-out-of-service {
    border-top-color: #475569 !important;
    border-left: none !important;
    background: #FAF8F5 !important;
}

/* Tarjetas de habitaciones: mismo formato exacto que en modo oscuro */
body.light-mode .room-card-visual {
    background: #FFFFFF !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.14) !important;
    box-shadow: 0 8px 24px -18px rgba(var(--tenant-primary-rgb), 0.22) !important;
}

body.light-mode .room-card-visual.room-vacant-clean {
    box-shadow: inset 0 4px 0 0 #059669, 0 8px 24px -18px rgba(var(--tenant-primary-rgb), 0.22) !important;
}
body.light-mode .room-card-visual.room-vacant-dirty {
    box-shadow: inset 0 4px 0 0 #D97706, 0 8px 24px -18px rgba(var(--tenant-primary-rgb), 0.22) !important;
}
body.light-mode .room-card-visual.room-occupied-clean {
    box-shadow: inset 0 4px 0 0 #7C3AED, 0 8px 24px -18px rgba(var(--tenant-primary-rgb), 0.22) !important;
}
body.light-mode .room-card-visual.room-occupied-dirty {
    box-shadow: inset 0 4px 0 0 #DC2626, 0 8px 24px -18px rgba(var(--tenant-primary-rgb), 0.22) !important;
}
body.light-mode .room-card-visual.room-out-of-service {
    box-shadow: inset 0 4px 0 0 #475569, 0 8px 24px -18px rgba(var(--tenant-primary-rgb), 0.22) !important;
}

body.light-mode .room-card-visual .text-white {
    color: #0F172A !important;
}

body.light-mode .room-card-visual .text-tenantSecondary {
    color: rgb(var(--tenant-secondary-rgb)) !important;
}

body.light-mode .room-card-visual .text-tenantPrimary {
    color: rgb(var(--tenant-primary-rgb)) !important;
}

body.light-mode .room-card-visual .bg-white\/5 {
    background-color: rgba(var(--tenant-primary-rgb), 0.04) !important;
}

body.light-mode .room-card-visual .bg-white\/10 {
    background-color: rgba(var(--tenant-primary-rgb), 0.08) !important;
}

body.light-mode .room-card-visual .border-white\/5 {
    border-color: rgba(var(--tenant-primary-rgb), 0.10) !important;
}

body.light-mode .room-card-visual .border-white\/10 {
    border-color: rgba(var(--tenant-primary-rgb), 0.14) !important;
}

body.light-mode .room-card-visual .bg-emerald-950\/40 {
    background-color: rgba(16, 185, 129, 0.14) !important;
}
body.light-mode .room-card-visual .bg-amber-950\/40 {
    background-color: rgba(245, 158, 11, 0.14) !important;
}
body.light-mode .room-card-visual .bg-purple-950\/40 {
    background-color: rgba(124, 58, 237, 0.14) !important;
}
body.light-mode .room-card-visual .bg-red-950\/40 {
    background-color: rgba(239, 68, 68, 0.14) !important;
}

/* 4. Badges y Textos de Alerta/Estado con alto contraste */

body.light-mode .bg-emerald-950\/40 {
    background-color: rgba(16, 185, 129, 0.15) !important;
}
body.light-mode .text-emerald-400 {
    color: #059669 !important;
}
body.light-mode .border-emerald-500\/20 {
    border-color: rgba(16, 185, 129, 0.25) !important;
}

body.light-mode .bg-amber-950\/40 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}
body.light-mode .text-amber-400 {
    color: #D97706 !important;
}
body.light-mode .border-amber-500\/20 {
    border-color: rgba(245, 158, 11, 0.25) !important;
}

body.light-mode .bg-blue-950\/40 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}
body.light-mode .text-blue-400 {
    color: #2563EB !important;
}
body.light-mode .border-blue-500\/20 {
    border-color: rgba(59, 130, 246, 0.25) !important;
}

body.light-mode .bg-purple-950\/40 {
    background-color: rgba(139, 92, 246, 0.15) !important;
}
body.light-mode .text-purple-400 {
    color: #7C3AED !important;
}
body.light-mode .border-purple-500\/20 {
    border-color: rgba(139, 92, 246, 0.25) !important;
}

body.light-mode .bg-red-950\/40 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}
body.light-mode .text-red-400 {
    color: #DC2626 !important;
}
body.light-mode .border-red-500\/20 {
    border-color: rgba(239, 68, 68, 0.25) !important;
}

body.light-mode .bg-gray-950 {
    background-color: #E2E8F0 !important;
    color: #475569 !important;
}

body.light-mode .text-violet-400 {
    color: #7C3AED !important;
}

/* 5. Mapeos de Opacidades, Tablas y Colores Adicionales */


body.light-mode option.bg-slateprof {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}

/* Corregir bordes de tabla e interactividad en Modo Claro */






body.light-mode .text-tenantPrimary { color: rgb(var(--tenant-primary-rgb)) !important; }
body.light-mode .text-tenantSecondary { color: color-mix(in srgb, rgb(var(--tenant-secondary-rgb)) 82%, #0F172A 18%) !important; }

body.light-mode .brand-guest {
    color: #1F2937 !important;
}

/* Igualar la altura de la franja GuestFlow con la del header */
.brand-bar-sync {
    min-height: 80px;
}

@media (min-width: 1024px) {
    .brand-bar-sync {
        height: 80px;
    }
}


/* --- Estilos Globales de Componentes (reemplazan utilitarios locales de Tailwind) --- */
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #ffffff;
    transition: all 0.2s ease-in-out;
}
.form-select option,
.form-select optgroup {
    background-color: #151b26;
    color: #ffffff;
}

.gf-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
}

.gf-modal-shell {
    width: 100%;
    max-width: 72rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
    background: #111827;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
}

.gf-modal-shell--sm { max-width: 42rem; }
.gf-modal-shell--md { max-width: 56rem; }

.gf-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}

.gf-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
}

.gf-modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
}

.gf-surface-card {
    background: rgba(17, 24, 39, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.gf-surface-card--soft {
    background: rgba(255, 255, 255, 0.03);
}

.gf-table-shell {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(17, 24, 39, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.gf-table-shell__scroll {
    overflow: auto;
    max-height: 70vh;
    scrollbar-width: thin;
}

.gf-table-shell thead {
    background: rgba(var(--tenant-primary-rgb), 0.08);
}

.gf-table-shell thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(31, 41, 55, 0.96);
    color: #e5e7eb;
}

.gf-table-shell tbody tr {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.gf-table-shell tbody tr:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.08);
}

body.light-mode .gf-modal-shell {
    background: #FFFFFF !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.16) !important;
}

body.light-mode .gf-modal-shell[style],
body.light-mode .gf-modal-shell.bg-\[\#111827\],
body.light-mode .email-import-shell,
body.light-mode .email-import-preview-shell,
body.light-mode .external-connection-shell {
    background: #FFFFFF !important;
    color: #0F172A !important;
}

body.light-mode .gf-modal-header {
    background: color-mix(in srgb, var(--tenant-primary-lightmode) 8%, white 92%) !important;
    border-bottom-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
}

body.light-mode .gf-modal-body {
    background: #FFFFFF !important;
    color: #0F172A !important;
}

body.light-mode .gf-modal-footer {
    background: color-mix(in srgb, var(--tenant-primary-lightmode) 5%, white 95%) !important;
    border-top-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
}

body.light-mode .gf-surface-card,
body.light-mode .gf-table-shell {
    background: #FFFFFF !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.14) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08) !important;
}

body.light-mode .gf-table-shell thead {
    background: color-mix(in srgb, var(--tenant-primary-lightmode) 8%, white 92%) !important;
}

body.light-mode .gf-table-shell thead th {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.12) !important;
    box-shadow: inset 0 -1px 0 rgba(var(--tenant-primary-rgb), 0.12);
}

body.light-mode .gf-table-shell tbody tr:hover {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 6%, white 94%) !important;
}

body.light-mode .gf-modal-shell .text-white {
    color: #0F172A !important;
}

body.light-mode .gf-modal-shell .text-gray-300,
body.light-mode .gf-modal-shell .text-tenantSecondary {
    color: color-mix(in srgb, rgb(var(--tenant-secondary-rgb)) 82%, #0F172A 18%) !important;
}

body.light-mode .gf-modal-shell .bg-black\/30,
body.light-mode .gf-modal-shell .bg-black\/20,
body.light-mode .gf-modal-shell .bg-black\/15 {
    background-color: rgba(var(--tenant-primary-rgb), 0.04) !important;
}

body.light-mode .gf-modal-shell .border-white\/10 {
    border-color: rgba(var(--tenant-primary-rgb), 0.14) !important;
}

body.light-mode .gf-modal-shell .text-amber-300,
body.light-mode .gf-modal-shell .text-amber-200,
body.light-mode .gf-modal-shell .text-yellow-300,
body.light-mode .gf-modal-shell .text-red-300,
body.light-mode .gf-modal-shell .text-emerald-300,
body.light-mode .gf-modal-shell .text-blue-200,
body.light-mode .gf-modal-shell .text-purple-300 {
    color: #0F172A !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--tenant-secondary);
    box-shadow: 0 0 0 1px var(--tenant-secondary);
}

.badge-primary {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: rgba(var(--tenant-primary-rgb), 0.2);
    color: var(--tenant-primary);
    border: 1px solid rgba(var(--tenant-primary-rgb), 0.3);
}

.badge-secondary {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background-color: rgba(var(--tenant-secondary-rgb), 0.2);
    color: var(--tenant-secondary);
    border: 1px solid rgba(var(--tenant-secondary-rgb), 0.3);
}

.badge-success { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; background-color: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); }
.badge-warning { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; background-color: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); }
.badge-danger { padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; background-color: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25); }

/* Modo Claro overrides para form-input */
body.light-mode .form-input, body.light-mode .form-select, body.light-mode .form-textarea {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.25) !important;
}
body.light-mode .form-input:focus, body.light-mode .form-select:focus, body.light-mode .form-textarea:focus {
    border-color: var(--tenant-primary) !important;
    box-shadow: 0 0 0 1px var(--tenant-primary) !important;
}

/* --- Interactive row hover using primary color mix --- */
.table-row-interactive {
    transition: all 0.2s ease;
}
.table-row-interactive:hover {
    background-color: rgba(var(--tenant-primary-rgb), 0.15) !important;
    box-shadow: inset 3px 0 0 0 var(--tenant-primary);
}
body.light-mode .table-row-interactive:hover {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 6%, white 94%) !important;
}

body.light-mode .guest-action-btn {
    border: 1px solid rgba(var(--tenant-primary-rgb), 0.18);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

body.light-mode .guest-action-btn--neutral {
    background: #FFFFFF !important;
    color: #0F172A !important;
}

body.light-mode .guest-action-btn--neutral:hover {
    background: color-mix(in srgb, var(--tenant-primary-lightmode) 8%, white 92%) !important;
    color: #0F172A !important;
}

body.light-mode .guest-action-btn--primary {
    background: color-mix(in srgb, var(--tenant-primary-lightmode) 18%, white 82%) !important;
    color: #0F172A !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.30) !important;
}

body.light-mode .guest-action-btn--primary:hover {
    background: color-mix(in srgb, var(--tenant-primary-lightmode) 26%, white 74%) !important;
    color: #0F172A !important;
}

body.light-mode .guest-action-btn--danger {
    background: #FFF1F2 !important;
    color: #991B1B !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

body.light-mode .guest-action-btn--danger:hover {
    background: #FEE2E2 !important;
    color: #7F1D1D !important;
}

body.light-mode .guest-action-btn--success {
    background: #ECFDF5 !important;
    color: #065F46 !important;
    border-color: rgba(16, 185, 129, 0.22) !important;
}

body.light-mode .guest-action-btn--success:hover {
    background: #D1FAE5 !important;
    color: #064E3B !important;
}

/* --- Anti-FOUC Tailwind Static Fallbacks --- */
.text-tenantPrimary { color: rgb(var(--tenant-primary-rgb)) !important; }
.bg-tenantPrimary { background-color: rgb(var(--tenant-primary-rgb)) !important; }
.border-tenantPrimary { border-color: rgb(var(--tenant-primary-rgb)) !important; }
.ring-tenantPrimary { --tw-ring-color: rgb(var(--tenant-primary-rgb)) !important; }

.text-tenantSecondary { color: rgb(var(--tenant-secondary-rgb)) !important; }
.bg-tenantSecondary { background-color: rgb(var(--tenant-secondary-rgb)) !important; }
.border-tenantSecondary { border-color: rgb(var(--tenant-secondary-rgb)) !important; }
.ring-tenantSecondary { --tw-ring-color: rgb(var(--tenant-secondary-rgb)) !important; }

.bg-tenantPrimary\/10 { background-color: rgba(var(--tenant-primary-rgb), 0.1) !important; }
.bg-tenantPrimary\/20 { background-color: rgba(var(--tenant-primary-rgb), 0.2) !important; }
.border-tenantPrimary\/30 { border-color: rgba(var(--tenant-primary-rgb), 0.3) !important; }
.border-tenantPrimary\/50 { border-color: rgba(var(--tenant-primary-rgb), 0.5) !important; }

.border-tenantSecondary\/20 { border-color: rgba(var(--tenant-secondary-rgb), 0.2) !important; }
.border-tenantSecondary\/30 { border-color: rgba(var(--tenant-secondary-rgb), 0.3) !important; }

.loading-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.loading-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
    animation: loading-shimmer 1.35s infinite;
}

.loading-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    border: 2px solid rgba(var(--tenant-primary-rgb), 0.18);
    border-top-color: rgb(var(--tenant-primary-rgb));
    animation: loading-rotate 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes loading-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@keyframes loading-rotate {
    100% {
        transform: rotate(360deg);
    }
}

.autofill-neutral,
.autofill-neutral:-webkit-autofill,
.autofill-neutral:-webkit-autofill:hover,
.autofill-neutral:-webkit-autofill:focus,
.autofill-neutral:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    box-shadow: 0 0 0 1000px rgba(11, 15, 25, 0.96) inset !important;
    transition: background-color 9999s ease-out 0s;
}

.autofill-neutral::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

/* Splash screen theme-aware */
body.light-mode .splash-screen {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.96)) !important;
    background-color: #F8FAFC !important;
}

body.light-mode .splash-screen .splash-title {
    color: #1F2937 !important;
}

body.light-mode .splash-screen .splash-subtitle {
    color: rgb(var(--tenant-secondary-rgb)) !important;
}

body.light-mode .splash-screen .splash-spinner {
    border-color: rgba(var(--tenant-primary-rgb), 0.14) !important;
    border-top-color: rgb(var(--tenant-primary-rgb)) !important;
}

body.light-mode .setup-header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom-color: rgba(var(--tenant-primary-rgb), 0.18) !important;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #0F172A !important;
}

body.light-mode .glass-panel h1,
body.light-mode .glass-panel h2,
body.light-mode .glass-panel h3,
body.light-mode .glass-panel h4,
body.light-mode .glass-card h1,
body.light-mode .glass-card h2,
body.light-mode .glass-card h3,
body.light-mode .glass-card h4,
body.light-mode .setup-menu-card h1,
body.light-mode .setup-menu-card h2,
body.light-mode .setup-menu-card h3,
body.light-mode .setup-menu-card h4 {
    color: #0F172A !important;
}

body.light-mode .glass-panel p,
body.light-mode .glass-card p,
body.light-mode .glass-panel span,
body.light-mode .glass-card span {
    color: inherit;
}

body.light-mode .setup-brand-bar {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--tenant-primary-lightmode) 16%, white 84%) 0%,
        color-mix(in srgb, var(--tenant-primary-lightmode) 10%, white 90%) 100%) !important;
    border-bottom-color: rgba(var(--tenant-primary-rgb), 0.18) !important;
}

body.light-mode .setup-menu-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
}

body.light-mode .setup-menu-card:hover {
    background: rgba(var(--tenant-primary-rgb), 0.05) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.28) !important;
}

body.light-mode .setup-module-panel {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
    box-shadow: 0 10px 30px -10px rgba(var(--tenant-primary-rgb), 0.12) !important;
}

body.light-mode .setup-whatsapp-panel {
    background: #F8FAFC !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.14) !important;
    box-shadow: 0 10px 30px -12px rgba(var(--tenant-primary-rgb), 0.10) !important;
}

body.light-mode .setup-whatsapp-subpanel {
    background: #FFFFFF !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.12) !important;
}

body.light-mode .setup-whatsapp-input {
    background: #FFFFFF !important;
    color: #1F2937 !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
}

body.light-mode .setup-whatsapp-input::placeholder {
    color: #94A3B8 !important;
}

body.light-mode .pms-highlight-card {
    background: #F8FAFC !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.14) !important;
    box-shadow: 0 8px 24px -16px rgba(var(--tenant-primary-rgb), 0.12) !important;
}

body.light-mode .pms-highlight-card .text-white {
    color: #1F2937 !important;
}

body.light-mode .pms-highlight-card .text-tenantSecondary {
    color: rgb(var(--tenant-secondary-rgb)) !important;
}

body.light-mode .pms-highlight-card .bg-purple-500\/15,
body.light-mode .pms-highlight-card .bg-blue-500\/15,
body.light-mode .pms-highlight-card .bg-emerald-500\/15 {
    background-color: rgba(var(--tenant-primary-rgb), 0.08) !important;
}

body.light-mode .pms-highlight-card .text-purple-300,
body.light-mode .pms-highlight-card .text-blue-300,
body.light-mode .pms-highlight-card .text-emerald-300 {
    color: rgb(var(--tenant-primary-rgb)) !important;
}

body.light-mode .email-import-modal {
    background: rgba(248, 250, 252, 0.92) !important;
}

body.light-mode .email-import-shell,
body.light-mode .email-import-preview-shell {
    background: #F8FAFC !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
}

body.light-mode .email-import-head {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(var(--tenant-primary-rgb), 0.12) !important;
}

body.light-mode .email-import-input {
    background: #FFFFFF !important;
    color: #1F2937 !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
}

body.light-mode .email-import-fields {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.14) !important;
}

body.light-mode .email-import-button {
    background: rgba(var(--tenant-primary-rgb), 0.05) !important;
    color: rgb(var(--tenant-secondary-rgb)) !important;
}

body.light-mode .email-import-button:hover {
    background: rgba(var(--tenant-primary-rgb), 0.10) !important;
    color: #1F2937 !important;
}

body.light-mode .external-connection-modal {
    background: rgba(248, 250, 252, 0.92) !important;
}

body.light-mode .external-connection-shell {
    background: #F8FAFC !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
}

body.light-mode .external-connection-body,
body.light-mode .external-connection-subpanel,
body.light-mode .external-connection-mapping,
body.light-mode .external-connection-result,
body.light-mode .external-connection-webhook {
    background-color: #FFFFFF !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.14) !important;
}

body.light-mode .external-connection-note {
    background: color-mix(in srgb, var(--tenant-primary-lightmode) 8%, white 92%) !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.12) !important;
}

body.light-mode .external-connection-note.text-emerald-100,
body.light-mode .external-connection-note .text-emerald-100,
body.light-mode .external-connection-note .text-sky-100,
body.light-mode .external-connection-note .text-amber-100 {
    color: #14532D !important;
}

body.light-mode .external-connection-note .text-emerald-100\/75 {
    color: #166534 !important;
}

body.light-mode .external-connection-note .text-xs,
body.light-mode .external-connection-note .text-[10px] {
    color: #14532D !important;
}

body.light-mode .external-connection-note {
    color: #14532D !important;
}

body.light-mode .external-connection-note a,
body.light-mode .external-connection-note .underline {
    color: #0F766E !important;
}

body.light-mode .external-connection-input {
    background: #FFFFFF !important;
    color: #1F2937 !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.16) !important;
}

body.light-mode .external-connection-input::placeholder {
    color: #94A3B8 !important;
}

body.light-mode .external-connection-button {
    background: rgba(var(--tenant-primary-rgb), 0.06) !important;
    color: #14532D !important;
}

body.light-mode .external-connection-button:hover {
    background: rgba(var(--tenant-primary-rgb), 0.12) !important;
    color: #0F172A !important;
}

body.light-mode .external-connection-result .text-blue-200,
body.light-mode .external-connection-result .text-emerald-300,
body.light-mode .external-connection-result .text-red-300 {
    color: #0F172A !important;
}

body.light-mode .external-connection-body .text-xs.font-bold,
body.light-mode .external-connection-body .text-[10px].opacity-80 {
    color: #0F172A !important;
}

body.light-mode .external-connection-body .bg-blue-500\/15 {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 18%, white 82%) !important;
}

body.light-mode .external-connection-body .bg-blue-500\/25 {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 22%, white 78%) !important;
}

body.light-mode .external-connection-plain .px-2.py-1,
body.light-mode .external-connection-plain .px-3.py-2,
body.light-mode .external-connection-body .px-2.py-1,
body.light-mode .external-connection-body .px-3.py-2 {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 12%, white 88%) !important;
    color: #14532D !important;
    border-color: rgba(var(--tenant-primary-rgb), 0.18) !important;
}

body.light-mode .external-connection-body .px-2.py-1:hover,
body.light-mode .external-connection-body .px-3.py-2:hover {
    background-color: color-mix(in srgb, var(--tenant-primary-lightmode) 18%, white 82%) !important;
    color: #0F172A !important;
}

body.light-mode .external-connection-hybrid-note {
    background: #FFF7ED !important;
    border-color: rgba(249, 115, 22, 0.24) !important;
}

body.light-mode .external-connection-hybrid-text {
    color: #9A3412 !important;
}