:root{ --corporative-color: #482203; --mirai-ui-font: 'Plus Jakarta Sans', sans-serif; /* Primary CTA — brand orange */ --mirai-ui-button-background: #482203; --mirai-ui-button-background-active: #371f0b; --mirai-ui-button-color: #FFFFFF; --mirai-ui-button-color-active: #FFFFFF; /* Secondary button — used by the session widget's . Default background MUST be transparent — without this Mirai falls back to white, painting a solid white square over the icon on the dark/transparent header (visible in Chrome desktop and iOS Safari/Chrome). */ --mirai-ui-button-secondary-background: transparent; --mirai-ui-button-secondary-background-active: rgba(255, 255, 255, 0.15); --mirai-ui-button-secondary-color: #FFFFFF; --mirai-ui-button-secondary-color-active: #FFFFFF; /* Defensive: alternate naming used by some Mirai versions. */ --mirai-session-background: transparent; --mirai-session-background-active: rgba(255, 255, 255, 0.15); /* UI defaults — matches room buttons (rounded-xl = 12px) */ --mirai-ui-border-radius: 12px; --mirai-ui-modal-layer: 10000; /* Finder button — mismo color que el botón "Reservar Ahora" (brand-800 / brand-900 / cream-50) */ --mirai-finder-button-background: #482203; --mirai-finder-button-background-active: #371f0b; --mirai-finder-button-color: #fffac9; --mirai-finder-button-color-active: #fffac9; --mirai-finder-button-border-radius: 12px; --mirai-finder-border-radius: 12px; --mirai-finder-field-border-radius: 12px; /* Finder card sizing — these vars ARE consumed by Mirai's own CSS (verified against static.mirai.com/core/index.css). Without them Mirai falls back to its defaults which leave gaps and odd heights. */ --mirai-finder-background: rgba(255, 249, 243, 0.92); --mirai-finder-border: none; --mirai-finder-padding: 0.75rem; --mirai-finder-gap: 0.5rem; --mirai-finder-field-height: 3rem; --mirai-field-height: 3rem; --mirai-finder-field-separator-color: rgba(72, 34, 3, 0.12); /* Session (shown over dark transparent nav) */ --mirai-session-color: #FFFFFF; --mirai-session-icon-color: #FFFFFF; --mirai-session-color-active: #482203; --mirai-session-icon-color-active: #482203; /* Accent — el default de Mirai es azul (#2573a7): lo mapeamos al MISMO color del botón "Reservar Ahora" (brand-800 / brand-900) en toda la UI: links, fechas/habitación seleccionada, tags, banners, bordes, etc. !important: Mirai carga su index.css DESPUÉS de este archivo y redefine estas vars en :root; sin !important su azul gana la cascada. */ --mirai-ui-accent: #482203 !important; /* brand-800 — primario */ --mirai-ui-accent-dark: #371f0b !important; /* brand-900 — hover/títulos */ --mirai-ui-accent-light: rgba(72, 34, 3, 0.64) !important; /* brand-500 — texto tenue */ --mirai-ui-accent-background: #f7ebdd !important; /* cream-200 — fondos/banners claros */ --mirai-ui-accent-border: #482203 !important; /* brand-800 — bordes/outline seleccionado */ --mirai-header-accent: #482203 !important; /* brand-800 */ --mirai-chat-accent: #482203 !important; /* brand-800 */ --mirai-ui-button-background: #482203 !important; --mirai-ui-button-background-active: #371f0b !important; --mirai-ui-button-color: #FFFFFF !important; --mirai-ui-button-color-active: #FFFFFF !important; /* Focus ring / color de foco — default de Mirai es azul (#2573a7). */ --mirai-ui-focus-color: #482203 !important; --mirai-focus-color: #482203 !important; --mirai-ui-outline-color: #482203 !important; /* Color nativo de radios/checkboxes (el "azul" de selección del navegador). */ accent-color: #482203; } /* ================================= */ /* CSS FOR NEW CLUB */ [data-mirai-component="signup"] { display: flex; justify-content: center; } [data-mirai-component="profile"], [data-mirai-component="signup"] { padding: 100px 0; } /* Session trigger button styling in header — scoped to DIRECT children only to avoid leaking styles into the login modal/popup that Mirai renders inside. Uses !important + fill/stroke to defeat Safari's Web Component default colors (Safari does not inherit `color` into shadow DOM the same way Chrome does, leaving the ACCEDER label and icon black). */ [data-mirai-component="session"] { color: #fff !important; font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } [data-mirai-component="session"] > a, [data-mirai-component="session"] > button, [data-mirai-component="session"] ui-button, [data-mirai-component="session"] ui-button[type="link"] { color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px; padding: 6px 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; transition: all 0.2s ease; background: transparent; } /* Text + currentColor-based icons inherit white via `color`. Avoid blanket `fill`/`stroke` on `*` — that paints every // inside the icon SVG white and collapses multi-element icons into a solid white square (the "cuadro blanco" symptom on iOS). SVGs that use currentColor will pick up the white from `color`; SVGs with hardcoded colors are handled by Mirai's own theming vars (--mirai-session-icon-color). */ [data-mirai-component="session"], [data-mirai-component="session"] ui-button { color: #fff !important; } /* Shadow-DOM bypass for Mirai's : only the elements explicitly exposed as parts get painted. `fill: currentColor` lets SVGs that opt into theming inherit the white above without forcing it on internal background shapes. */ [data-mirai-component="session"]::part(label), [data-mirai-component="session"]::part(icon), [data-mirai-component="session"]::part(trigger), [data-mirai-component="session"] ui-button::part(label), [data-mirai-component="session"] ui-button::part(icon) { color: #fff !important; fill: currentColor !important; } [data-mirai-component="session"] > a:hover, [data-mirai-component="session"] > button:hover, [data-mirai-component="session"] ui-button:hover { background: rgba(255, 255, 255, 0.15) !important; border-color: #fff !important; } /* Inside Mirai's session modal/popup the descendant !important rules above would paint ALL text white, breaking the form. Re-establish dark text only inside the modal/dialog content rendered by Mirai. */ [data-mirai-component="session"] [role="dialog"], [data-mirai-component="session"] [role="dialog"] *, [data-mirai-component="session"] .mirai-modal, [data-mirai-component="session"] .mirai-modal * { color: inherit !important; fill: currentColor !important; stroke: currentColor !important; } /* ================================= */ /* Finder "Buscar" button — force brand orange on all viewports. The CSS variables above (--mirai-finder-button-background) cover Mirai's official theming hooks, but on mobile the finder sometimes renders a different button variant (web component / shadow DOM ::part) whose color isn't picked up by those vars. Targeting the common selectors directly with !important guarantees the brand color regardless of which Mirai variant is rendered. */ [data-mirai-component="finder"] button[type="submit"], [data-mirai-component="finder"] ui-button[primary], [data-mirai-component="finder"] ui-button[type="primary"], [data-mirai-component="finder"] [data-action="search"], [data-mirai-component="finder"] [data-action="submit"] { background-color: #482203 !important; background: #482203 !important; color: #fffac9 !important; border-color: #482203 !important; } [data-mirai-component="finder"] button[type="submit"]:hover, [data-mirai-component="finder"] button[type="submit"]:active, [data-mirai-component="finder"] ui-button[primary]:hover, [data-mirai-component="finder"] ui-button[primary]:active, [data-mirai-component="finder"] [data-action="search"]:hover, [data-mirai-component="finder"] [data-action="search"]:active { background-color: #371f0b !important; background: #371f0b !important; color: #fffac9 !important; border-color: #371f0b !important; } /* Mirai mobile finder may expose ::part for the submit button — orange that too. */ [data-mirai-component="finder"]::part(button-submit), [data-mirai-component="finder"]::part(submit-button), [data-mirai-component="finder"]::part(search-button) { background-color: #482203 !important; color: #fffac9 !important; } /* ================================= */ /* Mobile column mode — Mirai's own breakpoint is 480px (NOT Tailwind's 640px sm:). Between 481–639px Mirai already renders the horizontal layout, so the mount/skeleton on the JSX side uses min-[481px]: to match. */ @media (max-width: 480px) { :root { --mirai-finder-padding: 0.625rem; --mirai-finder-gap: 0.5rem; --mirai-finder-field-height: 2.875rem; --mirai-field-height: 2.875rem; } /* Submit button: full-width and visually prominent in column mode. The column-mode class name is hashed (e.g. `.YRq8BG_column`) and may change across Mirai versions, so we target the public selectors instead — these are stable. */ [data-mirai-component="finder"] button[type="submit"], [data-mirai-component="finder"] ui-button[primary], [data-mirai-component="finder"] ui-button[type="primary"], [data-mirai-component="finder"] [data-action="search"], [data-mirai-component="finder"] [data-action="submit"] { width: 100% !important; min-height: 3rem !important; font-size: 0.9375rem !important; } /* Defensive: the host should always fill the available width on mobile and never overflow horizontally. */ [data-mirai-component="finder"] { display: block; width: 100%; box-sizing: border-box; max-width: 100%; } } /* ================================= */ /* Azul residual de Mirai → color de marca. El accent ya usa --mirai-ui-accent (brand), pero Mirai hardcodea UN azul (#2573a7) en el glow de focus de los campos (box-shadow ... 0 0 0 3px #2573a740) que NO lee esa var. Además los sin estilar del motor caen al azul default del navegador. Forzamos brand-800 en ambos. */ /* 1) Glow de focus de campos/botones del motor → brand-800 @ 25% */ [data-mirai-component] input:focus, [data-mirai-component] select:focus, [data-mirai-component] textarea:focus, [data-mirai-component] button:focus, [data-mirai-component] [tabindex]:focus { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(72, 34, 3, 0.25) !important; outline-color: #482203 !important; } /* 1b) Doble ring: el campo del motor es un wrapper enfocable que delega el focus a un input anidado → padre e hijo matchean :focus a la vez. Dejar el ring solo en el contenedor (padre); anular el del :focus interior. */ [data-mirai-component] :focus :focus { box-shadow: none !important; outline: none !important; } /* 2) Enlaces dentro del motor → brand (evita el azul del navegador) */ [data-mirai-component] a { color: #482203 !important; } [data-mirai-component] a:hover { color: #371f0b !important; } /* ================================= */ /* 3) Botón primario en TODO el motor (rates, checkout, booking, profile…), no solo el finder. Mirai pinta estos en su azul si las vars no alcanzan el variant renderizado. Forzamos brand con !important sobre los selectores públicos estables. */ [data-mirai-component] button[type="submit"], [data-mirai-component] ui-button[primary], [data-mirai-component] ui-button[type="primary"], [data-mirai-component] [data-action="search"], [data-mirai-component] [data-action="submit"], [data-mirai-component] [data-action="continue"], [data-mirai-component] [data-action="next"], [data-mirai-component] [data-action="book"], [data-mirai-component] [data-action="pay"] { background-color: #482203 !important; background: #482203 !important; color: #FFFFFF !important; border-color: #482203 !important; } [data-mirai-component] button[type="submit"]:hover, [data-mirai-component] ui-button[primary]:hover, [data-mirai-component] ui-button[type="primary"]:hover, [data-mirai-component] [data-action="continue"]:hover, [data-mirai-component] [data-action="next"]:hover, [data-mirai-component] [data-action="book"]:hover, [data-mirai-component] [data-action="pay"]:hover { background-color: #371f0b !important; background: #371f0b !important; color: #FFFFFF !important; border-color: #371f0b !important; } /* 4) Estados seleccionados/activos que Mirai pinta azul (tarifa elegida, tabs, badges, bordes de selección). */ [data-mirai-component] [aria-selected="true"], [data-mirai-component] [data-selected="true"], [data-mirai-component] .selected, [data-mirai-component] [aria-checked="true"] { border-color: #482203 !important; color: #482203 !important; } /* 5) Radios/checkboxes nativos del motor → brand en vez del azul del navegador. */ [data-mirai-component] input[type="radio"], [data-mirai-component] input[type="checkbox"] { accent-color: #482203 !important; }