/* ═══════════════════════════════════════════════════════════════════ TEMA "CUPERTINO" — estilo Apple (multi-diseño SaaS) Contrato: este archivo solo se carga cuando hotel_branding.tema = 'cupertino' (header.php / login.php emiten data-tema en y enlazan css/temas/.css al final del ). Palanca principal: voltear los NEUTRALES --brand-* / --hotel-* / --sr-* a la paleta Apple (gris perla + blanco + tinta), igual que hace dark-theme.css con el modo oscuro. La identidad del hotel (--brand-primary/-accent y --brand-action-*) se conserva: los botones y acentos se tiñen del color de cada negocio. Los literales cálidos con gradiente/textura del Deleite Sereno se aplanan aquí con la misma especificidad + !important que usa la base. Claro por defecto; el bloque final ajusta modo oscuro (Apple dark). Revertir: cambiar el tema del hotel a 'deleite' (no borra nada). ═══════════════════════════════════════════════════════════════════ */ /* ── 1. Neutrales de marca: paleta Apple claro ─────────────────────── */ html[data-tema="cupertino"]:not([data-theme="dark"]) { --brand-surface: #FFFFFF; --brand-surface-soft: #F5F5F7; --brand-soft: color-mix(in srgb, var(--brand-primary, #0071E3) 8%, #F5F5F7); --brand-text: #1D1D1F; --brand-muted: #6E6E73; --brand-border: #E8E8ED; --brand-line: #D2D2D7; --brand-focus: color-mix(in srgb, var(--brand-primary, #0071E3) 30%, #FFFFFF); } /* ── 2. Tipografía del sistema: SF en Apple, Inter/Segoe en el resto ── */ html[data-tema="cupertino"] body.hotel-layout-scope { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; letter-spacing: 0; } html[data-tema="cupertino"] .hotel-layout-scope h1, html[data-tema="cupertino"] .hotel-layout-scope h2, html[data-tema="cupertino"] .hotel-layout-scope h3, html[data-tema="cupertino"] .hotel-layout-scope .font-playfair { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif !important; letter-spacing: -0.015em; } /* ── 3. Lienzo: gris perla plano, sin textura ni destello dorado ───── */ html[data-tema="cupertino"]:not([data-theme="dark"]) body.hotel-layout-scope { --hotel-bg: #F5F5F7; --hotel-panel: #FFFFFF; --hotel-text: #1D1D1F; --hotel-muted: #6E6E73; --hotel-border: #E8E8ED; --hotel-line: #D2D2D7; --hotel-brand-soft: color-mix(in srgb, var(--hotel-brand) 9%, #F5F5F7); --hotel-ink: #1D1D1F; --hotel-ink-soft: #48484A; --hotel-state-blue: #0071E3; --hotel-state-green: #34C759; --hotel-state-amber: #FF9500; --hotel-state-red: #FF3B30; --hotel-state-violet: #AF52DE; background: var(--hotel-bg) !important; } @media (min-width: 1025px) { html[data-tema="cupertino"]:not([data-theme="dark"]) body.hotel-layout-scope { background: var(--hotel-bg) !important; } } /* ── 3b. Skeleton de carga global (#psk): mismo lienzo Apple ───────── */ /* El overlay de header.php trae blanco cálido Deleite (#FCFBF7) y huesos gris genérico; aquí se voltea al gris perla / grafito de Cupertino. */ html[data-tema="cupertino"]:not([data-theme="dark"]) #psk { background: #F5F5F7; } html[data-tema="cupertino"]:not([data-theme="dark"]) .psk-bone { background: linear-gradient(90deg, #E8E8ED 25%, #F2F2F6 50%, #E8E8ED 75%); background-size: 1200px 100%; } html[data-tema="cupertino"]:not([data-theme="dark"]) .psk-row { border-bottom-color: #E8E8ED; } html[data-tema="cupertino"]:not([data-theme="dark"]) .psk-fieldset { border-color: #E8E8ED; } html[data-theme="dark"][data-tema="cupertino"] #psk { background: #000000; } html[data-theme="dark"][data-tema="cupertino"] .psk-bone { background: linear-gradient(90deg, #1C1C1E 25%, #2C2C2E 50%, #1C1C1E 75%); background-size: 1200px 100%; } html[data-theme="dark"][data-tema="cupertino"] .psk-fieldset { border-color: #38383A; } @media (prefers-reduced-motion: reduce) { html[data-tema="cupertino"]:not([data-theme="dark"]) .psk-bone { animation: none; background: #E8E8ED; } html[data-theme="dark"][data-tema="cupertino"] .psk-bone { animation: none; background: #1C1C1E; } } /* ── 4. Header escritorio: vidrio esmerilado ───────────────────────── */ @media (min-width: 1025px) { html[data-tema="cupertino"]:not([data-theme="dark"]) body.hotel-layout-scope .hotel-header { background: rgba(255, 255, 255, .72) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08) !important; box-shadow: none !important; } } html[data-tema="cupertino"] .hotel-layout-scope .hotel-header-status, html[data-tema="cupertino"] .hotel-layout-scope .hotel-header-user { border-radius: 999px; color: var(--hotel-ink-soft); font-weight: 600; } html[data-tema="cupertino"] .hotel-layout-scope .hotel-header-kicker { font-weight: 600; letter-spacing: .04em; } html[data-tema="cupertino"] .hotel-layout-scope .hotel-header-name, html[data-tema="cupertino"] .hotel-layout-scope .hotel-header-page h1 { font-weight: 700; letter-spacing: -0.015em; } /* ── 5. Sidebar: superficie plana, marca sans, sin ornamento oro ───── */ html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .hotel-sidebar, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope #sidebar.hotel-sidebar { background: #FFFFFF !important; border-right: 1px solid var(--hotel-border, #E8E8ED) !important; box-shadow: none !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope #sidebar.hotel-sidebar .sidebar-header::after { background: var(--hotel-border, #E8E8ED); height: 1px; opacity: 1; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .hotel-boutique-mark { border-radius: 14px; border-color: var(--hotel-border, #E8E8ED); background: #F5F5F7; box-shadow: none; } html[data-tema="cupertino"] .hotel-layout-scope .hotel-boutique-name { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--hotel-text) !important; } /* La regla ornamental oro→navy es lenguaje Deleite: aquí desaparece. */ html[data-tema="cupertino"] .hotel-layout-scope .hotel-boutique-rule { display: none !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope #sidebar.hotel-sidebar .search-box { border: 1px solid transparent !important; border-radius: 10px !important; background: #EDEDF0 !important; box-shadow: none !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope #sidebar.hotel-sidebar .search-box:focus-within { border-color: color-mix(in srgb, var(--hotel-brand) 45%, transparent) !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hotel-brand) 16%, transparent) !important; } /* ── 6. Rail + flyout: tokens --sr-* en neutrales Apple ────────────── */ html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope #sidebar.hotel-sidebar, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .ms-rail-fly { --sr-ivory: #F5F5F7; --sr-ivory-2: #F5F5F7; --sr-surface: #FFFFFF; --sr-surface-warm: #F5F5F7; --sr-line: #E8E8ED; --sr-line-soft: #EDEDF0; --sr-ink: #1D1D1F; --sr-muted: #6E6E73; --sr-gold-bg: color-mix(in srgb, var(--sr-primary) 10%, #F5F5F7); --sr-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --sr-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06); --sr-shadow-lg: 0 2px 6px rgba(0, 0, 0, .05), 0 20px 44px rgba(0, 0, 0, .12); } /* Color propio por sección para el flyout Liquid Glass (Apple). El JS (sidebar-rail.js) pone data-clave al abrir; ambos modos heredan --fly-accent. Tintes sutiles del sistema Apple = señalética por área, no cromado de marca. */ html[data-tema="cupertino"] .ms-rail-fly, html[data-tema="cupertino"] .ms-rail-g { --fly-accent: #0A84FF; } html[data-tema="cupertino"] .ms-rail-fly[data-clave="dashboard"], html[data-tema="cupertino"] .ms-rail-g[data-clave="dashboard"] { --fly-accent: #0A84FF; } html[data-tema="cupertino"] .ms-rail-fly[data-clave="gestion"], html[data-tema="cupertino"] .ms-rail-g[data-clave="gestion"] { --fly-accent: #5E5CE6; } html[data-tema="cupertino"] .ms-rail-fly[data-clave="finanzas"], html[data-tema="cupertino"] .ms-rail-g[data-clave="finanzas"] { --fly-accent: #34C759; } html[data-tema="cupertino"] .ms-rail-fly[data-clave="operacion-interna"], html[data-tema="cupertino"] .ms-rail-g[data-clave="operacion-interna"] { --fly-accent: #FF9500; } html[data-tema="cupertino"] .ms-rail-fly[data-clave="ventas"], html[data-tema="cupertino"] .ms-rail-g[data-clave="ventas"] { --fly-accent: #FF2D55; } html[data-tema="cupertino"] .ms-rail-fly[data-clave="admin"], html[data-tema="cupertino"] .ms-rail-g[data-clave="admin"] { --fly-accent: #AF52DE; } html[data-tema="cupertino"] .ms-rail-fly[data-clave="config"], html[data-tema="cupertino"] .ms-rail-g[data-clave="config"] { --fly-accent: #8E8E93; } @media (min-width: 1025px) { html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g { border-radius: 10px; font-weight: 500; letter-spacing: 0; } /* Apple no desliza: los estados viven en el fondo, no en la posición. */ html[data-tema="cupertino"] .ms-rail-g:hover, html[data-tema="cupertino"] .ms-rail-g.ms-open, html[data-tema="cupertino"] .ms-rail-g.ms-pinned, html[data-tema="cupertino"] .ms-rail-fi:hover { transform: none; } /* Botones del rail: mismo cristal esmerilado, teñido por su sección. Viven sobre la sidebar blanca sólida, así que el glass se lee como pastilla frosted con color propio (no como transparencia real). */ html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g:hover, html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g.ms-open { background: radial-gradient(130% 120% at 0% 50%, color-mix(in srgb, var(--fly-accent) 14%, transparent), transparent 72%), color-mix(in srgb, var(--fly-accent) 7%, rgba(255, 255, 255, .55)); border-color: color-mix(in srgb, var(--fly-accent) 22%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g.ms-on { background: radial-gradient(130% 120% at 0% 50%, color-mix(in srgb, var(--fly-accent) 22%, transparent), transparent 74%), color-mix(in srgb, var(--fly-accent) 12%, rgba(255, 255, 255, .65)); border-color: color-mix(in srgb, var(--fly-accent) 30%, transparent); color: var(--sr-primary); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 12px color-mix(in srgb, var(--fly-accent) 16%, transparent); } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g.ms-on::before { background: linear-gradient(180deg, var(--fly-accent), color-mix(in srgb, var(--fly-accent) 55%, var(--sr-primary))); opacity: 1; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g.ms-pinned { background: radial-gradient(130% 120% at 0% 50%, color-mix(in srgb, var(--fly-accent) 18%, transparent), transparent 74%), color-mix(in srgb, var(--fly-accent) 10%, rgba(255, 255, 255, .6)); border-color: color-mix(in srgb, var(--fly-accent) 40%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fly-accent) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .8); } /* Ícono del rail toma el color de su sección en hover/activo/fijado */ html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g:hover .ms-rail-ic, html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g.ms-open .ms-rail-ic, html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g.ms-on .ms-rail-ic, html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-g.ms-pinned .ms-rail-ic { color: var(--fly-accent); } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-ic, html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-fi i { color: #86868B; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-ch { color: #AEAEB2; opacity: .8; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-badge { background: var(--sr-primary); box-shadow: none; } /* ── Liquid Glass (Apple) — flyout de Cupertino ──────────────────── Cristal marcado: desenfoque alto + saturación, rim especular y un halo del color de la sección (--fly-accent, según data-clave). Revertir a lo anterior: background rgba(255,255,255,.86) + blur(22px) y quitar ::before. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-fly { border-radius: 22px; border: 1px solid rgba(255, 255, 255, .4); /* Cristal esmerilado: blanco muy translúcido + doble bruma de color de la sección; el fondo se ve difuso a través (blur alto + brillo). */ background: radial-gradient(135% 100% at 50% -12%, color-mix(in srgb, var(--fly-accent) 20%, transparent), transparent 68%), radial-gradient(120% 92% at 85% 118%, color-mix(in srgb, var(--fly-accent) 13%, transparent), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); -webkit-backdrop-filter: saturate(150%) brightness(1.08) blur(44px); backdrop-filter: saturate(150%) brightness(1.08) blur(44px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), inset 0 -26px 44px rgba(255, 255, 255, .1), 0 8px 24px rgba(0, 0, 0, .07), 0 26px 60px color-mix(in srgb, var(--fly-accent) 18%, transparent); } /* Filo suave teñido por la sección (sin rim duro: borde esmerilado) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-fly::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .08) 30%, transparent 58%, color-mix(in srgb, var(--fly-accent) 30%, transparent) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-ft { font-size: .92rem; font-weight: 700; letter-spacing: -0.01em; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-ft::after { background: linear-gradient(90deg, var(--fly-accent), transparent); height: 2px; opacity: .6; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-fi { border-radius: 9px; font-weight: 500; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-fi:hover { background: color-mix(in srgb, var(--fly-accent) 14%, rgba(255, 255, 255, .06)); border-color: color-mix(in srgb, var(--fly-accent) 16%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-fi:hover i { color: var(--fly-accent); } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-fi.ms-on { background: color-mix(in srgb, var(--fly-accent) 20%, rgba(255, 255, 255, .1)); border-color: color-mix(in srgb, var(--fly-accent) 28%, transparent); color: var(--sr-ink); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); } html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-rail-fi.ms-on i { color: var(--fly-accent); } } /* ── 7. Navegación clásica (móvil / fallback): selección plana ─────── */ html[data-tema="cupertino"] .hotel-layout-scope .hotel-sidebar .nav-item { border-radius: 10px !important; font-weight: 500 !important; } html[data-tema="cupertino"] .hotel-layout-scope .hotel-sidebar .nav-item:hover { background: #EDEDF0 !important; transform: none !important; } html[data-tema="cupertino"] .hotel-layout-scope .hotel-sidebar .nav-item.active { background: var(--hotel-brand) !important; box-shadow: none !important; transform: none !important; font-weight: 600 !important; } html[data-tema="cupertino"] .hotel-layout-scope .hotel-sidebar .nav-item.active::after { display: none !important; } html[data-tema="cupertino"] .hotel-layout-scope .hotel-sidebar .nav-icon { border-radius: 8px !important; background: #F5F5F7 !important; box-shadow: none !important; } html[data-tema="cupertino"] .hotel-layout-scope .hotel-sidebar .nav-item.active .nav-icon { background: rgba(255, 255, 255, .2) !important; box-shadow: none !important; transform: none !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope #sidebar.hotel-sidebar .user-section { border-radius: 14px !important; background: #F5F5F7 !important; border-color: transparent !important; box-shadow: none !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .hotel-sidebar .user-avatar { border-radius: 999px !important; background: var(--hotel-brand) !important; color: #FFFFFF !important; } /* ── 8. Header móvil: vidrio claro, tinta oscura ───────────────────── */ @media (max-width: 1024px) { html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .mobile-header-modern { background: rgba(255, 255, 255, .8) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); box-shadow: none; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .mobile-menu-toggle, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .mobile-header-actions button { border: 0; border-radius: 999px; background: rgba(0, 0, 0, .05); color: #1D1D1F; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .mobile-header-name { color: #1D1D1F; font-weight: 700; letter-spacing: -0.015em; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope #pwa-sync-indicator { background: rgba(0, 0, 0, .05); color: #6E6E73; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .scroll-progress { background: var(--hotel-brand, #0071E3); } } /* ── 9. Acción primaria: relleno plano y píldora ───────────────────── */ html[data-tema="cupertino"] .hotel-layout-scope .hotel-btn-primary, html[data-tema="cupertino"] .hotel-layout-scope .guest-filter-btn.hotel-btn-primary, html[data-tema="cupertino"] .hotel-layout-scope .facturacion-view .filter-actions button[type="submit"], html[data-tema="cupertino"] .hotel-layout-scope .inv-page .btn-inv.primary { background: var(--hotel-brand) !important; border-radius: 999px !important; box-shadow: none !important; } /* ── 10. Utilidades Tailwind cálidas → neutrales Apple ─────────────── */ html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .bg-hotel-cream, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .bg-hotel-beige { background-color: #F5F5F7; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .bg-gray-100 { background-color: #F5F5F7; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .bg-white { background-color: #FFFFFF; } /* ── 11. Barras de desplazamiento discretas (WebKit) ───────────────── */ html[data-tema="cupertino"] .hotel-layout-scope ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-tema="cupertino"] .hotel-layout-scope ::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(0, 0, 0, .18); } html[data-tema="cupertino"] .hotel-layout-scope ::-webkit-scrollbar-track { background: transparent; } /* ── 12. Modo oscuro Cupertino: Apple dark (negro + grafito) ───────── */ html[data-theme="dark"][data-tema="cupertino"] { --brand-surface: #1C1C1E; --brand-surface-soft: #000000; --brand-soft: color-mix(in srgb, var(--brand-primary, #0A84FF) 24%, #1C1C1E); --brand-text: #F5F5F7; --brand-muted: #98989D; --brand-border: #38383A; --brand-line: #48484A; --brand-focus: color-mix(in srgb, var(--brand-primary, #0A84FF) 40%, #1C1C1E); } html[data-theme="dark"][data-tema="cupertino"] body.hotel-layout-scope { --hotel-bg: #000000; --hotel-panel: #1C1C1E; --hotel-text: #F5F5F7; --hotel-muted: #98989D; --hotel-border: #38383A; --hotel-line: #48484A; --hotel-ink: #F5F5F7; --hotel-ink-soft: #C7C7CC; --hotel-brand-soft: color-mix(in srgb, var(--hotel-brand) 24%, #1C1C1E); --hotel-state-blue: #0A84FF; --hotel-state-green: #30D158; --hotel-state-amber: #FF9F0A; --hotel-state-red: #FF453A; --hotel-state-violet: #BF5AF2; background: var(--hotel-bg) !important; } @media (min-width: 1025px) { html[data-theme="dark"][data-tema="cupertino"] body.hotel-layout-scope { background: var(--hotel-bg) !important; } html[data-theme="dark"][data-tema="cupertino"] body.hotel-layout-scope .hotel-header { background: rgba(22, 22, 23, .72) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: none !important; } } html[data-theme="dark"][data-tema="cupertino"] body.hotel-layout-scope .hotel-sidebar, html[data-theme="dark"][data-tema="cupertino"] body.hotel-layout-scope .sidebar-main, html[data-theme="dark"][data-tema="cupertino"] body.hotel-layout-scope #sidebar.hotel-sidebar { background: #161617 !important; border-right: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-g:hover, html[data-theme="dark"][data-tema="cupertino"] .ms-rail-g.ms-open { background: color-mix(in srgb, var(--fly-accent) 16%, rgba(255, 255, 255, .04)); border-color: color-mix(in srgb, var(--fly-accent) 24%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-g.ms-on { background: color-mix(in srgb, var(--fly-accent) 24%, rgba(255, 255, 255, .05)); border-color: color-mix(in srgb, var(--fly-accent) 34%, transparent); color: #F5F5F7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 12px color-mix(in srgb, var(--fly-accent) 22%, transparent); } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-g.ms-on::before { background: linear-gradient(180deg, var(--fly-accent), color-mix(in srgb, var(--fly-accent) 60%, #FFFFFF)); } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-g.ms-pinned { background: color-mix(in srgb, var(--fly-accent) 18%, rgba(255, 255, 255, .05)); border-color: color-mix(in srgb, var(--fly-accent) 40%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fly-accent) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1); } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-g:hover .ms-rail-ic, html[data-theme="dark"][data-tema="cupertino"] .ms-rail-g.ms-open .ms-rail-ic, html[data-theme="dark"][data-tema="cupertino"] .ms-rail-g.ms-on .ms-rail-ic, html[data-theme="dark"][data-tema="cupertino"] .ms-rail-g.ms-pinned .ms-rail-ic { color: color-mix(in srgb, var(--fly-accent) 70%, #FFFFFF); } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-fly { border-radius: 22px; background: radial-gradient(135% 100% at 50% -12%, color-mix(in srgb, var(--fly-accent) 30%, transparent), transparent 66%), radial-gradient(120% 92% at 85% 118%, color-mix(in srgb, var(--fly-accent) 18%, transparent), transparent 60%), linear-gradient(180deg, rgba(72, 72, 76, .08), rgba(28, 28, 30, .14)); -webkit-backdrop-filter: saturate(180%) brightness(1.05) blur(44px); backdrop-filter: saturate(180%) brightness(1.05) blur(44px); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 30px rgba(0, 0, 0, .4), 0 26px 60px color-mix(in srgb, var(--fly-accent) 26%, transparent); } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-fly::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .06) 30%, transparent 55%, color-mix(in srgb, var(--fly-accent) 52%, transparent) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-ft::after { background: linear-gradient(90deg, var(--fly-accent), transparent); height: 2px; opacity: .7; } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-fi:hover { background: color-mix(in srgb, var(--fly-accent) 18%, rgba(255, 255, 255, .06)); border-color: color-mix(in srgb, var(--fly-accent) 26%, transparent); } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-fi.ms-on { background: color-mix(in srgb, var(--fly-accent) 26%, rgba(255, 255, 255, .06)); border-color: color-mix(in srgb, var(--fly-accent) 36%, transparent); } html[data-theme="dark"][data-tema="cupertino"] .ms-rail-fi:hover i, html[data-theme="dark"][data-tema="cupertino"] .ms-rail-fi.ms-on i { color: color-mix(in srgb, var(--fly-accent) 68%, #FFFFFF); } @media (max-width: 1024px) { html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .mobile-header-modern { background: rgba(22, 22, 23, .8) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .mobile-menu-toggle, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .mobile-header-actions button { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #F5F5F7; } } /* ═══ 13. LOGIN (pase 1) ════════════════════════════════════════════ El login vive fuera de .hotel-layout-scope y siempre es claro. Se aplana el panel héroe, se apagan las formas decorativas y el formulario adopta campos rellenos + botón píldora del color del negocio. */ html[data-tema="cupertino"] .login-wrapper .shape-bg, html[data-tema="cupertino"] .login-wrapper .geometric-pattern, html[data-tema="cupertino"] .login-wrapper .corner-decoration { display: none; } html[data-tema="cupertino"] .login-wrapper .left-panel { background: #F5F5F7; } html[data-tema="cupertino"] .login-wrapper .logo-wrapper { background: #FFFFFF; border: 1px solid #E8E8ED; border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06); } html[data-tema="cupertino"] .login-wrapper .brand-title { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; color: #1D1D1F; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #1D1D1F; text-shadow: none; } html[data-tema="cupertino"] .login-wrapper .brand-subtitle { color: #6E6E73; } html[data-tema="cupertino"] .login-wrapper .decorative-line { width: 44px; height: 4px; border-radius: 999px; background: var(--brand-primary, #0071E3); margin-left: auto; margin-right: auto; } html[data-tema="cupertino"] .login-wrapper .right-panel { background: #FFFFFF; } html[data-tema="cupertino"] .login-wrapper .form-title { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; color: #1D1D1F; } html[data-tema="cupertino"] .login-wrapper .form-subtitle { color: #6E6E73; } html[data-tema="cupertino"] .login-wrapper .form-label { color: #6E6E73; font-weight: 600; } html[data-tema="cupertino"] .login-wrapper .form-control { border-color: transparent; border-radius: 12px; background: #F5F5F7; color: #1D1D1F; } html[data-tema="cupertino"] .login-wrapper .form-control:focus { border-color: var(--brand-primary, #0071E3); background: #FFFFFF; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary, #0071E3) 16%, transparent); } html[data-tema="cupertino"] .login-wrapper .input-icon { color: #86868B; } html[data-tema="cupertino"] .login-wrapper .submit-btn { border-radius: 999px; background: var(--brand-primary, #0071E3); box-shadow: none; } html[data-tema="cupertino"] .login-wrapper .submit-btn:hover { background: color-mix(in srgb, var(--brand-primary, #0071E3) 88%, #000000); box-shadow: none; } html[data-tema="cupertino"] .login-wrapper .forgot-password { color: var(--brand-primary, #0071E3); } html[data-tema="cupertino"] .login-wrapper .remember-me input[type="checkbox"] { accent-color: var(--brand-primary, #0071E3); } html[data-tema="cupertino"] .login-wrapper .alert-message { border-radius: 12px; } /* ═══ 14. DASHBOARD (pase 1): tokens --dash-* a neutrales Apple ═════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) { --dash-ivory: #F5F5F7; --dash-ivory-2: #FAFAFC; --dash-surface: #FFFFFF; --dash-surface-warm: #F5F5F7; --dash-line: #E8E8ED; --dash-line-soft: #EDEDF0; --dash-gold: var(--dash-primary); --dash-gold-mid: color-mix(in srgb, var(--dash-primary) 70%, #FFFFFF); --dash-gold-soft: color-mix(in srgb, var(--dash-primary) 45%, #FFFFFF); --dash-gold-bg: color-mix(in srgb, var(--dash-primary) 10%, #F5F5F7); --dash-gold-line: #E8E8ED; } html[data-theme="dark"][data-tema="cupertino"] { --dash-ivory: #000000; --dash-ivory-2: #0A0A0B; --dash-surface: #1C1C1E; --dash-surface-warm: #161617; --dash-line: #38383A; --dash-line-soft: #2C2C2E; --dash-gold: var(--dash-primary); --dash-gold-mid: color-mix(in srgb, var(--dash-primary) 60%, #1C1C1E); --dash-gold-soft: color-mix(in srgb, var(--dash-primary) 40%, #1C1C1E); --dash-gold-bg: color-mix(in srgb, var(--dash-primary) 22%, #1C1C1E); --dash-gold-line: #38383A; } /* ═══ 15. RESERVACIONES (pase 1): tokens --res-* + lienzo plano ═════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .res-bookings { --res-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --res-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --res-bg: #F5F5F7; --res-card: #FFFFFF; --res-line: #E8E8ED; --res-soft: #F7F7F9; --res-heading: #1D1D1F; --res-text: #1D1D1F; --res-muted: #6E6E73; --res-radius: 16px; background: var(--res-bg); } html[data-theme="dark"][data-tema="cupertino"] .res-bookings { --res-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --res-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --res-bg: #000000; --res-card: #1C1C1E; --res-line: #38383A; --res-soft: #161617; --res-heading: #F5F5F7; --res-text: #F5F5F7; --res-muted: #98989D; --res-radius: 16px; background: var(--res-bg); } /* Botonera de reservaciones: píldoras planas; la primaria toma el color de acción del negocio (contraste garantizado por branding.php). */ html[data-tema="cupertino"] .res-bookings .res-btn { border-radius: 999px; font-weight: 600; } html[data-tema="cupertino"] .res-bookings .res-btn:hover { transform: none; box-shadow: none; } html[data-tema="cupertino"] .res-bookings .res-btn-primary { background: var(--brand-action-bg, var(--res-brand)); box-shadow: none; } html[data-tema="cupertino"] .res-bookings .res-btn-primary:hover { background: var(--brand-action-bg-hover, var(--res-brand-2)); } /* ═══ 16. HEROS CON FLECHA DE REGRESO (todas las vistas, no reportes) ═══ partials/back_arrow.php etiqueta el encabezado contenedor con data-ms-hero (excluye rutas de reportes y heros oscuros --glass; el dashboard no lleva flecha, así que nunca se etiqueta). Decisión de diseño (owner, 2026-07-10 — REEMPLAZA la banda de color anterior): fila Apple SILENCIOSA. Nada de banda: los elementos (flecha, migas, título, chips) viven directo sobre el lienzo, con título en tinta. Mismo lenguaje que la topbar de Caja que aprobó el owner. */ html[data-tema="cupertino"] .hotel-layout-scope [data-ms-hero] { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } html[data-tema="cupertino"] .hotel-layout-scope [data-ms-hero]::before, html[data-tema="cupertino"] .hotel-layout-scope [data-ms-hero]::after { display: none !important; } /* Títulos y subtítulos en tinta sobre el lienzo (claro) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope [data-ms-hero] h1, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope [data-ms-hero] h2, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope [data-ms-hero] h1 * { color: #1D1D1F !important; text-shadow: none !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope [data-ms-hero] > p, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope [data-ms-hero] .subtitle, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope [data-ms-hero] [class*="subtitle"], html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope [data-ms-hero] [class*="sub"] { color: #6E6E73 !important; text-shadow: none !important; } /* Y en tinta clara sobre el lienzo oscuro (Apple dark) */ html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope [data-ms-hero] h1, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope [data-ms-hero] h2, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope [data-ms-hero] h1 * { color: #F5F5F7 !important; text-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope [data-ms-hero] > p, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope [data-ms-hero] .subtitle, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope [data-ms-hero] [class*="subtitle"], html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope [data-ms-hero] [class*="sub"] { color: #98989D !important; text-shadow: none !important; } /* La flecha de regreso, versión Apple: círculo de vidrio con tinta. */ @media (max-width: 768px) { html[data-tema="cupertino"] .ms-back { border-radius: 999px; border: 1px solid rgba(0, 0, 0, .06); background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); color: #1D1D1F; box-shadow: none; } html[data-tema="cupertino"] .ms-back:active { background: #EDEDF0; color: #1D1D1F; } html[data-tema="cupertino"] .ms-back:focus-visible { outline: 2px solid var(--brand-primary, #0071E3); outline-offset: 2px; } html[data-tema="cupertino"] .ms-back--glass { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .16); color: #FFFFFF; } html[data-tema="cupertino"] .ms-back--glass:active { background: rgba(255, 255, 255, .3); color: #FFFFFF; } html[data-theme="dark"][data-tema="cupertino"] .ms-back { border-color: rgba(255, 255, 255, .12); background: rgba(28, 28, 30, .85); color: #F5F5F7; } html[data-theme="dark"][data-tema="cupertino"] .ms-back:active { background: #2C2C2E; color: #F5F5F7; } } /* ═══ 17. PÁGINA 404 (standalone, marcada con data-ms-error) ═══════ */ html[data-tema="cupertino"] body[data-ms-error] { background: #F5F5F7; } html[data-tema="cupertino"] body[data-ms-error] .e404-code { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #1D1D1F; color: #1D1D1F; } html[data-tema="cupertino"] body[data-ms-error] .e404-mark { background: #FFFFFF; border: 1px solid #E8E8ED; } html[data-tema="cupertino"] body[data-ms-error] a { border-radius: 999px !important; } /* ═══ 18. HABITACIONES (index) ══════════════════════════════════════ La vista trae su propia capa boutique (--hb-*, --serif, --bg-* de estados). Cupertino voltea esos tokens: lienzo gris perla plano, serif → sans (mata de un tiro números, stats y títulos de piso), tarjetas blancas donde el estado lo cuentan la cinta y el badge. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .habitaciones-view { --hb-ivory: #F5F5F7; --hb-ivory-2: #FAFAFC; --hb-surface: #FFFFFF; --hb-surface-warm: #F5F5F7; --hb-line: #E8E8ED; --hb-line-soft: #EDEDF0; --hb-slate-700: #48484A; --hb-slate-500: #6E6E73; --hb-slate-400: #86868B; --bg-available: color-mix(in srgb, var(--c-available) 8%, #FFFFFF); --bg-occupied: color-mix(in srgb, var(--c-occupied) 8%, #FFFFFF); --bg-arriving: color-mix(in srgb, var(--c-arriving) 8%, #FFFFFF); --bg-cleaning: color-mix(in srgb, var(--c-cleaning) 8%, #FFFFFF); --bg-maint: color-mix(in srgb, var(--c-maint) 8%, #FFFFFF); --bg-critical: color-mix(in srgb, var(--c-critical) 8%, #FFFFFF); --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --hb-shadow-xs: 0 1px 2px rgba(0, 0, 0, .04); --hb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .04); --hb-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px rgba(0, 0, 0, .06); --surface: #F5F5F7; --surface-card: #FFFFFF; --surface-hover: #EDEDF0; --border: #E8E8ED; --border-light: #EDEDF0; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04); --shadow-md: 0 4px 14px rgba(0, 0, 0, .06); --shadow-lg: 0 8px 28px rgba(0, 0, 0, .08); --shadow-xl: 0 16px 44px rgba(0, 0, 0, .1); background: #F5F5F7 !important; } html[data-tema="cupertino"] .habitaciones-view::before { display: none !important; } html[data-tema="cupertino"] .habitaciones-view .rc-num { font-weight: 700 !important; letter-spacing: -0.02em !important; } html[data-tema="cupertino"] .habitaciones-view .floor-t { font-weight: 700; letter-spacing: -0.015em; } html[data-tema="cupertino"]:not([data-theme="dark"]) .habitaciones-view .flip-card-front[class*="estado-"] { background: #FFFFFF !important; border: 1px solid #E8E8ED !important; box-shadow: none !important; } html[data-tema="cupertino"] .habitaciones-view .rc-badge { box-shadow: none !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .habitaciones-view .rc-room-fact { background: #F5F5F7 !important; border-color: #E8E8ED !important; box-shadow: none !important; } html[data-tema="cupertino"] .habitaciones-view .flip-card, html[data-tema="cupertino"] .habitaciones-view .room-card-compact { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 18px rgba(0, 0, 0, .05) !important; } html[data-tema="cupertino"] .habitaciones-view .room-card-compact:hover, html[data-tema="cupertino"] .habitaciones-view .room-card-compact.flipped:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 14px 34px rgba(0, 0, 0, .1) !important; } /* Modo oscuro Apple para habitaciones */ html[data-theme="dark"][data-tema="cupertino"] .habitaciones-view { --hb-ivory: #000000; --hb-ivory-2: #0A0A0B; --hb-surface: #1C1C1E; --hb-surface-warm: #161617; --hb-line: #38383A; --hb-line-soft: #2C2C2E; --hb-heading: #F5F5F7; --hb-slate-700: #D1D1D6; --hb-slate-500: #98989D; --hb-slate-400: #7C7C80; --bg-available: color-mix(in srgb, var(--c-available) 20%, #1C1C1E); --bg-occupied: color-mix(in srgb, var(--c-occupied) 20%, #1C1C1E); --bg-arriving: color-mix(in srgb, var(--c-arriving) 20%, #1C1C1E); --bg-cleaning: color-mix(in srgb, var(--c-cleaning) 20%, #1C1C1E); --bg-maint: color-mix(in srgb, var(--c-maint) 20%, #1C1C1E); --bg-critical: color-mix(in srgb, var(--c-critical) 20%, #1C1C1E); --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --surface: #000000; --surface-card: #1C1C1E; --surface-hover: #2C2C2E; --border: #38383A; --border-light: #2C2C2E; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .habitaciones-view .flip-card-front[class*="estado-"] { background: #1C1C1E !important; border: 1px solid #38383A !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .habitaciones-view .rc-room-fact { background: #2C2C2E !important; border-color: #38383A !important; box-shadow: none !important; color: #F5F5F7 !important; } /* El wrapper .flip-card es blanco de origen (padding 3px): en oscuro se funde con la cara grafito para no dejar anillo claro. */ html[data-theme="dark"][data-tema="cupertino"] .habitaciones-view .flip-card { background: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] .habitaciones-view #mainHeader { background: rgba(22, 22, 23, .72) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-color: #38383A !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .habitaciones-view #mainHeader h1 { color: #F5F5F7 !important; } /* En Cupertino el header no persigue el scroll: se queda arriba, en el flujo normal, y se va con el contenido (decisión del owner). */ html[data-tema="cupertino"] .habitaciones-view #mainHeader { position: static !important; top: auto !important; } /* ═══ 19. CAJA (index) ══════════════════════════════════════════════ Tokens --cj-* en :root; el héroe navy/oro pasa a tarjeta blanca con tinta, chips neutros y acciones semánticas en píldora. El serif de los montos muere con el token --cj-serif. Bonus: caja no tenía modo oscuro; bajo Cupertino estrena Apple dark. */ html[data-tema="cupertino"]:not([data-theme="dark"]) { --cj-ivory: #F5F5F7; --cj-line: #E8E8ED; --cj-muted: #6E6E73; --cj-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --cj-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --cj-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04); --cj-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .05); --cj-shadow-lg: 0 2px 6px rgba(0, 0, 0, .05), 0 18px 40px rgba(0, 0, 0, .08); } html[data-tema="cupertino"] .cj-page { background: var(--cj-ivory, #F5F5F7); } /* Header de Caja: en Cupertino se conserva el sello de marca del hotel — fondo en el color PRIMARIO + texto blanco. No se blanquea el header ni se oscurece el texto: los hijos (nombre, hotel, meta, estado) heredan el estilo base pensado para banda oscura (nombre blanco, pill verde claro). */ html[data-tema="cupertino"]:not([data-theme="dark"]) .cj-resh { background: radial-gradient(ellipse 60% 70% at 90% -5%, color-mix(in srgb, var(--cj-gold, #B0883F) 20%, transparent), transparent 55%), var(--brand-primary, #1D1D1F); border: 1px solid color-mix(in srgb, var(--brand-primary, #1D1D1F) 45%, transparent); } html[data-tema="cupertino"] .cj-back, html[data-tema="cupertino"] .cj-act-btn { border-radius: 999px; } html[data-tema="cupertino"] .cj-act-btn:hover { transform: none; filter: brightness(1.06); } /* Modo oscuro Apple para caja */ html[data-theme="dark"][data-tema="cupertino"] { --cj-ivory: #161617; --cj-surface: #1C1C1E; --cj-line: #38383A; --cj-text: #F5F5F7; --cj-muted: #98989D; --cj-on-dark: #F5F5F7; --cj-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --cj-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --cj-shadow-sm: none; --cj-shadow: 0 1px 2px rgba(0, 0, 0, .3); --cj-shadow-lg: 0 8px 30px rgba(0, 0, 0, .45); } html[data-theme="dark"][data-tema="cupertino"] .cj-page { background: #000000; } html[data-theme="dark"][data-tema="cupertino"] .cj-topbar { background: rgba(22, 22, 23, .72); border-bottom-color: #38383A; } html[data-theme="dark"][data-tema="cupertino"] .cj-resh { background: #1C1C1E; border: 1px solid #38383A; } html[data-theme="dark"][data-tema="cupertino"] .cj-resh-name { color: #F5F5F7; font-weight: 700; letter-spacing: -0.02em; } html[data-theme="dark"][data-tema="cupertino"] .cj-resh-hotel { color: #98989D; } html[data-theme="dark"][data-tema="cupertino"] .cj-resh-meta span { background: #2C2C2E; border-color: #38383A; color: #D1D1D6; } html[data-theme="dark"][data-tema="cupertino"] .cj-resh-state { background: rgba(48, 209, 88, .18); border-color: rgba(48, 209, 88, .3); color: #30D158; } html[data-theme="dark"][data-tema="cupertino"] .cj-cut-chip { background: #2C2C2E; border-color: #38383A; color: #D1D1D6; } /* Corte de caja (.ccx-*): montos sans y campos de arqueo rellenos Apple */ html[data-tema="cupertino"] .ccx-page .ccx-title, html[data-tema="cupertino"] .ccx-page .ccx-stat strong, html[data-tema="cupertino"] .ccx-page .ccx-total-row.is-main output { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif !important; letter-spacing: -0.02em !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ccx-page { --ccx-line: #E8E8ED; --ccx-muted: #6E6E73; --ccx-surface: #FFFFFF; --ccx-focus: color-mix(in srgb, var(--ccx-primary) 18%, transparent); } html[data-tema="cupertino"]:not([data-theme="dark"]) .ccx-page .ccx-input, html[data-tema="cupertino"]:not([data-theme="dark"]) .ccx-page .ccx-textarea { background: #F5F5F7 !important; border-color: transparent !important; border-radius: 10px !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ccx-page .ccx-input:focus, html[data-tema="cupertino"]:not([data-theme="dark"]) .ccx-page .ccx-textarea:focus { background: #FFFFFF !important; border-color: var(--brand-primary, #0071E3) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #0071E3) 16%, transparent) !important; } /* ═══ 20. RESERVACIONES: detalle modo oscuro ════════════════════════ El pase 1 volteó los tokens --res-*; aquí caen los literales claros que quedaban (tabla, pills de filtro, fecha, agenda). La pill activa se invierte al estilo iOS oscuro: blanca con tinta. */ html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-filterbar { background: #1C1C1E; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-tab { background: #2C2C2E; border-color: #38383A; color: #D1D1D6; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-tab.is-active { background: #F5F5F7; border-color: #F5F5F7; color: #1D1D1F; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-date-tools input { background: #1C1C1E; border-color: #38383A; color: #F5F5F7; color-scheme: dark; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-date-chip { background: #1C1C1E; border-color: #38383A; color: #D1D1D6; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-btn { background: #1C1C1E; border-color: #38383A; color: #F5F5F7; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-table-shell { background: #1C1C1E; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-table thead th { background: #161617; color: #98989D; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-table tbody tr:hover { background: #2C2C2E; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--res-accent, #BD9441) 55%, transparent); } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-folio { color: #98989D; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-date-sub { color: #98989D; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-empty, html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-filter-empty { background: #161617; border-color: #38383A; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-upcoming { background: #1C1C1E; border-color: #38383A; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-upcoming-head { background: #1C1C1E; border-bottom-color: #38383A; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-upcoming h2, html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-upcoming-head h2, html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-upcoming-head strong { color: #F5F5F7; } html[data-theme="dark"][data-tema="cupertino"] .res-bookings .res-upcoming-card { background: #2C2C2E; border-color: #38383A; } /* ═══ 21. NUEVA RESERVACIÓN (wizard .vista-reservacion) ═════════════ Tokens --rc-* propios + literales sage/crema. Cupertino: lienzo plano, serif fuera, y el wizard estrena modo oscuro (no tenía). Los acentos siguen saliendo del color primario del negocio. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .vista-reservacion { --rc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --rc-ivory: #F5F5F7; --rc-ivory-2: #FAFAFC; --rc-surface: #FFFFFF; --rc-surface-warm: #F5F5F7; --rc-line: #E8E8ED; --rc-line-soft: #EDEDF0; --rc-accent-soft: #F5F5F7; --rc-accent-line: #E8E8ED; --rc-accent-dark: #48484A; --lc-cream: #F5F5F7; --lc-cream-mid: #EDEDF0; background: #F5F5F7 !important; } html[data-tema="cupertino"] .vista-reservacion > div:first-of-type h1 { font-weight: 700 !important; letter-spacing: -0.02em !important; } /* Wizard en oscuro: primera vez que existe */ html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion { --rc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --rc-ivory: #0A0A0B; --rc-ivory-2: #161617; --rc-surface: #1C1C1E; --rc-surface-warm: #161617; --rc-line: #38383A; --rc-line-soft: #2C2C2E; --rc-muted: #98989D; --rc-text: #F5F5F7; --rc-accent-soft: #2C2C2E; --rc-accent-line: #38383A; --rc-accent-dark: #D1D1D6; --rc-success-soft: color-mix(in srgb, #30D158 16%, #1C1C1E); --rc-warning-soft: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --rc-danger-soft: color-mix(in srgb, #FF453A 16%, #1C1C1E); --lc-cream: #161617; --lc-cream-mid: #2C2C2E; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .bg-white { background-color: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion > div:first-of-type h1, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion h2, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion h3, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .text-gray-800, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .text-gray-900 { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion label, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .text-gray-700, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .text-gray-600 { color: #D1D1D6 !important; } html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .text-gray-500, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .text-gray-400 { color: #98989D !important; } html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion select, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion textarea { background-color: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .border-gray-200, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .border-gray-300 { border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .panel-hd-guest, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .panel-hd-dates, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .panel-hd-rooms, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .panel-hd-notes, html[data-theme="dark"][data-tema="cupertino"] .vista-reservacion .panel-hd-summary { background: #161617 !important; border-bottom-color: #38383A !important; } /* ═══ 22. TAREAS (index .tk-page) ═══════════════════════════════════ Tokens --tk-* bien hechos: el volteo es casi puro token. Serif de KPIs fuera; el módulo estrena modo oscuro (no tenía). */ html[data-tema="cupertino"]:not([data-theme="dark"]) .tk-page { --tk-ivory: #F5F5F7; --tk-ivory-2: #FAFAFC; --tk-surface: #FFFFFF; --tk-surface-warm: #F5F5F7; --tk-border: #E8E8ED; --tk-gold-line: #E8E8ED; --tk-muted: #6E6E73; --tk-text: #48484A; --tk-heading: #1D1D1F; --tk-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --tk-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; } html[data-theme="dark"][data-tema="cupertino"] .tk-page { --tk-ivory: #000000; --tk-ivory-2: #161617; --tk-surface: #1C1C1E; --tk-surface-warm: #161617; --tk-border: #38383A; --tk-gold-soft: color-mix(in srgb, var(--tk-gold) 20%, #1C1C1E); --tk-gold-line: #48484A; --tk-gold-ink: color-mix(in srgb, var(--tk-gold) 60%, #F5F5F7); --tk-view-soft: color-mix(in srgb, var(--tk-gold) 12%, #1C1C1E); --tk-muted: #98989D; --tk-text: #D1D1D6; --tk-heading: #F5F5F7; --tk-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --tk-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --tk-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --tk-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --tk-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); --tk-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); --tk-proc-bg: color-mix(in srgb, #64D2FF 16%, #1C1C1E); --tk-success: #30D158; --tk-warning: #FF9F0A; --tk-danger: #FF6961; --tk-info: #6CB4FF; --tk-proc: #64D2FF; } html[data-theme="dark"][data-tema="cupertino"] .tk-page .tk-control { background: #1C1C1E !important; color: #F5F5F7 !important; color-scheme: dark; } html[data-theme="dark"][data-tema="cupertino"] .tk-page input, html[data-theme="dark"][data-tema="cupertino"] .tk-page select { color-scheme: dark; } html[data-theme="dark"][data-tema="cupertino"] .tk-page .tk-summary-item, html[data-theme="dark"][data-tema="cupertino"] .tk-page .tk-panel { background: #1C1C1E; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .tk-page .tk-row:hover { background: #2C2C2E; box-shadow: none; } /* ═══ 23. HUÉSPEDES (index .guests-page) ════════════════════════════ Capa boutique con tokens --guest-* y fondo !important: volteo por token + lienzo plano. El héroe .guest-hero se suma a la familia de losas glass (§48/§48c): slab, tinta, kicker-píldora e icono frosted. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .guests-page { --guest-brand-soft: color-mix(in srgb, var(--guest-brand) 6%, #F5F5F7); --guest-brand-softer: #FAFAFC; --guest-gold-soft: color-mix(in srgb, var(--guest-gold) 12%, #FFFFFF); --guest-gold-line: #E8E8ED; --guest-ivory: #F5F5F7; --guest-ivory-2: #FAFAFC; --guest-surface: #FFFFFF; --guest-surface-warm: #F5F5F7; --guest-border: #E8E8ED; --guest-muted: #6E6E73; --guest-heading: #1D1D1F; --guest-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --guest-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-tema="cupertino"] .guests-page .hotel-page-title { letter-spacing: -0.02em !important; } /* ═══ 24. DETALLE DE RESERVACIÓN (ver.php: .reservation-detail-v2 + .rdv3 + modales de check-in) ═════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .reservation-detail-v2 { --rd-accent-soft: #F5F5F7; --rd-ivory: #F5F5F7; --rd-ivory-2: #FAFAFC; --rd-surface: #FFFFFF; --rd-surface-warm: #F5F5F7; --rd-line: #E8E8ED; --rd-line-soft: #EDEDF0; --rd-muted: #6E6E73; --rd-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --rd-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3 { --rdv3-bg: #F5F5F7; --rdv3-card: #FFFFFF; --rdv3-line: #E8E8ED; --rdv3-ink: #1D1D1F; --rdv3-muted: #6E6E73; --rdv3-muted-2: #48484A; } html[data-tema="cupertino"] .rdv3-titleline h1, html[data-tema="cupertino"] .rdv3-card-title, html[data-tema="cupertino"] .rdv3-date strong, html[data-tema="cupertino"] .rdv3-total .rdv3-amount, html[data-tema="cupertino"] .rdv3-guest-name, html[data-tema="cupertino"] .rdv3-payment-total b, html[data-tema="cupertino"] .rp-stat strong, html[data-tema="cupertino"] .rp-stat b { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif !important; letter-spacing: -0.015em !important; } html[data-tema="cupertino"] .rdv3-titleline h1, html[data-tema="cupertino"] .rdv3-card-title { font-weight: 700 !important; } /* Literales cálidos de la capa rdv3/rp: a neutrales por modo */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-stay { background: #FFFFFF !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-nights, html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room-metric, html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-res-note, html[data-tema="cupertino"]:not([data-theme="dark"]) .rp-stat { background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-stay { background: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-nights, html[data-theme="dark"][data-tema="cupertino"] .rdv3-room-metric, html[data-theme="dark"][data-tema="cupertino"] .rdv3-res-note, html[data-theme="dark"][data-tema="cupertino"] .rp-stat { background: #2C2C2E !important; color: #F5F5F7; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-total, html[data-theme="dark"][data-tema="cupertino"] .rdv3-info { background: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] .rp-stat strong, html[data-theme="dark"][data-tema="cupertino"] .rp-stat b, html[data-theme="dark"][data-tema="cupertino"] .rdv3-total .rdv3-amount { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .reservation-detail-v2 { --rd-accent-dark: color-mix(in srgb, var(--rd-accent) 60%, #F5F5F7); --rd-accent-soft: #2C2C2E; --rd-ivory: #000000; --rd-ivory-2: #0A0A0B; --rd-surface: #1C1C1E; --rd-surface-warm: #161617; --rd-line: #38383A; --rd-line-soft: #2C2C2E; --rd-text: #F5F5F7; --rd-muted: #98989D; --rd-success: #30D158; --rd-warning: #FF9F0A; --rd-danger: #FF6961; --rd-info: #6CB4FF; --rd-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --rd-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3 { --rdv3-bg: #000000; --rdv3-card: #1C1C1E; --rdv3-line: rgba(255, 255, 255, .09); --rdv3-ink: #F5F5F7; --rdv3-muted: #98989D; --rdv3-muted-2: #C7C7CC; } html[data-theme="dark"][data-tema="cupertino"] #modalCheckIn, html[data-theme="dark"][data-tema="cupertino"] #modalCheckInTardio { --rv-checkin-ink: #F5F5F7; --rv-checkin-line: #38383A; --rv-checkin-soft: #2C2C2E; --rv-checkin-muted: #98989D; } /* ── §24b. Héroe y "Total pagado" de ver.php en acabado Liquid Glass ── El pase base (§24) neutralizó el lienzo pero dejó intactos el héroe (banda verde plana) y la tarjeta "TOTAL PAGADO" (verde plano). El owner pidió (2026-07-11) el MISMO lenguaje "candy glass" del header de caja: losa de CRISTAL CLARO de la marca (verde muy tenue casi blanco) con tinta oscura y píldoras lechosas — NO banda de color sólida. La tarjeta de pago conserva su VERDE SEMÁNTICO (dinero, hardcodeado, white-label-safe). Modo oscuro: losa grafito (como caja dark). */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-hero { border-radius: 22px !important; background: radial-gradient(46% 160% at 96% 72%, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 40%), linear-gradient(165deg, color-mix(in srgb, var(--rdv3-primary) 14%, #FFFFFF) 0%, color-mix(in srgb, var(--rdv3-primary) 28%, #FFFFFF) 100%) !important; border: 1px solid color-mix(in srgb, var(--rdv3-primary) 24%, rgba(255, 255, 255, .9)) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -2px 5px color-mix(in srgb, var(--rdv3-primary) 12%, transparent), 0 3px 7px color-mix(in srgb, var(--rdv3-primary) 10%, rgba(27, 39, 70, .05)), 0 24px 44px -20px color-mix(in srgb, var(--rdv3-primary) 42%, rgba(27, 39, 70, .22)) !important; } /* Título y meta: tinta oscura teñida de marca (antes blancos sobre banda) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-titleline h1, html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-titleline h1 .rdv3-title-prefix { color: color-mix(in srgb, var(--rdv3-primary) 32%, #111827) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .4) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-meta { color: color-mix(in srgb, var(--rdv3-primary) 30%, #5B6470) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-meta i { color: color-mix(in srgb, var(--rdv3-primary) 62%, #111827) !important; opacity: 1 !important; } /* Píldora de estado: cristal lechoso con tinta e identidad por variante */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-status { background: rgba(255, 255, 255, .7) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(17, 24, 39, .06) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-status--ok { color: #4F46C7 !important; border: 1px solid color-mix(in srgb, #6F6ADE 34%, rgba(255, 255, 255, .9)) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-status--ok::before { background: #6F6ADE !important; box-shadow: 0 0 0 3px rgba(111, 106, 222, .16) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-status--wait { color: #B45309 !important; border: 1px solid color-mix(in srgb, #F5B540 40%, rgba(255, 255, 255, .9)) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-status--wait::before { background: #F5B540 !important; box-shadow: none !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-status--danger { color: #B91C1C !important; border: 1px solid color-mix(in srgb, #EF4444 38%, rgba(255, 255, 255, .9)) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-status--danger::before { background: #EF4444 !important; box-shadow: none !important; } /* Modo oscuro: losa grafito de cristal (como caja dark), texto blanco base */ html[data-theme="dark"][data-tema="cupertino"] .rdv3-hero { border-radius: 22px !important; background: radial-gradient(46% 160% at 96% 72%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 72%), linear-gradient(165deg, #232325 0%, #1A1A1C 100%) !important; border: 1px solid #38383A !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 44px -24px rgba(0, 0, 0, .7) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-payment-total { border-radius: 16px !important; border: 1px solid color-mix(in srgb, #34C759 30%, transparent) !important; background: radial-gradient(130% 120% at 50% -25%, rgba(255, 255, 255, .55), transparent 55%), linear-gradient(180deg, color-mix(in srgb, #34C759 15%, #FFFFFF), color-mix(in srgb, #34C759 8%, #FFFFFF)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 10px 24px -16px color-mix(in srgb, #34C759 55%, #000) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-payment-total small { color: #1E8E44 !important; font-weight: 700 !important; letter-spacing: .06em !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-payment-total b { color: #1D7A3A !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-payment-total { border-radius: 16px !important; border: 1px solid color-mix(in srgb, #30D158 28%, transparent) !important; background: radial-gradient(130% 120% at 50% -25%, rgba(255, 255, 255, .07), transparent 55%), linear-gradient(180deg, color-mix(in srgb, #30D158 20%, #1C1C1E), color-mix(in srgb, #30D158 11%, #1C1C1E)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px -18px rgba(0, 0, 0, .7) !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-payment-total small { color: #30D158 !important; font-weight: 700 !important; letter-spacing: .06em !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-payment-total b { color: #4ADE80 !important; } /* ── §24c. Cards de habitaciones reservadas de ver.php (owner 2026-07-11): la card crema Deleite pasa a losa candy suave de la marca con bloom; teja del nombre y cajitas de precio (PRECIO/NOCHE · NOCHES · SUBTOTAL) lechosas con tinta. Misma receta que §24b, intensidad más baja porque van apiladas. Modo oscuro: losa grafito. ── */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room { border: 1px solid color-mix(in srgb, var(--rdv3-primary) 20%, rgba(255, 255, 255, .9)) !important; border-radius: 18px !important; background: radial-gradient(46% 160% at 96% 76%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 40%), linear-gradient(165deg, color-mix(in srgb, var(--rdv3-primary) 9%, #FFFFFF) 0%, color-mix(in srgb, var(--rdv3-primary) 20%, #FFFFFF) 100%) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .92), 0 2px 5px color-mix(in srgb, var(--rdv3-primary) 8%, rgba(27, 39, 70, .04)), 0 16px 30px -18px color-mix(in srgb, var(--rdv3-primary) 38%, rgba(27, 39, 70, .18)) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room::before { background: color-mix(in srgb, var(--rdv3-primary) 55%, #FFFFFF) !important; } /* Teja del nombre/número: chip lechoso con tinta de marca */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room-number { border: 1px solid rgba(255, 255, 255, .9) !important; background: rgba(255, 255, 255, .68) !important; color: color-mix(in srgb, var(--rdv3-primary) 62%, #111827) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px color-mix(in srgb, var(--rdv3-primary) 14%, transparent) !important; } /* Chips Piso/personas dentro de la card */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room .rdv3-tag { border: 1px solid rgba(255, 255, 255, .88) !important; background: rgba(255, 255, 255, .6) !important; color: #1F2937 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room .rdv3-tag i { color: color-mix(in srgb, var(--rdv3-primary) 68%, #111827) !important; } /* Cajitas de precio: lechosas con tinta */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room-metric { border: 1px solid rgba(255, 255, 255, .88) !important; background: rgba(255, 255, 255, .6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room-metric small { color: #6E6E73 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room-metric b { color: #1D1D1F !important; } /* Subtotal derecho: separador en hilo de marca */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room-price { border-left: 1px solid color-mix(in srgb, var(--rdv3-primary) 18%, rgba(17, 24, 39, .06)) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-room + .rdv3-room { border-top: 1px solid color-mix(in srgb, var(--rdv3-primary) 20%, rgba(255, 255, 255, .9)) !important; } /* Modo oscuro: losa grafito, tejas y cajitas #2C2C2E */ html[data-theme="dark"][data-tema="cupertino"] .rdv3-room { border: 1px solid #38383A !important; border-radius: 18px !important; background: radial-gradient(46% 160% at 96% 76%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 72%), linear-gradient(165deg, #232325 0%, #1A1A1C 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 30px -20px rgba(0, 0, 0, .6) !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-room::before { background: color-mix(in srgb, var(--rdv3-primary, #0A84FF) 60%, #1C1C1E) !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-room-number { border: 1px solid #48484A !important; background: #2C2C2E !important; color: #F5F5F7 !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-room .rdv3-tag { border: 1px solid #38383A !important; background: #2C2C2E !important; color: #D1D1D6 !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-room-metric small { color: #98989D !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-room-metric b { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-room-price { border-left: 1px solid #38383A !important; } /* ── §24d. Panel "Datos del huésped" de ver.php (owner 2026-07-11): botones de contacto (Llamar lechoso con tinta de marca; WhatsApp en cristal verde SEMÁNTICO), "Vista documental del huésped" y los vacíos punteados (documento / vehículos) en lechoso con hilo de marca. El avatar violeta se queda (ancla de identidad de la sección huésped). ── */ html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-contact-action { border: 1px solid rgba(255, 255, 255, .88) !important; background: rgba(255, 255, 255, .62) !important; color: #1F2937 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 3px color-mix(in srgb, var(--rdv3-primary) 12%, transparent) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-contact-action i { color: color-mix(in srgb, var(--rdv3-primary) 66%, #111827) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-contact-action:not(.is-disabled):hover { background: rgba(255, 255, 255, .85) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-contact-action.is-whatsapp { border: 1px solid color-mix(in srgb, #34C759 30%, rgba(255, 255, 255, .9)) !important; background: linear-gradient(180deg, color-mix(in srgb, #34C759 13%, #FFFFFF), color-mix(in srgb, #34C759 7%, #FFFFFF)) !important; color: #1D7A3A !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-contact-action.is-whatsapp i { color: #1E8E44 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-guest-docs-title, html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-guest-docs-title i { color: color-mix(in srgb, var(--rdv3-primary) 62%, #111827) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-guest-doc-empty, html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-empty { border: 1px dashed color-mix(in srgb, var(--rdv3-primary) 28%, rgba(17, 24, 39, .1)) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .55) !important; color: #6E6E73 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-guest-doc-empty i { color: color-mix(in srgb, var(--rdv3-primary) 45%, #94A3B8) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .rdv3-guest-sub { color: #6E6E73 !important; } /* Modo oscuro: chips grafito, WhatsApp verde apagado, vacíos punteados oscuros */ html[data-theme="dark"][data-tema="cupertino"] .rdv3-contact-action { border: 1px solid #38383A !important; background: #2C2C2E !important; color: #D1D1D6 !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-contact-action.is-whatsapp { border: 1px solid color-mix(in srgb, #30D158 30%, transparent) !important; background: color-mix(in srgb, #30D158 14%, #1C1C1E) !important; color: #30D158 !important; } html[data-theme="dark"][data-tema="cupertino"] .rdv3-guest-doc-empty, html[data-theme="dark"][data-tema="cupertino"] .rdv3-empty { border: 1px dashed #48484A !important; border-radius: 14px !important; background: rgba(255, 255, 255, .03) !important; color: #98989D !important; box-shadow: none !important; } /* ═══ 38. CUATRO MÓDULOS ESTÁNDAR: documentos (.docs-page --dc-*), notificaciones (.ntx-page --ntx-*), CxC (.cxc-page --cx-*) e inventario (.inv-page --inv-*) ════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .docs-page { --dc-ivory: #F5F5F7; --dc-ivory-2: #FAFAFC; --dc-surface: #FFFFFF; --dc-surface-warm: #F5F5F7; --dc-border: #E8E8ED; --dc-text: #48484A; --dc-muted: #6E6E73; --dc-heading: #1D1D1F; --dc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; } html[data-theme="dark"][data-tema="cupertino"] .docs-page { --dc-ivory: #000000; --dc-ivory-2: #161617; --dc-surface: #1C1C1E; --dc-surface-warm: #161617; --dc-border: #38383A; --dc-text: #D1D1D6; --dc-muted: #98989D; --dc-heading: #F5F5F7; --dc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ntx-page { --ntx-ink: #1D1D1F; --ntx-text: #48484A; --ntx-muted: #6E6E73; --ntx-line: #E8E8ED; --ntx-surface: #FFFFFF; --ntx-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .ntx-page { --ntx-ink: #F5F5F7; --ntx-text: #D1D1D6; --ntx-muted: #98989D; --ntx-line: #38383A; --ntx-surface: #1C1C1E; --ntx-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .ntx-page [class*="ntx-panel"] { --ntx-panel-wash: color-mix(in srgb, var(--ntx-panel-accent, #98989D) 12%, #1C1C1E); } html[data-tema="cupertino"]:not([data-theme="dark"]) .cxc-page { --cx-ivory: #F5F5F7; --cx-ivory-2: #FAFAFC; --cx-surface: #FFFFFF; --cx-surface-warm: #F5F5F7; --cx-border: #E8E8ED; /* Tinta calmada: la tabla de CxC es densa y el label Apple #1D1D1F/#48484A se sentía "muy negro" repetido en cada nombre/saldo. Bajamos a charcoal slate suave; sigue con contraste AA holgado (heading ~11:1, text ~6.5:1). */ --cx-text: #5C6470; --cx-text-soft: #79818E; --cx-muted: #6E6E73; --cx-heading: #3A3F47; --cx-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; } html[data-theme="dark"][data-tema="cupertino"] .cxc-page { --cx-ivory: #000000; --cx-ivory-2: #161617; --cx-surface: #1C1C1E; --cx-surface-warm: #161617; --cx-border: #38383A; --cx-text: #D1D1D6; --cx-text-soft: #C7C7CC; --cx-muted: #98989D; --cx-heading: #F5F5F7; --cx-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; } html[data-tema="cupertino"]:not([data-theme="dark"]) .inv-page { --inv-ivory: #F5F5F7; --inv-surface: #FFFFFF; --inv-surface-warm: #F5F5F7; --inv-line: #E8E8ED; --inv-line-soft: #EDEDF0; --inv-muted: #6E6E73; --inv-heading: #1D1D1F; --inv-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; } html[data-theme="dark"][data-tema="cupertino"] .inv-page { --inv-ivory: #000000; --inv-surface: #1C1C1E; --inv-surface-warm: #161617; --inv-line: #38383A; --inv-line-soft: #2C2C2E; --inv-muted: #98989D; --inv-heading: #F5F5F7; --inv-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --inv-success: #30D158; --inv-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --inv-warning: #FF9F0A; --inv-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --inv-danger: #FF6961; --inv-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); } /* §38b: literales de inventario, documentos y notificaciones */ html[data-tema="cupertino"]:not([data-theme="dark"]) .inv-page { background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .inv-page { background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .inv-page .inv-topbar, html[data-theme="dark"][data-tema="cupertino"] .inv-page .stat-widget, html[data-theme="dark"][data-tema="cupertino"] .inv-page .inv-panel { background: #1C1C1E !important; border-color: #38383A !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .inv-page .inv-pill { background: #2C2C2E !important; border-color: #38383A !important; color: #D1D1D6 !important; } html[data-theme="dark"][data-tema="cupertino"] .inv-page .stat-widget strong, html[data-theme="dark"][data-tema="cupertino"] .inv-page .stat-widget b, html[data-theme="dark"][data-tema="cupertino"] .inv-page .stat-widget [class*="num"] { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .inv-page .bar-track { background: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .docs-page .dc-summary-item, html[data-theme="dark"][data-tema="cupertino"] .docs-page .dc-panel { background: #1C1C1E !important; border-color: #38383A !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .docs-page .dc-row:hover { background: #2C2C2E !important; } html[data-theme="dark"][data-tema="cupertino"] .docs-page .dc-row a, html[data-theme="dark"][data-tema="cupertino"] .docs-page .dc-row strong { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .docs-page .dc-count-pill { background: #2C2C2E !important; border-color: #38383A !important; color: #D1D1D6 !important; } html[data-tema="cupertino"] .docs-page .dc-hero-section::after { display: none; } html[data-theme="dark"][data-tema="cupertino"] .ntx-page [class*="ntx-stat"], html[data-theme="dark"][data-tema="cupertino"] .ntx-page .ntx-btn, html[data-theme="dark"][data-tema="cupertino"] .ntx-page .ntx-module-chip, html[data-theme="dark"][data-tema="cupertino"] .ntx-page .ntx-count, html[data-theme="dark"][data-tema="cupertino"] .ntx-page .ntx-push-icon { background: #2C2C2E !important; border-color: #38383A !important; color: #D1D1D6 !important; } html[data-theme="dark"][data-tema="cupertino"] .ntx-page .ntx-panel-head::before { display: none; } html[data-theme="dark"][data-tema="cupertino"] .ntx-page [class*="ntx-stat"] strong, html[data-theme="dark"][data-tema="cupertino"] .ntx-page [class*="ntx-stat"] b { color: #F5F5F7 !important; } /* ═══ 37. HUÉSPEDES: detalle (.guest-detail-view, --gd-*) y edición (.guest-edit-page, --ge-*) ════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .guest-detail-view { --gd-bg: #F5F5F7; --gd-surface: #FFFFFF; --gd-surface-solid: #FFFFFF; --gd-line: #E8E8ED; --gd-line-soft: #EDEDF0; --gd-heading: #1D1D1F; --gd-text: #1D1D1F; --gd-text-soft: #48484A; --gd-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view { --gd-bg: #000000; --gd-surface: #1C1C1E; --gd-surface-solid: #1C1C1E; --gd-line: #38383A; --gd-line-soft: #2C2C2E; --gd-heading: #F5F5F7; --gd-text: #D1D1D6; --gd-text-soft: #C7C7CC; --gd-muted: #98989D; --gd-accent-readable: color-mix(in srgb, var(--gd-accent) 60%, #F5F5F7); --gd-success: #30D158; --gd-danger: #FF6961; background: #000000 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .guest-edit-page { --ge-bg: #F5F5F7; --ge-bg-soft: #FAFAFC; --ge-panel: #FFFFFF; --ge-panel-warm: #F5F5F7; --ge-line: #E8E8ED; --ge-line-strong: #D2D2D7; --ge-muted: #6E6E73; --ge-heading: #1D1D1F; --ge-text: #1D1D1F; --ge-text-soft: #48484A; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-edit-page { --ge-bg: #000000; --ge-bg-soft: #161617; --ge-panel: #1C1C1E; --ge-panel-warm: #161617; --ge-line: #38383A; --ge-line-strong: #48484A; --ge-muted: #98989D; --ge-heading: #F5F5F7; --ge-text: #D1D1D6; --ge-text-soft: #C7C7CC; --ge-accent-readable: color-mix(in srgb, var(--ge-accent) 60%, #F5F5F7); --ge-success: #30D158; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-edit-page input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"][data-tema="cupertino"] .guest-edit-page select, html[data-theme="dark"][data-tema="cupertino"] .guest-edit-page textarea { background-color: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } /* Detalle de huésped: serif Georgia literal → sans; superficies con literales de la familia .guest-* por modo */ html[data-tema="cupertino"] .guest-detail-view .guest-identity-card h1, html[data-tema="cupertino"] .guest-detail-view [style*="Georgia"], html[data-tema="cupertino"] .guest-detail-view .guest-avatar-mark { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif !important; letter-spacing: -0.02em; } html[data-tema="cupertino"] .guest-detail-view .guest-metric, html[data-tema="cupertino"] .guest-detail-view .guest-metric * { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-metric, html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-info-card, html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-docs, html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-action-rail, html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-identity-card { background: #1C1C1E !important; border-color: #38383A !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-panel-head, html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-note, html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-chip, html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-action, html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-doc-action { background: #2C2C2E !important; border-color: #38383A !important; color: #D1D1D6 !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-identity-card::after { display: none; } html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-operational-card { background: #2C2C2E !important; border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-operational-card strong { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-operational-card span, html[data-theme="dark"][data-tema="cupertino"] .guest-detail-view .guest-operational-card small { color: #98989D !important; } /* ═══ 35. USUARIOS / TRABAJADORES (.usuarios-view, paleta sage) ═════ */ html[data-tema="cupertino"] .usuarios-view { --user-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; } html[data-tema="cupertino"]:not([data-theme="dark"]) .usr-bg { background: #F5F5F7 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .usuarios-view .usr-widget, html[data-tema="cupertino"]:not([data-theme="dark"]) .usuarios-view .usr-panel { background: #FFFFFF !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .usuarios-view .usr-tr:hover { background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .usr-bg { background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-widget, html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-panel { background: #1C1C1E !important; border-color: #38383A !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-panel-hd { background: #161617 !important; border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-tr:hover { background: #2C2C2E !important; } html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-panel td, html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-widget { color: #D1D1D6; } html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-panel td strong, html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-panel .font-semibold, html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-widget strong, html[data-theme="dark"][data-tema="cupertino"] .usuarios-view h1, html[data-theme="dark"][data-tema="cupertino"] .usuarios-view h2 { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .act-edit, html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .act-deact, html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .act-act { background: #2C2C2E; border-color: #38383A; } html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-tr { background: #1C1C1E !important; border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .usuarios-view .usr-tr:hover { background: #2C2C2E !important; } html[data-theme="dark"][data-tema="cupertino"] .tk-agenda.tk-agenda--calendar { --tk-view-soft: color-mix(in srgb, var(--tk-info, #6CB4FF) 14%, #1C1C1E); } html[data-theme="dark"][data-tema="cupertino"] .tk-agenda.tk-agenda--calendar .tk-title-lockup { background: #1C1C1E; border-color: #38383A; } /* ═══ 36. TAREAS: agenda, form y detalle (selectores gemelos que redefinen --tk-*: mismo flip que §22) ═════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .tk-agenda, html[data-tema="cupertino"]:not([data-theme="dark"]) .tk-form-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .tk-detail { --tk-gold-line: #E8E8ED; --tk-ivory: #F5F5F7; --tk-ivory-2: #FAFAFC; --tk-surface: #FFFFFF; --tk-surface-warm: #F5F5F7; --tk-border: #E8E8ED; --tk-text: #48484A; --tk-muted: #6E6E73; --tk-heading: #1D1D1F; --tk-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --tk-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; } html[data-theme="dark"][data-tema="cupertino"] .tk-agenda, html[data-theme="dark"][data-tema="cupertino"] .tk-form-page, html[data-theme="dark"][data-tema="cupertino"] .tk-detail { --tk-gold-soft: color-mix(in srgb, var(--tk-gold) 20%, #1C1C1E); --tk-gold-line: #48484A; --tk-gold-ink: color-mix(in srgb, var(--tk-gold) 60%, #F5F5F7); --tk-ivory: #000000; --tk-ivory-2: #161617; --tk-surface: #1C1C1E; --tk-surface-warm: #161617; --tk-border: #38383A; --tk-text: #D1D1D6; --tk-muted: #98989D; --tk-heading: #F5F5F7; --tk-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --tk-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --tk-success: #30D158; --tk-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --tk-warning: #FF9F0A; --tk-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --tk-danger: #FF6961; --tk-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); --tk-info: #6CB4FF; --tk-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); } html[data-theme="dark"][data-tema="cupertino"] .tk-agenda input, html[data-theme="dark"][data-tema="cupertino"] .tk-agenda select, html[data-theme="dark"][data-tema="cupertino"] .tk-form-page input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"][data-tema="cupertino"] .tk-form-page select, html[data-theme="dark"][data-tema="cupertino"] .tk-form-page textarea, html[data-theme="dark"][data-tema="cupertino"] .tk-detail input, html[data-theme="dark"][data-tema="cupertino"] .tk-detail select { background-color: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } /* ═══ 33. CAJA: CORTE dark (--ccx con !important propios) y APERTURA (.caja-open, --cj-* redefinidos) ═════════════════════════ */ html[data-theme="dark"][data-tema="cupertino"] .ccx-page { --ccx-ink: #F5F5F7 !important; --ccx-text: #D1D1D6 !important; --ccx-muted: #98989D !important; --ccx-line: #38383A !important; --ccx-surface: #1C1C1E !important; --ccx-focus: color-mix(in srgb, var(--ccx-accent) 26%, transparent) !important; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .ccx-page .ccx-input, html[data-theme="dark"][data-tema="cupertino"] .ccx-page .ccx-textarea { background: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } html[data-tema="cupertino"]:not([data-theme="dark"]) .caja-open { --cj-gold-line: #E8E8ED; --cj-ivory: #F5F5F7; --cj-ivory-2: #FAFAFC; --cj-surface: #FFFFFF; --cj-surface-warm: #F5F5F7; --cj-border: #E8E8ED; --cj-text: #48484A; --cj-muted: #6E6E73; --cj-heading: #1D1D1F; } html[data-theme="dark"][data-tema="cupertino"] .caja-open { --cj-gold-soft: color-mix(in srgb, var(--cj-gold) 20%, #1C1C1E); --cj-gold-line: #48484A; --cj-gold-ink: color-mix(in srgb, var(--cj-gold) 60%, #F5F5F7); --cj-ivory: #000000; --cj-ivory-2: #161617; --cj-surface: #1C1C1E; --cj-surface-warm: #161617; --cj-border: #38383A; --cj-text: #D1D1D6; --cj-muted: #98989D; --cj-heading: #F5F5F7; --cj-warning: #FF9F0A; --cj-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); } html[data-theme="dark"][data-tema="cupertino"] .caja-open .cj-input { background: #1C1C1E; border-color: #38383A; color: #F5F5F7; color-scheme: dark; } html[data-tema="cupertino"] .caja-open .cj-btn-gold { background: var(--brand-action-bg, var(--cj-gold)) !important; box-shadow: none !important; border-radius: 999px; } html[data-theme="dark"][data-tema="cupertino"] .ccx-page .ccx-panel, html[data-theme="dark"][data-tema="cupertino"] .ccx-page .ccx-stat { background: #1C1C1E !important; border-color: #38383A !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .ccx-page .ccx-table tfoot td, html[data-theme="dark"][data-tema="cupertino"] .ccx-page .ccx-list-row, html[data-theme="dark"][data-tema="cupertino"] .ccx-page .ccx-count, html[data-theme="dark"][data-tema="cupertino"] .ccx-page .ccx-kicker, html[data-theme="dark"][data-tema="cupertino"] .ccx-page .ccx-back { background: #2C2C2E !important; border-color: #38383A !important; color: #D1D1D6 !important; } /* ═══ 34. CALENDARIO DE RESERVACIONES (.hcal) ═══════════════════════ En claro ya es Apple de fábrica (paleta fría, cards blancas): solo estrena modo oscuro. */ html[data-theme="dark"][data-tema="cupertino"] .hcal { --green: #A9B2BA; --green-dark: #C7CDD3; --green-soft: #2C2C2E; --blue: #6FA8D4; --blue-dark: #8FBCE0; --blue-soft: color-mix(in srgb, #0A84FF 20%, #1C1C1E); --indigo: #9B97D4; --indigo-soft: color-mix(in srgb, #5E5CE6 20%, #1C1C1E); --red: #E07B75; --red-soft: color-mix(in srgb, #FF453A 18%, #1C1C1E); --amber: #E0A64C; --amber-soft: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --yellow: #E8C04C; --yellow-soft: color-mix(in srgb, #FFD60A 14%, #1C1C1E); --surface: #000000; --card: #1C1C1E; --border: rgba(255, 255, 255, .1); --border-mid: rgba(255, 255, 255, .16); --border-strong: rgba(255, 255, 255, .26); --text: #F5F5F7; --muted: #98989D; --subtle: #6E6E73; --shadow: none; --shadow-md: none; } /* ═══ 32. CONFIGURACIÓN (.hc-page, --hc-*) ══════════════════════════ La pantalla donde vive el selector de temas. Dos bloques de tokens encimados; el flip pisa ambos. En oscuro releva al dark cálido de dark-theme.css D0 con el negro/grafito Apple. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .hc-page { --hc-bg: #F5F5F7; --hc-bg-deep: #F5F5F7; --hc-paper: #FFFFFF; --hc-ink: #1D1D1F; --hc-ink-soft: #48484A; --hc-ink-faint: #6E6E73; --hc-line: #E8E8ED; --hc-line-strong: #D2D2D7; --hc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --hc-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --hc-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px rgba(0, 0, 0, .05); background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .hc-page { --hc-bg: #000000; --hc-bg-deep: #000000; --hc-paper: #1C1C1E; --hc-surface: #1C1C1E; --hc-surface-muted: #161617; --hc-brand-wash: color-mix(in srgb, var(--hc-brand) 18%, #1C1C1E); --hc-accent-wash: color-mix(in srgb, var(--hc-accent) 14%, #1C1C1E); --hc-blush-wash: #161617; --hc-section-wash: color-mix(in srgb, var(--hc-section-accent) 12%, #1C1C1E); --hc-accent-soft: color-mix(in srgb, var(--hc-accent) 16%, #1C1C1E); --hc-ink: #F5F5F7; --hc-ink-soft: #C7C7CC; --hc-ink-faint: #98989D; --hc-line: #38383A; --hc-line-strong: #48484A; --hc-danger: #FF6961; --hc-success: #30D158; --hc-tone-blue: #6FA8C4; --hc-tone-sage: #4FC08A; --hc-tone-amber: #E0A64C; --hc-tone-coral: #E07B75; --hc-tone-indigo: #9B97D4; --hc-tone-olive: #A9C46C; --hc-tone-slate: #8FA8C4; --hc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --hc-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --hc-shadow: none; --hc-focus: color-mix(in srgb, var(--hc-accent) 30%, transparent); background: #000000 !important; } /* ═══ 31. CAJA: MOVIMIENTOS (.cash-movements-view, --cash-*) ════════ Tres capas de rediseño encimadas; el flip pisa a la última. Multi- radial warm → plano. Tonos de sección aclarados en oscuro. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .cash-movements-view { --cash-bg: #F5F5F7; --cash-surface: #FFFFFF; --cash-panel: #FFFFFF; --cash-panel-strong: #FFFFFF; --cash-soft: #F5F5F7; --cash-line: #E8E8ED; --cash-text: #48484A; --cash-ink: #1D1D1F; --cash-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view { --cash-bg: #000000; --cash-surface: #1C1C1E; --cash-panel: #1C1C1E; --cash-panel-strong: #1C1C1E; --cash-soft: #161617; --cash-line: #38383A; --cash-text: #D1D1D6; --cash-ink: #F5F5F7; --cash-muted: #98989D; --cash-income: #30D158; --cash-expense: #FF6961; --cash-tone-blue: #6FA8C4; --cash-tone-sage: #4FC08A; --cash-tone-amber: #E0A64C; --cash-tone-coral: #E07B75; --cash-tone-indigo: #9B97D4; --cash-glow: color-mix(in srgb, var(--cash-accent) 20%, transparent); background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-stat { --stat-soft: color-mix(in srgb, var(--stat-color, #98989D) 16%, #1C1C1E); } /* Movimientos: superficies con rgba blanco literal → grafito en dark */ html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-stat, html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-ledger-panel, html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-sidebar-panel { background: #1C1C1E !important; border-color: #38383A !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-filter-dock, html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-ledger-head { background: #161617 !important; border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-flow-bar { background: #2C2C2E !important; border-color: transparent !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-input { background: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } /* ═══ 31b. CAJA: REPORTE DE MÉTODOS (.cash-methods-view, --cm-*) ════ Es reporte: su banner hero queda intacto; solo contenido. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .cash-methods-view { --cm-bg: #F5F5F7; --cm-surface: #FFFFFF; --cm-line: #E8E8ED; --cm-line-soft: #EDEDF0; --cm-text: #48484A; --cm-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-methods-view { --cm-bg: #000000; --cm-surface: #1C1C1E; --cm-line: #38383A; --cm-line-soft: #2C2C2E; --cm-text: #D1D1D6; --cm-muted: #98989D; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-methods-view .cash-methods-card, html[data-theme="dark"][data-tema="cupertino"] .cash-methods-view .cash-methods-panel-head, html[data-theme="dark"][data-tema="cupertino"] .cash-methods-view .cash-methods-button { background: #1C1C1E !important; border-color: #38383A !important; box-shadow: none !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-methods-view .cash-methods-input { background: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } /* ═══ 31c. CAJA: HISTORIAL DE CORTES (.cash-history-view, --ch-*) ═══ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .cash-history-view { --ch-bg: #F5F5F7; --ch-surface: #FFFFFF; --ch-surface-strong: #FFFFFF; --ch-line: #E8E8ED; --ch-line-soft: #EDEDF0; --ch-text: #1D1D1F; --ch-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-history-view { --ch-bg: #000000; --ch-surface: #1C1C1E; --ch-surface-strong: #1C1C1E; --ch-line: #38383A; --ch-line-soft: #2C2C2E; --ch-text: #F5F5F7; --ch-muted: #98989D; --ch-income: #30D158; --ch-expense: #FF6961; --ch-warning: #FF9F0A; --ch-info: #6CB4FF; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-history-form select, html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-history-form input { background: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-quick-states, html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-activity-strip, html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-day-rank, html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-history-note, html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-history-link { background: #2C2C2E !important; border-color: #38383A !important; color: #D1D1D6 !important; } /* Franjas/brillos con gradiente blanco literal → planos en dark */ html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-filter-title { background: #161617 !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-movements-view .cash-audit-item { background: #2C2C2E !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-methods-view .cash-methods-mini { background: #2C2C2E !important; border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-history-title, html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-balance-card, html[data-theme="dark"][data-tema="cupertino"] .cash-history-view .cash-section-head { background: #1C1C1E !important; } /* ═══ 30. CREAR HABITACIÓN (.create-room-page, --room-*) ════════════ Lienzo multi-radial con cuadrícula fija → plano; campos rellenos Apple; el submit gradiente marrón pasa a plano de marca. Estrena modo oscuro. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .create-room-page { --room-ink: #1D1D1F; --room-muted: #6E6E73; --room-line: #E8E8ED; --room-paper: #FFFFFF; --room-soft: #F5F5F7; background: #F5F5F7 !important; } html[data-tema="cupertino"] .create-room-page::before { display: none !important; } html[data-tema="cupertino"] .create-room-page input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]), html[data-tema="cupertino"] .create-room-page select, html[data-tema="cupertino"] .create-room-page textarea { box-shadow: none !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .create-room-page input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]), html[data-tema="cupertino"]:not([data-theme="dark"]) .create-room-page select, html[data-tema="cupertino"]:not([data-theme="dark"]) .create-room-page textarea { background: #F5F5F7 !important; border-color: transparent !important; } html[data-tema="cupertino"] .create-room-submit { background: var(--brand-action-bg, #0071E3) !important; box-shadow: none !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .create-room-breadcrumb a { background: #FFFFFF; border-color: #E8E8ED; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .create-room-page { --room-ink: #F5F5F7; --room-muted: #98989D; --room-line: rgba(255, 255, 255, .1); --room-paper: #1C1C1E; --room-soft: #161617; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .create-room-page input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]), html[data-theme="dark"][data-tema="cupertino"] .create-room-page select, html[data-theme="dark"][data-tema="cupertino"] .create-room-page textarea { background: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } html[data-theme="dark"][data-tema="cupertino"] .create-room-breadcrumb a { background: #1C1C1E; border-color: #38383A; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .create-room-actions { background: rgba(22, 22, 23, .8); } html[data-theme="dark"][data-tema="cupertino"] .create-room-cancel { background: #2C2C2E !important; color: #F5F5F7 !important; } /* Tarjetas de crear-habitación: gradientes crema literales por modo (la barra de acento por sección se conserva) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .create-room-hero-card::before { background: #FFFFFF !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .create-room-card > div:first-child { background: #FAFAFC !important; } html[data-theme="dark"][data-tema="cupertino"] .create-room-hero-card::before { background: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] .create-room-card, html[data-theme="dark"][data-tema="cupertino"] .create-room-active-card { background: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] .create-room-card > div:first-child { background: #161617 !important; } /* ═══ 29. REPORTE DE TAREAS (.tk-report) ════════════════════════════ El banner hero del reporte se queda intacto (regla del negocio: headers de reportes no se tocan); aquí solo el contenido. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .tk-report { --tk-gold-line: #E8E8ED; --tk-ivory: #F5F5F7; --tk-ivory-2: #FAFAFC; --tk-surface: #FFFFFF; --tk-surface-warm: #F5F5F7; --tk-border: #E8E8ED; --tk-text: #48484A; --tk-muted: #6E6E73; --tk-heading: #1D1D1F; --tk-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --tk-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; } html[data-theme="dark"][data-tema="cupertino"] .tk-report { --tk-gold-soft: color-mix(in srgb, var(--tk-gold) 20%, #1C1C1E); --tk-gold-line: #48484A; --tk-gold-ink: color-mix(in srgb, var(--tk-gold) 60%, #F5F5F7); --tk-ivory: #000000; --tk-ivory-2: #161617; --tk-surface: #1C1C1E; --tk-surface-warm: #161617; --tk-border: #38383A; --tk-text: #D1D1D6; --tk-muted: #98989D; --tk-heading: #F5F5F7; --tk-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --tk-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --tk-success: #30D158; --tk-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --tk-warning: #FF9F0A; --tk-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --tk-danger: #FF6961; --tk-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); --tk-info: #6CB4FF; --tk-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); } html[data-theme="dark"][data-tema="cupertino"] .tk-report.tk-report--insights { --tk-view-soft: color-mix(in srgb, var(--tk-proc, #64D2FF) 14%, #1C1C1E); } /* ═══ 28. OPERACIÓN: tablero diario (.op-daily) y conciliación financiera (.cfin-page) — familias gemelas del patrón estándar ════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .op-daily { --op-accent-soft: #F5F5F7; --op-accent-line: #E8E8ED; --op-ivory: #F5F5F7; --op-ivory-2: #FAFAFC; --op-surface: #FFFFFF; --op-surface-warm: #F5F5F7; --op-border: #E8E8ED; --op-text: #48484A; --op-muted: #6E6E73; --op-heading: #1D1D1F; --op-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --op-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-tema="cupertino"] .op-daily-title { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif !important; letter-spacing: -0.015em; } html[data-theme="dark"][data-tema="cupertino"] .op-daily { --op-accent-soft: #2C2C2E; --op-accent-line: #48484A; --op-accent-ink: color-mix(in srgb, var(--op-accent) 60%, #F5F5F7); --op-ivory: #000000; --op-ivory-2: #161617; --op-surface: #1C1C1E; --op-surface-warm: #161617; --op-border: #38383A; --op-text: #D1D1D6; --op-muted: #98989D; --op-heading: #F5F5F7; --op-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --op-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --op-good: #30D158; --op-good-soft: color-mix(in srgb, #30D158 16%, #1C1C1E); --op-warn: #FF9F0A; --op-warn-soft: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --op-risk: #FF6961; --op-risk-soft: color-mix(in srgb, #FF453A 16%, #1C1C1E); background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .op-daily-metric, html[data-theme="dark"][data-tema="cupertino"] .op-daily-panel { background: #1C1C1E; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .op-daily-btn { background: #1C1C1E; border-color: #38383A; color: #F5F5F7; } html[data-theme="dark"][data-tema="cupertino"] .op-daily [class*="op-ag"] { background-color: #1C1C1E; border-color: #38383A; color: #D1D1D6; } html[data-tema="cupertino"]:not([data-theme="dark"]) .cfin-page { --cfin-accent-soft: #F5F5F7; --cfin-accent-line: #E8E8ED; --cfin-ivory: #F5F5F7; --cfin-ivory-2: #FAFAFC; --cfin-surface: #FFFFFF; --cfin-surface-warm: #F5F5F7; --cfin-border: #E8E8ED; --cfin-soft: #F5F5F7; --cfin-text: #48484A; --cfin-muted: #6E6E73; --cfin-heading: #1D1D1F; --cfin-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --cfin-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .cfin-page { --cfin-accent-soft: #2C2C2E; --cfin-accent-line: #48484A; --cfin-accent-ink: color-mix(in srgb, var(--cfin-accent) 60%, #F5F5F7); --cfin-ivory: #000000; --cfin-ivory-2: #161617; --cfin-surface: #1C1C1E; --cfin-surface-warm: #161617; --cfin-border: #38383A; --cfin-soft: #161617; --cfin-text: #D1D1D6; --cfin-muted: #98989D; --cfin-heading: #F5F5F7; --cfin-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --cfin-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --cfin-success: #30D158; --cfin-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --cfin-warning: #FF9F0A; --cfin-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --cfin-danger: #FF6961; --cfin-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .cfin-card, html[data-theme="dark"][data-tema="cupertino"] .cfin-filter, html[data-theme="dark"][data-tema="cupertino"] .cfin-panel, html[data-theme="dark"][data-tema="cupertino"] .cfin-table th, html[data-theme="dark"][data-tema="cupertino"] .cfin-btn { background: #1C1C1E; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .cfin-btn { color: #F5F5F7; } html[data-theme="dark"][data-tema="cupertino"] .cfin-field input, html[data-theme="dark"][data-tema="cupertino"] .cfin-field select { background: #1C1C1E; color: #F5F5F7; color-scheme: dark; } html[data-theme="dark"][data-tema="cupertino"] .cfin-status.warning { background: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); color: #FF9F0A; } /* ═══ 27. FACTURACIÓN (index .billing-page, --billing-*) ════════════ Tarjetas KPI con barra de tono inferior (se queda: es la señal) y blob decorativo de esquina (se va: ruido). Serif de montos por token. Estrena modo oscuro. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .billing-page { --billing-accent-soft: color-mix(in srgb, var(--billing-accent) 10%, #FFFFFF); /* Tinta calmada (mismo criterio que CxC): el label Apple #1D1D1F se sentía "muy negro" en la bandeja; charcoal slate suave, contraste AA holgado. */ --billing-ink: #3A3F47; --billing-muted: #6E6E73; --billing-line: #E8E8ED; --billing-line-strong: #D2D2D7; --billing-paper: #FFFFFF; --billing-ivory: #FAFAFC; --billing-surface: #F5F5F7; --billing-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 26px rgba(0, 0, 0, .06); --billing-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; } html[data-tema="cupertino"]:not([data-theme="dark"]) .billing-summary-card { background: #FFFFFF; } html[data-tema="cupertino"] .billing-summary-card::after { display: none; } html[data-theme="dark"][data-tema="cupertino"] .billing-page { --billing-accent-soft: color-mix(in srgb, var(--billing-accent) 16%, #1C1C1E); --billing-ink: #F5F5F7; --billing-muted: #98989D; --billing-line: rgba(255, 255, 255, .1); --billing-line-strong: rgba(255, 255, 255, .18); --billing-paper: #1C1C1E; --billing-ivory: #161617; --billing-surface: #000000; --billing-shadow: none; --billing-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; } html[data-theme="dark"][data-tema="cupertino"] .billing-summary-card { background: #1C1C1E; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .billing-panel { background: #1C1C1E; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .billing-row { background: #2C2C2E; } html[data-theme="dark"][data-tema="cupertino"] .billing-page input, html[data-theme="dark"][data-tema="cupertino"] .billing-page select { background-color: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } html[data-theme="dark"][data-tema="cupertino"] .billing-filter-form { background: #161617; } html[data-theme="dark"][data-tema="cupertino"] .billing-rfc { color: #D1D1D6; } html[data-theme="dark"][data-tema="cupertino"] .billing-chip-status-pendiente { --chip-color: #E0A64C; } html[data-theme="dark"][data-tema="cupertino"] .billing-chip-status-en_proceso, html[data-theme="dark"][data-tema="cupertino"] .billing-chip-status-procesando { --chip-color: #7FB6D9; } html[data-theme="dark"][data-tema="cupertino"] .billing-chip-status-facturada, html[data-theme="dark"][data-tema="cupertino"] .billing-chip-status-completada { --chip-color: #4FC08A; } html[data-theme="dark"][data-tema="cupertino"] .billing-chip-status-cancelada, html[data-theme="dark"][data-tema="cupertino"] .billing-chip-status-rechazada { --chip-color: #E07B75; } /* ═══ 26. CHECK-IN DIGITAL (interno .checkin-digital-page, --cdi-*) ═ Patrón gemelo de Tareas: volteo por token + estreno de modo oscuro con los mismos tres literales rgba blancos (tiles, panel). */ html[data-tema="cupertino"]:not([data-theme="dark"]) .checkin-digital-page { --cdi-gold-line: #E8E8ED; --cdi-ivory: #F5F5F7; --cdi-ivory-2: #FAFAFC; --cdi-surface: #FFFFFF; --cdi-surface-warm: #F5F5F7; --cdi-border: #E8E8ED; --cdi-text: #48484A; --cdi-muted: #6E6E73; --cdi-heading: #1D1D1F; --cdi-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --cdi-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; } html[data-theme="dark"][data-tema="cupertino"] .checkin-digital-page { --cdi-gold-soft: color-mix(in srgb, var(--cdi-gold) 20%, #1C1C1E); --cdi-gold-line: #48484A; --cdi-gold-ink: color-mix(in srgb, var(--cdi-gold) 60%, #F5F5F7); --cdi-ivory: #000000; --cdi-ivory-2: #161617; --cdi-surface: #1C1C1E; --cdi-surface-warm: #161617; --cdi-border: #38383A; --cdi-text: #D1D1D6; --cdi-muted: #98989D; --cdi-heading: #F5F5F7; --cdi-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --cdi-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --cdi-success: #30D158; --cdi-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --cdi-warning: #FF9F0A; --cdi-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --cdi-info: #6CB4FF; --cdi-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); } html[data-theme="dark"][data-tema="cupertino"] .checkin-digital-page .cdi-summary-item, html[data-theme="dark"][data-tema="cupertino"] .checkin-digital-page .cdi-panel { background: #1C1C1E; box-shadow: none; } html[data-theme="dark"][data-tema="cupertino"] .checkin-digital-page .cdi-top-pill, html[data-theme="dark"][data-tema="cupertino"] .checkin-digital-page .cdi-count-pill { background: color-mix(in srgb, var(--cdi-gold) 16%, #1C1C1E); border-color: #48484A; } /* ═══ 25. CREAR HUÉSPED (.guest-create-page, tokens --gc-*) ═════════ Capa única y disciplinada: volteo casi 100% por token. Estrena modo oscuro (la vista era claro-fijo). Carga Tailwind 2 estático, de ahí los refuerzos en inputs. */ html[data-tema="cupertino"]:not([data-theme="dark"]) .guest-create-page { --gc-accent-soft: #F5F5F7; --gc-accent-line: #E8E8ED; --gc-ivory: #F5F5F7; --gc-ivory-2: #FAFAFC; --gc-surface: #FFFFFF; --gc-surface-warm: #F5F5F7; --gc-line: #E8E8ED; --gc-line-soft: #EDEDF0; --gc-muted: #6E6E73; --gc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --gc-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-create-page { --gc-accent-dark: color-mix(in srgb, var(--gc-accent) 60%, #F5F5F7); --gc-accent-soft: #2C2C2E; --gc-accent-line: #48484A; --gc-ivory: #000000; --gc-ivory-2: #0A0A0B; --gc-surface: #1C1C1E; --gc-surface-warm: #161617; --gc-line: #38383A; --gc-line-soft: #2C2C2E; --gc-muted: #98989D; --gc-text: #F5F5F7; --gc-success: #30D158; --gc-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --gc-info: #6CB4FF; --gc-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); --gc-danger: #FF6961; --gc-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); --gc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --gc-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; background: #000000 !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-create-page .bg-white { background-color: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] .guest-create-page input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"][data-tema="cupertino"] .guest-create-page select, html[data-theme="dark"][data-tema="cupertino"] .guest-create-page textarea { background-color: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } /* Títulos de crear-huésped usan el color de marca (oscuro): en dark, tinta clara */ html[data-theme="dark"][data-tema="cupertino"] .guest-create-page h1, html[data-theme="dark"][data-tema="cupertino"] .guest-create-page h1 span, html[data-theme="dark"][data-tema="cupertino"] .guest-create-page h2, html[data-theme="dark"][data-tema="cupertino"] .guest-create-page h3, html[data-theme="dark"][data-tema="cupertino"] .guest-create-page h4, html[data-theme="dark"][data-tema="cupertino"] .guest-create-page strong, html[data-theme="dark"][data-tema="cupertino"] .guest-create-page .gc-mini-text { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .guests-page { --guest-brand-soft: color-mix(in srgb, var(--guest-brand) 22%, #1C1C1E); --guest-brand-softer: #161617; --guest-gold-soft: color-mix(in srgb, var(--guest-gold) 18%, #1C1C1E); --guest-gold-line: #48484A; --guest-gold-ink: color-mix(in srgb, var(--guest-gold) 60%, #F5F5F7); --guest-ivory: #000000; --guest-ivory-2: #0A0A0B; --guest-surface: #1C1C1E; --guest-surface-warm: #161617; --guest-border: #38383A; --guest-text: #D1D1D6; --guest-muted: #98989D; --guest-heading: #F5F5F7; --guest-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --guest-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif; --g-success: #30D158; --g-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --g-warning: #FF9F0A; --g-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --g-info: #6CB4FF; --g-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); background: #000000 !important; } /* ═══════════════════════════════════════════════════════════════════ §39 TRABAJADORES + USUARIOS FORM + INFORMES Familias --wk- (7 vistas: index, form, ver, simulador caja, preview nómina, reporte, reporte pagos caja), --worker- (usuarios crear/editar) y --inf- (trabajadores/informes). Los banners de reportes usan literales navy propios: quedan intactos por contrato. ═══════════════════════════════════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .workers-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .worker-form-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .worker-detail-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .worker-cash-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .payroll-preview, html[data-tema="cupertino"]:not([data-theme="dark"]) .workers-report, html[data-tema="cupertino"]:not([data-theme="dark"]) .labor-cash-report { --wk-ivory: #F5F5F7; --wk-ivory-2: #FAFAFC; --wk-surface: #FFFFFF; --wk-surface-warm: #F5F5F7; --wk-border: #E8E8ED; --wk-text: #48484A; --wk-muted: #6E6E73; --wk-heading: #1D1D1F; --wk-avatar-bg: #F5F5F7; --wk-avatar-border: #E8E8ED; --wk-avatar-fg: #48484A; --wk-mobile-ink: #1D1D1F; --wk-mobile-text: #48484A; --wk-mobile-muted: #6E6E73; --wk-mobile-faint: #8E8E93; --wk-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .workers-page, html[data-theme="dark"][data-tema="cupertino"] .worker-form-page, html[data-theme="dark"][data-tema="cupertino"] .worker-detail-page, html[data-theme="dark"][data-tema="cupertino"] .worker-cash-page, html[data-theme="dark"][data-tema="cupertino"] .payroll-preview, html[data-theme="dark"][data-tema="cupertino"] .workers-report, html[data-theme="dark"][data-tema="cupertino"] .labor-cash-report { --wk-ivory: #000000; --wk-ivory-2: #161617; --wk-surface: #1C1C1E; --wk-surface-warm: #161617; --wk-border: #38383A; --wk-text: #D1D1D6; --wk-muted: #98989D; --wk-heading: #F5F5F7; --wk-avatar-bg: #2C2C2E; --wk-avatar-border: #48484A; --wk-avatar-fg: #F5F5F7; --wk-mobile-ink: #F5F5F7; --wk-mobile-text: #D1D1D6; --wk-mobile-muted: #98989D; --wk-mobile-faint: #8E8E93; --wk-gold: #E0A64C; --wk-gold-soft: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --wk-gold-line: color-mix(in srgb, #E0A64C 32%, #1C1C1E); --wk-gold-ink: #E8C083; --wk-success: #30D158; --wk-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --wk-warning: #FF9F0A; --wk-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --wk-danger: #FF6961; --wk-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); --wk-info: #6CB4FF; --wk-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); background: #000000 !important; } /* Usuarios crear/editar (.worker-page, tokens --worker-) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .worker-page { --worker-border: #E8E8ED; --worker-text: #48484A; --worker-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .worker-page { --worker-border: #38383A; --worker-text: #D1D1D6; --worker-muted: #98989D; background: #000000 !important; } /* Informes de trabajadores (.informes-page, tokens --inf-) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .informes-page { --inf-surface: #F5F5F7; --inf-card: #FFFFFF; --inf-border: #E8E8ED; --inf-text: #48484A; --inf-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .informes-page { --inf-surface: #000000; --inf-card: #1C1C1E; --inf-border: #38383A; --inf-text: #D1D1D6; --inf-muted: #98989D; --inf-gold: #E0A64C; background: #000000 !important; } /* ═══════════════════════════════════════════════════════════════════ §40 NÓMINA (10 vistas --nom- + reportes de nómina de trabajadores/) --nom-surface es el lienzo y --nom-card el panel (mix sobre blanco en Deleite): aquí van directos a canvas/panel Apple. ═══════════════════════════════════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-cat-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-config-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-ficha-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-emp-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-inc-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-pv-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-pd-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-per-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-detalle { --nom-surface: #F5F5F7; --nom-card: #FFFFFF; --nom-border: #E8E8ED; --nom-text: #48484A; --nom-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .nomina-page, html[data-theme="dark"][data-tema="cupertino"] .nomina-cat-page, html[data-theme="dark"][data-tema="cupertino"] .nomina-config-page, html[data-theme="dark"][data-tema="cupertino"] .nomina-ficha-page, html[data-theme="dark"][data-tema="cupertino"] .nomina-emp-page, html[data-theme="dark"][data-tema="cupertino"] .nomina-inc-page, html[data-theme="dark"][data-tema="cupertino"] .nomina-pv-page, html[data-theme="dark"][data-tema="cupertino"] .nomina-pd-page, html[data-theme="dark"][data-tema="cupertino"] .nomina-per-page, html[data-theme="dark"][data-tema="cupertino"] .nomina-detalle { --nom-surface: #000000; --nom-card: #1C1C1E; --nom-border: #38383A; --nom-text: #D1D1D6; --nom-muted: #98989D; --nom-gold: #E0A64C; background: #000000 !important; } /* Reportes/consolidados de nómina (contenido; banners intactos) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-periodos, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-audit, html[data-tema="cupertino"]:not([data-theme="dark"]) .nomina-exp, html[data-tema="cupertino"]:not([data-theme="dark"]) .snapshot-pay-report, html[data-tema="cupertino"]:not([data-theme="dark"]) .payroll-snapshot-report { --period-surface: #FFFFFF; --period-bg: #F5F5F7; --period-border: #E8E8ED; --period-text: #48484A; --period-muted: #6E6E73; --period-heading: #1D1D1F; --audit-surface: #FFFFFF; --audit-bg: #F5F5F7; --audit-border: #E8E8ED; --audit-text: #48484A; --audit-muted: #6E6E73; --audit-heading: #1D1D1F; --exp-surface: #FFFFFF; --exp-bg: #F5F5F7; --exp-border: #E8E8ED; --exp-text: #48484A; --exp-muted: #6E6E73; --exp-heading: #1D1D1F; --snap-surface: #FFFFFF; --snap-bg: #F5F5F7; --snap-border: #E8E8ED; --snap-text: #48484A; --snap-muted: #6E6E73; --snap-heading: #1D1D1F; --pr-surface: #FFFFFF; --pr-bg: #F5F5F7; --pr-border: #E8E8ED; --pr-line: #E8E8ED; --pr-text: #48484A; --pr-muted: #6E6E73; --pr-heading: #1D1D1F; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .nomina-periodos, html[data-theme="dark"][data-tema="cupertino"] .nomina-audit, html[data-theme="dark"][data-tema="cupertino"] .nomina-exp, html[data-theme="dark"][data-tema="cupertino"] .snapshot-pay-report, html[data-theme="dark"][data-tema="cupertino"] .payroll-snapshot-report { --period-surface: #1C1C1E; --period-bg: #000000; --period-border: #38383A; --period-text: #D1D1D6; --period-muted: #98989D; --period-heading: #F5F5F7; --audit-surface: #1C1C1E; --audit-bg: #000000; --audit-border: #38383A; --audit-text: #D1D1D6; --audit-muted: #98989D; --audit-heading: #F5F5F7; --exp-surface: #1C1C1E; --exp-bg: #000000; --exp-border: #38383A; --exp-text: #D1D1D6; --exp-muted: #98989D; --exp-heading: #F5F5F7; --snap-surface: #1C1C1E; --snap-bg: #000000; --snap-border: #38383A; --snap-text: #D1D1D6; --snap-muted: #98989D; --snap-heading: #F5F5F7; --pr-surface: #1C1C1E; --pr-bg: #000000; --pr-border: #38383A; --pr-line: #38383A; --pr-text: #D1D1D6; --pr-muted: #98989D; --pr-heading: #F5F5F7; background: #000000 !important; } /* ═══════════════════════════════════════════════════════════════════ §41 COMPRAS + PROVEEDORES + CxC/CxP --cp- y --pv- (generador estándar); --cx- extiende los valores de §38 a las vistas hermanas de cuentas por cobrar/pagar. ═══════════════════════════════════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .purchases-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .purchase-form-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .purchase-report-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .purchase-detail-page { --cp-ivory: #F5F5F7; --cp-ivory-2: #FAFAFC; --cp-surface: #FFFFFF; --cp-surface-warm: #F5F5F7; --cp-border: #E8E8ED; --cp-text: #48484A; --cp-muted: #6E6E73; --cp-heading: #1D1D1F; --cp-mobile-ink: #1D1D1F; --cp-mobile-text: #48484A; --cp-mobile-muted: #6E6E73; --cp-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .purchases-page, html[data-theme="dark"][data-tema="cupertino"] .purchase-form-page, html[data-theme="dark"][data-tema="cupertino"] .purchase-report-page, html[data-theme="dark"][data-tema="cupertino"] .purchase-detail-page { --cp-ivory: #000000; --cp-ivory-2: #161617; --cp-surface: #1C1C1E; --cp-surface-warm: #161617; --cp-border: #38383A; --cp-text: #D1D1D6; --cp-muted: #98989D; --cp-heading: #F5F5F7; --cp-mobile-ink: #F5F5F7; --cp-mobile-text: #D1D1D6; --cp-mobile-muted: #98989D; --cp-gold: #E0A64C; --cp-gold-soft: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --cp-gold-line: color-mix(in srgb, #E0A64C 32%, #1C1C1E); --cp-gold-ink: #E8C083; --cp-success: #30D158; --cp-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --cp-warning: #FF9F0A; --cp-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --cp-danger: #FF6961; --cp-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); --cp-info: #6CB4FF; --cp-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); background: #000000 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .providers-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .provider-form-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .provider-detail-page { --pv-ivory: #F5F5F7; --pv-ivory-2: #FAFAFC; --pv-surface: #FFFFFF; --pv-surface-warm: #F5F5F7; --pv-border: #E8E8ED; --pv-text: #48484A; --pv-muted: #6E6E73; --pv-heading: #1D1D1F; --pv-avatar-bg: #F5F5F7; --pv-avatar-border: #E8E8ED; --pv-avatar-fg: #48484A; --pv-mobile-ink: #1D1D1F; --pv-mobile-text: #48484A; --pv-mobile-muted: #6E6E73; --pv-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .providers-page, html[data-theme="dark"][data-tema="cupertino"] .provider-form-page, html[data-theme="dark"][data-tema="cupertino"] .provider-detail-page { --pv-ivory: #000000; --pv-ivory-2: #161617; --pv-surface: #1C1C1E; --pv-surface-warm: #161617; --pv-border: #38383A; --pv-text: #D1D1D6; --pv-muted: #98989D; --pv-heading: #F5F5F7; --pv-avatar-bg: #2C2C2E; --pv-avatar-border: #48484A; --pv-avatar-fg: #F5F5F7; --pv-mobile-ink: #F5F5F7; --pv-mobile-text: #D1D1D6; --pv-mobile-muted: #98989D; --pv-gold: #E0A64C; --pv-gold-soft: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --pv-gold-line: color-mix(in srgb, #E0A64C 32%, #1C1C1E); --pv-gold-ink: #E8C083; --pv-success: #30D158; --pv-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --pv-danger: #FF6961; --pv-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); --pv-info: #6CB4FF; --pv-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); background: #000000 !important; } /* CxC hermanas + CxP completo (mismos tokens --cx- que §38) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .cxc-op-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .cxc-cash-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .cxc-op-detail, html[data-tema="cupertino"]:not([data-theme="dark"]) .cxp-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .cxp-detail-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .cxp-cash-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .cxp-preview-page { --cx-ivory: #F5F5F7; --cx-ivory-2: #FAFAFC; --cx-surface: #FFFFFF; --cx-surface-warm: #F5F5F7; --cx-border: #E8E8ED; --cx-text: #48484A; --cx-muted: #6E6E73; --cx-heading: #1D1D1F; --cx-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .cxc-op-page, html[data-theme="dark"][data-tema="cupertino"] .cxc-cash-page, html[data-theme="dark"][data-tema="cupertino"] .cxc-op-detail, html[data-theme="dark"][data-tema="cupertino"] .cxp-page, html[data-theme="dark"][data-tema="cupertino"] .cxp-detail-page, html[data-theme="dark"][data-tema="cupertino"] .cxp-cash-page, html[data-theme="dark"][data-tema="cupertino"] .cxp-preview-page { --cx-ivory: #000000; --cx-ivory-2: #161617; --cx-surface: #1C1C1E; --cx-surface-warm: #161617; --cx-border: #38383A; --cx-text: #D1D1D6; --cx-muted: #98989D; --cx-heading: #F5F5F7; --cx-gold: #E0A64C; --cx-gold-soft: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --cx-gold-line: color-mix(in srgb, #E0A64C 32%, #1C1C1E); --cx-gold-ink: #E8C083; --cx-success: #30D158; --cx-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --cx-warning: #FF9F0A; --cx-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --cx-danger: #FF6961; --cx-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); --cx-info: #6CB4FF; --cx-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); background: #000000 !important; } /* ═══════════════════════════════════════════════════════════════════ §42 COMERCIALES + OPERACIÓN canales (.cnl), lealtad (.lea), reputación (.rep), forecast (.fc), whatsapp (.wav), motor admin (.mrv), IA resumen (.iav) y vigilancia (.vgf), auditoría (.audit-page) — generador estándar. Camarista (.cam) conserva sus tonos de estado de limpieza (clean/occ). ═══════════════════════════════════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .cnl, html[data-tema="cupertino"]:not([data-theme="dark"]) .lea, html[data-tema="cupertino"]:not([data-theme="dark"]) .rep, html[data-tema="cupertino"]:not([data-theme="dark"]) .fc, html[data-tema="cupertino"]:not([data-theme="dark"]) .wav, html[data-tema="cupertino"]:not([data-theme="dark"]) .mrv, html[data-tema="cupertino"]:not([data-theme="dark"]) .iav, html[data-tema="cupertino"]:not([data-theme="dark"]) .vgf, html[data-tema="cupertino"]:not([data-theme="dark"]) .audit-page { --cnl-ivory: #F5F5F7; --cnl-ivory-2: #FAFAFC; --cnl-surface: #FFFFFF; --cnl-surface-warm: #F5F5F7; --cnl-border: #E8E8ED; --cnl-text: #48484A; --cnl-muted: #6E6E73; --cnl-heading: #1D1D1F; --lea-ivory: #F5F5F7; --lea-ivory-2: #FAFAFC; --lea-surface: #FFFFFF; --lea-surface-warm: #F5F5F7; --lea-border: #E8E8ED; --lea-text: #48484A; --lea-muted: #6E6E73; --lea-heading: #1D1D1F; --rep-ivory: #F5F5F7; --rep-ivory-2: #FAFAFC; --rep-surface: #FFFFFF; --rep-surface-warm: #F5F5F7; --rep-border: #E8E8ED; --rep-text: #48484A; --rep-muted: #6E6E73; --rep-heading: #1D1D1F; --fc-ivory: #F5F5F7; --fc-ivory-2: #FAFAFC; --fc-surface: #FFFFFF; --fc-surface-warm: #F5F5F7; --fc-border: #E8E8ED; --fc-text: #48484A; --fc-muted: #6E6E73; --fc-heading: #1D1D1F; --wav-ivory: #F5F5F7; --wav-ivory-2: #FAFAFC; --wav-surface: #FFFFFF; --wav-surface-warm: #F5F5F7; --wav-border: #E8E8ED; --wav-text: #48484A; --wav-muted: #6E6E73; --wav-heading: #1D1D1F; --mrv-ivory: #F5F5F7; --mrv-ivory-2: #FAFAFC; --mrv-surface: #FFFFFF; --mrv-surface-warm: #F5F5F7; --mrv-line: #E8E8ED; --mrv-text: #48484A; --mrv-muted: #6E6E73; --mrv-heading: #1D1D1F; --mrv-mobile-ink: #1D1D1F; --iav-ivory: #F5F5F7; --iav-ivory-2: #FAFAFC; --iav-surface: #FFFFFF; --iav-surface-warm: #F5F5F7; --iav-border: #E8E8ED; --iav-text: #48484A; --iav-muted: #6E6E73; --iav-heading: #1D1D1F; --vgf-ivory: #F5F5F7; --vgf-ivory-2: #FAFAFC; --vgf-surface: #FFFFFF; --vgf-surface-warm: #F5F5F7; --vgf-border: #E8E8ED; --vgf-text: #48484A; --vgf-muted: #6E6E73; --vgf-heading: #1D1D1F; --au-ivory: #F5F5F7; --au-ivory-2: #FAFAFC; --au-surface: #FFFFFF; --au-surface-warm: #F5F5F7; --au-border: #E8E8ED; --au-text: #48484A; --au-muted: #6E6E73; --au-heading: #1D1D1F; --cnl-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --lea-serif: var(--cnl-serif); --rep-serif: var(--cnl-serif); --fc-serif: var(--cnl-serif); --wav-serif: var(--cnl-serif); --mrv-serif: var(--cnl-serif); --iav-serif: var(--cnl-serif); --vgf-serif: var(--cnl-serif); --au-serif: var(--cnl-serif); background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .cnl, html[data-theme="dark"][data-tema="cupertino"] .lea, html[data-theme="dark"][data-tema="cupertino"] .rep, html[data-theme="dark"][data-tema="cupertino"] .fc, html[data-theme="dark"][data-tema="cupertino"] .wav, html[data-theme="dark"][data-tema="cupertino"] .mrv, html[data-theme="dark"][data-tema="cupertino"] .iav, html[data-theme="dark"][data-tema="cupertino"] .vgf, html[data-theme="dark"][data-tema="cupertino"] .audit-page { --cnl-ivory: #000000; --cnl-ivory-2: #161617; --cnl-surface: #1C1C1E; --cnl-surface-warm: #161617; --cnl-border: #38383A; --cnl-text: #D1D1D6; --cnl-muted: #98989D; --cnl-heading: #F5F5F7; --lea-ivory: #000000; --lea-ivory-2: #161617; --lea-surface: #1C1C1E; --lea-surface-warm: #161617; --lea-border: #38383A; --lea-text: #D1D1D6; --lea-muted: #98989D; --lea-heading: #F5F5F7; --rep-ivory: #000000; --rep-ivory-2: #161617; --rep-surface: #1C1C1E; --rep-surface-warm: #161617; --rep-border: #38383A; --rep-text: #D1D1D6; --rep-muted: #98989D; --rep-heading: #F5F5F7; --fc-ivory: #000000; --fc-ivory-2: #161617; --fc-surface: #1C1C1E; --fc-surface-warm: #161617; --fc-border: #38383A; --fc-text: #D1D1D6; --fc-muted: #98989D; --fc-heading: #F5F5F7; --wav-ivory: #000000; --wav-ivory-2: #161617; --wav-surface: #1C1C1E; --wav-surface-warm: #161617; --wav-border: #38383A; --wav-text: #D1D1D6; --wav-muted: #98989D; --wav-heading: #F5F5F7; --mrv-ivory: #000000; --mrv-ivory-2: #161617; --mrv-surface: #1C1C1E; --mrv-surface-warm: #161617; --mrv-line: #38383A; --mrv-text: #D1D1D6; --mrv-muted: #98989D; --mrv-heading: #F5F5F7; --mrv-mobile-ink: #F5F5F7; --iav-ivory: #000000; --iav-ivory-2: #161617; --iav-surface: #1C1C1E; --iav-surface-warm: #161617; --iav-border: #38383A; --iav-text: #D1D1D6; --iav-muted: #98989D; --iav-heading: #F5F5F7; --vgf-ivory: #000000; --vgf-ivory-2: #161617; --vgf-surface: #1C1C1E; --vgf-surface-warm: #161617; --vgf-border: #38383A; --vgf-text: #D1D1D6; --vgf-muted: #98989D; --vgf-heading: #F5F5F7; --au-ivory: #000000; --au-ivory-2: #161617; --au-surface: #1C1C1E; --au-surface-warm: #161617; --au-border: #38383A; --au-text: #D1D1D6; --au-muted: #98989D; --au-heading: #F5F5F7; --cnl-gold: #E0A64C; --cnl-gold-soft: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --cnl-gold-line: color-mix(in srgb, #E0A64C 32%, #1C1C1E); --cnl-gold-ink: #E8C083; --lea-gold: #E0A64C; --lea-gold-soft: var(--cnl-gold-soft); --lea-gold-line: var(--cnl-gold-line); --lea-gold-ink: #E8C083; --rep-gold: #E0A64C; --rep-gold-soft: var(--cnl-gold-soft); --rep-gold-line: var(--cnl-gold-line); --rep-gold-ink: #E8C083; --fc-gold: #E0A64C; --fc-gold-soft: var(--cnl-gold-soft); --fc-gold-line: var(--cnl-gold-line); --fc-gold-ink: #E8C083; --wav-gold: #E0A64C; --wav-gold-soft: var(--cnl-gold-soft); --wav-gold-line: var(--cnl-gold-line); --wav-gold-ink: #E8C083; --mrv-gold: #E0A64C; --mrv-gold-soft: var(--cnl-gold-soft); --mrv-gold-line: var(--cnl-gold-line); --mrv-gold-ink: #E8C083; --iav-gold: #E0A64C; --iav-gold-soft: var(--cnl-gold-soft); --iav-gold-line: var(--cnl-gold-line); --iav-gold-ink: #E8C083; --vgf-gold: #E0A64C; --vgf-gold-soft: var(--cnl-gold-soft); --vgf-gold-line: var(--cnl-gold-line); --vgf-gold-ink: #E8C083; --au-gold: #E0A64C; --au-gold-soft: var(--cnl-gold-soft); --au-gold-line: var(--cnl-gold-line); --au-gold-ink: #E8C083; --cnl-success: #30D158; --cnl-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --cnl-warning: #FF9F0A; --cnl-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --cnl-danger: #FF6961; --cnl-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); --cnl-info: #6CB4FF; --cnl-info-bg: color-mix(in srgb, #0A84FF 18%, #1C1C1E); --lea-success: #30D158; --lea-success-bg: var(--cnl-success-bg); --lea-warning: #FF9F0A; --lea-warning-bg: var(--cnl-warning-bg); --lea-danger: #FF6961; --lea-danger-bg: var(--cnl-danger-bg); --lea-info: #6CB4FF; --lea-info-bg: var(--cnl-info-bg); --rep-success: #30D158; --rep-success-bg: var(--cnl-success-bg); --rep-warning: #FF9F0A; --rep-warning-bg: var(--cnl-warning-bg); --rep-danger: #FF6961; --rep-danger-bg: var(--cnl-danger-bg); --rep-info: #6CB4FF; --rep-info-bg: var(--cnl-info-bg); --fc-success: #30D158; --fc-success-bg: var(--cnl-success-bg); --fc-warning: #FF9F0A; --fc-warning-bg: var(--cnl-warning-bg); --fc-danger: #FF6961; --fc-danger-bg: var(--cnl-danger-bg); --fc-info: #6CB4FF; --fc-info-bg: var(--cnl-info-bg); --wav-success: #30D158; --wav-success-bg: var(--cnl-success-bg); --wav-warning: #FF9F0A; --wav-warning-bg: var(--cnl-warning-bg); --wav-danger: #FF6961; --wav-danger-bg: var(--cnl-danger-bg); --mrv-success: #30D158; --mrv-success-bg: var(--cnl-success-bg); --mrv-warning: #FF9F0A; --mrv-warning-bg: var(--cnl-warning-bg); --mrv-danger: #FF6961; --mrv-danger-bg: var(--cnl-danger-bg); --mrv-info: #6CB4FF; --mrv-info-bg: var(--cnl-info-bg); --iav-success: #30D158; --iav-success-bg: var(--cnl-success-bg); --iav-warning: #FF9F0A; --iav-warning-bg: var(--cnl-warning-bg); --iav-danger: #FF6961; --iav-danger-bg: var(--cnl-danger-bg); --iav-info: #6CB4FF; --iav-info-bg: var(--cnl-info-bg); --vgf-success: #30D158; --vgf-success-bg: var(--cnl-success-bg); --vgf-warning: #FF9F0A; --vgf-warning-bg: var(--cnl-warning-bg); --vgf-danger: #FF6961; --vgf-danger-bg: var(--cnl-danger-bg); --vgf-info: #6CB4FF; --vgf-info-bg: var(--cnl-info-bg); --au-danger: #FF6961; --au-danger-bg: var(--cnl-danger-bg); --au-info: #6CB4FF; --au-info-bg: var(--cnl-info-bg); background: #000000 !important; } /* Camarista: lienzo y tinta Apple; tonos de estado (clean/occ) intactos */ html[data-tema="cupertino"]:not([data-theme="dark"]) .cam { --dx-ivory: #F5F5F7; --dx-surface: #FFFFFF; --dx-surface-warm: #F5F5F7; --dx-line: #E8E8ED; --dx-line-cool: #EDEDF0; --dx-ink: #1D1D1F; --dx-ink-soft: #48484A; --dx-ink-faint: #6E6E73; --dx-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .cam { --dx-ivory: #000000; --dx-surface: #1C1C1E; --dx-surface-warm: #161617; --dx-line: #38383A; --dx-line-cool: #2C2C2E; --dx-ink: #F5F5F7; --dx-ink-soft: #D1D1D6; --dx-ink-faint: #98989D; --dx-success: #30D158; --dx-success-soft: color-mix(in srgb, #30D158 16%, #1C1C1E); background: #000000 !important; } /* ═══════════════════════════════════════════════════════════════════ §43 CONFIGURACIÓN / ADMINISTRACIÓN Tarifas (--tar-), roles (--rv-/--rf-), corrección (--co-, tokens en :root → se flippean a nivel html: el prefijo es exclusivo del módulo), descuentos inventario (--disc-), editar estancia (--ee-) y editar habitaciones (--er-), corte detalle (--cut-), documentos hermanas (--dc-), arqueo (--am-). Tonos data-viz (amber/plum/teal…) intactos. ═══════════════════════════════════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .tar-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .tarifa-create-page { --tar-bg: #F5F5F7; --tar-bg-2: #FAFAFC; --tar-ivory: #F5F5F7; --tar-ivory-2: #FAFAFC; --tar-surface: #FFFFFF; --tar-surface-warm: #F5F5F7; --tar-border: #E8E8ED; --tar-summary-line: #EDEDF0; --tar-text: #48484A; --tar-muted: #6E6E73; --tar-heading: #1D1D1F; --tar-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .tar-page, html[data-theme="dark"][data-tema="cupertino"] .tarifa-create-page { --tar-bg: #000000; --tar-bg-2: #161617; --tar-ivory: #000000; --tar-ivory-2: #161617; --tar-surface: #1C1C1E; --tar-surface-warm: #161617; --tar-border: #38383A; --tar-summary-line: #38383A; --tar-text: #D1D1D6; --tar-muted: #98989D; --tar-heading: #F5F5F7; --tar-gold: #E0A64C; --tar-gold-soft: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --tar-gold-line: color-mix(in srgb, #E0A64C 32%, #1C1C1E); --tar-gold-ink: #E8C083; --tar-success: #30D158; --tar-success-soft: color-mix(in srgb, #30D158 16%, #1C1C1E); --tar-danger: #FF6961; --tar-danger-soft: color-mix(in srgb, #FF453A 16%, #1C1C1E); --tar-info: #6CB4FF; --tar-info-soft: color-mix(in srgb, #0A84FF 18%, #1C1C1E); background: #000000 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .roles-view, html[data-tema="cupertino"]:not([data-theme="dark"]) .rolf-view { --rv-bg: #F5F5F7; --rv-surface: #FFFFFF; --rv-border: #E8E8ED; --rv-text: #48484A; --rv-muted: #6E6E73; --rf-bg: #F5F5F7; --rf-surface: #FFFFFF; --rf-border: #E8E8ED; --rf-text: #48484A; --rf-muted: #6E6E73; --rv-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; --rf-serif: var(--rv-serif); background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .roles-view, html[data-theme="dark"][data-tema="cupertino"] .rolf-view { --rv-bg: #000000; --rv-surface: #1C1C1E; --rv-border: #38383A; --rv-text: #D1D1D6; --rv-muted: #98989D; --rf-bg: #000000; --rf-surface: #1C1C1E; --rf-border: #38383A; --rf-text: #D1D1D6; --rf-muted: #98989D; background: #000000 !important; } /* Corrección de movimientos: tokens --co- definidos en :root del módulo */ html[data-tema="cupertino"]:not([data-theme="dark"]) { --co-ivory: #F5F5F7; --co-ivory-2: #FAFAFC; --co-surface: #FFFFFF; --co-surface-warm: #F5F5F7; --co-border: #E8E8ED; --co-text: #48484A; --co-muted: #6E6E73; --co-heading: #1D1D1F; --co-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; } html[data-theme="dark"][data-tema="cupertino"] { --co-ivory: #000000; --co-ivory-2: #161617; --co-surface: #1C1C1E; --co-surface-warm: #161617; --co-border: #38383A; --co-text: #D1D1D6; --co-muted: #98989D; --co-heading: #F5F5F7; --co-gold: #E0A64C; --co-gold-soft: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --co-gold-line: color-mix(in srgb, #E0A64C 32%, #1C1C1E); --co-gold-ink: #E8C083; --co-success: #30D158; --co-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --co-warning: #FF9F0A; --co-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --co-danger: #FF6961; --co-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); } html[data-tema="cupertino"]:not([data-theme="dark"]) .discount-config-view { --disc-surface: #FFFFFF; --disc-soft: #F5F5F7; --disc-text: #48484A; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .discount-config-view { --disc-surface: #1C1C1E; --disc-soft: #2C2C2E; --disc-text: #D1D1D6; --disc-warn: #FF9F0A; background: #000000 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .ee-page { --ee-surface: #FFFFFF; --ee-line: #E8E8ED; --ee-ink: #1D1D1F; --ee-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .ee-page { --ee-surface: #1C1C1E; --ee-line: #38383A; --ee-ink: #F5F5F7; --ee-muted: #98989D; --ee-success: #30D158; --ee-success-soft: color-mix(in srgb, #30D158 16%, #1C1C1E); --ee-warning: #FF9F0A; --ee-warning-soft: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --ee-danger: #FF6961; --ee-danger-soft: color-mix(in srgb, #FF453A 16%, #1C1C1E); --ee-accent-soft: #2C2C2E; background: #000000 !important; } /* Editar habitaciones de reserva: solo tokens (wrapper .page-container es genérico) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .page-container { --er-surface: #FAFAFC; --er-surface-strong: #FFFFFF; } html[data-theme="dark"][data-tema="cupertino"] .page-container { --er-surface: #161617; --er-surface-strong: #1C1C1E; } html[data-tema="cupertino"]:not([data-theme="dark"]) .cut-detail-page { --cut-bg: #F5F5F7; --cut-paper: #FFFFFF; --cut-line: #E8E8ED; --cut-line-soft: #EDEDF0; --cut-text: #1D1D1F; --cut-muted: #6E6E73; --cut-soft: #F5F5F7; --cut-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .cut-detail-page { --cut-bg: #000000; --cut-paper: #1C1C1E; --cut-line: #38383A; --cut-line-soft: #2C2C2E; --cut-text: #F5F5F7; --cut-muted: #98989D; --cut-soft: #2C2C2E; --cut-blue: #6CB4FF; --cut-blue-soft: color-mix(in srgb, #0A84FF 18%, #1C1C1E); --cut-green: #30D158; --cut-green-soft: color-mix(in srgb, #30D158 16%, #1C1C1E); --cut-red: #FF6961; --cut-red-soft: color-mix(in srgb, #FF453A 16%, #1C1C1E); --cut-violet: #BF5AF2; --cut-violet-soft: color-mix(in srgb, #BF5AF2 18%, #1C1C1E); --cut-accent: #E0A64C; background: #000000 !important; } /* Documentos hermanas: mismos tokens --dc- que §38 */ html[data-tema="cupertino"]:not([data-theme="dark"]) .doc-edit-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .doc-upload-page, html[data-tema="cupertino"]:not([data-theme="dark"]) .doc-detail-page { --dc-ivory: #F5F5F7; --dc-ivory-2: #FAFAFC; --dc-surface: #FFFFFF; --dc-surface-warm: #F5F5F7; --dc-border: #E8E8ED; --dc-text: #48484A; --dc-text-soft: #6E6E73; --dc-muted: #6E6E73; --dc-heading: #1D1D1F; --dc-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .doc-edit-page, html[data-theme="dark"][data-tema="cupertino"] .doc-upload-page, html[data-theme="dark"][data-tema="cupertino"] .doc-detail-page { --dc-ivory: #000000; --dc-ivory-2: #161617; --dc-surface: #1C1C1E; --dc-surface-warm: #161617; --dc-border: #38383A; --dc-text: #D1D1D6; --dc-text-soft: #98989D; --dc-muted: #98989D; --dc-heading: #F5F5F7; --dc-gold: #E0A64C; --dc-gold-soft: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --dc-gold-line: color-mix(in srgb, #E0A64C 32%, #1C1C1E); --dc-gold-ink: #E8C083; --dc-success: #30D158; --dc-success-bg: color-mix(in srgb, #30D158 16%, #1C1C1E); --dc-warning: #FF9F0A; --dc-warning-bg: color-mix(in srgb, #FF9F0A 16%, #1C1C1E); --dc-danger: #FF6961; --dc-danger-bg: color-mix(in srgb, #FF453A 16%, #1C1C1E); background: #000000 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .arqueo-page { --am-border: #E8E8ED; --am-text: #48484A; --am-muted: #6E6E73; --am-soft: #F5F5F7; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .arqueo-page { --am-border: #38383A; --am-text: #D1D1D6; --am-muted: #98989D; --am-soft: #2C2C2E; --am-ok: #30D158; --am-error: #FF6961; --am-warning: #FF9F0A; --am-accent-soft: #2C2C2E; background: #000000 !important; } /* ═══════════════════════════════════════════════════════════════════ §44 REPORTES — solo contenido (lienzo, paneles, tinta). Los banners hero de cada reporte usan literales propios y quedan intactos por contrato ("los headers de reportes no se tocan"). ═══════════════════════════════════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .exec-page { --exec-ivory: #F5F5F7; --exec-surface: #FFFFFF; --exec-surface-warm: #F5F5F7; --exec-section: #FFFFFF; --exec-line: #E8E8ED; --exec-line-soft: #EDEDF0; --exec-soft: #F5F5F7; --exec-text: #48484A; --exec-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .exec-page { --exec-ivory: #000000; --exec-surface: #1C1C1E; --exec-surface-warm: #161617; --exec-section: #1C1C1E; --exec-line: #38383A; --exec-line-soft: #2C2C2E; --exec-soft: #2C2C2E; --exec-text: #D1D1D6; --exec-muted: #98989D; background: #000000 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .reportes-view { --rp-ivory: #F5F5F7; --rp-ivory-2: #FAFAFC; --rp-surface: #FFFFFF; --rp-line: #E8E8ED; --rp-ink: #1D1D1F; --rp-ink-2: #48484A; --rp-muted: #6E6E73; --rp-heading: #1D1D1F; --rp-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .reportes-view { --rp-ivory: #000000; --rp-ivory-2: #161617; --rp-surface: #1C1C1E; --rp-line: #38383A; --rp-ink: #F5F5F7; --rp-ink-2: #D1D1D6; --rp-muted: #98989D; --rp-heading: #F5F5F7; --rp-gold: #E0A64C; --rp-gold-bg: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --rp-gold-soft: color-mix(in srgb, #E0A64C 14%, #1C1C1E); --rp-gold-line: color-mix(in srgb, #E0A64C 32%, #1C1C1E); background: #000000 !important; } /* Reportes con familias chicas: lienzo/tinta; acentos y data-viz intactos */ html[data-tema="cupertino"]:not([data-theme="dark"]) .gd-view, html[data-tema="cupertino"]:not([data-theme="dark"]) .rentables-view, html[data-tema="cupertino"]:not([data-theme="dark"]) .report-link-view, html[data-tema="cupertino"]:not([data-theme="dark"]) .mant-report-view, html[data-tema="cupertino"]:not([data-theme="dark"]) .mant-prog, html[data-tema="cupertino"]:not([data-theme="dark"]) .profit-report-view, html[data-tema="cupertino"]:not([data-theme="dark"]) .occ-report-view, html[data-tema="cupertino"]:not([data-theme="dark"]) .geo-report-view, html[data-tema="cupertino"]:not([data-theme="dark"]) .rank-report-view, html[data-tema="cupertino"]:not([data-theme="dark"]) .stay-report-view { --gd-bg: #F5F5F7; --gd-line: #E8E8ED; --gd-text: #48484A; --gd-muted: #6E6E73; --rent-bg: #F5F5F7; --rent-surface: #FFFFFF; --rent-line: #E8E8ED; --rent-text: #48484A; --rent-muted: #6E6E73; --rent-soft: #F5F5F7; --rl-bg: #F5F5F7; --rl-surface: #FFFFFF; --rl-line: #E8E8ED; --rl-text: #48484A; --rl-muted: #6E6E73; --mant-bg: #F5F5F7; --mant-surface: #FFFFFF; --mant-line: #E8E8ED; --mant-line-soft: #EDEDF0; --mant-text: #48484A; --mant-muted: #6E6E73; --mant-soft: #F5F5F7; --pr-bg: #F5F5F7; --pr-surface: #FFFFFF; --pr-line: #E8E8ED; --pr-text: #48484A; --pr-muted: #6E6E73; --occ-bg: #F5F5F7; --occ-line: #E8E8ED; --occ-muted: #6E6E73; --geo-bg: #F5F5F7; --geo-line: #E8E8ED; --geo-line-soft: #EDEDF0; --rank-line: #E8E8ED; --rank-muted: #6E6E73; --stay-line: #E8E8ED; --stay-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .gd-view, html[data-theme="dark"][data-tema="cupertino"] .rentables-view, html[data-theme="dark"][data-tema="cupertino"] .report-link-view, html[data-theme="dark"][data-tema="cupertino"] .mant-report-view, html[data-theme="dark"][data-tema="cupertino"] .mant-prog, html[data-theme="dark"][data-tema="cupertino"] .profit-report-view, html[data-theme="dark"][data-tema="cupertino"] .occ-report-view, html[data-theme="dark"][data-tema="cupertino"] .geo-report-view, html[data-theme="dark"][data-tema="cupertino"] .rank-report-view, html[data-theme="dark"][data-tema="cupertino"] .stay-report-view { --gd-bg: #000000; --gd-line: #38383A; --gd-text: #D1D1D6; --gd-muted: #98989D; --rent-bg: #000000; --rent-surface: #1C1C1E; --rent-line: #38383A; --rent-text: #D1D1D6; --rent-muted: #98989D; --rent-soft: #2C2C2E; --rl-bg: #000000; --rl-surface: #1C1C1E; --rl-line: #38383A; --rl-text: #D1D1D6; --rl-muted: #98989D; --mant-bg: #000000; --mant-surface: #1C1C1E; --mant-line: #38383A; --mant-line-soft: #2C2C2E; --mant-text: #D1D1D6; --mant-muted: #98989D; --mant-soft: #2C2C2E; --mant-good: #30D158; --mant-bad: #FF6961; --mant-warn: #FF9F0A; --pr-bg: #000000; --pr-surface: #1C1C1E; --pr-line: #38383A; --pr-text: #D1D1D6; --pr-muted: #98989D; --occ-bg: #000000; --occ-line: #38383A; --occ-muted: #98989D; --geo-bg: #000000; --geo-line: #38383A; --geo-line-soft: #2C2C2E; --rank-line: #38383A; --rank-muted: #98989D; --stay-line: #38383A; --stay-muted: #98989D; background: #000000 !important; } /* ═══════════════════════════════════════════════════════════════════ §45 SUELTAS: factura detalle, historial de habitación, nuevo producto ═══════════════════════════════════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .invoice-desk { --invoice-page: #F5F5F7; --invoice-paper: #FFFFFF; --invoice-subtle: #FAFAFC; --invoice-line: #E8E8ED; --invoice-ink: #1D1D1F; --invoice-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .invoice-desk { --invoice-page: #000000; --invoice-paper: #1C1C1E; --invoice-subtle: #161617; --invoice-line: #38383A; --invoice-ink: #F5F5F7; --invoice-muted: #98989D; background: #000000 !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .vista-historial { --history-paper: #FFFFFF; --history-line: #E8E8ED; --history-ink: #1D1D1F; --history-muted: #6E6E73; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .vista-historial { --history-paper: #1C1C1E; --history-line: #38383A; --history-ink: #F5F5F7; --history-muted: #98989D; --history-gold: #E0A64C; background: #000000 !important; } /* Inventario: alta de producto (misma familia --inv- que §38) */ html[data-tema="cupertino"]:not([data-theme="dark"]) .nuevo-producto-view { --inv-ivory: #F5F5F7; --inv-ivory-2: #FAFAFC; --inv-surface: #FFFFFF; --inv-surface-warm: #F5F5F7; --inv-border: #E8E8ED; --inv-line: #E8E8ED; --inv-text: #48484A; --inv-muted: #6E6E73; --inv-heading: #1D1D1F; --inv-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", system-ui, sans-serif; background: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .nuevo-producto-view { --inv-ivory: #000000; --inv-ivory-2: #161617; --inv-surface: #1C1C1E; --inv-surface-warm: #161617; --inv-border: #38383A; --inv-line: #38383A; --inv-text: #D1D1D6; --inv-muted: #98989D; --inv-heading: #F5F5F7; background: #000000 !important; } /* §39b — Componentes glass de la familia wk (literales blancos del generador Deleite): grafito en modo oscuro. Aplica a las 7 vistas. */ html[data-theme="dark"][data-tema="cupertino"] :is(.workers-page, .worker-form-page, .worker-detail-page, .worker-cash-page, .payroll-preview, .workers-report, .labor-cash-report) :is(.wk-summary-item, .wk-panel, .wk-pay-card, .wk-ledger-card, .wk-form-pad) { background: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.workers-page, .worker-form-page, .worker-detail-page, .worker-cash-page, .payroll-preview, .workers-report, .labor-cash-report) :is(.wk-panel-head, .wk-balance) { background: #161617 !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.workers-page, .worker-form-page, .worker-detail-page, .worker-cash-page, .payroll-preview, .workers-report, .labor-cash-report) :is(.wk-btn, .wk-btn-muted) { background: #2C2C2E !important; color: #D1D1D6 !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.workers-page, .worker-form-page, .worker-detail-page, .worker-cash-page, .payroll-preview, .workers-report, .labor-cash-report) .wk-tab:hover { background: #2C2C2E !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.workers-page, .worker-form-page, .worker-detail-page, .worker-cash-page, .payroll-preview, .workers-report, .labor-cash-report) :is(input, select, textarea) { background: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } /* §41b — Glass blanco del generador Deleite → grafito en oscuro. El mismo pase de pulido (rgba(255,255,255,.8x)) se repite en compras, proveedores, CxC/CxP, whatsapp, canales, lealtad, forecast, reputación, auditoría, motor y tarifas: se corrige por componente, no por vista. */ html[data-theme="dark"][data-tema="cupertino"] :is(.purchases-page, .purchase-form-page, .purchase-report-page, .purchase-detail-page, .providers-page, .provider-form-page, .provider-detail-page, .cxc-page, .cxc-op-page, .cxc-cash-page, .cxc-op-detail, .cxp-page, .cxp-detail-page, .cxp-cash-page, .cxp-preview-page, .wav, .cnl, .lea, .fc, .rep, .mrv, .audit-page, .tar-page, .tarifa-create-page) :is(.cp-summary-item, .cp-panel, .cp-mobile-card, .pv-summary-item, .pv-panel, .pv-mobile-card, .cx-summary-item, .cx-panel, .cx-mobile-card, .cx-stat, .cx-pay-card, .cx-resolution, .wav-summary-item, .wav-panel, .cnl-summary-item, .cnl-panel, .cnl-alert, .lea-summary-item, .lea-panel, .fc-summary-item, .fc-panel, .rep-card, .rep-kpi, .au-summary-item, .au-panel, .mrv-shortcut, .tar-filters, .tar-panel-body) { background: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.purchases-page, .purchase-form-page, .purchase-report-page, .purchase-detail-page, .providers-page, .provider-form-page, .provider-detail-page, .cxc-page, .cxc-op-page, .cxc-cash-page, .cxc-op-detail, .cxp-page, .cxp-detail-page, .cxp-cash-page, .cxp-preview-page, .mrv) :is(.cp-btn-muted, .pv-btn-muted, .cx-btn-muted, .mrv-btn) { background: #2C2C2E !important; color: #D1D1D6 !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.cxc-op-page, .cxc-cash-page, .cxc-op-detail) .cx-shell { background: #161617 !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.cxp-detail-page, .cxc-op-detail) .cx-soft-note { background: #2C2C2E !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.tar-page, .tarifa-create-page) .modal-content { background: #1C1C1E !important; color: #D1D1D6; } html[data-theme="dark"][data-tema="cupertino"] :is(.tar-page, .tarifa-create-page) .modal-header { background: #161617 !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.purchases-page, .purchase-form-page, .purchase-detail-page, .providers-page, .provider-form-page, .cxc-page, .cxc-op-page, .cxc-cash-page, .cxp-page, .cxp-cash-page, .wav, .cnl, .lea, .fc, .rep, .mrv, .audit-page, .tar-page, .tarifa-create-page, .roles-view, .rolf-view, .nomina-page, .nomina-cat-page, .nomina-config-page, .nomina-ficha-page, .nomina-emp-page, .nomina-inc-page, .nomina-pv-page, .nomina-pd-page, .nomina-per-page, .informes-page, .worker-page, .arqueo-page, .ee-page) :is(input, select, textarea) { background: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } /* §41c — Literales crema del generador (rgba(251,248,242,.8x) y afines): cabeceras de tabla, hover de fila, vacíos y tiras de tabs en oscuro. */ html[data-theme="dark"][data-tema="cupertino"] :is(.cp-table, .pv-table, .cx-table, .cnl-table, .rep-table, .au-table, .wk-table, .lea-table, .fc-table, .wav-table, .tar-table) thead { background: #161617 !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.cp-row, .pv-row, .cx-row, .wk-row, .lea-row) { background: transparent !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.cp-row, .pv-row, .cx-row, .wk-row, .lea-row):hover { background: #2C2C2E !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.cp-empty, .pv-empty, .cx-empty, .wk-empty, .lea-empty, .cnl-empty, .rep-empty, .au-empty) { background: #161617 !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.wk-tabs, .cp-tabs, .pv-tabs, .cx-tabs) { background: #161617 !important; border-color: #38383A !important; } /* §43b — Tarifas dinámicas: tarjetas métricas y cabeceras metálicas */ html[data-theme="dark"][data-tema="cupertino"] .tar-page .tar-metric-card { background: #1C1C1E !important; border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .tar-page .empty-state { background: #161617 !important; color: #98989D; } html[data-theme="dark"][data-tema="cupertino"] .tar-page :is(.tar-filters, .tar-panel-body) { background: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] .tar-page :is(.tarifa-section-header, .tar-filters-hd) { background: #161617 !important; color: #F5F5F7; } html[data-theme="dark"][data-tema="cupertino"] .roles-view :is(.rv-btn, .rv-action, button.is-ghost), html[data-theme="dark"][data-tema="cupertino"] .rolf-view :is(.rf-btn, .rf-action) { background: #2C2C2E !important; border-color: #38383A !important; color: #D1D1D6 !important; } /* §43c — Tarifas: cabecera metálica de paneles */ html[data-theme="dark"][data-tema="cupertino"] .tar-page .tar-panel-hd { background: #161617 !important; } html[data-theme="dark"][data-tema="cupertino"] .tar-page .tar-filters-hd { background: #161617 !important; border-bottom-color: #38383A !important; } /* §43d — Tarifas: cuerpos Tailwind con velo blanco dentro de paneles */ html[data-theme="dark"][data-tema="cupertino"] .tar-page :is(.tar-filters, .tar-panel) :is(.p-4, .p-3, .p-5) { background: #1C1C1E !important; } html[data-theme="dark"][data-tema="cupertino"] .tar-page .btn-reset { background: #2C2C2E !important; border-color: #38383A !important; color: #D1D1D6 !important; } /* ═══════════════════════════════════════════════════════════════════ §46 NIGHT AUDIT (.na) — vista Tailwind sin familia de tokens propia ═══════════════════════════════════════════════════════════════════ */ html[data-tema="cupertino"]:not([data-theme="dark"]) .na { background: #F5F5F7; } html[data-theme="dark"][data-tema="cupertino"] .na { background: #000000; } html[data-theme="dark"][data-tema="cupertino"] .na .na-card { background: #1C1C1E !important; border-color: #38383A !important; color: #D1D1D6; } html[data-theme="dark"][data-tema="cupertino"] .na :is(h1, h2, h3, strong) { color: #F5F5F7; } html[data-theme="dark"][data-tema="cupertino"] .na th { color: #98989D; } html[data-theme="dark"][data-tema="cupertino"] .na td { color: #D1D1D6; } html[data-theme="dark"][data-tema="cupertino"] .na :is(input, select) { background: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } /* §42b — IA (resumen diario y vigilancia financiera): panel e informe */ html[data-theme="dark"][data-tema="cupertino"] :is(.vgf, .iav) :is(.vgf-summary-item, .vgf-panel, .iav-summary-item, .iav-panel, .iav-field) { background: #1C1C1E !important; border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.vgf, .iav) :is(.vgf-reading, .iav-reading) { background: #161617 !important; border-color: #38383A !important; color: #D1D1D6; } html[data-theme="dark"][data-tema="cupertino"] :is(.vgf, .iav) :is(.vgf-reading, .iav-reading) :is(h1, h2, h3, h4, strong, b) { color: #F5F5F7; } /* §44b — Tablero ejecutivo: componentes con blanco literal, en oscuro */ html[data-theme="dark"][data-tema="cupertino"] .exec-page :is(.exec-metric, .exec-stat, .exec-panel, .exec-filter, .exec-field, .exec-table) { background: #1C1C1E !important; border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .exec-page :is(.exec-layout, .exec-metrics, .exec-stat-grid, .exec-filter-grid, .exec-stack, .exec-actions, .exec-hero, .exec-hero-main, .exec-row) { background: transparent !important; } html[data-theme="dark"][data-tema="cupertino"] .exec-page :is(.exec-btn, .exec-badge, .exec-status, .exec-panel-body .ok, .exec-panel-body .warning, .exec-panel-body .error, .exec-panel-body .primary) { background: #2C2C2E !important; border-color: #38383A !important; color: #D1D1D6 !important; } html[data-theme="dark"][data-tema="cupertino"] .exec-page :is(.exec-title, h1, h2, h3, strong) { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .exec-page .exec-subtitle { color: #98989D !important; } html[data-theme="dark"][data-tema="cupertino"] .exec-page th { color: #98989D !important; } html[data-theme="dark"][data-tema="cupertino"] .exec-page td { color: #D1D1D6 !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.exec-page, .nuevo-producto-view, .na) :is(input, select, textarea) { background: #1C1C1E !important; border-color: #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } /* §44c — Ejecutivo: cabecera de panel */ html[data-theme="dark"][data-tema="cupertino"] .exec-page .exec-panel-head { background: #161617 !important; border-color: #38383A !important; } html[data-theme="dark"][data-tema="cupertino"] .exec-page .exec-panel-title { color: #F5F5F7 !important; } html[data-theme="dark"][data-tema="cupertino"] .exec-page .exec-panel-subtitle { color: #98989D !important; } /* ═══ §47. LIQUID GLASS reutilizable para vistas simples (sin header block) ══ Vistas tipo /huespedes: bajo Cupertino el header queda plano (§16 silencia la banda). El owner (2026-07-11) pidió vestir SOLO 3 piezas con el cristal de la casa, sin crear bloque: título, icono al lado del título y botón(es) de acción de esa fila. Dos mecanismos: 1) Clases opt-in (para casos sueltos o markup atípico): .ms-glass-icon → tesela frosted de marca (icono al lado del título) .ms-glass-title → título en tinta de marca con realce .ms-glass-btn → botón de acción en cristal de marca (anillo por inset, NO border, para no alterar la altura del botón) 2) COBERTURA CENTRAL por patrón (owner 2026-07-11, "hazlo bien"): las ~50 vistas del pase "header limpio" comparten la convención {prefijo}-title-lockup > {prefijo}-hero-icon +

. El icono y el título se visten aquí centralmente vía :is(); los botones de la fila siguen siendo opt-in por vista (semánticos quedan sólidos: PDF rojo, Excel verde, entrada/salida de inventario, res-btn-primary contrato §15). Contenedores admitidos — verificados de fondo CLARO (2026-07-11): [class*="title-lockup"] (convención general) .worker-hero-main / .exec-hero-main / .gc-hero-main (variantes claras) .billing-title-row (facturación) NO agregar [class*="hero-main"] ni [class*="title-row"] genéricos: los sub-reportes (profit/rent/mant/geo/disc-hero-main) son bandas OSCURAS y caja/ver_corte + habitaciones usan *-title-row con tratamiento propio. SOLO tema Cupertino; la base y otros temas quedan intactos. */ /* ── Icono: tesela FROSTED clara de la marca (mismo candy glass del header), glifo en tinta verde profunda. NO saturada: así se distingue de la tesela sólida anterior y habla el mismo idioma liquid claro. ── */ html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .ms-glass-icon, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope :is([class*="title-lockup"], .worker-hero-main, .exec-hero-main, .gc-hero-main, .billing-title-row) [class*="hero-icon"] { background: radial-gradient(115% 120% at 28% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, color-mix(in srgb, var(--brand-primary, #1B2746) 30%, #FFFFFF), color-mix(in srgb, var(--brand-primary, #1B2746) 50%, #FFFFFF)) !important; border: 1px solid color-mix(in srgb, var(--brand-primary, #1B2746) 30%, rgba(255, 255, 255, .85)) !important; color: color-mix(in srgb, var(--brand-primary, #1B2746) 58%, #08301C) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -5px 10px color-mix(in srgb, var(--brand-primary, #1B2746) 14%, transparent), 0 9px 20px -10px color-mix(in srgb, var(--brand-primary, #1B2746) 48%, transparent) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .ms-glass-icon > i, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .ms-glass-icon i, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope :is([class*="title-lockup"], .worker-hero-main, .exec-hero-main, .gc-hero-main, .billing-title-row) [class*="hero-icon"] i { color: color-mix(in srgb, var(--brand-primary, #1B2746) 60%, #08301C) !important; -webkit-text-fill-color: color-mix(in srgb, var(--brand-primary, #1B2746) 60%, #08301C); } html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .ms-glass-icon, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope :is([class*="title-lockup"], .worker-hero-main, .exec-hero-main, .gc-hero-main, .billing-title-row) [class*="hero-icon"] { background: radial-gradient(115% 120% at 28% 8%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, color-mix(in srgb, var(--brand-primary, #1B2746) 46%, #1C1C1E), color-mix(in srgb, var(--brand-primary, #1B2746) 30%, #1C1C1E)) !important; border: 1px solid color-mix(in srgb, var(--brand-primary, #1B2746) 40%, rgba(255, 255, 255, .14)) !important; color: #EAF6EE !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 9px 20px -12px rgba(0, 0, 0, .6) !important; } html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .ms-glass-icon > i, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .ms-glass-icon i, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope :is([class*="title-lockup"], .worker-hero-main, .exec-hero-main, .gc-hero-main, .billing-title-row) [class*="hero-icon"] i { color: #EAF6EE !important; -webkit-text-fill-color: #EAF6EE; } /* ── Título: tinta de marca con realce especular (claro) ── */ html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope [data-ms-hero] .ms-glass-title, html[data-tema="cupertino"]:not([data-theme="dark"]) .ms-glass-title, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope :is([class*="title-lockup"], .worker-hero-main, .exec-hero-main, .gc-hero-main, .billing-title-row) h1 { color: color-mix(in srgb, var(--brand-primary, #1B2746) 44%, #0C1E15) !important; -webkit-text-fill-color: color-mix(in srgb, var(--brand-primary, #1B2746) 44%, #0C1E15); text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important; } html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope [data-ms-hero] .ms-glass-title, html[data-theme="dark"][data-tema="cupertino"] .ms-glass-title, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope :is([class*="title-lockup"], .worker-hero-main, .exec-hero-main, .gc-hero-main, .billing-title-row) h1 { color: color-mix(in srgb, var(--brand-primary, #1B2746) 26%, #F5F5F7) !important; -webkit-text-fill-color: color-mix(in srgb, var(--brand-primary, #1B2746) 26%, #F5F5F7); text-shadow: 0 1px 0 rgba(0, 0, 0, .35) !important; } /* ── Botón: cristal de marca frosted. El anillo es inset box-shadow, así que forzamos el border a transparente para no duplicar contorno en botones que ya traían borde (p.ej. .cx-btn-muted). ── */ html[data-tema="cupertino"] .hotel-layout-scope .ms-glass-btn { border-color: transparent !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .ms-glass-btn { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, color-mix(in srgb, var(--brand-primary, #1B2746) 30%, #FFFFFF), color-mix(in srgb, var(--brand-primary, #1B2746) 48%, #FFFFFF)) !important; color: color-mix(in srgb, var(--brand-primary, #1B2746) 48%, #0C2C1A) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #1B2746) 32%, rgba(255, 255, 255, .85)), inset 0 1px 0 rgba(255, 255, 255, .85), 0 8px 18px -10px color-mix(in srgb, var(--brand-primary, #1B2746) 50%, transparent) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .ms-glass-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, color-mix(in srgb, var(--brand-primary, #1B2746) 38%, #FFFFFF), color-mix(in srgb, var(--brand-primary, #1B2746) 56%, #FFFFFF)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #1B2746) 38%, rgba(255, 255, 255, .85)), inset 0 1px 0 rgba(255, 255, 255, .9), 0 11px 22px -10px color-mix(in srgb, var(--brand-primary, #1B2746) 55%, transparent) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .ms-glass-btn > i, html[data-tema="cupertino"]:not([data-theme="dark"]) .hotel-layout-scope .ms-glass-btn i { color: color-mix(in srgb, var(--brand-primary, #1B2746) 52%, #0C2C1A) !important; } /* ── Botón: cristal de marca (oscuro) ── */ html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .ms-glass-btn { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, color-mix(in srgb, var(--brand-primary, #1B2746) 42%, #1C1C1E), color-mix(in srgb, var(--brand-primary, #1B2746) 28%, #1C1C1E)) !important; color: #F5F5F7 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #1B2746) 40%, rgba(255, 255, 255, .12)), inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 22px -12px rgba(0, 0, 0, .6) !important; } html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .ms-glass-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, color-mix(in srgb, var(--brand-primary, #1B2746) 50%, #1C1C1E), color-mix(in srgb, var(--brand-primary, #1B2746) 34%, #1C1C1E)) !important; } html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .ms-glass-btn > i, html[data-theme="dark"][data-tema="cupertino"] .hotel-layout-scope .ms-glass-btn i { color: #F5F5F7 !important; } /* ═══ §48. BLOQUES DE COLOR (heros oscuros de sub-reportes) → CANDY GLASS ══ El owner (2026-07-11, captura de /reportes/ingresos-gastos) pidió que los heros de BLOQUE OSCURO pasen al mismo candy glass claro de caja/rdv3. Familia uniforme verificada: profit/rent/mant/geo/disc-hero-main (receta copiada: banda oscura + kicker pill blanca + h1 blanco + botones is-soft fantasma / is-accent blanco) + .report-link-title (links seguros). AMPLIACIÓN (owner, "agarra las mayores vistas posibles"): se suman 1) las BANDAS MÓVILES ≤767px de tareas/compras/documentos/proveedores/ motor_reservas/inventario (receta "94%,#000" del pase banda 2e7d2d7e; en desktop esos headers ya son claros) — esto además corrige que §47 ponía título en tinta sobre banda oscura en móvil; 2) los 6 heros oscuros de nómina (audit/exp/snap/nom-det/period/receipt, receta "92%,#111827"); 3) el lockup oscuro de tareas/reporte (.tk-report--insights). En claro: losa de cristal de la marca con tinta; is-soft → píldora lechosa; is-accent (CTA) → SÓLIDO de marca con brillo (en losa clara el CTA debe destacar, precedente caja). En oscuro: losa grafito, el texto blanco de base ya funciona. Los formularios de inventario (toolbar Tailwind delgada) NO son de esta familia y quedan fuera. SOLO tema Cupertino. */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup, .report-link-title) { background: radial-gradient(46% 160% at 96% 72%, rgba(255, 255, 255, .82), rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 40%), linear-gradient(165deg, color-mix(in srgb, var(--brand-primary, #1B2746) 14%, #FFFFFF) 0%, color-mix(in srgb, var(--brand-primary, #1B2746) 28%, #FFFFFF) 100%) !important; border: 1px solid color-mix(in srgb, var(--brand-primary, #1B2746) 24%, rgba(255, 255, 255, .9)) !important; /* Tinta por herencia: cualquier texto suelto de la banda deja de ser blanco */ color: color-mix(in srgb, var(--brand-primary, #1B2746) 36%, #1F2937) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -2px 5px color-mix(in srgb, var(--brand-primary, #1B2746) 12%, transparent), 0 3px 7px color-mix(in srgb, var(--brand-primary, #1B2746) 10%, rgba(27, 39, 70, .05)), 0 24px 44px -20px color-mix(in srgb, var(--brand-primary, #1B2746) 42%, rgba(27, 39, 70, .22)) !important; } /* Bloom decorativo del acento: se suaviza sobre el cristal claro */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup)::after { background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent, #BD9441) 22%, transparent), transparent 68%) !important; } /* Título y párrafo: tinta de marca sobre el cristal */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup, .report-link-title) h1 { color: color-mix(in srgb, var(--brand-primary, #1B2746) 44%, #0C1E15) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup, .report-link-title) > p, html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup, .report-link-title) p { color: color-mix(in srgb, var(--brand-primary, #1B2746) 32%, #4B5563) !important; text-shadow: none !important; } /* Kicker: píldora lechosa con tinta (incluye el div Tailwind de links) */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup) [class*="kicker"], html[data-tema="cupertino"]:not([data-theme="dark"]) .report-link-title [class*="text-white"] { background: rgba(255, 255, 255, .68) !important; border: 1px solid color-mix(in srgb, var(--brand-primary, #1B2746) 26%, rgba(255, 255, 255, .9)) !important; color: color-mix(in srgb, var(--brand-primary, #1B2746) 44%, #101828) !important; text-shadow: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important; /* Forma de píldora también para kickers de texto plano (bandas móviles) */ display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 7px 11px; border-radius: 999px; } html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup) [class*="kicker"] i, html[data-tema="cupertino"]:not([data-theme="dark"]) .report-link-title [class*="text-white"] i { color: color-mix(in srgb, var(--brand-accent, #BD9441) 62%, #4A3A12) !important; } /* Tesela del icono dentro de los bloques: frosted clara (misma receta §47); cubre los heros de nómina (period-lockup no es title-lockup) y las teselas translúcidas de las bandas móviles. */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup) [class*="hero-icon"] { background: radial-gradient(115% 120% at 28% 8%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, color-mix(in srgb, var(--brand-primary, #1B2746) 30%, #FFFFFF), color-mix(in srgb, var(--brand-primary, #1B2746) 50%, #FFFFFF)) !important; border: 1px solid color-mix(in srgb, var(--brand-primary, #1B2746) 30%, rgba(255, 255, 255, .85)) !important; color: color-mix(in srgb, var(--brand-primary, #1B2746) 58%, #08301C) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -5px 10px color-mix(in srgb, var(--brand-primary, #1B2746) 14%, transparent), 0 9px 20px -10px color-mix(in srgb, var(--brand-primary, #1B2746) 48%, transparent) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup) [class*="hero-icon"] i { color: color-mix(in srgb, var(--brand-primary, #1B2746) 60%, #08301C) !important; } /* Badges/sellos del bloque (p.ej. period-badge, nom-det-badge): lechosos */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup) [class*="badge"] { background: rgba(255, 255, 255, .68) !important; border: 1px solid color-mix(in srgb, var(--brand-primary, #1B2746) 26%, rgba(255, 255, 255, .9)) !important; color: color-mix(in srgb, var(--brand-primary, #1B2746) 44%, #101828) !important; text-shadow: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important; } /* Botones fantasma (is-soft): cristal lechoso con tinta */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup) .is-soft { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), linear-gradient(165deg, color-mix(in srgb, var(--brand-primary, #1B2746) 30%, #FFFFFF), color-mix(in srgb, var(--brand-primary, #1B2746) 48%, #FFFFFF)) !important; border-color: transparent !important; color: color-mix(in srgb, var(--brand-primary, #1B2746) 48%, #0C2C1A) !important; text-shadow: none !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary, #1B2746) 32%, rgba(255, 255, 255, .85)), inset 0 1px 0 rgba(255, 255, 255, .85), 0 8px 18px -10px color-mix(in srgb, var(--brand-primary, #1B2746) 50%, transparent) !important; } /* CTA (is-accent): sólido de marca con brillo de vidrio, destaca en la losa */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup) .is-accent { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--brand-primary, #1B2746) !important; border-color: color-mix(in srgb, var(--brand-primary, #1B2746) 60%, transparent) !important; color: #FFFFFF !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px color-mix(in srgb, var(--brand-primary, #1B2746) 62%, transparent) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup) .is-accent i { color: rgba(255, 255, 255, .85) !important; } /* Flecha --glass: sobre cristal claro pasa a círculo lechoso con tinta */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup, .report-link-hero) .ms-back--glass { border-color: rgba(0, 0, 0, .06); background: rgba(255, 255, 255, .85); color: #1D1D1F; } /* Modo oscuro Apple: losa grafito; el texto blanco de base ya funciona */ html[data-theme="dark"][data-tema="cupertino"] :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup, .report-link-title) { background: radial-gradient(46% 160% at 96% 72%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 72%), linear-gradient(165deg, #232325 0%, #1A1A1C 100%) !important; border: 1px solid #38383A !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 44px -24px rgba(0, 0, 0, .7) !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.profit-hero-main, .rent-hero-main, .mant-hero-main, .geo-hero-main, .disc-hero-main, .tk-page .tk-hero-section, .purchases-page .cp-hero-section, .docs-page .dc-hero-section, .providers-page .pv-hero-section, .guests-page .guest-hero, .cxc-page .cx-hero-section, .billing-page .billing-hero, .mrv-hero-section, .inv-page .inv-topbar > div > .flex:first-child, .nomina-audit .audit-hero, .nomina-exp .exp-hero, .snapshot-pay-report .snap-hero, .nomina-detalle .nom-det-hero, .nomina-periodos .period-hero, .labor-receipt .receipt-hero, .tk-report--insights .tk-title-lockup)::after { background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent, #BD9441) 20%, transparent), transparent 68%) !important; } /* §48b. Geometría del bloque para los heros de TAREAS/COMPRAS/PROVEEDORES/ DOCUMENTOS/MOTOR DE RESERVAS en ≥768px: la sección base de esas vistas es transparente y sin padding (2px 0 6px, sin radius), así que al recibir la losa el contenido quedaba pegado a los bordes (icono en la esquina, botones al ras). Solo Cupertino, claro y oscuro; el móvil ≤767px ya trae su propia banda con geometría. */ @media (min-width: 768px) { html[data-tema="cupertino"] :is(.tk-page .tk-hero-section, .purchases-page .cp-hero-section, .providers-page .pv-hero-section, .docs-page .dc-hero-section, .mrv-hero-section) { border-radius: 22px; padding: 22px 24px 20px; } html[data-tema="cupertino"] :is(.tk-page .tk-hero-section, .purchases-page .cp-hero-section, .providers-page .pv-hero-section, .docs-page .dc-hero-section, .mrv-hero-section) [class*="kicker"] { margin-bottom: 9px; } html[data-tema="cupertino"] :is(.tk-page .tk-hero-section .tk-subtitle, .purchases-page .cp-hero-section .cp-subtitle, .providers-page .pv-hero-section .pv-subtitle, .docs-page .dc-hero-section .dc-subtitle, .mrv-hero-section .sub) { margin-top: 10px; } html[data-tema="cupertino"] .tk-page .tk-hero-section .tk-view-chip { margin-top: 12px; } /* El motor no tiene shell con gap: sus stats van pegadas al hero (.mrv-grid margin-top 4px), así que la losa necesita margen propio */ html[data-tema="cupertino"] .mrv-hero-section { margin-bottom: 14px; } } @media (min-width: 1024px) { html[data-tema="cupertino"] :is(.tk-page .tk-hero-section, .purchases-page .cp-hero-section, .providers-page .pv-hero-section, .docs-page .dc-hero-section, .mrv-hero-section) { padding: 24px 28px 22px; } html[data-tema="cupertino"] .tk-page .tk-hero-actions { align-self: center; } } /* §48c. Geometría del héroe de HUÉSPEDES dentro de la familia glass. El slab, la tinta, el kicker-píldora y el icono frosted ya los hereda .guest-hero al estar sumado a los :is() de §48 (todas esas reglas usan !important). Aquí forzamos SOLO la geometría con !important porque la capa boutique de huespedes (index.php #guest-boutique) fija `padding:2px` y `border-radius:0` con !important, y §48b va sin él. */ html[data-tema="cupertino"] .guests-page .guest-hero { border-radius: 22px !important; padding: 16px 16px 14px !important; overflow: hidden !important; } html[data-tema="cupertino"] .guests-page .guest-hero .hotel-page-kicker { margin-bottom: 9px !important; } @media (min-width: 768px) { html[data-tema="cupertino"] .guests-page .guest-hero { padding: 22px 24px 20px !important; } } @media (min-width: 1024px) { html[data-tema="cupertino"] .guests-page .guest-hero { padding: 24px 28px 22px !important; } } /* §48d. Geometría del héroe de CUENTAS POR COBRAR (.cx-hero-section) sumado a la familia glass. Su
base es flex sin padding/radius, así que basta geometría sin !important (nada compite). Incluye móvil (§48b solo pone padding ≥768px; aquí damos base para que el contenido no quede al ras). */ html[data-tema="cupertino"] .cxc-page .cx-hero-section { border-radius: 22px; padding: 16px 16px 14px; overflow: hidden; } @media (min-width: 768px) { html[data-tema="cupertino"] .cxc-page .cx-hero-section { padding: 22px 24px 20px; } } @media (min-width: 1024px) { html[data-tema="cupertino"] .cxc-page .cx-hero-section { padding: 24px 28px 22px; } } /* §48e. Geometría del héroe de FACTURACIÓN (.billing-hero) sumado a la familia glass. Ya estaba en la familia title-lockup (icono frosted + h1 tintado); §48 le agrega la LOSA que le faltaba y aquí la geometría. .billing-hero es display:block con padding 0.15rem (sin !important), así que basta sin él. Móvil incluido (§48b solo pone padding ≥768px). */ html[data-tema="cupertino"] .billing-page .billing-hero { border-radius: 22px; padding: 16px 16px 14px; overflow: hidden; } @media (min-width: 768px) { html[data-tema="cupertino"] .billing-page .billing-hero { padding: 22px 24px 20px; } } @media (min-width: 1024px) { html[data-tema="cupertino"] .billing-page .billing-hero { padding: 24px 28px 22px; } } /* ═══ §49. PANEL DE PERIODO / FILTROS de la familia sub-reporte → GLASS ═══ Segunda captura del owner (2026-07-11): el panel "PERIODO CONSULTADO" (fechas Desde/Hasta + "Actualizar reporte" + chips de periodos rápidos) también va en liquid glass. Contenedores por vista: profit/geo-period-panel, rent/mant-filter-panel, disc-side-panel. Receta: losa de cristal SUAVE (más tenue que el héroe para que respire el formulario), etiquetas y valor del periodo en tinta, inputs lechosos con foco de marca, CTA sólido de marca con brillo, chips lechosos. Oscuro: panel grafito. */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) { background: radial-gradient(60% 120% at 92% 4%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 62%), linear-gradient(165deg, color-mix(in srgb, var(--brand-primary, #1B2746) 8%, #FFFFFF) 0%, color-mix(in srgb, var(--brand-primary, #1B2746) 18%, #FFFFFF) 100%) !important; border: 1px solid color-mix(in srgb, var(--brand-primary, #1B2746) 20%, rgba(255, 255, 255, .9)) !important; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), 0 3px 7px color-mix(in srgb, var(--brand-primary, #1B2746) 8%, rgba(27, 39, 70, .04)), 0 20px 38px -22px color-mix(in srgb, var(--brand-primary, #1B2746) 34%, rgba(27, 39, 70, .18)) !important; } /* Etiquetas y valor del periodo: tinta de marca */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) label, html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="label"], html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="side-title"], html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="filter-top"] { color: color-mix(in srgb, var(--brand-primary, #1B2746) 46%, #101828) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="period-value"] { color: color-mix(in srgb, var(--brand-primary, #1B2746) 62%, #0C1E15) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="note"], html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) p { color: color-mix(in srgb, var(--brand-primary, #1B2746) 30%, #4B5563) !important; } /* Inputs y selects: lechosos con foco de marca */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) :is(input, select, textarea) { background: rgba(255, 255, 255, .82) !important; border: 1px solid color-mix(in srgb, var(--brand-primary, #1B2746) 22%, rgba(255, 255, 255, .9)) !important; color: color-mix(in srgb, var(--brand-primary, #1B2746) 52%, #101828) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) :is(input, select, textarea):focus { border-color: color-mix(in srgb, var(--brand-primary, #1B2746) 55%, #FFFFFF) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #1B2746) 16%, transparent) !important; } /* CTA del panel (Actualizar/Filtrar): sólido de marca con brillo */ html[data-tema="cupertino"]:not([data-theme="dark"]) .profit-period-panel .profit-btn, html[data-tema="cupertino"]:not([data-theme="dark"]) .geo-period-panel .geo-btn, html[data-tema="cupertino"]:not([data-theme="dark"]) .rent-filter-panel .rent-btn, html[data-tema="cupertino"]:not([data-theme="dark"]) .mant-filter-panel .mant-btn, html[data-tema="cupertino"]:not([data-theme="dark"]) .disc-side-panel .disc-btn { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--brand-primary, #1B2746) !important; border-color: color-mix(in srgb, var(--brand-primary, #1B2746) 60%, transparent) !important; color: #FFFFFF !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px color-mix(in srgb, var(--brand-primary, #1B2746) 62%, transparent) !important; } /* Chips de periodos rápidos (7/30/90/Mes/Año): lechosos — van DESPUÉS del CTA por si alguna vista combina clases */ html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="period-btn"] { background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2) 60%), rgba(255, 255, 255, .55) !important; border: 1px solid color-mix(in srgb, var(--brand-primary, #1B2746) 22%, rgba(255, 255, 255, .9)) !important; color: color-mix(in srgb, var(--brand-primary, #1B2746) 50%, #101828) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important; } html[data-tema="cupertino"]:not([data-theme="dark"]) :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="period-btn"]:hover { border-color: color-mix(in srgb, var(--brand-primary, #1B2746) 40%, rgba(255, 255, 255, .9)) !important; } /* Oscuro: panel grafito con campos hundidos */ html[data-theme="dark"][data-tema="cupertino"] :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) { background: radial-gradient(60% 120% at 92% 4%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 62%), linear-gradient(165deg, #1F1F21 0%, #161618 100%) !important; border: 1px solid #38383A !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 20px 38px -24px rgba(0, 0, 0, .7) !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) label, html[data-theme="dark"][data-tema="cupertino"] :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="label"] { color: #C7C7CC !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="period-value"] { color: color-mix(in srgb, var(--brand-primary, #1B2746) 30%, #F5F5F7) !important; } html[data-theme="dark"][data-tema="cupertino"] :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) :is(input, select, textarea) { background: #2C2C2E !important; border: 1px solid #38383A !important; color: #F5F5F7 !important; color-scheme: dark; } html[data-theme="dark"][data-tema="cupertino"] :is(.profit-period-panel, .geo-period-panel, .rent-filter-panel, .mant-filter-panel, .disc-side-panel) [class*="period-btn"] { background: #2C2C2E !important; border: 1px solid #38383A !important; color: #D1D1D6 !important; }