/* V65 · Temas del portal público. Se carga después de los estilos históricos.
   Colores compartidos para Inicio, el flujo de cita, Ideas, Avisos y diálogos. */
:root {
  --bt-bg: #161719; --bt-panel: #1d1e21; --bt-raised: #292a2f;
  --bt-ink: #f6f6f6; --bt-muted: #b4b5bd; --bt-line: #414249;
  --bt-control-line: #767780; --bt-accent: #e3bb63;
  --bt-primary: #f5f5f5; --bt-on-primary: #171719;
  --bt-primary-hover: #dedee2; --bt-field: #202124;
  --bt-soft: #303137; --bt-header: #161719f5; --bt-nav: #191a1df5;
  --bt-nav-active: #ffffff0d; --bt-shadow: 0 12px 36px #0003;
  --bt-success-bg: #20312a; --bt-success-ink: #b3dfc6;
  --bt-error-bg: #322325; --bt-error-ink: #ffc1ba;
  --bt-warning-bg: #3b3323; --bt-warning-ink: #ffe0a3;
  --bt-logo: brightness(0) invert(1);
}
html[data-booking-theme="light"] {
  color-scheme: light;
  --bt-bg: #f6f6f8; --bt-panel: #ffffff; --bt-raised: #eceef2;
  --bt-ink: #202126; --bt-muted: #595e68; --bt-line: #d3d6dc;
  --bt-control-line: #858b95; --bt-accent: #785516;
  --bt-primary: #24252a; --bt-on-primary: #ffffff;
  --bt-primary-hover: #3d4049; --bt-field: #ffffff;
  --bt-soft: #e8ebef; --bt-header: #fffffff5; --bt-nav: #fffffff5;
  --bt-nav-active: #e8ebef; --bt-shadow: 0 12px 36px #20212612;
  --bt-success-bg: #e7f4eb; --bt-success-ink: #205a38;
  --bt-error-bg: #fff0ee; --bt-error-ink: #932d26;
  --bt-warning-bg: #fff3d9; --bt-warning-ink: #704b0a;
  --bt-logo: brightness(0);
}
html[data-booking-theme="dark"] { color-scheme: dark; }
html[data-booking-theme] {
  --bg: var(--bt-bg); --panel: var(--bt-panel); --panel2: var(--bt-raised);
  --ink: var(--bt-ink); --muted: var(--bt-muted); --line: var(--bt-line);
  --gold: var(--bt-accent); --gold2: var(--bt-accent); --white: var(--bt-ink);
  --danger: var(--bt-error-ink); --success: var(--bt-success-ink);
  --shadow: var(--bt-shadow);
  --rr-bg: var(--bt-bg); --rr-surface: var(--bt-panel); --rr-surface2: var(--bt-raised);
  --rr-text: var(--bt-ink); --rr-muted: var(--bt-muted); --rr-line: var(--bt-line);
  --rr-blue: var(--bt-accent); --rr-blue2: var(--bt-accent); --rr-cyan: var(--bt-accent);
  background: var(--bt-bg);
}
.booking-public { background: var(--bt-bg); color: var(--bt-ink); }
.booking-public ::selection { background: var(--bt-primary); color: var(--bt-on-primary); }
.booking-public .booking-header { background: var(--bt-header); border-color: var(--bt-line); gap: 16px; }
.booking-public .booking-brand-image { filter: var(--bt-logo); }
.booking-public .booking-brand-label { color: var(--bt-muted); border-color: var(--bt-line); }
.booking-public .booking-member-nav { margin-left: auto; }
.booking-theme-picker { display: inline-flex; flex-shrink: 0; gap: 3px; padding: 4px; border: 1px solid var(--bt-control-line); border-radius: 999px; background: var(--bt-panel); }
.booking-theme-picker button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 7px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--bt-muted); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; }
.booking-theme-picker button[aria-pressed="true"] { background: var(--bt-primary); color: var(--bt-on-primary); }
.booking-theme-picker button:hover { box-shadow: inset 0 0 0 1px var(--bt-control-line); }
.booking-theme-picker svg { width: 16px; height: 16px; flex-shrink: 0; }
.booking-public :is(button,a,input,textarea,select,summary):focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 4px; }
.booking-public :is(h1,h2,h3,h4) { color: var(--bt-ink); }
.booking-public .booking-member-nav a { color: var(--bt-muted); }
.booking-public .booking-member-nav a:hover { background: var(--bt-raised); color: var(--bt-ink); }
.booking-public .booking-member-nav a.active { background: var(--bt-primary); color: var(--bt-on-primary); }
.booking-public .booking-kicker { color: var(--bt-accent) !important; text-shadow: none; }
.booking-public .booking-kicker::before { background: var(--bt-accent); }
.booking-public .booking-hero { background: radial-gradient(ellipse at top left, #c79a4c14, transparent 60%), var(--bt-panel) !important; border-color: var(--bt-line) !important; box-shadow: var(--bt-shadow) !important; }
.booking-public .booking-hero::before { background: linear-gradient(115deg, #c79a4c0c, transparent 40%); }
.booking-public .booking-hero::after { color: var(--bt-ink) !important; opacity: .035; }
.booking-public .booking-hero h1 { color: var(--bt-ink); text-shadow: none; }
.booking-public .booking-hero h1 em { color: var(--bt-accent) !important; }
.booking-public .booking-hero p { color: var(--bt-muted) !important; }
.booking-public :is(.booking-card,.branch-booking-shell,.booking-summary,.booking-guest-form,.booking-modal-card,.recommendation-filter-card,.recommendation-card,.notice-hub-summary,.customer-coupon-card,.notice-hub-empty,.notice-news-card,.notice-social-grid a,.notice-official-card,.community-card) { background: var(--bt-panel); color: var(--bt-ink); border-color: var(--bt-line); }
.booking-public .booking-card.booking-flow { background: transparent; }
.booking-public :is(.branch-booking-shell:hover,.service-booking-card:hover,.barber-booking-card:hover,.recommendation-card.is-favorite,.recommendation-card.recommended-top) { border-color: var(--bt-control-line); }
.booking-public .booking-progress span { color: var(--bt-muted); border-color: var(--bt-control-line); }
.booking-public .booking-progress span.active { background: var(--bt-primary); color: var(--bt-on-primary); border-color: var(--bt-primary); }
.booking-public .booking-progress span.done { background: var(--bt-raised); color: var(--bt-ink); border-color: var(--bt-control-line); }
.booking-public :is(.booking-back,.booking-confirm-note,.booking-time-label,.booking-cancellation-note,.branch-public-icon,.branch-public-row small,.branch-hours span b,.branch-details summary,.booking-guest-form label,.booking-date-wrap label,.recommendation-filter-grid label,.booking-simple-form label,.booking-auth-form label) { color: var(--bt-muted); }
.booking-public .booking-back:hover { color: var(--bt-ink); }
.booking-public .branch-public-info { background: transparent; color: var(--bt-ink); }
.booking-public :is(.branch-public-row strong,.branch-hours span,.branch-contact-link,.branch-map-link,.booking-empty a) { color: var(--bt-ink); }
.booking-public :is(.branch-details,.branch-map-link,.booking-summary > div,.recommendation-card dl div) { border-color: var(--bt-line); }
/* Las fotos conservan una base oscura y texto blanco en ambos temas. */
.booking-public .branch-booking-card { color: #ffffff; background: #202124; }
.booking-public .branch-booking-overlay { background: linear-gradient(0deg, #000e, #0002 82%); }
.booking-public .branch-booking-copy strong, .booking-public .branch-booking-copy em { color: #ffffff; }
.booking-public .branch-booking-copy small { color: #ffe0a3; }
.booking-public .branch-booking-check { background: #161719e6; color: #ffffff; }
.booking-public :is(.booking-primary,.booking-confirm,.notice-hub-book) { background: var(--bt-primary); border-color: var(--bt-primary); color: var(--bt-on-primary); }
.booking-public :is(.booking-primary:hover,.booking-confirm:hover,.notice-hub-book:hover) { background: var(--bt-primary-hover); border-color: var(--bt-primary-hover); }
.booking-public :is(.booking-secondary,.favorite-filter,.recommendation-google,.booking-install,.notice-official-card > a) { background: transparent; color: var(--bt-ink); border-color: var(--bt-control-line); }
.booking-public :is(.booking-secondary:hover,.favorite-filter:hover,.recommendation-google:hover,.booking-install:hover) { background: var(--bt-raised); color: var(--bt-ink); }
.booking-public .favorite-filter.active { background: var(--bt-primary); border-color: var(--bt-primary); color: var(--bt-on-primary); }
.booking-public :is(.service-booking-card,.barber-booking-card,.booking-day,.slot-booking-button) { background: var(--bt-panel); color: var(--bt-ink); border-color: var(--bt-control-line); }
.booking-public :is(.service-booking-card b,.barber-booking-card i) { color: var(--bt-ink); }
.booking-public :is(.service-booking-card small,.barber-booking-card small,.booking-day span) { color: var(--bt-muted); }
.booking-public .service-booking-card .service-booking-checkmark { border-color: var(--bt-control-line); }
.booking-public :is(.service-booking-card.selected,.slot-booking-button.selected,.slot-booking-button:hover,.booking-day.active) { background: var(--bt-primary); border-color: var(--bt-primary); color: var(--bt-on-primary); }
.booking-public :is(.service-booking-card.selected b,.service-booking-card.selected small,.booking-day.active span) { color: var(--bt-on-primary); }
.booking-public .service-booking-card.selected .service-booking-checkmark { background: var(--bt-on-primary); border-color: var(--bt-on-primary); color: var(--bt-primary); }
.booking-public .barber-booking-avatar { background: var(--bt-raised); border-color: var(--bt-control-line); color: var(--bt-ink); }
.booking-public .service-selection-footer { background: var(--bt-panel); color: var(--bt-ink); box-shadow: var(--bt-shadow); border: 1px solid var(--bt-line); }
.booking-public .service-selection-footer strong { color: var(--bt-ink); }
.booking-public .service-selection-footer span { color: var(--bt-muted); }
.booking-public .service-selection-footer .booking-primary { background: var(--bt-primary); color: var(--bt-on-primary); border-color: var(--bt-primary); }
.booking-public :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select) { background: var(--bt-field); color: var(--bt-ink); border-color: var(--bt-control-line); caret-color: var(--bt-ink); }
.booking-public :is(input,textarea)::placeholder { color: var(--bt-muted); opacity: 1; }
.booking-public :is(input,textarea,select):focus { outline: 2px solid var(--bt-accent); outline-offset: 2px; border-color: var(--bt-accent); box-shadow: none; }
.booking-public input:-webkit-autofill { -webkit-text-fill-color: var(--bt-ink); box-shadow: 0 0 0 100px var(--bt-field) inset; caret-color: var(--bt-ink); }
.booking-public input[type=checkbox], .booking-public input[type=radio] { accent-color: var(--bt-primary); }
.booking-public :is(.booking-summary span,.booking-success p,.booking-loading,.booking-empty,.recommendation-card p,.recommendation-card dt,.recommendation-card-top small,.notice-hub-summary span,.notice-hub-heading p,.notice-hub-hero-copy p,.customer-coupon-branch,.customer-coupon-main small,.customer-coupon-details b,.notice-hub-empty p,.notice-news-body p,.notice-news-meta time,.notice-news-footer small,.notice-official-card p,.booking-auth-form p,.booking-security-note) { color: var(--bt-muted); }
.booking-public :is(.booking-summary strong,.booking-guest-form h3,.recommendation-card-body > strong,.recommendation-card dd,.customer-coupon-scope,.customer-coupon-details span,.notice-hub-empty strong,.notice-social-grid strong,.notice-official-mark) { color: var(--bt-ink); }
.booking-public :is(.booking-empty,.booking-loading,.customer-coupon-details span,.recommendation-card-top span,.notice-hub-empty > span,.booking-modal-close,.booking-password-toggle) { background: var(--bt-raised); border-color: var(--bt-line); color: var(--bt-ink); }
.booking-public :is(.recommendation-media,.recommendation-art,.notice-news-media-fallback) { background: var(--bt-raised); color: var(--bt-muted); }
.booking-public .recommendation-favorite { background: #161719e6; color: #ffffff; border-color: #ffffff80; }
.booking-public .recommendation-favorite.active { background: #ffffff; color: #171719; border-color: #171719; }
.booking-public .recommendation-photo-label { background: #161719e6; color: #ffffff; }
.booking-public :is(.customer-coupon-code,.booking-success-icon) { background: var(--bt-primary); color: var(--bt-on-primary); border-color: var(--bt-primary); }
.booking-public .customer-coupon-code :is(span,strong,small) { color: var(--bt-on-primary); }
.booking-public :is(.customer-coupon-status,.customer-coupon-note,.booking-info.success) { background: var(--bt-success-bg); color: var(--bt-success-ink); border-color: var(--bt-success-ink); }
.booking-public .booking-info.success b { color: var(--bt-success-ink); }
.booking-public :is(.is-upcoming .customer-coupon-status,.booking-connection) { background: var(--bt-warning-bg); color: var(--bt-warning-ink); }
.booking-public :is(.is-sold-out .customer-coupon-status,.booking-info.error,.booking-danger) { background: var(--bt-error-bg); color: var(--bt-error-ink); border-color: var(--bt-error-ink); }
.booking-public .customer-coupon-card.is-sold-out { opacity: 1; }
.booking-public :is(.booking-update,.booking-toast) { background: var(--bt-panel); color: var(--bt-ink); border-color: var(--bt-control-line); box-shadow: var(--bt-shadow); }
.booking-public .booking-update span { color: var(--bt-muted); }
.booking-public .booking-update button { background: var(--bt-primary); color: var(--bt-on-primary); }
.booking-public .booking-footer { background: var(--bt-bg) !important; color: var(--bt-muted) !important; border-color: var(--bt-line) !important; }
.booking-public .booking-footer strong { color: var(--bt-ink); }
/* SweetAlert tiene colores propios: se reemplazan también título, texto e iconos. */
.booking-public .barber-popup { background: var(--bt-panel) !important; color: var(--bt-ink) !important; border-color: var(--bt-control-line) !important; }
.booking-public :is(.swal2-title,.swal2-html-container,.swal2-footer,.swal2-close) { color: var(--bt-ink); }
.booking-public .swal2-confirm { background: var(--bt-primary) !important; color: var(--bt-on-primary) !important; }
.booking-public .swal2-cancel { background: var(--bt-raised) !important; color: var(--bt-ink) !important; }
.booking-public .swal2-validation-message { background: var(--bt-error-bg); color: var(--bt-error-ink); }
.booking-public .swal2-icon.swal2-warning { color: var(--bt-warning-ink); border-color: var(--bt-warning-ink); }
.booking-public .swal2-icon.swal2-error { color: var(--bt-error-ink); border-color: var(--bt-error-ink); }
.booking-public .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background: var(--bt-error-ink); }
.booking-public .swal2-icon.swal2-success { color: var(--bt-success-ink); border-color: var(--bt-success-ink); }
.booking-public .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--bt-success-ink); }
.booking-public .swal2-icon.swal2-success [class^="swal2-success-line"] { background: var(--bt-success-ink); }
.booking-public .swal2-icon.swal2-info, .booking-public .swal2-icon.swal2-question { color: var(--bt-accent); border-color: var(--bt-accent); }
@media (max-width: 980px) {
  .booking-public .booking-header { gap: 10px; }
  .booking-theme-picker button { padding: 7px 9px; font-size: 11px; }
  .booking-public .booking-mobile-tabs { background: var(--bt-nav) !important; border-top-color: var(--bt-line) !important; box-shadow: var(--bt-shadow) !important; }
  .booking-public .booking-mobile-tabs a { color: var(--bt-muted) !important; }
  .booking-public .booking-mobile-tabs a.active { color: var(--bt-ink) !important; background: var(--bt-nav-active) !important; }
  .booking-public .branch-booking-grid { scrollbar-color: var(--bt-control-line) transparent; }
}
@media (max-width: 380px) {
  .booking-theme-picker { gap: 1px; padding: 3px; }
  .booking-theme-picker button { padding: 7px; gap: 4px; }
  .booking-theme-picker svg { width: 14px; height: 14px; }
}