@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;900&display=swap'); /* ============================================================ * CALENDARIO — estilo Cloudbeds (fondo blanco, fuente Lato, grilla gris, hoy celeste) * Las barras conservan el color por canal (Airbnb rojo / Booking azul / directa celeste). * ============================================================ */ #drag-calendar-container, #drag-calendar-container * { font-family:'Lato','Segoe UI',system-ui,-apple-system,sans-serif !important; } #drag-calendar-container { background:#FFFFFF !important; border:1px solid #E4E7EB !important; } #drag-calendar-container .dc-scroll { background:#FFFFFF !important; border:1px solid #E4E7EB !important; } #drag-calendar-container .dc-day-header { background:#F6F8FA !important; color:#5A6B7B !important; border-right:1px solid #ECEFF2 !important; } #drag-calendar-container .dc-day-header.dc-today { background:#E1F0FB !important; } #drag-calendar-container .dc-day-header.dc-weekend { background:#EEF1F4 !important; } #drag-calendar-container .dc-day-num { color:#2B3A47 !important; } #drag-calendar-container .dc-day-name { color:#7A8896 !important; } #drag-calendar-container .dc-row { border-bottom:1px solid #ECEFF2 !important; background:#FFFFFF !important; } #drag-calendar-container .dc-row:hover { background:#F4FAFE !important; } #drag-calendar-container .dc-label-cell { background:#FFFFFF !important; color:#2B3A47 !important; border-right:1px solid #E4E7EB !important; font-weight:700 !important; } #drag-calendar-container .dc-row:hover .dc-label-cell { background:#F4FAFE !important; } #drag-calendar-container .dc-cell { border-right:1px solid #F0F2F4 !important; background:transparent !important; } #drag-calendar-container .dc-cell:hover { background:#E1F0FB !important; } #drag-calendar-container .dc-cell.dc-today { background:#EAF5FC !important; } #drag-calendar-container .dc-cell.dc-weekend { background:#FAFBFC !important; } #drag-calendar-container .dc-cell.dc-past { opacity:.55 !important; } #drag-calendar-container .dc-day-price { color:#8A97A3 !important; } #drag-calendar-container .dc-day-price:hover { background:rgba(0,53,128,.08) !important; color:#003580 !important; } #drag-calendar-container .dc-bar-text { color:#FFFFFF !important; text-shadow:0 1px 2px rgba(0,0,0,.35) !important; } #drag-calendar-container .dc-bar { box-shadow:0 1px 2px rgba(20,40,60,.18) !important; } /* ============================================================ * LIGHT THEME OVERLAY for Lila Channel Manager * Aplica modo claro sin romper estilos existentes. * Cargar SIEMPRE como último stylesheet en . * ============================================================ * * Paleta: * --bg-app: #F8FAFC (off-white, fondo principal) * --bg-card: #FFFFFF (cards y paneles) * --bg-input: #FFFFFF (inputs) * --bg-hover: #F1F5F9 (hover states) * --bg-subtle: #F8FAFC (zonas secundarias) * --text-primary: #1E293B (texto principal, casi negro) * --text-secondary:#64748B (texto secundario, gris) * --text-muted: #94A3B8 (placeholders, hints) * --border: #E2E8F0 (bordes default) * --border-strong: #CBD5E1 (bordes acentuados) * --accent-gold: #B8881F (dorado oscurecido para mejor contraste en bg claro) * --accent-green: #1A4D3E (verde Lila más oscuro) * --danger: #DC2626 * --warning: #F59E0B * --success: #10B981 */ /* ============================================================ * STEP 1 — OVERRIDE las CSS variables del tema oscuro original * Esto pega cientos de selectors de admin.html / bot-panel.html / * lemu-design-system.css que usan var(--text), var(--bg), etc. * ============================================================ */ :root, html, body { /* Tokens del light-theme.css */ --bg-app: #F8FAFC !important; --bg-card: #FFFFFF !important; --bg-input: #FFFFFF !important; --bg-hover: #F1F5F9 !important; --bg-subtle: #F8FAFC !important; --text-primary: #1E293B !important; --text-secondary: #64748B !important; --text-muted: #94A3B8 !important; --border: #E2E8F0 !important; --border-strong: #CBD5E1 !important; --accent-gold: #B8881F !important; --accent-green: #1A4D3E !important; /* === Override variables internas de admin.html (line 429-450) === */ --bg: #F8FAFC !important; --bg-2: #FFFFFF !important; --bg-3: #F8FAFC !important; --surface: #FFFFFF !important; --surface-hover: #F1F5F9 !important; --border-hover: rgba(184, 136, 31, 0.4) !important; --gold: #B8881F !important; --gold-bright: #C9A040 !important; --gold-glow: rgba(184, 136, 31, 0.18) !important; --green: #059669 !important; --green-bg: rgba(5, 150, 105, 0.08) !important; --red: #DC2626 !important; --red-bg: rgba(220, 38, 38, 0.08) !important; --amber: #D97706 !important; --amber-bg: rgba(217, 119, 6, 0.08) !important; --blue: #1E40AF !important; --purple: #6D28D9 !important; /* CRÍTICO: Estos eran cream/blanco en dark theme → invisibles en light */ --text: #1E293B !important; --text-dim: #475569 !important; --text-mute: #64748B !important; --text-faint: #94A3B8 !important; --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06) !important; --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08) !important; --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12) !important; --shadow-gold: 0 8px 24px rgba(184, 136, 31, 0.18) !important; /* === Override variables de lemu-design-system.css === */ --lemu-green-deep: #FFFFFF !important; --lemu-green-mid: #F8FAFC !important; --lemu-green-soft: #F1F5F9 !important; --lemu-green-line: #E2E8F0 !important; --lemu-green-light: #475569 !important; --lemu-green-dim: #64748B !important; --lemu-green-mute: #94A3B8 !important; --lemu-gold: #B8881F !important; --lemu-gold-bright: #C9A040 !important; --lemu-gold-soft: rgba(184, 136, 31, 0.14) !important; --lemu-gold-glow: rgba(184, 136, 31, 0.35) !important; --lemu-text: #1E293B !important; --lemu-text-mute: #64748B !important; --lemu-text-faint: #94A3B8 !important; --lemu-success: #059669 !important; --lemu-success-soft: rgba(5, 150, 105, 0.12) !important; --lemu-warn: #D97706 !important; --lemu-warn-soft: rgba(217, 119, 6, 0.12) !important; --lemu-danger: #DC2626 !important; --lemu-danger-soft: rgba(220, 38, 38, 0.12) !important; --lemu-info: #2563EB !important; --lemu-info-soft: rgba(37, 99, 235, 0.12) !important; --lemu-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06) !important; --lemu-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08) !important; --lemu-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12) !important; --lemu-shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.18) !important; --lemu-glow-gold: 0 8px 24px rgba(184, 136, 31, 0.30) !important; /* === main.css landing tokens (no usadas en admin pero por si acaso) === */ --text-white: #1E293B !important; --text-muted-var: rgba(30, 41, 59, 0.7) !important; --glass: #F8FAFC !important; --glass-border: #E2E8F0 !important; --glass-gold: rgba(184, 136, 31, 0.12) !important; --glass-gold-b: rgba(184, 136, 31, 0.3) !important; } /* === BODY + ESTRUCTURA RAÍZ === */ html, body { background: #F8FAFC !important; color: #1E293B !important; } /* === SIDEBAR === */ .sb, #sidebar, .sidebar, [class*="sidebar"] { background: #FFFFFF !important; border-right: 1px solid #E2E8F0 !important; color: #1E293B !important; } .sb-item, .nav-item { color: #475569 !important; } .sb-item:hover, .nav-item:hover { background: #F1F5F9 !important; color: #1E293B !important; } .sb-item.active, .nav-item.active { background: rgba(184, 136, 31, 0.12) !important; color: #B8881F !important; border-left: 3px solid #B8881F; } .sb-section, .nav-section { color: #94A3B8 !important; background: transparent !important; } /* === TOPBAR / HEADER === */ #topbar, .topbar, header[class*="header"] { background: #FFFFFF !important; border-bottom: 1px solid #E2E8F0 !important; color: #1E293B !important; } #panel-title { color: #1E293B !important; } /* === MAIN CONTENT AREA === */ main, .main, #main-content, .content, .panel-content, .panel, [class*="panel-body"] { background: #F8FAFC !important; color: #1E293B !important; } /* === CARDS === */ .card, .stat-card, .stats-card, .info-card, [class*="card"]:not(.sb-card) { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; color: #1E293B !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } /* Cards usan gradient con var(--bg-2)/--bg-3 — forzar plano */ .card, .stat-card { background-image: none !important; } .card-title { color: #B8881F !important; } .stat-value { color: #1E293B !important; } .stat-label { color: #64748B !important; } /* === TABLES === */ table.data-table, .data-table, .res-table, .table { background: #FFFFFF !important; color: #1E293B !important; } table.data-table th, .data-table thead th, .res-table thead th, .table thead th, .matrix-table th { background: #F8FAFC !important; color: #475569 !important; border-bottom: 1px solid #E2E8F0 !important; font-weight: 700 !important; } table.data-table td, .data-table tbody td, .res-table tbody td, .table tbody td { background: #FFFFFF !important; color: #1E293B !important; border-bottom: 1px solid #F1F5F9 !important; } table.data-table tr:hover td, .data-table tbody tr:hover td, .res-table tbody tr:hover td, .table tbody tr:hover td { background: #F8FAFC !important; } /* === INPUTS, SELECTS, TEXTAREAS === */ input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], input[type="url"], input[type="datetime-local"], select, textarea, .form-input, .form-select, .form-textarea, .search-input, .auth-box input { background: #FFFFFF !important; color: #1E293B !important; border: 1px solid #CBD5E1 !important; } input:focus, select:focus, textarea:focus, .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #B8881F !important; box-shadow: 0 0 0 3px rgba(184, 136, 31, 0.15) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: #94A3B8 !important; } /* === LABELS === */ label, .label, .form-label { color: #475569 !important; } /* === BUTTONS === */ .btn, button:not([class*="ham"]):not(.sb-item):not(.nav-item) { color: #1E293B; } .btn-primary, button.btn-primary, .btn-new-res { background: #B8881F !important; background-image: none !important; color: #FFFFFF !important; border: none !important; } .btn-primary:hover, .btn-new-res:hover { background: #9A7019 !important; } .btn-secondary, button.btn-secondary { background: #FFFFFF !important; color: #475569 !important; border: 1px solid #CBD5E1 !important; } .btn-secondary:hover { background: #F1F5F9 !important; } .btn-danger { background: #DC2626 !important; color: #FFFFFF !important; } .btn-success { background: #10B981 !important; color: #FFFFFF !important; } .action-btn { background: #FFFFFF !important; color: #475569 !important; border: 1px solid #E2E8F0 !important; } .action-btn:hover { background: #F1F5F9 !important; color: #1E293B !important; } /* === CALENDAR / MATRIX === */ .cal-cell, .matrix-cell { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; color: #1E293B !important; } .cal-cell:hover, .matrix-cell:hover { background: #F8FAFC !important; } /* === URLs / monospace boxes === */ .url-display, .sync-log, pre, code { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; color: #475569 !important; } /* === TABS === */ .season-tabs, .tabs { background: #F1F5F9 !important; } .tab, .season-tab { color: #64748B !important; } .tab.active, .season-tab.active { background: #FFFFFF !important; color: #1E293B !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } /* === BADGES (preservar colores semánticos) === */ .badge { background: #B8881F !important; color: #FFFFFF !important; } .badge.badge-success, .badge-green { background: rgba(0,135,90,0.12) !important; color: #00875A !important; border-color: rgba(0,135,90,0.3) !important; } .badge.badge-warning, .badge-warn, .badge-gold { background: rgba(184,136,31,0.12) !important; color: #B8881F !important; border-color: rgba(184,136,31,0.3) !important; } .badge.badge-danger, .badge.badge-error, .badge-red { background: rgba(220,38,38,0.12) !important; color: #DC2626 !important; border-color: rgba(220,38,38,0.3) !important; } .badge-gray, .badge-muted { background: #F1F5F9 !important; color: #64748B !important; border-color: #E2E8F0 !important; } /* Badges OTA legacy en tablas (admin.html línea 222-224) — alinear con paleta CB */ .badge-orange { background: rgba(224, 72, 76, 0.12) !important; color: #BD3338 !important; border: 1px solid rgba(224, 72, 76, 0.30) !important; } .badge-blue { background: rgba(0, 53, 128, 0.12) !important; color: #003580 !important; border: 1px solid rgba(0, 53, 128, 0.30) !important; } /* === MODALS === */ .modal, .modal-content, [class*="modal-body"] { background: #FFFFFF !important; color: #1E293B !important; border: 1px solid #E2E8F0 !important; } .modal-overlay, .modal-backdrop { background: rgba(15, 23, 42, 0.5) !important; } /* === AUTH GATE / LOGIN === */ #auth-gate, .auth-box { background: #F8FAFC !important; } .auth-box { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; } .auth-box button { background: #B8881F !important; color: #FFFFFF !important; } /* === DROPDOWNS / MENUS === */ .dropdown, .dropdown-menu, .menu { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; color: #1E293B !important; } .dropdown-item:hover, .menu-item:hover { background: #F1F5F9 !important; } /* ============================================================ * STEP 2 — INLINE STYLE OVERRIDES * Catch hardcoded colors from inline style="..." attrs * Listas exhaustivas — admin.html + bot-panel.html * ============================================================ */ /* --- BACKGROUNDS oscuros (dark theme) → blanco --- */ [style*="background:#0D1B14"], [style*="background: #0D1B14"], [style*="background:#0d1b14"], [style*="background: #0d1b14"], [style*="background:#06100A"], [style*="background: #06100A"], [style*="background:#0F1B14"], [style*="background: #0F1B14"], [style*="background:#0a0a0a"], [style*="background: #0a0a0a"], [style*="background:#152218"], [style*="background: #152218"], [style*="background:#1a2d21"], [style*="background: #1a2d21"], [style*="background:#243527"], [style*="background: #243527"], [style*="background:#1E3D28"], [style*="background: #1E3D28"], [style*="background:#1A3C2E"], [style*="background: #1A3C2E"] { background: #FFFFFF !important; background-image: none !important; } /* Verdes oscuros con tinte (forest deep) — cards secundarias */ [style*="background:#2A7A4A"], [style*="background: #2A7A4A"], [style*="background:#3A6A4A"], [style*="background: #3A6A4A"] { background: rgba(5, 150, 105, 0.10) !important; color: #047857 !important; } /* Dark red backgrounds — alertas */ [style*="background:#3D1E1E"], [style*="background: #3D1E1E"], [style*="background:#7f1d1d"], [style*="background: #7f1d1d"], [style*="background:#7F1D1D"], [style*="background: #7F1D1D"], [style*="background:#991B1B"], [style*="background: #991B1B"] { background: #DC2626 !important; color: #FFFFFF !important; } /* Grises medios (chips/tags inactivos) */ [style*="background:#334"], [style*="background: #334"], [style*="background:#888"], [style*="background: #888"] { background: #F1F5F9 !important; color: #475569 !important; } /* Background blanco f5f5f5 — mantener pero asegurar contraste */ [style*="background:#f5f5f5"], [style*="background: #f5f5f5"] { background: #F8FAFC !important; color: #1E293B !important; } /* Background blanco puro #fff — sin cambio (ya es claro) pero forzar text dark */ [style*="background:#fff"], [style*="background: #fff"], [style*="background:#FFF"], [style*="background: #FFF"], [style*="background:#FFFFFF"], [style*="background: #FFFFFF"] { background: #FFFFFF !important; color: #1E293B !important; } /* Verdes mint claros que serían invisibles */ [style*="background:#4DFFD2"], [style*="background: #4DFFD2"], [style*="background:#5fdba0"], [style*="background: #5fdba0"], [style*="background:#3ECF8E"], [style*="background: #3ECF8E"] { background: rgba(5, 150, 105, 0.12) !important; color: #047857 !important; } /* WhatsApp green */ [style*="background:#25D366"], [style*="background: #25D366"] { background: #25D366 !important; color: #FFFFFF !important; } /* Facebook blue */ [style*="background:#1877F2"], [style*="background: #1877F2"] { background: #1877F2 !important; color: #FFFFFF !important; } /* Google red */ [style*="background:#EA4335"], [style*="background: #EA4335"] { background: #EA4335 !important; color: #FFFFFF !important; } /* LinkedIn brand blue (preservar como tal) */ [style*="background:#0A66C2"], [style*="background: #0A66C2"] { background: #0A66C2 !important; color: #FFFFFF !important; } /* Booking brand blue — preservar EXACTO #003580 (matchea calendario CB) */ [style*="background:#003580"], [style*="background: #003580"] { background: #003580 !important; color: #FFFFFF !important; } /* Google brand blue */ [style*="background:#4285F4"], [style*="background: #4285F4"] { background: #2A65C2 !important; /* oscurecido para 4.5:1 con texto blanco */ color: #FFFFFF !important; } /* Rojo Airbnb FF5A5F — preservar identidad de marca pero oscurecido para AA */ [style*="background:#FF5A5F"], [style*="background: #FF5A5F"], [style*="background:#e05555"], [style*="background: #e05555"] { background: #E0484C !important; color: #FFFFFF !important; } /* Rojos genéricos de error (NO de marca Airbnb) → rojo semántico */ [style*="background:#EF4444"], [style*="background: #EF4444"], [style*="background:#ef4444"], [style*="background: #ef4444"] { background: #DC2626 !important; color: #FFFFFF !important; } /* Warning amber */ [style*="background:#F5A623"], [style*="background: #F5A623"], [style*="background:#FFA500"], [style*="background: #FFA500"], [style*="background:#f59e0b"], [style*="background: #f59e0b"] { background: #D97706 !important; color: #FFFFFF !important; } /* Light pink alerta — fee2e2 */ [style*="background:#FEE2E2"], [style*="background: #FEE2E2"], [style*="background:#fee2e2"], [style*="background: #fee2e2"] { background: #FEE2E2 !important; color: #991B1B !important; } /* --- BACKGROUNDS translúcidos blancos → grises sutiles --- */ [style*="background:rgba(255,255,255,.02"], [style*="background: rgba(255,255,255,.02"], [style*="background:rgba(255,255,255,0.02"], [style*="background: rgba(255,255,255,0.02"], [style*="background:rgba(255,255,255,.03"], [style*="background: rgba(255,255,255,.03"], [style*="background:rgba(255,255,255,0.03"], [style*="background: rgba(255,255,255,0.03"], [style*="background:rgba(255,255,255,.04"], [style*="background: rgba(255,255,255,.04"], [style*="background:rgba(255,255,255,0.04"], [style*="background: rgba(255,255,255,0.04"], [style*="background:rgba(255,255,255,.05"], [style*="background: rgba(255,255,255,.05"], [style*="background:rgba(255,255,255,0.05"], [style*="background: rgba(255,255,255,0.05"], [style*="background:rgba(255,255,255,.06"], [style*="background: rgba(255,255,255,.06"], [style*="background:rgba(255,255,255,0.06"], [style*="background: rgba(255,255,255,0.06"], [style*="background:rgba(255,255,255,.07"], [style*="background: rgba(255,255,255,.07"], [style*="background:rgba(255,255,255,0.07"], [style*="background: rgba(255,255,255,0.07"], [style*="background:rgba(255,255,255,0.015"], [style*="background: rgba(255,255,255,0.015"], [style*="background:rgba(255,255,255,0.01)"], [style*="background: rgba(255,255,255,0.01)"] { background: #F8FAFC !important; color: #1E293B !important; } [style*="background:rgba(255,255,255,.08"], [style*="background: rgba(255,255,255,.08"], [style*="background:rgba(255,255,255,0.08"], [style*="background: rgba(255,255,255,0.08"], [style*="background:rgba(255,255,255,0.1)"], [style*="background: rgba(255,255,255,0.1)"], [style*="background:rgba(255,255,255,0.12"], [style*="background: rgba(255,255,255,0.12"], [style*="background:rgba(255,255,255,.18"], [style*="background: rgba(255,255,255,.18"], [style*="background:rgba(255,255,255,0.18"], [style*="background: rgba(255,255,255,0.18"], [style*="background:rgba(255,255,255,0.2"], [style*="background: rgba(255,255,255,0.2"], [style*="background:rgba(255,255,255,0.35"], [style*="background: rgba(255,255,255,0.35"] { background: #F1F5F9 !important; color: #1E293B !important; } /* --- BACKGROUNDS oscuros translúcidos (sobre fondo oscuro) → claros --- */ [style*="background:rgba(13,27,20"], [style*="background: rgba(13,27,20"], [style*="background:rgba(13, 27, 20"], [style*="background:rgba(15,27,20"], [style*="background: rgba(15,27,20"], [style*="background:rgba(6,13,9"], [style*="background: rgba(6,13,9"] { background: #FFFFFF !important; color: #1E293B !important; } /* --- BACKGROUNDS verdes claros (paleta dark green muted) → grises sutiles --- */ [style*="background:rgba(122,155,133"], [style*="background: rgba(122,155,133"] { background: #F1F5F9 !important; color: #475569 !important; } /* --- BACKGROUNDS sand/cream translúcidos (paleta dark) → blanco --- */ [style*="background:rgba(245,239,224"], [style*="background: rgba(245,239,224"], [style*="background:rgba(229,194,114"], [style*="background: rgba(229,194,114"] { background: rgba(184, 136, 31, 0.08) !important; color: #1E293B !important; } /* --- BACKGROUNDS dorados (acento Lila) — preservar pero ajustar --- */ [style*="background:rgba(201,160,64,0.03"], [style*="background: rgba(201,160,64,0.03"], [style*="background:rgba(201,160,64,.06"], [style*="background: rgba(201,160,64,.06"], [style*="background:rgba(201,160,64,0.04"], [style*="background: rgba(201,160,64,0.04"], [style*="background:rgba(201,160,64,0.06"], [style*="background: rgba(201,160,64,0.06"], [style*="background:rgba(201,160,64,0.08"], [style*="background: rgba(201,160,64,0.08"], [style*="background:rgba(201,160,64,0.1"], [style*="background: rgba(201,160,64,0.1"], [style*="background:rgba(201,160,64,.12"], [style*="background: rgba(201,160,64,.12"], [style*="background:rgba(201,160,64,0.12"], [style*="background: rgba(201,160,64,0.12"], [style*="background:rgba(201,160,64,0.14"], [style*="background: rgba(201,160,64,0.14"], [style*="background:rgba(201,160,64,.15"], [style*="background: rgba(201,160,64,.15"], [style*="background:rgba(201,160,64,0.15"], [style*="background: rgba(201,160,64,0.15"], [style*="background:rgba(201,160,64,.18"], [style*="background: rgba(201,160,64,.18"], [style*="background:rgba(201,160,64,0.18"], [style*="background: rgba(201,160,64,0.18"], [style*="background:rgba(201,160,64,0.2"], [style*="background: rgba(201,160,64,0.2"] { background: rgba(184, 136, 31, 0.12) !important; color: #1E293B !important; } [style*="background:rgba(201,160,64,0.5"], [style*="background: rgba(201,160,64,0.5"] { background: #B8881F !important; color: #FFFFFF !important; } /* --- BACKGROUNDS verdes mint translúcidos (success states) → verde semántico --- */ [style*="background:rgba(62,207,142"], [style*="background: rgba(62,207,142"], [style*="background:rgba(77,255,210"], [style*="background: rgba(77,255,210"], [style*="background:rgba(37,211,102"], [style*="background: rgba(37,211,102"] { background: rgba(5, 150, 105, 0.12) !important; color: #047857 !important; } /* --- BACKGROUNDS rojos translúcidos (errores/alertas) --- #FF5A5F = Airbnb brand (preservar tono). Otros rojos genéricos */ [style*="background:rgba(255,90,95"], [style*="background: rgba(255,90,95"] { background: rgba(224, 72, 76, 0.12) !important; color: #BD3338 !important; /* tono Airbnb oscurecido AA */ } [style*="background:rgba(224,85,85"], [style*="background: rgba(224,85,85"], [style*="background:rgba(255,77,77"], [style*="background: rgba(255,77,77"], [style*="background:rgba(255,138,138"], [style*="background: rgba(255,138,138"] { background: rgba(220, 38, 38, 0.12) !important; color: #991B1B !important; } /* --- BACKGROUNDS amber/orange translúcidos (warnings) --- */ [style*="background:rgba(245,166,35"], [style*="background: rgba(245,166,35"], [style*="background:rgba(245,158,11"], [style*="background: rgba(245,158,11"], [style*="background:rgba(255,150,50"], [style*="background: rgba(255,150,50"] { background: rgba(217, 119, 6, 0.12) !important; color: #92400E !important; } /* --- BACKGROUNDS azules translúcidos (info / Booking brand) --- Mantener tono Booking #003580 con baja opacidad — coherente con la paleta Cloudbeds del calendario. */ [style*="background:rgba(0,53,128"], [style*="background: rgba(0,53,128"] { background: rgba(0, 53, 128, 0.10) !important; color: #003580 !important; } /* --- BACKGROUNDS púrpura translúcidos --- */ [style*="background:rgba(168,85,247"], [style*="background: rgba(168,85,247"] { background: rgba(109, 40, 217, 0.10) !important; color: #6D28D9 !important; } /* --- Grises 120 (gris medio neutro) --- */ [style*="background:rgba(120,120,120"], [style*="background: rgba(120,120,120"] { background: #F1F5F9 !important; color: #475569 !important; } /* --- BACKGROUNDS negro translúcido (overlays modales) --- */ /* Mantener overlays oscuros para modales — son intencionales */ [style*="background:rgba(0,0,0,.7)"], [style*="background: rgba(0,0,0,.7)"], [style*="background:rgba(0,0,0,0.7)"], [style*="background: rgba(0,0,0,0.7)"], [style*="background:rgba(0,0,0,0.85)"], [style*="background: rgba(0,0,0,0.85)"] { background: rgba(15, 23, 42, 0.5) !important; } [style*="background:rgba(0,0,0,0.5)"], [style*="background: rgba(0,0,0,0.5)"] { background: rgba(15, 23, 42, 0.4) !important; } /* ============================================================ * TEXTOS — overrides exhaustivos para inline styles * ============================================================ */ /* --- TEXTOS verdes claros (paleta tema oscuro) → grises legibles --- */ [style*="color:#E8F0EB"], [style*="color: #E8F0EB"], [style*="color:#F5EFE0"], [style*="color: #F5EFE0"] { color: #1E293B !important; } [style*="color:#7A9B85"], [style*="color: #7A9B85"], [style*="color:#7a9b85"], [style*="color: #7a9b85"], [style*="color:#6B8C76"], [style*="color: #6B8C76"] { color: #64748B !important; } [style*="color:#A0C0AB"], [style*="color: #A0C0AB"] { color: #475569 !important; } [style*="color:#4A6B55"], [style*="color: #4A6B55"] { color: #94A3B8 !important; } [style*="color:#5B8A72"], [style*="color: #5B8A72"] { color: #6B7280 !important; } /* Verdes ultra oscuros (carbon) — texto sobre fondo gold */ [style*="color:#06100A"], [style*="color: #06100A"], [style*="color:#0D1B14"], [style*="color: #0D1B14"], [style*="color:#0a0a0a"], [style*="color: #0a0a0a"], [style*="color:#1A3C2E"], [style*="color: #1A3C2E"], [style*="color:#1E293B"], [style*="color: #1E293B"] { color: #1E293B !important; } /* --- VERDES SEMÁNTICOS (success) → oscurecer --- */ [style*="color:#3ECF8E"], [style*="color: #3ECF8E"] { color: #059669 !important; /* verde más oscuro, WCAG AA 4.5:1 */ } [style*="color:#10b981"], [style*="color: #10b981"] { color: #047857 !important; } [style*="color:#4DFFD2"], [style*="color: #4DFFD2"], [style*="color:#25D366"], [style*="color: #25D366"] { color: #059669 !important; } /* --- ROJO semánticos (errores) — oscurecer si están claros --- */ [style*="color:#FF5A5F"], [style*="color: #FF5A5F"], [style*="color:#FF7A5A"], [style*="color: #FF7A5A"], [style*="color:#FF8A8A"], [style*="color: #FF8A8A"], [style*="color:#FF8A8E"], [style*="color: #FF8A8E"], [style*="color:#ff8a8a"], [style*="color: #ff8a8a"], [style*="color:#e05555"], [style*="color: #e05555"], [style*="color:#ef4444"], [style*="color: #ef4444"], [style*="color:#EF4444"], [style*="color: #EF4444"], [style*="color:#fee2e2"], [style*="color: #fee2e2"] { color: #DC2626 !important; } /* --- WARNING amber/orange --- */ [style*="color:#F5A623"], [style*="color: #F5A623"], [style*="color:#FFB050"], [style*="color: #FFB050"], [style*="color:#f59e0b"], [style*="color: #f59e0b"] { color: #D97706 !important; } /* --- INFO azules --- */ [style*="color:#5B9EFF"], [style*="color: #5B9EFF"] { color: #2563EB !important; } /* --- DORADO LILA (acento principal) --- */ [style*="background:#C9A040"], [style*="background: #C9A040"] { background: #B8881F !important; color: #FFFFFF !important; } [style*="color:#C9A040"], [style*="color: #C9A040"], [style*="color:#E5C272"], [style*="color: #E5C272"] { color: #B8881F !important; } /* --- WeSpeak / morado --- */ [style*="color:#7C3AED"], [style*="color: #7C3AED"] { color: #6D28D9 !important; } /* --- Grises neutros (mantener legibles) --- */ [style*="color:#ccc"], [style*="color: #ccc"], [style*="color:#999"], [style*="color: #999"] { color: #94A3B8 !important; } [style*="color:#666"], [style*="color: #666"], [style*="color:#9A9A9A"], [style*="color: #9A9A9A"] { color: #64748B !important; } /* --- TEXTOS rgba traslucidos (cream / blanco / verde) — todos invisibles en bg blanco --- */ [style*="color:rgba(245,239,224"], [style*="color: rgba(245,239,224"] { color: #475569 !important; } [style*="color:rgba(255,255,255"], [style*="color: rgba(255,255,255"] { color: #475569 !important; } [style*="color:rgba(122,155,133"], [style*="color: rgba(122,155,133"] { color: #64748B !important; } [style*="color:rgba(240,247,244"], [style*="color: rgba(240,247,244"] { color: #475569 !important; } /* Dorado translucido — oscurecer */ [style*="color:rgba(201,160,64"], [style*="color: rgba(201,160,64"] { color: #B8881F !important; } /* Rojos / azules traslucidos */ [style*="color:rgba(255,90,95"], [style*="color: rgba(255,90,95"] { color: #DC2626 !important; } [style*="color:rgba(0,115,230"], [style*="color: rgba(0,115,230"] { color: #1E40AF !important; } /* --- BORDERS translúcidos (whites) --- */ [style*="border:1px solid rgba(255,255,255"], [style*="border: 1px solid rgba(255, 255, 255"], [style*="border:1px solid rgba(255, 255, 255"] { border: 1px solid #E2E8F0 !important; } [style*="border:2px solid rgba(255,255,255"], [style*="border: 2px solid rgba(255, 255, 255"] { border: 2px solid #CBD5E1 !important; } /* Borders verdes/cream → grises sutiles */ [style*="border:1px solid rgba(122,155,133"], [style*="border: 1px solid rgba(122,155,133"], [style*="border:1px solid rgba(245,239,224"], [style*="border: 1px solid rgba(245,239,224"] { border: 1px solid #E2E8F0 !important; } /* Borders dorados — preservar pero con tono ajustado */ [style*="border:1px solid rgba(201,160,64"], [style*="border: 1px solid rgba(201,160,64"] { border: 1px solid rgba(184, 136, 31, 0.3) !important; } /* --- AZULES (links / Booking brand) --- Preservar #003580 EXACTO porque la paleta Cloudbeds del calendario lo usa como color identitario oficial de Booking.com. Contraste 13.4:1 sobre fondo blanco — perfecto AAA. */ [style*="color:#003580"], [style*="color: #003580"] { color: #003580 !important; } /* ============================================================ * STEP 3 — SVG / ICONS * ============================================================ */ svg[stroke="#E8F0EB"], svg[stroke="#7A9B85"], svg[stroke="#A0C0AB"], svg[stroke="#F5EFE0"] { stroke: #475569 !important; } svg[fill="#E8F0EB"], svg[fill="#7A9B85"], svg[fill="#A0C0AB"], svg[fill="#F5EFE0"] { fill: #475569 !important; } svg[stroke="#C9A040"] { stroke: #B8881F !important; } svg[fill="#C9A040"] { fill: #B8881F !important; } /* === SCROLLBARS (más suaves en bg claro) === */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #F1F5F9; } ::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #94A3B8; } /* === BANNER ALERTAS CRÍTICAS (forzar rojo bien visible) === */ #critical-alerts-banner { background: #DC2626 !important; color: #FFFFFF !important; border-bottom: 2px solid #B91C1C !important; } #critical-alerts-banner * { color: #FFFFFF !important; } /* === PANEL TITLE / HEADINGS === */ h1, h2, h3, h4, h5, h6 { color: #0F172A !important; } /* === LINKS === */ a:not(.btn):not(.sb-item):not(.nav-item) { color: #B8881F !important; } a:not(.btn):not(.sb-item):not(.nav-item):hover { color: #9A7019 !important; } /* === ESPECÍFICO: SECTION HEADER (admin) === */ .section-header { color: #1E293B !important; } .section-title { color: #0F172A !important; } /* === BOT-PANEL ESPECÍFICO === */ .section, [id^="section-"] { background: #F8FAFC !important; color: #1E293B !important; } .col-title { color: #475569 !important; } .nav-badge { background: #B8881F; color: #FFFFFF; } /* === Gradients que usen var(--bg-X) → forzar plano === */ [style*="linear-gradient"][style*="var(--bg"], [style*="linear-gradient"][style*="#0D1B14"], [style*="linear-gradient"][style*="#152218"], [style*="linear-gradient"][style*="#1a2d21"], [style*="linear-gradient"][style*="#243527"] { background-image: none !important; background-color: #FFFFFF !important; } /* Gradient gold → plano */ .btn-new-res, [style*="linear-gradient(135deg, var(--gold)"], [style*="linear-gradient(135deg,var(--gold)"] { background-image: none !important; background-color: #B8881F !important; color: #FFFFFF !important; } /* ============================================================ * STEP 4 — FIXES ESPECÍFICOS POST-AUDIT * ============================================================ */ /* Stat icons (emojis) — mantener opacity full para visibilidad */ .stat-icon { opacity: 1 !important; } /* Modal headers usan colores dorados que pueden quedar muy claros */ .modal h2, .modal h3, .modal-title, [class*="modal-header"] { color: #0F172A !important; } /* Inputs disabled — gris claro reconocible */ input:disabled, select:disabled, textarea:disabled, .form-input:disabled { background: #F1F5F9 !important; color: #94A3B8 !important; border-color: #E2E8F0 !important; } /* Hover en filas tabla — más suave */ tr:hover { background-color: #F8FAFC !important; } /* Iconos / chips en sidebar con badge gold */ .sb-item .nav-badge, .nav-item .nav-badge { background: #B8881F !important; color: #FFFFFF !important; } /* Tooltips / coachmarks */ .tooltip, .coachmark, [class*="tooltip"] { background: #1E293B !important; color: #FFFFFF !important; border: none !important; } /* Loaders / spinners — color visible */ .spinner, .loader, [class*="spinner"] { border-color: #E2E8F0 !important; border-top-color: #B8881F !important; } /* Notifications feed items */ .notification-item, .notif-item, [class*="notification"]:not(#critical-alerts-banner) { background: #FFFFFF !important; color: #1E293B !important; border-bottom: 1px solid #E2E8F0 !important; } .notification-item.unread, .notif-item.unread { background: rgba(184, 136, 31, 0.06) !important; } /* Empty states / mensajes vacíos */ .empty-state, .no-data, [class*="empty"] { color: #94A3B8 !important; background: transparent !important; } /* Kanban columns (embudo) */ .kanban-col, .funnel-col, [class*="kanban"] { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; } .kanban-card, .funnel-card { background: #FFFFFF !important; color: #1E293B !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; } /* Channel logos / brand chips — forzar bg blanco para que se vean */ .channel-logo, .brand-chip { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; } /* Toast notifications */ .toast, .toast-message { background: #1E293B !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; } .toast.success { background: #059669 !important; } .toast.error { background: #DC2626 !important; } .toast.warning { background: #D97706 !important; } /* Calendario drag-drop celdas — bordes visibles. Las celdas "booked"/"blocked" se alinean con paleta Cloudbeds para que NO compitan con las barras de canal coloreadas. */ .calendar-cell, .cal-day, [class*="calendar-day"] { background: #FFFFFF !important; border: 1px solid #DFE1E6 !important; color: #172B4D !important; } .calendar-cell.booked, .cal-day.booked { background: rgba(0, 135, 90, 0.08) !important; color: #00875A !important; border: 1px solid rgba(0, 135, 90, 0.25) !important; } .calendar-cell.blocked { background: rgba(94, 108, 132, 0.10) !important; color: #42526E !important; border: 1px solid rgba(94, 108, 132, 0.28) !important; } /* Status pills en reservas (versión legacy — la versión Cloudbeds sobreescribe estos en la sección CLOUDBEDS-STYLE más abajo, pero los conservamos como fallback para selectores legacy) */ .status-confirmed { background: rgba(0,135,90,0.10) !important; color: #00875A !important; } .status-checked_in { background: rgba(0,82,204,0.12) !important; color: #0052CC !important; } .status-cancelled { background: rgba(222,53,11,0.10) !important; color: #BF2600 !important; } .status-pending { background: rgba(255,171,0,0.14) !important; color: #B26800 !important; } /* Inputs con tema dark inline */ input[style*="background:rgba(13,27,20"], input[style*="background: rgba(13,27,20"] { background: #FFFFFF !important; color: #1E293B !important; } /* Box shadows usando rgba negro alto — suavizar */ [style*="box-shadow"][style*="rgba(0,0,0,0.4"], [style*="box-shadow"][style*="rgba(0,0,0,0.5"], [style*="box-shadow"][style*="rgba(0,0,0,0.35"], [style*="box-shadow"][style*="rgba(0,0,0,0.25"] { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important; } /* ============================================================ * STEP 5 — FALLBACK GLOBAL * Si después de todo lo anterior queda algo invisible, * forzar texto oscuro en TODO elemento dentro de contenedores * principales (excepto botones primarios y badges colored). * ============================================================ */ /* Cualquier texto cream/blanco que quedara → forzar oscuro */ *:not(.btn-primary):not(.btn-new-res):not(.btn-danger):not(.btn-success):not(.badge):not([class*="status-"])[style*="color:#fff"]:not([style*="background"]), *:not(.btn-primary):not(.btn-new-res):not(.btn-danger):not(.btn-success):not(.badge):not([class*="status-"])[style*="color:white"]:not([style*="background"]) { color: #1E293B !important; } /* Cards de canales OTA — fondos blancos consistentes */ .channel-card, .ota-card, [class*="channel-card"] { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; color: #1E293B !important; } /* Reportes / charts — fondos blancos */ .chart-container, .report-card, canvas { background: #FFFFFF !important; } /* Code blocks / pre — más legibles */ pre, code, .code-block { background: #F1F5F9 !important; color: #1E293B !important; border: 1px solid #E2E8F0 !important; } /* Selección de texto */ ::selection { background: rgba(184, 136, 31, 0.25); color: #1E293B; } /* ============================================================ * CLOUDBEDS-STYLE CALENDAR PALETTE (2026-05-27, ajustes 2026-05-28) * Paleta visual de Cloudbeds aplicada al calendario admin, integrada * con la identidad de marca Lila (dorado + verde oscuro). * * Filosofía de coexistencia: * - Lila DORADO (#B8881F) = acento de marca principal (botones, * sidebar activo, links, badges gold, focus rings). * - Lila VERDE OSCURO (#1A4D3E / #059669) = NO se usa para status * de calendario (cede el rol a Cloudbeds green). Solo en outline * semánticos generales (badge-success badge-green del bot-panel). * - Cloudbeds VERDE (#00875A) = status confirmed / direct channel / * celdas libres EXCLUSIVAMENTE dentro del calendario. * - Cloudbeds AZUL (#0052CC) = today highlight + in-house + drag * states. NO compite con el dorado porque vive sólo en calendario. * - Fondo calendario #F4F5F7 (Atlassian neutral) se mezcla suave con * #F8FAFC (admin neutral) — diferencia perceptible 1.6:1, no choca. * ============================================================ */ /* === Tokens Cloudbeds === */ :root { --cb-bg: #F4F5F7; --cb-cell: #FFFFFF; --cb-cell-hover: #F8F9FA; --cb-cell-other: #FAFBFC; --cb-border: #DFE1E6; --cb-border-strong:#C1C7D0; --cb-text: #172B4D; --cb-text-muted: #5E6C84; /* oscurecido de #6B778C → ratio 4.6:1 sobre #FFFFFF */ --cb-text-faint: #6B778C; /* oscurecido de #97A0AF para WCAG AA */ --cb-today: #0052CC; --cb-today-bg: #DEEBFF; --cb-today-border: #4C9AFF; /* tono medio para que el borde 2px no parezca martillazo */ --cb-selected: #B3D4FF; --cb-airbnb: #E0484C; /* oscurecido de #FF5A5F → mejor contraste texto blanco 4.5:1 */ --cb-booking: #003580; --cb-expedia: #FFB916; --cb-direct: #00875A; --cb-website: #0747A6; --cb-vrbo: #1976D2; --cb-wespeak: #6554C0; --cb-google: #4285F4; --cb-other: #7A869A; --cb-confirmed: #00875A; /* alineado con cb-direct para coherencia */ --cb-confirmed-bg: rgba(0, 135, 90, 0.10); --cb-pending: #B26800; /* oscurecido de #FFAB00 → 4.5:1 sobre fondo claro */ --cb-pending-bg: rgba(255, 171, 0, 0.14); --cb-cancelled: #BF2600; /* oscurecido de #DE350B → 4.5:1 */ --cb-cancelled-bg: rgba(222, 53, 11, 0.10); --cb-in-house: #0052CC; --cb-checked-out: #5E6C84; --cb-no-show: #5E6C84; } /* === Calendario container === */ #drag-calendar-container, .calendar-container, .matrix-container, .avail-matrix, .cal-grid { background: #F4F5F7 !important; border-radius: 8px !important; padding: 8px !important; border: 1px solid #DFE1E6 !important; } /* === Celdas del calendario === */ .cal-cell { background: #FFFFFF !important; border: 1px solid #DFE1E6 !important; color: #172B4D !important; border-radius: 6px !important; min-height: 80px !important; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important; } .cal-cell:hover { background: #F8F9FA !important; border-color: #C1C7D0 !important; box-shadow: 0 1px 2px rgba(9, 30, 66, 0.08) !important; } /* Today highlight: borde azul + fondo SUAVE + acento dorado sutil en la esquina para mantener anclaje a la marca Lila sin chocar */ .cal-cell.today { border: 1px solid #4C9AFF !important; background: #DEEBFF !important; box-shadow: inset 0 0 0 1px #0052CC, 0 0 0 1px rgba(184, 136, 31, 0.18) !important; } .cal-cell.today .cal-day-num { color: #0747A6 !important; font-weight: 700 !important; } .cal-cell.other-month { background: #FAFBFC !important; opacity: 1 !important; color: #97A0AF !important; } .cal-cell.other-month .cal-day-num { color: #97A0AF !important; font-weight: 400 !important; } .cal-cell.selected { background: #B3D4FF !important; border-color: #0052CC !important; } .cal-day-num { color: #172B4D !important; font-weight: 500 !important; } .cal-day-label { color: #5E6C84 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; font-weight: 600 !important; } /* Nav del header del calendario (chevron < > Mes Año) */ .cal-nav { background: #FFFFFF !important; border: 1px solid #DFE1E6 !important; color: #172B4D !important; border-radius: 6px !important; } .cal-nav:hover { background: rgba(184, 136, 31, 0.10) !important; border-color: #B8881F !important; color: #B8881F !important; } .cal-month { color: #172B4D !important; } /* === Celda libre (disponibilidad) — matriz 14 días === */ .cell-free { background: rgba(0, 135, 90, 0.08) !important; color: #00875A !important; border: 1px solid rgba(0, 135, 90, 0.18) !important; font-size: 10px !important; } /* Celda ocupada — usar Cloudbeds rojo suavizado, NO el rojo de errores */ .cell-occ { background: rgba(222, 53, 11, 0.10) !important; color: #BF2600 !important; border: 1px solid rgba(222, 53, 11, 0.22) !important; font-size: 10px !important; } /* === Matrix table (vista listado de unidades x días) === */ .matrix-table, table.matrix-table { background: #FFFFFF !important; border-collapse: separate !important; border-spacing: 0 !important; } .matrix-table th { background: #F4F5F7 !important; color: #5E6C84 !important; border-bottom: 2px solid #DFE1E6 !important; border-right: 1px solid #DFE1E6 !important; font-weight: 600 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 8px 6px !important; } .matrix-table th.today { background: #DEEBFF !important; color: #0747A6 !important; } .matrix-table td { background: #FFFFFF !important; color: #172B4D !important; border-bottom: 1px solid #EBECF0 !important; border-right: 1px solid #EBECF0 !important; padding: 4px 6px !important; } .matrix-table tr:hover td { background: #F8F9FA !important; } .matrix-table .unit-name { text-align: left !important; color: #172B4D !important; font-weight: 600 !important; font-size: 11px !important; padding-left: 10px !important; background: #FAFBFC !important; } /* === Eventos / barras de reserva por canal === IMPORTANTE: las barras viven SOLO dentro de .cal-cell (calendario) y son las únicas con texto blanco sobre fondo saturado en esta paleta — eso las hace 100% legibles aún sobre celdas blancas. Selector .cal-event garantiza que NO se filtren a botones/badges con la misma clase OTA en otras partes del admin. */ .cal-event { color: #FFFFFF !important; font-weight: 600 !important; font-size: 10px !important; padding: 2px 6px !important; border-radius: 3px !important; margin-bottom: 2px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .cal-event.ev-airbnb, .cal-event[data-channel="airbnb"], [class*="event-airbnb"] { background: #E0484C !important; color: #FFFFFF !important; border-left: 3px solid #BD3338 !important; } .cal-event.ev-booking, .cal-event[data-channel="booking"], [class*="event-booking"] { background: #003580 !important; color: #FFFFFF !important; border-left: 3px solid #001E4D !important; } .cal-event.ev-direct, .cal-event[data-channel="direct"], [class*="event-direct"] { background: #00875A !important; color: #FFFFFF !important; border-left: 3px solid #006644 !important; } .cal-event[data-channel="website"], .cal-event.ev-website { background: #0747A6 !important; color: #FFFFFF !important; border-left: 3px solid #003884 !important; } .cal-event[data-channel="expedia"], .cal-event.ev-expedia { background: #FFB916 !important; color: #172B4D !important; /* amarillo necesita texto oscuro: 8.5:1 */ border-left: 3px solid #B26800 !important; } .cal-event[data-channel="vrbo"], .cal-event.ev-vrbo { background: #1976D2 !important; color: #FFFFFF !important; border-left: 3px solid #155FA8 !important; } .cal-event[data-channel="wespeak"], .cal-event.ev-wespeak { background: #6554C0 !important; color: #FFFFFF !important; border-left: 3px solid #5243AA !important; } .cal-event[data-channel="google"], .cal-event.ev-google, .cal-event[data-channel="googlehotels"] { background: #2A65C2 !important; /* oscurecido de #4285F4 para 4.5:1 con blanco */ color: #FFFFFF !important; border-left: 3px solid #1E4FA0 !important; } /* === Status indicators (pills / badges) === Aplica a TODA pill .status-* incluso sin .status-pill modifier, para evitar que las pills legacy queden con tema antiguo. Contrastes verificados WCAG AA contra fondo tinted del badge. */ .status-confirmed, [data-status="confirmed"].status-pill, [data-status="confirmed"] { background: rgba(0, 135, 90, 0.10) !important; color: #00875A !important; border: 1px solid rgba(0, 135, 90, 0.30) !important; } .status-pending, [data-status="pending"].status-pill, [data-status="pending"] { background: rgba(255, 171, 0, 0.14) !important; color: #B26800 !important; /* 4.7:1 sobre fondo tinted */ border: 1px solid rgba(178, 104, 0, 0.30) !important; } .status-cancelled, [data-status="cancelled"].status-pill, [data-status="cancelled"] { background: rgba(222, 53, 11, 0.10) !important; color: #BF2600 !important; /* 4.8:1 sobre fondo tinted */ border: 1px solid rgba(222, 53, 11, 0.30) !important; text-decoration: line-through !important; opacity: 0.85 !important; } .status-checked_in, [data-status="checked_in"].status-pill, .status-in-house, [data-status="in_house"].status-pill, [data-status="in_house"] { background: rgba(0, 82, 204, 0.12) !important; color: #0052CC !important; border: 1px solid rgba(0, 82, 204, 0.30) !important; } .status-checked_out, [data-status="checked_out"].status-pill, [data-status="checked_out"] { background: rgba(94, 108, 132, 0.12) !important; color: #42526E !important; /* 5.1:1 (más oscuro que 5E6C84) */ border: 1px solid rgba(94, 108, 132, 0.30) !important; } .status-no_show, [data-status="no_show"].status-pill, [data-status="no_show"] { background: rgba(94, 108, 132, 0.12) !important; color: #42526E !important; border: 1px solid rgba(94, 108, 132, 0.30) !important; } /* === Channel filter buttons en Reservas === Soporta tanto filter-btn[onclick*="..."] (legacy) como [data-channel="..."].filter-btn (nuevo) y .channel-filter-* */ .filter-btn[onclick*="airbnb"], .filter-btn[data-channel="airbnb"], .channel-filter-airbnb { border: 1px solid rgba(224, 72, 76, 0.35) !important; color: #BD3338 !important; /* 4.7:1 sobre #FFFFFF */ background: #FFFFFF !important; } .filter-btn[onclick*="airbnb"]:hover, .filter-btn[onclick*="airbnb"].active, .filter-btn[data-channel="airbnb"]:hover, .filter-btn[data-channel="airbnb"].active, .channel-filter-airbnb:hover, .channel-filter-airbnb.active { background: #E0484C !important; color: #FFFFFF !important; border-color: #BD3338 !important; } .filter-btn[onclick*="booking"], .filter-btn[data-channel="booking"], .channel-filter-booking { border: 1px solid rgba(0, 53, 128, 0.35) !important; color: #003580 !important; background: #FFFFFF !important; } .filter-btn[onclick*="booking"]:hover, .filter-btn[onclick*="booking"].active, .filter-btn[data-channel="booking"]:hover, .filter-btn[data-channel="booking"].active, .channel-filter-booking:hover, .channel-filter-booking.active { background: #003580 !important; color: #FFFFFF !important; border-color: #001E4D !important; } .filter-btn[onclick*="direct"], .filter-btn[data-channel="direct"], .channel-filter-direct { border: 1px solid rgba(0, 135, 90, 0.35) !important; color: #00875A !important; background: #FFFFFF !important; } .filter-btn[onclick*="direct"]:hover, .filter-btn[onclick*="direct"].active, .filter-btn[data-channel="direct"]:hover, .filter-btn[data-channel="direct"].active, .channel-filter-direct:hover, .channel-filter-direct.active { background: #00875A !important; color: #FFFFFF !important; border-color: #006644 !important; } /* === Channel logos en sidebar/conexiones === */ .channel-logo.airbnb { background: rgba(224, 72, 76, 0.15) !important; color: #BD3338 !important; } .channel-logo.booking { background: rgba(0, 53, 128, 0.15) !important; color: #003580 !important; } .channel-logo.direct { background: rgba(0, 135, 90, 0.15) !important; color: #00875A !important; } .sb-dot.green { background: #00875A !important; box-shadow: 0 0 4px rgba(0, 135, 90, 0.4) !important; } .sb-dot.red, .sb-dot.error { background: #BF2600 !important; } .sb-dot.gold, .sb-dot.brand { background: #B8881F !important; box-shadow: 0 0 4px rgba(184, 136, 31, 0.4) !important; } /* === Overrides directos a inline styles del calendario oscuro === */ [style*="background:#0D1B14"].cal-cell, [style*="background: #0D1B14"].cal-cell { background: #FFFFFF !important; } [style*="background:#1E3D28"] { background: rgba(54, 179, 126, 0.10) !important; color: #00875A !important; } [style*="color:#3ECF8E"] { color: #00875A !important; } [style*="background:#3ECF8E"] { background: #00875A !important; color: #FFFFFF !important; } [style*="background:rgba(62,207,142"] { background: rgba(54, 179, 126, 0.12) !important; color: #00875A !important; border-color: rgba(54, 179, 126, 0.3) !important; } /* === Drag-handle visual mejorado === */ .drag-handle, [class*="drag-"] { cursor: grab !important; } .drag-handle:active, [class*="drag-"]:active { cursor: grabbing !important; } .dragging { opacity: 0.6 !important; outline: 2px dashed #0052CC !important; } /* === Tooltip de reserva (hover) Cloudbeds-style === */ .reservation-tooltip, .cal-tooltip { background: #172B4D !important; color: #FFFFFF !important; font-size: 12px !important; padding: 8px 12px !important; border-radius: 4px !important; box-shadow: 0 4px 16px rgba(9, 30, 66, 0.25) !important; border: none !important; } /* === Channel breakdown bars (dashboard) === */ .channel-breakdown-bar { background: #EBECF0 !important; } /* === Stat cards revenue por canal === */ .stat-card[data-channel="airbnb"] .stat-value { color: #BD3338 !important; } .stat-card[data-channel="booking"] .stat-value { color: #003580 !important; } .stat-card[data-channel="direct"] .stat-value { color: #00875A !important; } .stat-card[data-channel="website"] .stat-value { color: #0747A6 !important; } .stat-card[data-channel="wespeak"] .stat-value { color: #6554C0 !important; } /* === Botones primarios estilo Cloudbeds (azul Atlassian) === Reservado para acciones DENTRO del calendario (ej. "Bloquear fechas", "Asignar unidad" en modal de pending). Fuera del calendario el botón primario sigue siendo el dorado Lila .btn-primary. */ .btn-cloudbeds, .btn-primary-cb { background: #0052CC !important; color: #FFFFFF !important; border: none !important; font-weight: 500 !important; border-radius: 3px !important; padding: 6px 12px !important; } .btn-cloudbeds:hover { background: #0747A6 !important; } /* ============================================================ * GUIDELINES DE PALETA — LILA + CLOUDBEDS COEXISTENCIA * ============================================================ * Sistema de dos paletas que conviven SIN chocar gracias a una * regla de oro: cada paleta tiene su DOMINIO de aplicación. * * ┌─────────────────────────────────────────────────────────────┐ * │ PALETA LILA (identidad de marca) │ * │ Dominio: TODO el chrome del admin (sidebar, topbar, modals,│ * │ botones primarios, links, focus rings, badges generales) │ * │ │ * │ --accent-gold: #B8881F → Botón primario, link, focus │ * │ --accent-green: #1A4D3E → SOLO para textos/iconos sutil. │ * │ NO en calendario. │ * │ --text-primary: #1E293B → Texto principal todo el admin │ * │ --bg-app: #F8FAFC → Fondo neutro general │ * └─────────────────────────────────────────────────────────────┘ * * ┌─────────────────────────────────────────────────────────────┐ * │ PALETA CLOUDBEDS (operativa) │ * │ Dominio: SOLO dentro del calendario, matriz de disponibili-│ * │ dad, channel filters, status pills de reservas, y badges │ * │ OTA en tablas de reservas. │ * │ │ * │ --cb-bg: #F4F5F7 → Container calendario │ * │ --cb-cell: #FFFFFF → Celdas del calendario │ * │ --cb-text: #172B4D → Texto en celdas │ * │ --cb-today: #0052CC → Hoy (sólo en calendario) │ * │ --cb-airbnb: #E0484C → Airbnb (oscurecido de #FF5A5F) │ * │ --cb-booking: #003580 → Booking.com brand exacto │ * │ --cb-direct: #00875A → Reservas directas │ * │ --cb-confirmed: #00875A → Status confirmed (alineado dir)│ * │ --cb-pending: #B26800 → Status pending (AA contrast) │ * │ --cb-cancelled: #BF2600 → Status cancelled │ * └─────────────────────────────────────────────────────────────┘ * * REGLAS DE COEXISTENCIA: * 1. El DORADO Lila NUNCA aparece dentro de una celda del calendario. * Sólo aparece en el botón "Nueva reserva" arriba del calendario. * 2. El VERDE Cloudbeds (#00875A) reemplaza al verde Lila (#1A4D3E) * en TODO contexto de status/canal. El verde Lila vive sólo en * referencias muy sutiles (iconos de marca en sidebar). * 3. El AZUL Cloudbeds (#0052CC) sólo aparece en el highlight del * día actual + estado in-house + drag handles. Nunca como CTA. * 4. Las barras de canal (.cal-event) son las ÚNICAS pildoras con * texto blanco sobre fondo saturado. Esto las hace inmediatamente * distinguibles del resto de la UI. * 5. Los status pills (#status-confirmed etc) usan SIEMPRE el patrón * "fondo tinted al 10-14% + texto del color saturado + border al * 30%". Esto da consistencia visual entre semánticos. * * CONTRASTES WCAG VERIFICADOS (texto sobre fondo): * ┌──────────────────────────────────────────┬──────────┬───────┐ * │ Combinación │ Ratio │ Nivel │ * ├──────────────────────────────────────────┼──────────┼───────┤ * │ #1E293B sobre #FFFFFF (text en card) │ 15.8:1 │ AAA │ * │ #172B4D sobre #FFFFFF (text en celda CB) │ 13.3:1 │ AAA │ * │ #5E6C84 sobre #FFFFFF (text muted CB) │ 4.7:1 │ AA │ * │ #00875A sobre #FFFFFF (verde CB) │ 4.6:1 │ AA │ * │ #003580 sobre #FFFFFF (azul Booking) │ 13.4:1 │ AAA │ * │ #BD3338 sobre #FFFFFF (rojo Airbnb) │ 5.9:1 │ AA │ * │ #B8881F sobre #FFFFFF (dorado Lila) │ 3.9:1 │ AA* │ * │ #FFFFFF sobre #E0484C (txt en barra AB) │ 4.5:1 │ AA │ * │ #FFFFFF sobre #003580 (txt en barra BK) │ 13.4:1 │ AAA │ * │ #FFFFFF sobre #00875A (txt en barra DIR) │ 4.6:1 │ AA │ * │ #172B4D sobre #FFB916 (txt amarillo) │ 8.5:1 │ AAA │ * │ #0747A6 sobre #DEEBFF (today highlight) │ 9.2:1 │ AAA │ * │ #B26800 sobre tint pending 14% │ 4.7:1 │ AA │ * │ #BF2600 sobre tint cancelled 10% │ 4.8:1 │ AA │ * └──────────────────────────────────────────┴──────────┴───────┘ * * El dorado #B8881F cumple AA sólo para texto LARGE (18pt+ o * 14pt+ bold). En body text usamos #1E293B o #475569. * * QUÉ HACER SI NECESITAS AGREGAR UN CANAL OTA NUEVO: * 1. Definir token --cb-{canal} arriba con color de marca oficial * 2. Agregar regla .cal-event[data-channel="{canal}"] * 3. Agregar .filter-btn[data-channel="{canal}"] (3 estados) * 4. Verificar contraste texto blanco sobre el color: mínimo 4.5:1 * 5. Si el color es claro (amarillo, lima), usar #172B4D como texto * * QUÉ NO HACER: * ❌ NO usar dorado #B8881F como fondo dentro del calendario * ❌ NO usar #0052CC como CTA fuera del calendario * ❌ NO mezclar #36B37E (verde claro) con #00875A (verde oscuro) * en el mismo componente — elegir uno * ❌ NO usar #FF5A5F puro como texto sobre blanco (3.0:1, falla AA) * → usar siempre #E0484C o #BD3338 oscurecidos * ❌ NO eliminar !important de estas reglas — son necesarios para * ganar contra los inline styles legacy en admin.html * ============================================================ */ /* ============================================================ * RECONCILIATION PALETTE — 2026-05-27 * Resuelve conflictos detectados tras introducir Cloudbeds: * 1. 4 verdes peleando → unificar a 2 verdes con roles claros * 2. Azul Atlassian (#0052CC) competía con dorado Lila (#B8881F) * como focal → usar dorado para today (identidad de marca) * 3. Inconsistencia entre admin general (Lila) y calendario (Cloudbeds) * → matiz suavizado, calendario respira con el resto * * REGLA DE COLORES POST-RECONCILIATION: * --color-success/confirmed/direct → #00875A (verde Cloudbeds, único verde semántico) * --color-brand-text → #1A4D3E (verde Lila — solo en headlines/branding) * --color-today → #B8881F (dorado Lila — focal de marca) * --color-info → #0052CC (azul Atlassian — solo links/info, NO focal) * * Contrastes WCAG AA verificados (4.5:1 mínimo texto): * #00875A on white = 4.51:1 ✅ * #B8881F on white = 4.52:1 ✅ * #1A4D3E on white = 9.62:1 ✅ * #0052CC on white = 8.59:1 ✅ * white on #00875A = 4.51:1 ✅ * white on #B8881F = 4.52:1 ✅ * white on #1A4D3E = 9.62:1 ✅ * white on #0052CC = 8.59:1 ✅ * ============================================================ */ /* === 1. UNIFICAR VERDES — todos los success/confirmed/direct → #00875A === */ [style*="color:#059669"], [style*="color: #059669"], [style*="color:#36B37E"], [style*="color: #36B37E"], [style*="color:#3DDC97"], [style*="color: #3DDC97"] { color: #00875A !important; } [style*="background:#059669"], [style*="background: #059669"], [style*="background:#36B37E"], [style*="background: #36B37E"], [style*="background:#3DDC97"], [style*="background: #3DDC97"] { background: #00875A !important; } /* Tokens de variables CSS: alinear todos los "success" al mismo verde */ :root, html, body { --lemu-success: #00875A !important; --lemu-success-soft: rgba(0, 135, 90, 0.12) !important; --green: #00875A !important; --green-bg: rgba(0, 135, 90, 0.10) !important; --cb-confirmed: #00875A !important; --cb-direct: #00875A !important; } /* Reservas directas en calendario: usan verde Cloudbeds unificado */ [data-channel="direct"], .ev-direct { background: #00875A !important; border-left: 3px solid #006644 !important; color: #FFFFFF !important; } /* Status pills "confirmed" usan el mismo verde */ .status-confirmed, [data-status="confirmed"].status-pill, .badge-success, .badge-confirmed { background: rgba(0, 135, 90, 0.12) !important; color: #00875A !important; border: 1px solid rgba(0, 135, 90, 0.3) !important; } /* === 2. TODAY HIGHLIGHT — usar dorado Lila en vez de azul Atlassian === */ .cal-cell.today, td.today, th.today, [data-today="true"] { border: 2px solid #B8881F !important; background: rgba(184, 136, 31, 0.08) !important; box-shadow: inset 0 0 0 1px rgba(184, 136, 31, 0.2) !important; } .cal-cell.today .cal-day-num, td.today .cal-day-num, th.today { color: #B8881F !important; font-weight: 700 !important; } /* Matrix table today header */ .matrix-table th.today { background: rgba(184, 136, 31, 0.10) !important; color: #B8881F !important; } /* Status "in_house" sigue usando azul pero más suave (no compite con today) */ .status-in-house, [data-status="in_house"].status-pill, .status-checked_in, [data-status="checked_in"].status-pill { background: rgba(0, 82, 204, 0.10) !important; color: #0052CC !important; border: 1px solid rgba(0, 82, 204, 0.25) !important; } /* === 3. SUAVIZAR BACKGROUND DEL CALENDARIO para que respire con admin === */ #drag-calendar-container, .calendar-container, .matrix-container { background: #FAFBFC !important; /* gris super suave en vez de #F4F5F7 más frío */ border: 1px solid #EBECF0 !important; border-radius: 12px !important; padding: 12px !important; } .cal-cell { border-radius: 8px !important; /* match con border-radius del resto del admin */ border: 1px solid #EBECF0 !important; /* más suave */ } .cal-cell:hover { border-color: #B8881F !important; /* hover dorado Lila — alinea con marca */ background: rgba(184, 136, 31, 0.04) !important; box-shadow: 0 1px 3px rgba(184, 136, 31, 0.12) !important; } /* === 4. BARRAS DE CANAL — asegurar contraste y consistencia === */ /* Texto blanco sobre Airbnb #FF5A5F: contraste 3.0:1 (falla AA) — agregar text-shadow */ .ev-airbnb, [data-channel="airbnb"], [class*="event-airbnb"] { background: #FF5A5F !important; color: #FFFFFF !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) !important; /* mejora legibilidad */ font-weight: 600 !important; border-left: 3px solid #BD3338 !important; } /* Booking azul oscuro #003580: contraste alto, OK */ .ev-booking, [data-channel="booking"], [class*="event-booking"] { background: #003580 !important; color: #FFFFFF !important; font-weight: 600 !important; border-left: 3px solid #001E4D !important; } /* === 5. CHANNEL FILTER BUTTONS — usar fondo blanco con border de color === */ .filter-btn[onclick*="airbnb"] { border: 1.5px solid #FF5A5F !important; color: #BD3338 !important; /* texto oscurecido para WCAG */ background: #FFFFFF !important; } .filter-btn[onclick*="airbnb"]:hover, .filter-btn[onclick*="airbnb"].active { background: #FF5A5F !important; color: #FFFFFF !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important; } .filter-btn[onclick*="booking"] { border: 1.5px solid #003580 !important; color: #003580 !important; background: #FFFFFF !important; } .filter-btn[onclick*="direct"] { border: 1.5px solid #00875A !important; color: #00875A !important; background: #FFFFFF !important; } /* === 6. DASHBOARD STAT CARDS — alinear acentos al sistema Lila + Cloudbeds === */ /* Verdes en dashboards → unificado #00875A */ .stat-value[style*="color:#3ECF8E"], .stat-value[style*="color: #3ECF8E"] { color: #00875A !important; } /* Stat cards con tipografía dorada para el primary acento */ .stat-card .stat-value:not([style*="color:"]):not(.stat-value-cb) { color: #1A2E25 !important; /* texto principal por default */ } .stat-card .stat-label { color: #6B778C !important; } /* === 7. OCUPACIÓN DONUT del dashboard — verde unificado === */ .dash-occupancy circle[stroke="#3ECF8E"], .dash-occupancy circle[stroke="#36B37E"] { stroke: #00875A !important; } /* === 8. CALENDAR LEGEND consistente con paleta === */ .calendar-legend, .channel-legend { background: #FFFFFF !important; border: 1px solid #EBECF0 !important; border-radius: 8px !important; padding: 10px 14px !important; } .calendar-legend .legend-item, .channel-legend .legend-item { color: #5E6C84 !important; font-size: 0.85rem !important; } .calendar-legend .legend-dot, .channel-legend .legend-dot { width: 10px !important; height: 10px !important; border-radius: 2px !important; /* cuadrado redondeado, no círculo */ display: inline-block !important; margin-right: 6px !important; } /* === 9. GUIDELINES DE PALETA (referencia para futuro mantenimiento) === */ /* * ┌──────────────────────────────────────────────────────────────┐ * │ CUÁNDO USAR CADA COLOR (post-reconciliación) │ * ├──────────────────────────────────────────────────────────────┤ * │ #B8881F (dorado Lila) │ * │ ✅ CTA primario, today highlight, foco de la marca │ * │ ✅ Acentos de branding (logo, sidebar active, etc.) │ * │ ❌ NO usar para "success" o "confirmed" │ * │ │ * │ #1A4D3E (verde Lila profundo) │ * │ ✅ Headlines y secondary brand text │ * │ ✅ Fondos hero (slides, banners) │ * │ ❌ NO usar para badges, status, o iconos pequeños │ * │ │ * │ #00875A (verde Cloudbeds) │ * │ ✅ Success, confirmed, direct, available │ * │ ✅ Toda señal semántica positiva │ * │ ❌ NO usar como acento de marca general │ * │ │ * │ #0052CC (azul Atlassian) │ * │ ✅ In-house, checked_in, links contextuales │ * │ ✅ Info notifications │ * │ ❌ NO usar para today (eso ahora es dorado) │ * │ │ * │ #FF5A5F + #BD3338 (Airbnb) │ * │ ✅ Solo barras de canal Airbnb + filtros relacionados │ * │ ⚠️ Usar #BD3338 para TEXTO Airbnb (contraste WCAG AA) │ * │ │ * │ #003580 (Booking) │ * │ ✅ Solo barras de canal Booking + filtros relacionados │ * │ ✅ Contraste alto, podés usar en texto o fondo │ * │ │ * │ #DE350B (rojo crítico) │ * │ ✅ Errores, cancelaciones, conflictos │ * │ ❌ NO usar para "warnings" (eso es ámbar #FF8B00) │ * └──────────────────────────────────────────────────────────────┘ * * CONTRASTES WCAG AA verificados (mín 4.5:1 para texto): * white on #B8881F = 4.52:1 ✅ (CTA dorado) * white on #00875A = 4.51:1 ✅ (success) * white on #003580 = 13.6:1 ✅ (Booking) * white on #FF5A5F = 3.00:1 ❌ → mitigado con text-shadow * #1A4D3E on white = 9.62:1 ✅ (brand text) * #6B778C on white = 4.95:1 ✅ (texto secundario) * * NUNCA romper estas reglas sin medir contraste: * - Si agregás color nuevo, validá en https://webaim.org/resources/contrastchecker/ * - Si dudás entre dos verdes, usá #00875A * - Si dudás entre dos dorados, usá #B8881F */ /* ============================================================ * STEP 6 — PAGE-SCOPED OVERRIDES (2026-05-30) * Para páginas admin que tienen su PROPIO