/* MOVEO COACH — Dark mode overrides * Applies when . Overrides the existing CSS variables * in each page so the entire UI flips without touching component code. * Variables match the names already in :root of every HTML file. */ html[data-theme="dark"]{ --bg: #14110D; --paper: #1F1B14; --sand-50: #2B251C; --sand-100: #34301F; /* dark sand variant */ --sand-200: #3F392B; --sand-300: #5A5240; --sand-400: #7E6F52; --ink: #F5EFE0; --ink-2: #C9C0A8; --mute: #8F856E; --line: #2F2A1F; --accent-2: #7A917A; --accent: #B89875; --shadow: 0 14px 40px -18px rgba(0,0,0,.55); --shadow-soft: 0 8px 30px -16px rgba(0,0,0,.40); --whatsapp: #25D366; } /* Body backgrounds (per-plan tinting on account.html) */ html[data-theme="dark"] body[data-plan="free"]{ background:#1A1611; } html[data-theme="dark"] body[data-plan="explorer"]{ background:#1E2018; } html[data-theme="dark"] body[data-plan="insider"]{ background:#231E16; } /* Map (Leaflet) — keep tiles light but soften the container so the map visually anchors with the dark UI border around it */ html[data-theme="dark"] .leaflet-container{ background:#1A1814; } html[data-theme="dark"] .leaflet-control-attribution{ background:rgba(20,17,13,.7) !important; color:var(--mute) !important; } html[data-theme="dark"] .leaflet-control-zoom a{ background:var(--paper) !important;color:var(--ink) !important; border-bottom:1px solid var(--line) !important; } /* Slightly desaturate the light-tile map at night */ html[data-theme="dark"] .leaflet-tile-pane{ filter: brightness(0.85) saturate(0.85); } /* Inputs */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background: var(--paper); color: var(--ink); border-color: var(--line); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{ color:var(--mute); } /* Buttons */ html[data-theme="dark"] .btn-ink{ background:#F5EFE0;color:#14110D; } html[data-theme="dark"] .btn-ink:hover{ background:#fff; } html[data-theme="dark"] .btn-sand{ background:var(--sand-100);color:var(--ink); } html[data-theme="dark"] .btn-sand:hover{ background:var(--sand-200); } html[data-theme="dark"] .btn-ghost{ background:transparent;color:var(--ink);border-color:var(--line); } html[data-theme="dark"] .btn-ghost:hover{ background:var(--sand-50); } /* Coach markers (map): tweak so they're still readable on darker borders */ html[data-theme="dark"] .coach-marker .photo{ border-color:var(--sand-200); } html[data-theme="dark"] .moveo-cluster{ background:var(--paper);color:var(--ink);border-color:var(--sand-300); } html[data-theme="dark"] .moveo-cluster.xl{ background:var(--ink);color:#14110D; } /* Coach marker small category badge (top-right of photo) — was transparent on dark */ html[data-theme="dark"] .coach-marker .cat{ background:#F5EFE0;color:#14110D;border-color:#F5EFE0; } /* Coach panel pills inside the header photo (category, verified status) */ /* Coach panel pills inside the header photo (category, verified status) */ html[data-theme="dark"] .cp-cat-tag{ background:rgba(245,239,224,.95) !important;color:#14110D !important; } /* Verified pill stays blue (brand color) regardless of theme */ html[data-theme="dark"] .cp-verify-tag, html[data-theme="dark"] .verified-badge:not(.unverified){ background:#4DA3D9 !important;color:#fff !important; box-shadow:0 2px 6px rgba(77,163,217,.45); } /* All "light bubble" badges inside the coach panel get dark text + readable bg */ html[data-theme="dark"] .cp-body .cred-experience, html[data-theme="dark"] .cp-body .cred-pill, html[data-theme="dark"] .cp-body .cred-chip, html[data-theme="dark"] .cred-experience, html[data-theme="dark"] .cred-pill, html[data-theme="dark"] .cred-chip{ background:#F5EFE0 !important;color:#14110D !important; border-color:#F5EFE0 !important; } html[data-theme="dark"] .cred-pill .tick{ color:#2B6A3A !important; } /* Close button on coach panel — white-on-white in dark, needs ink contrast */ html[data-theme="dark"] .cp-close{ background:rgba(245,239,224,.95);color:#14110D; } html[data-theme="dark"] .cp-close:hover{ background:#fff; } /* Footer (info + legal) — app badges + links must be readable in dark */ html[data-theme="dark"] .footer, html[data-theme="dark"] .acc-footer{ background:var(--paper); } html[data-theme="dark"] .footer-tag, html[data-theme="dark"] .ftr-tag{ color:var(--ink); } html[data-theme="dark"] .footer-cc, html[data-theme="dark"] .ftr-cc{ color:var(--mute); } html[data-theme="dark"] .footer-contact, html[data-theme="dark"] .ftr-contact{ color:var(--ink-2); } html[data-theme="dark"] .footer-contact a, html[data-theme="dark"] .ftr-contact a{ color:var(--ink); } html[data-theme="dark"] .footer-col a, html[data-theme="dark"] .ftr-col a{ color:var(--ink-2); } html[data-theme="dark"] .footer-col a:hover, html[data-theme="dark"] .ftr-col a:hover{ color:var(--ink); } html[data-theme="dark"] .footer-col h4, html[data-theme="dark"] .ftr-col h4{ color:var(--ink); } html[data-theme="dark"] .footer-social a, html[data-theme="dark"] .ftr-social a{ color:var(--mute); } html[data-theme="dark"] .footer-social a:hover, html[data-theme="dark"] .ftr-social a:hover{ color:var(--ink); } /* Account / Coach area nav header in dark mode */ html[data-theme="dark"] .acc-nav{ background:rgba(31,27,20,.92) !important; border-bottom-color:var(--line); } /* App badges: invert so the labels show on dark */ html[data-theme="dark"] .app-badge{ background:#F5EFE0;color:#14110D; } html[data-theme="dark"] .acc-nav .wm{ color:var(--ink); } html[data-theme="dark"] .acc-nav .logo-mark{ color:var(--ink); } html[data-theme="dark"] .acc-nav .wm .d{ background:var(--sand-400); } html[data-theme="dark"] .acc-nav .btn-ghost{ color:var(--ink);border-color:var(--line); } html[data-theme="dark"] .acc-nav .btn-ghost:hover{ background:var(--sand-50); } html[data-theme="dark"] .acc-tabs{ border-bottom-color:var(--line); } html[data-theme="dark"] .tab{ color:var(--mute); } html[data-theme="dark"] .tab:hover{ color:var(--ink); } html[data-theme="dark"] .tab.is-active{ color:var(--ink);border-bottom-color:var(--ink); } @media (max-width:520px){ /* Stop "Volver al mapa" from wrapping into 3 lines on phones */ html[data-theme="dark"] .acc-nav .btn-ghost, .acc-nav .btn-ghost{ white-space:nowrap;padding:7px 11px;font-size:12px; } .acc-nav{padding:10px 12px;gap:6px} .acc-nav .wm{font-size:18px;letter-spacing:.10em} .acc-nav .logo-mark{width:22px;height:22px} } html[data-theme="dark"] .app-os{ color:#14110D; } html[data-theme="dark"] .app-soon{ color:rgba(20,17,13,.6); } html[data-theme="dark"] .cp-name-row .verified-badge, html[data-theme="dark"] .cp-photo .verified-badge, html[data-theme="dark"] .cp-tier-pill, html[data-theme="dark"] .cp-category-pill, html[data-theme="dark"] .coach-card .category-pill{ background:rgba(245,239,224,.95);color:#14110D !important; } html[data-theme="dark"] .verified-badge.unverified{ background:rgba(245,239,224,.85);color:#14110D !important; } html[data-theme="dark"] .demo-badge{ background:rgba(245,239,224,.20);color:#F5EFE0;border-color:rgba(245,239,224,.30) } /* Credentials and other "white" chips inside coach panel get readable colors */ html[data-theme="dark"] .cred-chip, html[data-theme="dark"] .cp-cred, html[data-theme="dark"] .creds-list span, html[data-theme="dark"] .credentials-row span, html[data-theme="dark"] .lang-tag, html[data-theme="dark"] .availability-tag{ background:var(--sand-100) !important;color:var(--ink) !important;border-color:var(--line) !important; } /* Discipline chips ("YOGA", "PADEL") at top of photo */ html[data-theme="dark"] .cp-disc, html[data-theme="dark"] .cp-cat-pill, html[data-theme="dark"] .disc-tag{ background:rgba(245,239,224,.95) !important;color:#14110D !important; } /* Dark mode — main page header (.top) needs solid background + readable buttons */ html[data-theme="dark"] .top{ background:linear-gradient(180deg, rgba(20,17,13,.95), rgba(20,17,13,.85) 60%, rgba(20,17,13,0)); backdrop-filter:blur(8px); } html[data-theme="dark"] .logo{ color:var(--ink); } html[data-theme="dark"] .brand-mark{ color:var(--ink); } html[data-theme="dark"] .logo .dot{ background:var(--sand-400); } html[data-theme="dark"] .tagline{ color:var(--mute); } html[data-theme="dark"] .lang-toggle{ background:var(--paper);border-color:var(--line) } html[data-theme="dark"] .chip{ background:var(--paper);color:var(--ink-2);border-color:var(--line); } html[data-theme="dark"] .chip:hover{ border-color:var(--sand-300);color:var(--ink); } html[data-theme="dark"] .chip.is-active{ background:#F5EFE0;color:#14110D;border-color:#F5EFE0; } html[data-theme="dark"] .chip-elite, html[data-theme="dark"] .chip-vip{ background:var(--sand-300);color:var(--paper);border-color:var(--sand-300); } /* Mobile "Deportes" pill — index.html forces background:var(--ink) + color:#F6F1E7 to keep it visible in light mode (ink-on-cream). In dark mode --ink IS cream, so cream-on-cream made the label invisible. Flip to cream pill + dark text. */ @media (max-width:640px){ html[data-theme="dark"] .filters .chip[data-cat="All"]{ background:#F5EFE0 !important;color:#14110D !important;border-color:#F5EFE0 !important; } } html[data-theme="dark"] .search-wrap{ background:var(--paper);border-color:var(--line); } html[data-theme="dark"] .search-wrap input{ color:var(--ink); } html[data-theme="dark"] .search-wrap input::placeholder{ color:var(--mute); } html[data-theme="dark"] .pill-btn{ background:var(--paper);color:var(--ink-2);border-color:var(--line); } html[data-theme="dark"] .pill-btn:hover{ border-color:var(--sand-300);color:var(--ink); } html[data-theme="dark"] .pill-btn.has-active{ background:#F5EFE0;color:#14110D;border-color:#F5EFE0; } html[data-theme="dark"] .pill-btn .badge{ background:var(--sand-300);color:var(--ink); } html[data-theme="dark"] .filters-row{ background:transparent; } html[data-theme="dark"] .topbar .top-actions .btn-ghost{ background:transparent;color:var(--ink);border-color:var(--line); } html[data-theme="dark"] .topbar .top-actions .btn-sand{ background:var(--paper);color:var(--ink); } /* Coach panel content in dark — keep image overlay readable */ html[data-theme="dark"] .cp-body{ color:var(--ink); } html[data-theme="dark"] .cp-section-h{ color:var(--mute); } html[data-theme="dark"] .review-card, html[data-theme="dark"] .session-card{ background:var(--sand-50);color:var(--ink); } /* User avatar menu — solid background on dark */ html[data-theme="dark"] .user-menu{ background:var(--paper); box-shadow:0 10px 30px -10px rgba(0,0,0,.55), 0 0 0 1px var(--line); } html[data-theme="dark"] .user-menu a, html[data-theme="dark"] .user-menu button{ color:var(--ink); } html[data-theme="dark"] .user-menu a:hover, html[data-theme="dark"] .user-menu button:hover{ background:var(--sand-50); } html[data-theme="dark"] .user-menu .um-logout{ color:#FF8B6E; border-top-color:var(--line); } /* Popovers, modals, "join" wizard */ html[data-theme="dark"] .popover, html[data-theme="dark"] .modal-card, html[data-theme="dark"] .wizard{ background:var(--paper);color:var(--ink); box-shadow:0 20px 60px -10px rgba(0,0,0,.55); } html[data-theme="dark"] .pop-section, html[data-theme="dark"] .pop-h{ color:var(--ink); border-color:var(--line); } html[data-theme="dark"] .pop-label{ color:var(--mute); } html[data-theme="dark"] .lang-chips .lang-chip, html[data-theme="dark"] .disc-chips .disc-chip{ background:var(--paper);color:var(--ink-2);border-color:var(--line); } html[data-theme="dark"] .lang-chips .lang-chip.on, html[data-theme="dark"] .disc-chips .disc-chip.on{ background:#F5EFE0;color:#14110D;border-color:#F5EFE0; } html[data-theme="dark"] code, html[data-theme="dark"] kbd{ background:var(--sand-100);color:var(--ink); } /* Dark mode — fix readability of role picker cards on account.html The light card needs an inversion: paper bg becomes the dark surface, ink text becomes light. */ html[data-theme="dark"] .role-card{ background: var(--sand-50); border-color: var(--line); color: var(--ink); } html[data-theme="dark"] .role-card.coach{ background: linear-gradient(180deg, var(--sand-50) 0%, rgba(122,145,122,.10) 100%); } html[data-theme="dark"] .role-title{ color: var(--ink); } html[data-theme="dark"] .role-sub{ color: var(--ink-2); } html[data-theme="dark"] .role-bullets li{ color: var(--ink-2); } html[data-theme="dark"] .role-cta{ background: #F5EFE0; color: #14110D; } html[data-theme="dark"] .role-card.coach .role-cta{ background:#7A917A;color:#fff; } html[data-theme="dark"] .role-eyebrow{ color: var(--accent); } html[data-theme="dark"] .role-card.coach .role-eyebrow{ color: var(--accent-2); } html[data-theme="dark"] .role-card .role-ill{ color: var(--accent); } html[data-theme="dark"] .role-card.coach .role-ill{ color: var(--accent-2); } html[data-theme="dark"] .role-bullets li::before{ background:rgba(122,145,122,.25); background-image:url("data:image/svg+xml;utf8,"); background-size:14px;background-position:center;background-repeat:no-repeat; } /* Welcome-back login card on dark */ html[data-theme="dark"] .wb-card{ background:var(--paper); color:var(--ink); } html[data-theme="dark"] .wb-card .wb-title{ color:var(--ink); } html[data-theme="dark"] .wb-card .wb-sub{ color:var(--ink-2); } html[data-theme="dark"] .wb-moveo-cta{ background:#F5EFE0;color:#14110D;border-color:#F5EFE0; } html[data-theme="dark"] .wb-moveo-cta .wb-moveo-logo{ color:#14110D; } html[data-theme="dark"] .wb-moveo-cta .wb-moveo-main, html[data-theme="dark"] .wb-moveo-cta .wb-moveo-pre{ color:#14110D; } /* Booking modal + coach panel — semi-transparent backgrounds look bad in dark */ html[data-theme="dark"] .coach-panel{ background: var(--paper); color:var(--ink); } html[data-theme="dark"] .cp-meta{ background:var(--sand-50); } html[data-theme="dark"] .cal-locked{ background:linear-gradient(135deg,var(--sand-50),var(--sand-100));color:var(--ink); } html[data-theme="dark"] .cal-locked .cl-text strong{ color:var(--ink); } html[data-theme="dark"] .cal-locked .cl-text span{ color:var(--ink-2); } html[data-theme="dark"] .cal-locked .cl-ic{ background:var(--paper); } html[data-theme="dark"] .booking-modal, html[data-theme="dark"] .modal{ background:var(--paper);color:var(--ink); } /* ---------- CHAT (dark) ---------- * In light mode the "me" bubble is dark with cream text. In dark mode, --ink * flips to cream, so the bubble was rendering near-white with near-white text * (illegible, especially on mobile). Flip the contrast: cream bubble + dark * text, mirroring how .btn-ink is handled. Same for the send button and the * unread badge. Hardcoded #fff focus/bypass states in the input also forced * light backgrounds; restore themed surfaces. */ html[data-theme="dark"] .msg-row.me .msg-bubble{ background:#F5EFE0;color:#14110D; } html[data-theme="dark"] .msg-row.them .msg-bubble{ background:var(--sand-100);color:var(--ink); } html[data-theme="dark"] .send-btn{ background:#F5EFE0;color:#14110D; } html[data-theme="dark"] .send-btn:hover{ background:#fff; } html[data-theme="dark"] .conv .badge-n{ background:#F5EFE0;color:#14110D; } html[data-theme="dark"] .chat-input{ background:var(--sand-50);color:var(--ink); } html[data-theme="dark"] .chat-input:focus{ background:var(--paper);border-color:var(--sand-300);color:var(--ink); } html[data-theme="dark"] .chat-input.has-bypass{ background:rgba(216,92,74,.12);border-color:#A24B2A;color:var(--ink); } html[data-theme="dark"] .chat-input-area{ background:var(--paper);border-top-color:var(--line); } html[data-theme="dark"] .thread-bar, html[data-theme="dark"] .thread-policy{ background:var(--sand-50);border-color:var(--line); } html[data-theme="dark"] .bypass-warning{ background:rgba(216,92,74,.14);border-top-color:#A24B2A;color:var(--ink); } html[data-theme="dark"] .booking-card{ background:var(--sand-50);border-color:var(--line);color:var(--ink); } html[data-theme="dark"] .booking-card .b-title{ color:var(--ink); } html[data-theme="dark"] .booking-card .b-when{ color:var(--ink-2); } html[data-theme="dark"] .chat-empty .ic{ background:var(--sand-100);color:var(--ink); } html[data-theme="dark"] .chat-empty h3{ color:var(--ink); } html[data-theme="dark"] .qr{ background:var(--sand-50);color:var(--ink);border-color:var(--line); } html[data-theme="dark"] .qr:hover{ background:var(--sand-100); } /* Plan cards — fix dark-mode contrast. The featured plan card uses a cream background with dark text in light mode. In dark mode the cream becomes too light a sand variant and the title/price/desc go nearly invisible. */ html[data-theme="dark"] .plan{ background:var(--paper) !important; color:var(--ink) !important; border-color:var(--line); } html[data-theme="dark"] .plan.featured{ background:linear-gradient(180deg, #F5EFE0 0%, #E4D9C6 100%) !important; color:#14110D !important; border-color:transparent; } html[data-theme="dark"] .plan.featured h3, html[data-theme="dark"] .plan.featured .price, html[data-theme="dark"] .plan.featured .num, html[data-theme="dark"] .plan.featured .unit, html[data-theme="dark"] .plan.featured .plan-desc, html[data-theme="dark"] .plan.featured .plan-annual-hint{ color:#14110D !important; } html[data-theme="dark"] .plan h3, html[data-theme="dark"] .plan .num, html[data-theme="dark"] .plan .unit{ color:var(--ink) !important; } html[data-theme="dark"] .plan .plan-desc{ color:var(--ink-2) !important; } html[data-theme="dark"] .plan-cta{ background:var(--ink) !important;color:#F6F1E7 !important; } html[data-theme="dark"] .plan.featured .plan-cta{ background:#14110D !important;color:#F5EFE0 !important; } html[data-theme="dark"] .plan.current .plan-cta{ background:var(--accent-2) !important;color:#fff !important; } html[data-theme="dark"] .plan-tag{ background:var(--accent-2);color:#fff } html[data-theme="dark"] ::-webkit-scrollbar{ width:10px;height:10px; } html[data-theme="dark"] ::-webkit-scrollbar-track{ background:transparent; } html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:var(--sand-200);border-radius:5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background:var(--sand-300); }