/* Portal de citas · acabado grafito. Cargado exclusivamente por layouts/booking.php.
   booking.css conserva la estructura; este archivo unifica todos los estados visuales. */
:root {
  --bg: #161719; --panel: #1d1e21; --panel2: #242529;
  --ink: #f6f6f6; --muted: #adaeb4; --line: #34353a;
  --gold: #e3bb63; --gold2: #e3bb63; --white: #fff;
  --danger: #ffaaa2; --success: #a7dabc;
  --shadow: 0 12px 40px #00000018;
  color-scheme: dark;
}
html, body.booking-body { background: var(--bg); }
body.booking-body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
::selection { background: #f5f5f5; color: #161719; }
[hidden] { display: none !important; }
a, button, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 4px;
}
button, input, select { font-family: inherit; }
.booking-body :is(h1,h2,h3,h4) { font-family: inherit; font-weight: 650; letter-spacing: -.04em; }
.booking-body h1 em { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--muted); }
.booking-icon { display: block; width: 21px; height: 21px; flex-shrink: 0; }
.booking-skip { position: fixed; top: -100px; left: 16px; z-index: 200; background: #fff; color: #171719; padding: 14px 20px; border-radius: 999px; }
.booking-skip:focus { top: 12px; }
.booking-header {
  background: #161719ed; border-bottom: 1px solid #ffffff09; box-shadow: none;
  min-height: 84px; padding-inline: max(28px, calc((100vw - 1140px) / 2));
}
.booking-brand-image { width: 148px; height: auto; }
.booking-brand-label { color: var(--muted); font-size: 8px; letter-spacing: 2px; }
.booking-account-zone { gap: 10px; }
.booking-account-link, .booking-account-name { color: var(--ink); }
.booking-account-link { border: 1px solid var(--line); border-radius: 999px; padding: 11px 17px; font-weight: 550; }
.booking-account-link:hover { background: var(--panel2); }
.booking-member-nav { gap: 6px; }
.booking-member-nav a { border-radius: 999px; color: var(--muted); font-weight: 550; padding-inline: 15px; }
.booking-member-nav a:hover { background: var(--panel2); color: var(--ink); }
.booking-member-nav a.active { color: #161719; background: #f6f6f6; }
.booking-main { width: 100%; max-width: 1140px; padding: 36px 28px 40px; }
.booking-hero { text-align: left; padding: 10px 0 36px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.booking-kicker { color: var(--gold); font-size: 9px; letter-spacing: 2px; }
.booking-hero h1 { font-size: clamp(32px, 5vw, 55px); line-height: 1.1; margin: 15px 0 13px; }
.booking-hero h1 br { display: none; }
.booking-hero h1 em::before { content: ' '; }
.booking-hero p { margin: 0; max-width: 580px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.booking-card { background: var(--panel); border: 1px solid var(--line); box-shadow: none; border-radius: 24px; }
.booking-flow { padding: 0; background: transparent; border: 0; }
.booking-progress { display: flex; gap: 8px; margin-bottom: 32px; }
.booking-progress span { flex: 1; flex-direction: row; gap: 9px; height: 44px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 550; }
.booking-progress span strong { display: inline; font-weight: 550; font-size: 11px; margin: 0; }
.booking-progress span.active { background: #f5f5f5; color: #161719; border-color: #f5f5f5; box-shadow: none; }
.booking-progress span.done { background: #242529; color: #ddd; border-color: #414248; font-size: 0; }
.booking-progress span.done::before { font-size: 13px; }
.booking-step-head { margin-bottom: 22px; }
.booking-step-head > span { color: var(--muted); font-size: 9px; letter-spacing: 1.5px; }
.booking-step-head h2 { margin: 8px 0; font-size: 27px; line-height: 1.15; }
.booking-step-head p { color: var(--muted); }
.booking-step-head h2:focus { outline: none; }
.booking-step { scroll-margin-top: 105px; }
.booking-back { display: inline-flex; align-items: center; color: var(--muted); min-height: 44px; padding: 0 0 12px; font-size: 12px; }
.booking-back:hover { color: #fff; }
.branch-booking-grid { gap: 18px; align-items: stretch; }
.branch-booking-shell { display: flex; flex-direction: column; background: var(--panel); border: 1px solid #303135; border-radius: 24px; box-shadow: none; padding: 10px; }
.branch-booking-shell:hover { border-color: #696a71; box-shadow: none; }
.branch-booking-shell .branch-booking-card { border-radius: 17px; min-height: 230px; border: 0; background: var(--panel2); }
.branch-booking-card img { filter: saturate(.6); transition: transform .3s ease; }
.branch-booking-card:hover img { transform: scale(1.035); }
.branch-booking-overlay { background: linear-gradient(0deg,#000c,transparent 80%); }
.branch-booking-copy { inset: auto 16px 16px; }
.branch-booking-copy strong { font-family: inherit; font-size: 25px; font-weight: 650; letter-spacing: -.04em; }
.branch-booking-copy small { color: var(--gold); font-size: 8px; letter-spacing: 1.4px; }
.branch-booking-copy em { color: #eee; }
.branch-booking-check { background: #161719b8; border-color: #ffffff30; width: 35px; height: 35px; right: 12px; top: 12px; }
.branch-booking-photo-fallback { background: linear-gradient(145deg,#38393e,#202124); color: #81828a; font-family: inherit; font-weight: 650; font-size: 44px; letter-spacing: -4px; }
.branch-public-info { flex: 1; background: transparent; min-height: 0; padding: 17px 7px 10px; gap: 15px; }
.branch-public-row { grid-template-columns: 22px minmax(0,1fr); gap: 8px; }
.branch-public-icon { background: none; color: var(--muted); width: 22px; height: 23px; font-size: 19px; }
.branch-public-row small { color: var(--muted); font-size: 8px; letter-spacing: 1px; }
.branch-public-row strong { color: #e1e1e4; font-size: 12px; line-height: 1.5; font-weight: 400; }
.branch-hours span { color: #e1e1e4; font-size: 11px; gap: 5px; }
.branch-hours span b { color: var(--muted); font-weight: 400; }
.branch-contact-link { color: #dedee2; min-height: 35px; font-size: 12px; }
.branch-details { border-top: 1px solid var(--line); }
.branch-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; color: #c5c5cc; font-size: 11px; }
.branch-details summary::-webkit-details-marker { display: none; }
.branch-details summary span { font-size: 21px; transition: transform .2s; }
.branch-details[open] summary span { transform: rotate(45deg); }
.branch-details-content { display: grid; gap: 12px; padding: 6px 0 12px; }
.branch-map-link { color: #d2d2d7; background: transparent; border-color: var(--line); min-height: 42px; border-radius: 999px; font-size: 9px; }
.branch-map-link:hover { color: #fff; border-color: #888; }
.branch-coming-note { background: #25262a; color: var(--muted); border-color: var(--line); border-radius: 16px; }
.branch-booking-shell.coming-soon .branch-booking-card { filter: none; }
.branch-reserve { width: 100%; margin-top: 6px; }
.branch-reserve:disabled { background: var(--panel2); border-color: var(--line); color: var(--muted); opacity: 1; cursor: not-allowed; }
.booking-primary, .booking-confirm, .notice-hub-book {
  background: #f5f5f5; color: #171719; border: 1px solid #f5f5f5; border-radius: 999px;
  min-height: 48px; font-size: 12px; font-weight: 650; letter-spacing: 0; box-shadow: none;
  transition: background .18s, transform .18s;
}
.booking-primary:hover, .booking-confirm:hover, .notice-hub-book:hover { background: #dedee2; border-color: #dedee2; }
.booking-primary:active, .booking-confirm:active { transform: scale(.985); }
.booking-primary:disabled, .booking-confirm:disabled { opacity: .5; }
.booking-secondary, .favorite-filter, .recommendation-google, .booking-install {
  background: transparent; color: #ececef; border: 1px solid #45464d; border-radius: 999px;
  font-size: 11px; font-weight: 550; letter-spacing: 0; min-height: 44px;
}
.booking-secondary:hover, .favorite-filter:hover, .recommendation-google:hover, .booking-install:hover { background: #2b2c30; border-color: #888; color: #fff; }
.booking-danger, .booking-history-delete { background: #302324; color: #ffb8b1; border: 1px solid #654143; border-radius: 999px; font-size: 11px; letter-spacing: 0; }
.service-booking-list, .barber-booking-grid { gap: 12px; }
.service-booking-card, .barber-booking-card { color: var(--ink); background: var(--panel); border: 1px solid var(--line); min-height: 90px; border-radius: 20px; }
.service-booking-card small, .barber-booking-card small { color: var(--muted); }
.service-booking-card strong { font-size: 14px; font-weight: 550; }
.service-booking-card b { color: #f3f3f3; font-size: 15px; font-weight: 650; }
.service-booking-card .service-booking-checkmark { background: transparent; border-color: #5a5b63; color: transparent; }
.service-booking-card.selected { background: #f4f4f5; border-color: #f4f4f5; color: #171719; box-shadow: none; }
.service-booking-card.selected b { color: #171719; }
.service-booking-card.selected small { color: #5a5a62; }
.service-booking-card.selected .service-booking-checkmark { background: #171719; border-color: #171719; color: #fff; }
.service-booking-card:hover, .barber-booking-card:hover { border-color: #93939b; }
.barber-booking-avatar { border-radius: 15px; width: 50px; height: 54px; border: 1px solid #4a4b52; background: #303137; color: #f0f0f2; font-family: inherit; font-size: 16px; }
.barber-booking-card { grid-template-columns: 50px 1fr 20px; padding: 15px; }
.barber-booking-card i { color: #eee; }
.service-selection-footer { background: #f5f5f5; border: 0; border-radius: 24px; color: #171719; box-shadow: 0 10px 35px #0005; padding: 16px 18px; bottom: 20px; }
.service-selection-footer span { color: #5f6066; font-size: 9px; }
.service-selection-footer strong { color: #171719; }
.service-selection-footer .booking-primary { background: #171719; border-color: #171719; color: #fff; }
.booking-date-wrap input, .booking-auth-form input, .booking-simple-form input, .recommendation-filter-grid select {
  background: #202124; color: #f4f4f5; border: 1px solid #414249; border-radius: 14px; min-height: 50px; font-size: 16px;
}
.booking-date-wrap label, .booking-auth-form label, .booking-simple-form label, .recommendation-filter-grid label { color: #c6c6cc; font-size: 11px; font-weight: 500; }
.booking-date-wrap input:focus, .booking-auth-form input:focus, .booking-simple-form input:focus { border-color: #bcbcc4; box-shadow: 0 0 0 3px #ffffff0a; }
input::placeholder { color: #9999a2; font-size: 13px; }
.booking-remember { color: #bfbfc7 !important; }
.booking-remember input, input[type=checkbox] { accent-color: #ededf0; }
.booking-password-toggle { color: #e2e2e7; background: #303137; border-color: #505159; border-radius: 999px; }
.booking-auth-form label small, .booking-auth-form p, .booking-security-note, .booking-confirm-note { color: var(--muted); }
.booking-date-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 9px; margin: 20px 0 24px; }
.booking-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 80px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: #ddd; cursor: pointer; }
.booking-day strong { font-size: 20px; font-weight: 600; }
.booking-day span { font-size: 9px; text-transform: uppercase; color: var(--muted); }
.booking-day.active { background: #f5f5f5; color: #171719; border-color: #f5f5f5; }
.booking-day.active span { color: #595962; }
.booking-time-label { color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.slot-booking-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.slot-booking-button { background: var(--panel); border-color: var(--line); color: #e4e4e8; border-radius: 12px; font-size: 12px; font-weight: 500; }
.slot-booking-button:hover, .slot-booking-button.selected { background: #f5f5f5; color: #171719; border-color: #f5f5f5; box-shadow: none; }
.booking-loading, .booking-empty { background: var(--panel); border-color: #45464d; color: var(--muted); padding: 28px 18px; line-height: 1.6; }
.booking-empty a { color: #f5f5f5; }
.booking-summary { background: var(--panel); border-color: var(--line); border-radius: 23px; }
.booking-summary > div { border-color: var(--line); min-height: 57px; padding: 14px 20px; }
.booking-summary span { color: var(--muted); font-size: 12px; }
.booking-summary strong { color: var(--ink); overflow-wrap: anywhere; }
.booking-summary-location a { color: var(--gold); }
.booking-auth-required { background: var(--panel2); border-color: #47484f; border-radius: 20px; gap: 13px; }
.booking-auth-required strong { color: var(--ink); }
.booking-auth-required span { color: var(--muted); }
.booking-success-icon { background: #f5f5f5; color: #171719; border-color: #f5f5f5; }
.booking-success > span { color: var(--gold); }
.booking-success h2 { font-size: 32px; }
.booking-success p { color: var(--muted); }
.booking-modal-backdrop { background: #000a; backdrop-filter: blur(10px); }
.booking-modal-card { background: #1b1c1f; color: var(--ink); border-color: #3a3b42; border-radius: 28px; box-shadow: 0 25px 90px #0008; padding: 25px; max-height: 90dvh; }
.booking-modal-close { background: #2b2c31; color: #eee; border-color: #484951; width: 40px; height: 40px; }
.auth-switch { margin-top: 39px; background: transparent; border-color: #42434a; border-radius: 999px; }
.auth-switch button { border-radius: 999px; color: var(--muted); font-weight: 550; }
.auth-switch button.active { background: #f5f5f5; color: #171719; }
.booking-auth-form { gap: 17px; }
.booking-auth-form h3 { font-size: 27px; margin: 6px 0; }
.booking-forgot { color: #c3c3cc; }
.auth-page-card h1 { font-size: clamp(30px,5vw,40px); }
.booking-info.success { background: #20312a; color: #b3dfc6; border-color: #446955; }
.booking-info.success b { color: #d1efde; }
.booking-info.error { background: #322325; color: #ffc1ba; border-color: #765051; }
.booking-toast { background: #27282d; border-color: #565761; color: #fff; box-shadow: 0 15px 40px #0005; }
.booking-body .barber-popup { background: #242529 !important; color: #f6f6f6 !important; border: 1px solid #484951 !important; border-radius: 24px; }
.booking-body .swal2-confirm { background: #f5f5f5 !important; color: #171719 !important; border-radius: 999px; }
.booking-body .swal2-cancel { background: #414249 !important; color: #f5f5f5 !important; border-radius: 999px; }
.booking-body .swal2-timer-progress-bar { background: #e3bb6370; }
.member-hero { padding: 12px 0 8px; margin-bottom: 24px; }
.member-hero h1 { font-size: clamp(30px,5vw,46px); margin-top: 9px; }
.member-welcome-note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.member-profile-card, .member-section, .account-card, .recommendation-card, .community-card { background: var(--panel); border-color: var(--line); box-shadow: none; border-radius: 24px; }
.member-profile-card h2 { font-size: 22px; }
.member-profile-card p { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.member-profile-card small { color: var(--muted); }
.member-avatar { font-family: inherit; font-size: 24px; color: #1b1c1f; border: 0; background: #eeeef1; }
.member-stats article { background: #202124; border-color: var(--line); border-radius: 18px; }
.member-stats strong { font-family: inherit; font-size: 26px; color: var(--ink); }
.member-stats span { color: var(--muted); font-size: 9px; letter-spacing: .4px; font-weight: 500; margin-top: 5px; }
.member-section { margin-top: 24px; padding: 23px; }
.member-section-head span { color: var(--muted); font-weight: 500; font-size: 9px; }
.member-section-head h2 { font-size: 25px; margin-top: 7px; }
.member-section-head a { color: #e5e5eb; min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; font-size: 12px; }
.member-next-card { background: #f4f4f5; color: #171719; border-color: #f4f4f5; border-radius: 18px; }
.member-next-card > strong, .member-next-card h3 { color: #171719; }
.member-next-card p, .member-next-card small { color: #5d5d65; font-size: 11px; }
.member-next-date { background: #171719; border: 0; border-radius: 14px; }
.member-next-date strong { font-family: inherit; font-weight: 650; color: #fff; }
.member-next-date span { color: #c1c1c9; }
.member-shortcuts a, .recommendation-teaser-grid article, .community-social-strip a { background: var(--panel); border-color: var(--line); }
.member-shortcuts a:hover { background: #292a2e; border-color: #676871; }
.member-shortcuts strong { color: #f1f1f4; }
.member-shortcuts span, .recommendation-teaser-grid p, .community-social-strip span { color: var(--muted); }
.recommendation-teaser-grid small { color: var(--gold); }
.recommendation-teaser-grid h3 { font-size: 20px; }
.customer-code-card { grid-template-columns: minmax(0,1fr) auto; background: #222327; border-color: var(--line); gap: 30px; }
.customer-code-copy strong { font-size: 15px; font-weight: 550; }
.customer-code-copy p { color: var(--muted); font-size: 13px; opacity: 1; }
.customer-code-copy span { color: var(--gold); opacity: 1; font-weight: 500; }
.customer-code-refresh { color: #d8d8df; font-size: 12px; font-weight: 500; min-height: 44px; }
.customer-code-barcode { width: 250px; max-width: 100%; box-shadow: none; }
.customer-code-barcode strong { color: #111; }
.account-head { border-color: var(--line); }
.account-head > div span { color: var(--muted); }
.booking-history-help { color: var(--muted); font-size: 12px; }
.appointment-account-card { background: #242529; border-color: var(--line); border-radius: 20px; padding: 18px; }
.appointment-account-date { background: #f5f5f5; }
.appointment-account-date strong { font-family: inherit; color: #171719; }
.appointment-account-date span { color: #57575f; }
.appointment-account-copy p { color: var(--muted); line-height: 1.5; }
.appointment-account-copy > div { flex-wrap: wrap; }
.appointment-account-copy > div span { color: #eeeef2; }
.appointment-status { background: #38393f; color: #e1e1e6; font-size: 9px; letter-spacing: .2px; }
.status-confirmed, .status-arrived { background: #293d33; color: #b6e5c9; }
.status-cancelled, .status-no_show { background: #442e30; color: #ffc0b9; }
.status-completed { background: #353640; color: #d3d4e2; }
.booking-pagination { border-color: var(--line); }
.booking-pagination a { border-color: #505159; border-radius: 999px; color: #e0e0e7; min-height: 44px; display: grid; place-items: center; }
.booking-pagination span { color: var(--muted); }
.recommendation-filter-card { background: var(--panel); border-color: var(--line); border-radius: 22px; }
.recommendation-filter-actions { flex-wrap: wrap; }
.favorite-filter.active { color: #171719; background: #f5f5f5; border-color: #f5f5f5; }
.recommendation-media, .recommendation-art { background: #2c2d32; }
.recommendation-art { color: #91929a; font-family: inherit; font-weight: 650; }
.recommendation-media > .recommendation-art { display: grid; place-items: center; }
.recommendation-favorite { background: #171719b8; color: #fff; border-color: #ffffff40; box-shadow: none; width: 44px; height: 44px; }
.recommendation-favorite.active { background: #f5f5f5; color: #171719; border-color: #f5f5f5; }
.recommendation-photo-label { color: #eee; background: #171719b8; }
.recommendation-card-top span { background: #34353a; color: #e1e1e7; }
.recommendation-card-top small, .recommendation-card dt { color: var(--muted); }
.recommendation-card-body > strong { color: #dfdfe5; font-weight: 500; font-size: 12px; }
.recommendation-card p { color: var(--muted); font-size: 12px; }
.recommendation-card dl div { border-color: var(--line); }
.recommendation-card dd { color: #d7d7df; font-size: 11px; }
.recommendation-card.is-favorite, .recommendation-card.recommended-top { border-color: #898a93; box-shadow: none; }
.recommendation-actions { grid-template-columns: 1fr 1fr; }
.notice-hub-hero-copy h1 { color: var(--ink); font-size: clamp(32px,5vw,50px); line-height: 1.15; }
.notice-hub-hero-copy p, .notice-hub-heading p { color: var(--muted); }
.notice-hub-summary { background: var(--panel); border-color: var(--line); box-shadow: none; }
.notice-hub-summary strong { font-family: inherit; color: var(--gold); font-weight: 550; }
.notice-hub-summary span { color: var(--muted); font-weight: 500; }
.notice-hub-eyebrow { color: var(--gold); font-weight: 500; }
.notice-hub-heading h2 { color: var(--ink); font-size: 27px; }
.customer-coupon-card, .customer-coupon-card.is-upcoming { background: var(--panel); border-color: #42434a; box-shadow: none; border-radius: 24px; }
.customer-coupon-card::before { background: #e3bb6308; }
.customer-coupon-status { color: #c5e8d4; background: #2b4235; }
.is-upcoming .customer-coupon-status { background: #463b27; color: #eed499; }
.is-sold-out .customer-coupon-status { background: #493132; color: #ffc2bd; }
.customer-coupon-branch { color: var(--muted); }
.customer-coupon-main small { color: var(--muted); }
.customer-coupon-main h3 { color: var(--ink); font-size: 24px; }
.customer-coupon-main > strong { color: var(--gold); font-family: inherit; font-weight: 600; }
.customer-coupon-scope { color: #d4d4da; font-weight: 500; }
.customer-coupon-details span { background: #25262a; border-color: var(--line); color: #e0e0e5; font-size: 11px; }
.customer-coupon-details b { color: var(--muted); }
.customer-coupon-note { background: #29372e; color: #c1dbcb; font-weight: 500; }
.customer-coupon-code { background: #f4f4f5; border: 0; border-radius: 16px; }
.customer-coupon-code span { color: #55555e; }
.customer-coupon-code strong { color: #171719; }
.customer-coupon-code small { color: #56565f; }
.notice-hub-empty { background: var(--panel); border-color: #4a4b53; }
.notice-hub-empty > span { background: #313238; }
.notice-hub-empty strong { color: var(--ink); }
.notice-hub-empty p { color: var(--muted); }
.notice-news-card, .notice-social-grid a { background: var(--panel); border-color: var(--line); box-shadow: none; }
.notice-news-body h3 { color: var(--ink); font-size: 23px; }
.notice-news-body p, .notice-news-meta time, .notice-news-footer small { color: var(--muted); }
.notice-news-meta span, .notice-news-footer a, .notice-social-grid span, .notice-social-grid i { color: var(--gold); }
.notice-news-media-fallback { background: #2c2d32; color: #c7c7cf; }
.notice-news-media-fallback span { font-family: inherit; }
.notice-social-grid strong { color: #e3e3e8; }
.notice-official-card { background: #242529; border-color: #44454c; box-shadow: none; }
.notice-official-mark { font-family: inherit; color: #fff; border-color: #71727a; }
.notice-official-card span { color: var(--gold); }
.notice-official-card p { color: var(--muted); }
.notice-official-card > a { border-radius: 999px; }
.notice-card { background: var(--panel); border-color: var(--line); border-left-color: var(--gold); }
.notice-card > span, .notice-card strong { color: var(--ink); }
.notice-card p, .community-card p, .community-card time { color: var(--muted); }
.community-card-media-social { background: #303137; color: #dedee5; }
.community-card-meta span, .community-open, .community-social-strip strong { color: var(--gold); }
.community-card-meta small { color: var(--muted); }
.booking-website { background: var(--panel); border-color: var(--line); }
.booking-website-heading a { color: var(--gold); }
.booking-website > p { color: var(--muted); }
.booking-footer { max-width: 1140px; justify-content: space-between; border-top: 1px solid #ffffff0b; margin-top: 18px; color: #9999a3; padding-inline: 28px; }
.booking-footer strong { color: #d1d1d7; font-size: 10px; letter-spacing: 1.8px; }
.booking-footer span { letter-spacing: .5px; font-size: 10px; }
.booking-connection { background: #3b3323; color: #ffe0a3; }
.booking-update { background: #2a2b30; border-color: #5b5c65; border-radius: 22px; box-shadow: 0 20px 60px #0006; }
.booking-update span { color: #c3c3cc; }
.booking-update button { background: #f5f5f5; color: #171719; border-radius: 999px; }
@media (max-width: 980px) {
  .booking-member-nav { display: none; }
  .booking-main { max-width: 820px; }
  .booking-header { padding-inline: 24px; }
}
/* Tablets retain access to every customer page through the same bottom bar. */
@media (max-width: 980px) and (min-width: 701px) {
  .booking-mobile-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: repeat(5,1fr); padding: 10px 24px calc(10px + env(safe-area-inset-bottom)); }
  .booking-mobile-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-decoration: none; }
  .booking-mobile-tabs a b { font-size: 10px; font-weight: 500; }
}
@media (max-width: 980px) {
  body.booking-member { padding-bottom: calc(84px + env(safe-area-inset-bottom,0px)); }
  .booking-mobile-tabs { background: #1b1c1ff5; border-top: 1px solid #3a3b41; box-shadow: 0 -10px 40px #0002; backdrop-filter: blur(18px); }
  .booking-mobile-tabs a { color: #a7a7b0; min-height: 48px; }
  .booking-mobile-tabs a.active { color: #fff; }
  .booking-mobile-tabs a:nth-child(3) span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: #f5f5f5; color: #171719; box-shadow: 0 3px 20px #0005; margin-top: -19px; }
  .booking-mobile-tabs a:nth-child(3) b { color: #f5f5f5; }
  .booking-mobile-tabs a b { font-size: 9px; font-weight: 500; }
  .booking-member .booking-update, .booking-member .service-selection-footer { bottom: calc(94px + env(safe-area-inset-bottom,0px)); }
}
@media (max-width: 700px) {
  .booking-header { min-height: 73px; padding: calc(12px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px)); }
  .booking-brand-image { width: 132px; }
  .booking-account-link { font-size: 10px; padding: 10px 13px; }
  .booking-account-zone .booking-account-name:only-child { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; min-height: 44px; padding: 10px 13px; }
  .booking-main { padding: 20px max(20px,env(safe-area-inset-right,0px)) 24px max(20px,env(safe-area-inset-left,0px)); }
  .booking-hero { padding: 9px 0 18px; margin-bottom: 18px; border-bottom: 0; }
  .booking-hero h1 { font-size: 34px; letter-spacing: -1.2px; margin: 13px 0 12px; }
  .booking-hero h1 br { display: block; }
  .booking-hero h1 em::before { content: none; }
  .booking-hero p { font-size: 12px; max-width: 310px; line-height: 1.65; }
  .booking-flow { padding: 0; }
  .booking-progress { gap: 6px; margin-bottom: 26px; }
  .booking-progress span { height: 36px; font-size: 11px; }
  .booking-progress span strong { display: none; }
  .booking-progress span.done { font-size: 0; }
  .booking-step-head h2 { font-size: 25px; }
  .branch-booking-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: #53545c transparent; }
  .branch-booking-shell { scroll-snap-align: start; height: auto; }
  .branch-booking-shell .branch-booking-card { min-height: 190px; }
  .branch-public-info { padding: 15px 8px 9px; gap: 13px; }
  .branch-public-row strong { font-size: 12px; }
  .branch-hours span { font-size: 11px; }
  .branch-reserve { min-height: 47px; }
  .service-booking-card { min-height: 86px; padding: 13px; gap: 10px; }
  .booking-date-strip { gap: 5px; margin-top: 17px; }
  .booking-day { border-radius: 12px; min-height: 69px; gap: 5px; }
  .booking-day strong { font-size: 17px; }
  .booking-day span { font-size: 8px; }
  .slot-booking-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .booking-summary > div { padding: 14px; gap: 13px; }
  .booking-modal { place-items: end center; }
  .booking-modal-card { border-radius: 28px 28px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom,0px)); }
  .member-hero { align-items: flex-start; gap: 14px; }
  .member-hero h1 { font-size: 32px; }
  .member-hero .booking-primary { font-size: 10px; min-height: 44px; padding-inline: 17px; }
  .member-welcome-note { font-size: 12px; }
  .member-stats { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .member-stats article { min-height: 77px; padding: 12px 8px; border-radius: 14px; }
  .member-stats strong { font-size: 22px; }
  .member-stats span { font-size: 8px; letter-spacing: 0; }
  .member-section { padding: 17px; }
  .member-section-head h2 { font-size: 23px; }
  .member-section-head a { font-size: 11px; }
  .member-next-card { grid-template-columns: 48px minmax(0,1fr); padding: 12px; gap: 10px; }
  .member-next-card > strong { grid-column: 2; font-size: 12px; }
  .member-next-date { width: 48px; height: 56px; }
  .customer-code-card { grid-template-columns: minmax(0,1fr); padding: 16px; }
  .customer-code-barcode { margin-inline: auto; width: 248px; }
  .customer-code-copy { text-align: left; }
  .customer-code-refresh { max-width: 100px; text-align: right; }
  .appointment-account-card { grid-template-columns: 48px minmax(0,1fr); padding: 14px; }
  .appointment-account-date { width: 48px; }
  .recommendation-actions { grid-template-columns: 1fr 1fr; }
  .notice-hub-hero { gap: 18px; }
  .notice-hub-hero-copy h1 { font-size: 36px; }
  .notice-hub-summary { width: 100%; flex-direction: row; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 18px; }
  .notice-hub-summary strong { font-size: 28px; }
  .notice-hub-summary span { font-size: 9px; }
  .booking-footer { padding-inline: 20px; }
}
@media (max-width: 360px) {
  .booking-main { padding-inline: 16px; }
  .booking-hero h1 { font-size: 31px; }
  .booking-brand-image { width: 118px; }
  .booking-header { padding-inline: 16px; }
  .member-stats span { font-size: 7px; }
  .service-selection-footer { padding: 13px; gap: 8px; }
  .service-selection-footer .booking-primary { min-width: 105px; }
  .booking-pagination { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* V63: portal libre con tres pestañas; formularios de cuenta conservados. */
.booking-public .booking-mobile-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.booking-public .booking-mobile-tabs a:nth-child(3) span{width:auto;height:auto;margin-top:0;background:transparent;box-shadow:none;border-radius:0;color:inherit}
.booking-public .booking-mobile-tabs a:nth-child(3) b{color:inherit}
.booking-guest-form{display:grid;gap:14px;margin:20px 0;padding:20px;border:1px solid #47423a;border-radius:18px;background:#202124}
.booking-guest-form h3{margin:0;color:#f5f5f5}
.booking-guest-form label{display:grid;gap:7px;font-size:13px;color:#dedede;text-align:left}
.booking-guest-form input,.booking-guest-form textarea{box-sizing:border-box;width:100%;padding:12px;border:1px solid #555;border-radius:10px;background:#161719;color:#fff;font:inherit}
.booking-guest-form input:focus,.booking-guest-form textarea:focus{outline:2px solid #d7ae61;outline-offset:2px}
.booking-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.booking-cancellation-note{margin:16px 0;padding:14px;border-left:3px solid #d7ae61;color:#ddd;font-size:13px;line-height:1.6}
.booking-admin-access{max-width:520px;margin:30px auto;padding:24px}

/* V64.1: navegación pública inferior uniforme en celular y tablet.
   Se conservan los estilos antiguos; estos selectores anulan sus !important
   del botón central y dejan las tres pestañas en una misma fila. */
@media (max-width: 980px) {
  body.booking-public {
    --booking-bottom-space: calc(68px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--booking-bottom-space);
  }
  .booking-public .booking-member-nav { display: none; }
  .booking-public .booking-mobile-tabs {
    position: fixed;
    inset: auto 0 0;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px max(12px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid #36373d !important;
    border-radius: 0 !important;
    background: #191a1df5 !important;
    box-shadow: 0 -5px 24px #0003 !important;
  }
  .booking-public .booking-mobile-tabs a {
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 4px;
    text-decoration: none;
    line-height: 1.2;
    color: #b4b5bd !important;
    background: transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .booking-public .booking-mobile-tabs a.active {
    color: #fff !important;
    background: #ffffff0d !important;
  }
  .booking-public .booking-mobile-tabs a span,
  .booking-public .booking-mobile-tabs a:nth-child(3) span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }
  .booking-public .booking-mobile-tabs .booking-icon { display: block; width: 22px; height: 22px; flex-shrink: 0; }
  .booking-public .booking-mobile-tabs a b { font-size: 11px; font-weight: 550; color: inherit !important; }
  .booking-public .booking-update,
  .booking-public .service-selection-footer,
  .booking-public .booking-toast { bottom: calc(var(--booking-bottom-space) + 12px); }

  /* El formulario de invitado heredaba 13 px de su etiqueta. Los campos
     móviles conservan 16 px también al enfocarse, sin restringir el zoom manual. */
  .booking-public input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .booking-public select,
  .booking-public textarea {
    font-size: 16px !important;
    line-height: 1.4;
  }

  /* El espacio reservado permanece para que la página no salte al escribir.
     Sólo se ocultan controles flotantes mientras el teclado ocupa la pantalla. */
  .booking-public.booking-keyboard-open .booking-mobile-tabs,
  .booking-public.booking-keyboard-open .service-selection-footer,
  .booking-public.booking-keyboard-open .booking-update { display: none !important; }
  .booking-public.booking-keyboard-open .booking-toast { bottom: 12px; }
}
@media (min-width: 981px) {
  .booking-public .booking-mobile-tabs { display: none; }
}