/* Metoca — experiencia del cliente. Cargar después de los estilos existentes. */
#app {
  /* Consume the existing tenant palette and preset tokens. */
  --ux-bg: var(--t-bg-deep, var(--surface, #f8fafc));
  --ux-text: var(--t-text, var(--ux-auto-text, var(--on-surface, #191c1c)));
  --ux-heading: var(--t-text-head, var(--ux-text));
  --ux-card: var(--t-card, color-mix(in srgb, var(--ux-bg) 95%, var(--ux-text)));
  --ux-field: var(--t-card-hi, color-mix(in srgb, var(--ux-bg) 91%, var(--ux-text)));
  --ux-muted: var(--t-text-soft, color-mix(in srgb, var(--ux-text) 78%, var(--ux-bg)));
  --ux-border: var(--t-border, color-mix(in srgb, var(--ux-text) 22%, var(--ux-bg)));
  --ux-accent: var(--t-accent, var(--primary, #004555));
  --ux-selected: var(--t-accent, var(--selected-color, var(--ux-accent)));
  --ux-on-accent: var(--t-text-btn, var(--ux-auto-on-accent, #ffffff));
  --ux-on-selected: var(--t-text-btn, var(--ux-auto-on-selected, #ffffff));
  --ux-header-bg: var(--header-bg, var(--ux-bg));
  --ux-tabbar-bg: var(--tabbar-bg, var(--ux-bg));
  --ux-header-text: var(--t-text-head, var(--ux-auto-header-text, var(--ux-text)));
  --ux-tabbar-text: var(--t-text, var(--ux-auto-tabbar-text, var(--ux-text)));
  --ux-tertiary: var(--t-card-hi, var(--tertiary, var(--ux-field)));
  --ux-on-tertiary: var(--t-text, var(--ux-auto-on-tertiary, var(--ux-text)));
  --ux-soft: color-mix(in srgb, var(--ux-accent) 10%, transparent);
  --ux-radius: var(--t-radius, 20px);
}
/* The selected preset and custom surface also control the page edges. */
html:has(#app.customer-ui), body:has(#app.customer-ui) { background:var(--t-bg-deep, var(--surface, #f8fafc)) !important; }
#app.customer-ui { background:var(--ux-bg); background-image:var(--ux-backdrop, none); color:var(--ux-text); min-height:100svh; overflow-x:clip; position:relative; z-index:1; }
html[data-theme]:not([data-theme="light"]) #app.customer-ui {
  --ux-backdrop:radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--ux-accent) var(--cfg-glow, 20%), transparent), transparent 62%), linear-gradient(180deg, var(--t-bg) 0%, var(--ux-bg) 70%);
}
.customer-ui *, .ux-booking * { -webkit-user-select:auto; user-select:auto; -webkit-touch-callout:default; box-sizing:border-box; }
.customer-ui :is(button,a,input,select,textarea,summary):focus-visible,
.ux-booking :is(button,a,input,select,textarea,summary):focus-visible {
  outline:3px solid var(--ux-accent); outline-offset:4px;
}
.customer-ui button, .ux-booking button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.customer-ui button:disabled, .ux-booking button:disabled { cursor:not-allowed; opacity:.5; }
#app.customer-ui .app-header { background:var(--ux-header-bg) !important; color:var(--ux-header-text); border-bottom:1px solid var(--ux-border); box-shadow:none; padding:calc(12px + env(safe-area-inset-top)) 20px 12px !important; }
#app.customer-ui .ux-header-row { max-width:1160px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
#app.customer-ui .app-header h1 { color:var(--ux-header-text) !important; font-size:clamp(1.05rem,4.6vw,1.4rem); line-height:1.25; margin:0; }
.customer-ui .app-header .ux-brand { display:flex; align-items:center; min-width:0; gap:12px; max-width:calc(100% - 92px); background:none; border:0; text-align:left; }
.customer-ui .app-header .ux-brand-title { min-width:0; overflow-wrap:anywhere; }
.customer-ui .ux-brand .ux-brand-image { width:42px; height:42px; border-radius:13px; flex-shrink:0; overflow:hidden; }
.customer-ui .ux-brand-image img { width:100%; height:100%; object-fit:cover; }
.customer-ui .ux-brand-image.ux-brand-fallback { background:color-mix(in srgb, var(--ux-header-text) 10%, transparent); display:grid; place-items:center; color:var(--ux-header-text); font-size:1.2rem; font-weight:800; }
.customer-ui .app-header .ux-header-info { display:inline-flex; align-items:center; gap:6px; min-height:44px; background:color-mix(in srgb, var(--ux-header-text) 8%, transparent); border:1px solid color-mix(in srgb, var(--ux-header-text) 30%, transparent); border-radius:12px; color:var(--ux-header-text); padding:8px 10px; font-size:.875rem; }
.customer-ui .app-header .ux-header-info span { color:inherit; }
.customer-ui main { padding-top:calc(5.125rem + env(safe-area-inset-top)) !important; padding-bottom:calc(7rem + env(safe-area-inset-bottom)) !important; min-height:100svh; }
.customer-ui .dt-tabs { background:var(--ux-bg); border-color:var(--ux-border); }
#app.customer-ui .dt-tab { font-size:1rem; color:var(--ux-muted) !important; background:none; border-top:0; border-left:0; border-right:0; }
#app.customer-ui .dt-tab.active { color:var(--ux-heading) !important; border-bottom-color:var(--ux-selected) !important; }
#app.customer-ui .tab-bar { height:calc(4.75rem + env(safe-area-inset-bottom)); min-height:0; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:var(--ux-tabbar-bg) !important; border-top:1px solid var(--ux-border); box-shadow:0 -6px 28px #0000000d; gap:2px; }
#app.customer-ui .tab-item { min-width:0; min-height:56px; padding:4px 2px; gap:4px; border:0; background:transparent; border-radius:12px; color:var(--ux-tabbar-text); opacity:1; }
.customer-ui .tab-item .tab-label { font-size:.75rem; text-transform:none; letter-spacing:0; opacity:1; font-weight:600; overflow-wrap:anywhere; line-height:1.2; }
.customer-ui .tab-item .material-symbols-outlined { font-size:24px; }
#app.customer-ui .tab-item.active { color:var(--ux-on-selected); background:var(--ux-selected); }
.customer-ui .tab-item.active .material-symbols-outlined { transform:none; filter:none; }
.customer-ui .tab-item::after { display:none; }
#app.customer-ui .tab-item.ux-reserve-tab { flex:1.16; background:transparent; color:var(--ux-tabbar-text); border:1px solid var(--ux-border); border-radius:16px; }
#app.customer-ui .tab-item.ux-reserve-tab.active { background:var(--ux-accent); color:var(--ux-on-accent); border-color:var(--ux-accent); }
.ux-booking { max-width:1160px; margin:0 auto; padding:0 20px 24px; color:var(--ux-text); font-size:1rem; line-height:1.5; }
.ux-booking h2, .ux-booking h3, .ux-page h2, .ux-page h3 { color:var(--ux-heading); letter-spacing:-.025em; line-height:1.25; }
.ux-booking h2, .ux-page h2 { font-family:var(--t-font, var(--t-font-display, inherit)); }
.ux-booking h2, .ux-page h2 { font-size:clamp(1.65rem,5.3vw,2.15rem); font-weight:750; }
.ux-booking h3, .ux-page h3 { font-size:1.125rem; font-weight:700; }
.ux-booking p { margin:0; }
.ux-muted { color:var(--ux-muted); }
.ux-hero { position:relative; height:190px; border-radius:22px; overflow:hidden; background:var(--ux-card); margin:4px 0 24px; }
.ux-hero .hero-carousel { position:absolute; inset:0; height:100%; aspect-ratio:auto !important; max-height:none; }
.ux-hero .hero-slide { object-position:center; }
.ux-hero .hero-carousel-dots { bottom:10px; padding:2px 8px; border-radius:16px; background:#0008; gap:0; }
.ux-hero .hero-carousel-dots button { width:28px; height:28px; border-radius:0; background:radial-gradient(circle,#ffffff80 3px,transparent 4px); transition:none; }
.ux-hero .hero-carousel-dots button.active { width:28px; background:radial-gradient(circle,#fff 4px,transparent 5px); }
.ux-intro { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; }
.ux-intro h2 { margin:0 0 8px; }
.ux-intro p { font-size:1rem; color:var(--ux-muted); }
.ux-trust { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin:14px 0 24px; color:var(--ux-muted); font-size:.875rem; }
.ux-trust button { display:inline-flex; gap:7px; align-items:center; background:none; border:0; color:var(--ux-text); padding:0; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.ux-trust .material-symbols-outlined { color:var(--ux-accent); font-size:20px; font-variation-settings:'FILL' 1; }
.ux-layout { display:grid; gap:28px; align-items:start; }
.ux-flow { min-width:0; }
.ux-step-head { margin-bottom:24px; }
.ux-step-head .ux-text-button { margin-bottom:16px; }
.ux-progress { list-style:none; display:flex; gap:6px; padding:0; margin:12px 0 8px; }
.ux-progress li { height:5px; flex:1; border-radius:10px; background:var(--ux-border); }
.ux-progress li.is-complete { background:var(--ux-selected); }
.ux-step-caption { color:var(--ux-muted); font-size:.875rem; display:flex; justify-content:space-between; gap:16px; }
.ux-step-title { margin:24px 0 6px; }
.ux-category { margin-bottom:28px; }
.ux-category-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:20px 0 12px; }
.ux-category-head h3 { margin:0; font-size:1rem; }
.ux-category-head span { color:var(--ux-muted); font-size:.875rem; }
.ux-services { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.ux-service { padding:16px; border-radius:var(--ux-radius); border:1px solid var(--ux-border); background:var(--ux-card); position:relative; transition:border-color .15s,background .15s; }
.ux-service.is-selected { border-color:var(--ux-selected); box-shadow:inset 0 0 0 1px var(--ux-selected); }
.ux-service-main { display:flex; gap:14px; align-items:flex-start; }
.ux-service-photo { width:80px; height:96px; border-radius:13px; object-fit:cover; flex-shrink:0; background:var(--ux-field); }
.ux-service-content { flex:1; min-width:0; }
.ux-service-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ux-service h3 { font-size:1rem; margin:0; overflow-wrap:anywhere; }
.ux-service-price { color:var(--ux-accent); font-size:1.1rem; line-height:1.25; white-space:nowrap; }
.ux-service-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; color:var(--ux-muted); font-size:.875rem; margin:8px 0 !important; }
.ux-service-meta strong { color:var(--ux-heading); font-size:1.05rem; font-weight:750; }
.ux-service-actions { display:flex; justify-content:flex-end; margin-top:12px; }
.ux-service details { margin-top:12px; padding-top:10px; border-top:1px solid var(--ux-border); }
.ux-service summary { color:var(--ux-muted); min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; font-size:.8125rem; padding:4px 0; list-style:none; }
.ux-service summary::-webkit-details-marker { display:none; }
.ux-service summary .material-symbols-outlined { font-size:16px; }
.ux-service details p { margin-top:8px; color:var(--ux-muted); font-size:.9375rem; }
.ux-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:48px; border:1px solid transparent; padding:12px 20px; border-radius:14px; background:var(--ux-accent); color:var(--ux-on-accent); font-size:1rem; font-weight:700 !important; line-height:1.3; text-decoration:none; text-align:center; }
.ux-button--small { min-height:44px; padding:10px 18px; font-size:.875rem; }
.ux-button--secondary { background:var(--ux-field); border-color:var(--ux-border); color:var(--ux-text); }
.ux-button--block { width:100%; }
.ux-text-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:6px 2px; color:var(--ux-muted); background:none; border:0; font-size:.875rem; text-underline-offset:4px; }
.ux-text-button:hover { color:var(--ux-text); text-decoration:underline; }
.ux-notice { padding:16px; border-radius:14px; border:1px solid var(--ux-border); background:var(--ux-tertiary); margin:16px 0; font-size:.9375rem; color:var(--ux-on-tertiary); }
.ux-notice--error { background:#fff1f2; color:#9f1239; border-color:#fda4af; }
html[data-theme^="noir-"] .ux-notice--error { background:#3b1523; color:#ffcedc; border-color:#9f4562; }
.ux-empty { text-align:center; padding:32px 18px; background:var(--ux-card); border:1px solid var(--ux-border); border-radius:var(--ux-radius); color:var(--ux-muted); }
.ux-empty .material-symbols-outlined { font-size:32px; display:block; margin-bottom:10px; }
.ux-empty h3 { margin:0 0 8px; }
.ux-choice-grid { display:grid; gap:12px; }
.ux-choice { display:flex; align-items:center; gap:14px; text-align:left; width:100%; min-height:90px; padding:16px; border:1px solid var(--ux-border); border-radius:18px; background:var(--ux-card); color:var(--ux-text); }
.ux-choice[aria-pressed="true"] { border-color:var(--ux-selected); background:var(--ux-soft); }
.ux-choice img, .ux-choice-avatar { width:52px; height:52px; border-radius:50%; flex-shrink:0; object-fit:cover; background:var(--ux-field); display:grid; place-items:center; }
.ux-choice-text { flex:1; min-width:0; }
.ux-choice strong { display:block; font-size:1rem; margin-bottom:4px; }
.ux-choice small { display:block; color:var(--ux-muted); font-size:.875rem; }
.ux-panel { border:1px solid var(--ux-border); border-radius:var(--ux-radius); background:var(--ux-card); padding:20px; margin:18px 0; }
.ux-field { display:block; margin-bottom:20px; min-width:0; }
.ux-field label { display:block; color:var(--ux-text); font-size:.9375rem; font-weight:650; margin-bottom:8px; }
.ux-input { display:block; width:100%; min-width:0; min-height:50px; background:var(--ux-field); color:var(--ux-text); border:1px solid var(--ux-border); border-radius:12px; padding:12px 14px; font:inherit; font-size:1rem; line-height:1.5; color-scheme:var(--ux-color-scheme, light); }
.ux-input::placeholder { color:var(--ux-muted); opacity:.9; }
.ux-phone { display:grid; grid-template-columns:100px minmax(0,1fr); gap:8px; }
.ux-field-help { color:var(--ux-muted); font-size:.875rem; margin:8px 0 0 !important; }
.ux-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.ux-slot { min-height:48px; padding:10px 4px; border:1px solid var(--ux-border); border-radius:12px; background:var(--ux-card); color:var(--ux-text); font-size:1rem; font-weight:650 !important; }
.ux-slot[aria-pressed="true"] { background:var(--ux-selected); color:var(--ux-on-selected); border-color:var(--ux-selected); }
.ux-slot small { display:block; color:inherit; font-size:.75rem; }
.ux-step-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0; }
.ux-step-actions .ux-button { flex:1; max-width:320px; }
.ux-verification { padding:24px; text-align:center; }
.ux-verification input[type="range"] { display:block; width:100%; min-height:52px; accent-color:var(--ux-accent); cursor:ew-resize; margin:16px 0; }
.ux-verification label { font-weight:650; }
.ux-summary { background:var(--ux-card); border:1px solid var(--ux-border); border-radius:var(--ux-radius); padding:20px; }
.ux-summary h3 { margin:0 0 18px; }
.ux-summary-row { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:12px 0; border-bottom:1px solid var(--ux-border); font-size:.9375rem; }
.ux-summary-row span:first-child { color:var(--ux-muted); }
.ux-summary-row span:last-child { text-align:right; overflow-wrap:anywhere; }
.ux-summary-row:last-of-type { border-bottom:0; }
.ux-summary-total { display:flex; justify-content:space-between; gap:16px; padding-top:18px; font-weight:750; font-size:1.25rem; }
.ux-cart { display:none; }
.ux-cart .ux-summary { position:sticky; top:154px; }
.ux-cart .ux-text-button { min-width:36px; padding:0; }
.ux-cart .ux-button { margin-top:20px; }
.ux-success { text-align:center; max-width:600px; margin:32px auto; }
.ux-success-icon { width:72px; height:72px; display:grid; place-items:center; border-radius:50%; color:var(--ux-accent); background:var(--ux-soft); margin:0 auto 20px; }
.ux-success-icon span { font-size:38px; }
.ux-success .ux-summary { text-align:left; margin:24px 0; }
.ux-success .ux-button { margin:8px 0; }
.customer-ui .cart-fab { bottom:calc(88px + env(safe-area-inset-bottom)); height:auto; min-height:56px; border-radius:16px; padding:12px 16px; background:var(--ux-accent); color:var(--ux-on-accent); }
.customer-ui .cart-fab-price { background:none; color:inherit; padding:0; font-size:1rem; }
.customer-ui .cart-fab-label { font-size:1rem; font-weight:700; }
.customer-ui .cart-fab-badge { color:inherit; background:#0002; font-size:.875rem; }
.ux-cart-spacer { height:76px; }
.ux-page { max-width:1100px; margin:0 auto; padding:20px; color:var(--ux-text); font-size:1rem; line-height:1.5; }
.ux-page-header { margin:0 0 24px; }
.ux-page-header h2 { margin:0 0 8px; }
.ux-rating { display:flex; gap:20px; align-items:center; padding:24px; background:var(--ux-card); border:1px solid var(--ux-border); border-radius:var(--ux-radius); margin-bottom:16px; }
.ux-rating-number { font-size:3.3rem; letter-spacing:-.05em; line-height:1; font-weight:750; color:var(--ux-heading); }
.ux-stars { color:var(--t-accent-2, var(--ux-accent)); display:flex; gap:2px; }
.ux-stars .material-symbols-outlined { font-size:20px; }
.ux-review-grid { display:grid; gap:14px; margin-top:24px; }
.ux-review { padding:20px; border-radius:var(--ux-radius); background:var(--ux-card); border:1px solid var(--ux-border); }
.ux-review-header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; }
.ux-review-header strong { display:block; font-size:1rem; }
.ux-review-header time { color:var(--ux-muted); font-size:.8125rem; text-align:right; }
.ux-review p { color:var(--ux-text); font-size:1rem; line-height:1.6; overflow-wrap:anywhere; }
.ux-review-image { max-width:100%; max-height:240px; object-fit:cover; border-radius:12px; margin-top:16px; }
.ux-stars-input { display:flex; gap:6px; }
.ux-stars-input button { display:grid; place-items:center; width:44px; height:44px; background:var(--ux-field); border:1px solid var(--ux-border); border-radius:10px; color:var(--ux-muted); }
.ux-stars-input button[aria-pressed="true"] { color:var(--ux-selected); }
.ux-stars-input button .material-symbols-outlined { font-size:26px; }
.customer-ui .gallery-page-container { background:var(--ux-bg); min-height:0; padding-bottom:24px; }
.customer-ui .gallery-grid-simple { padding:0 20px !important; gap:12px !important; }
.customer-ui .gallery-grid-item { border:0; border-radius:16px !important; padding:0; background:var(--ux-card); }
.customer-ui .gallery-grid-item img { object-fit:cover; }
.customer-ui .gallery-page-container .ux-page-header { padding:20px; margin:0; }
.customer-ui .det-root { --ios-bg:var(--ux-bg); --ios-card:var(--ux-card); --ios-text:var(--ux-heading); --ios-label:var(--ux-muted); --ios-separator:var(--ux-border); border-radius:0; margin-bottom:0; padding-bottom:32px; }
.customer-ui .det-root [style*="font-size:11px"], .customer-ui .det-root [style*="font-size:12px"], .customer-ui .det-root [style*="font-size: 11px"], .customer-ui .det-root [style*="font-size: 12px"] { font-size:.875rem !important; line-height:1.5; }
.customer-ui .det-root [style*="font-size:14px"] { font-size:1rem !important; }
.customer-ui .ux-lookup { margin-top:16px; padding-bottom:32px; max-width:500px; }
.customer-ui .ux-lookup .text-center.mb-10 { margin-bottom:24px; }
.customer-ui .ux-lookup .text-center.mb-10 > div { width:56px; height:56px; margin-bottom:16px; border-radius:16px; }
.customer-ui .ux-lookup h2 { color:var(--ux-text); font-size:1.8rem; }
#app.customer-ui .ux-lookup p, #app.customer-ui .ux-lookup label { color:var(--ux-muted) !important; font-size:.9375rem !important; text-transform:none; letter-spacing:0; line-height:1.5; }
.customer-ui .ux-lookup input { background:var(--ux-card) !important; color:var(--ux-text) !important; border:1px solid var(--ux-border); border-radius:12px; font-size:1rem; box-shadow:none; }
.customer-ui .ux-lookup label { display:block; margin:0 0 8px; }
.customer-ui .ux-lookup button { text-transform:none; letter-spacing:0; font-size:.9375rem; border-radius:14px; }
.customer-ui .ux-lookup button.bg-primary { color:var(--ux-on-accent); padding:14px 20px; }
.customer-ui .ux-lookup .mt-20 { margin-top:32px; border-color:var(--ux-border); }
.customer-ui .ux-lookup .text-slate-400 { color:var(--ux-muted); }
.customer-ui .ux-brand { text-decoration:none; }
.ux-history-grid { display:grid; gap:14px; }
.ux-appointment { padding:20px; border:1px solid var(--ux-border); border-radius:var(--ux-radius); background:var(--ux-card); }
.ux-appointment h3 { margin:16px 0 10px; }
.ux-appointment p { margin:6px 0; color:var(--ux-muted); }
.ux-appointment-top { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.ux-status { display:inline-flex; gap:6px; align-items:center; padding:5px 10px; border-radius:20px; background:var(--ux-field); color:var(--ux-text); border:1px solid var(--ux-border); font-size:.8125rem; }
.ux-status--confirmed { background:#e3f8ef; color:#146645; border-color:#b2e5d0; }
.ux-status--cancelled { background:#fff1f2; color:#9f1239; border-color:#fecdd3; }
.ux-history-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:20px 0; }
.ux-history-filters .ux-field { flex:1; margin:0; min-width:140px; }
.customer-ui .lb-overlay { background:#100d14f5; }
.customer-ui .lb-counter { color:#ddd4e2; font-size:1rem; }
.ux-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:10003; width:48px; height:48px; border:1px solid #ffffff50; border-radius:50%; background:#18121dcc; color:white; display:grid; place-items:center; }
.ux-lightbox-nav--prev { left:12px; }
.ux-lightbox-nav--next { right:12px; }
.customer-ui .lb-btn-close { top:calc(16px + env(safe-area-inset-top)); }
.ux-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:600px) {
  .ux-hero { height:260px; }
  .ux-services { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ux-choice-grid, .ux-review-grid, .ux-history-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ux-slots { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(min-width:1024px) {
  .customer-ui .dt-tabs { position:fixed; top:calc(68px + env(safe-area-inset-top)); left:0; right:0; max-width:none; padding:0 max(32px,calc((100vw - 1120px)/2)); z-index:990; }
  .customer-ui main { padding-top:calc(142px + env(safe-area-inset-top)) !important; }
  .ux-booking { padding:0 32px 40px; }
  .ux-hero { height:280px; }
  .ux-layout--wizard { grid-template-columns:minmax(0,1fr) 310px; }
  .ux-cart { display:block; align-self:stretch; }
  .ux-layout--wizard .ux-services, .ux-layout--wizard .ux-choice-grid { grid-template-columns:1fr; }
  .ux-service { padding:20px; }
  .ux-service-photo { width:96px; height:100px; }
  .ux-service h3 { font-size:1.125rem; }
  .ux-cart-spacer { display:none; }
  .customer-ui .gallery-grid-simple { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media(max-width:359px) {
  .ux-booking,.ux-page { padding-left:14px; padding-right:14px; }
  .ux-service { padding:12px; }
  .ux-service-photo { width:62px; height:76px; }
  .ux-service-main { gap:10px; }
  .ux-phone { grid-template-columns:88px minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  .customer-ui *, .ux-booking * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@supports not (background:color-mix(in srgb, red 50%, blue)) {
  #app {
    --ux-card:var(--t-card, rgba(128,128,128,.08));
    --ux-field:var(--t-card-hi, rgba(128,128,128,.12));
    --ux-muted:var(--t-text-soft, var(--ux-text));
    --ux-border:var(--t-border, rgba(128,128,128,.3));
    --ux-soft:rgba(var(--primary-rgb,0,69,85),.1);
  }
  .customer-ui .ux-brand-image.ux-brand-fallback,
  .customer-ui .app-header .ux-header-info { background:transparent; border-color:currentColor; }
  html[data-theme]:not([data-theme="light"]) #app.customer-ui { --ux-backdrop:linear-gradient(180deg, var(--t-bg), var(--ux-bg)); }
}

/* UI 3: reserva compacta y navegación lateral. */
#app.customer-ui .app-header { padding:calc(8px + env(safe-area-inset-top)) 12px 8px !important; }
#app.customer-ui .ux-header-row { max-width:560px; position:relative; justify-content:center; min-height:44px; }
.customer-ui .ux-header-row > .ux-menu-toggle { position:absolute; left:0; }
.customer-ui .ux-menu-toggle { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:inherit; flex-shrink:0; }
.customer-ui .app-header .ux-brand { gap:8px; max-width:calc(100% - 96px); }
.customer-ui .ux-brand .ux-brand-image { width:34px; height:34px; border-radius:50%; }
#app.customer-ui .app-header h1 { font-family:var(--t-font-display, Georgia, serif); font-size:21px; }
#app.customer-ui main { padding-top:calc(78px + env(safe-area-inset-top)) !important; padding-bottom:calc(100px + env(safe-area-inset-bottom)) !important; }
#app.customer-ui .dt-tabs { display:none; }
.customer-ui .qb-wrap { padding:0 14px 24px; }
.customer-ui .qb-wrap > h2 { font-family:var(--t-font-display, Georgia, serif); color:var(--ux-heading); }
.customer-ui .qb-wrap > p { color:var(--ux-muted); opacity:1 !important; }
.customer-ui .qb-wrap .ux-trust { font-size:11px; gap:6px 10px; margin:10px 0 18px; }
.customer-ui .qb-wrap .ux-trust button { min-height:32px; gap:3px; text-decoration:none; }
.customer-ui .qb-wrap .ux-trust .material-symbols-outlined { font-size:16px; }
.customer-ui .qb-step { margin-top:20px; }
.customer-ui .qb-step-title { font-size:15px; gap:4px; margin-bottom:10px; }
.customer-ui .qb-step-num { color:inherit; }
.customer-ui .qb-cat { color:var(--ux-text); opacity:1; font-size:13px; margin:8px 0; }
.customer-ui .qb-services { display:flex; overflow-x:auto; gap:8px; padding:2px 1px 8px; scroll-snap-type:x proximity; }
.customer-ui .qb-service { flex:0 0 142px; padding:8px; border:1px solid var(--ux-border); border-radius:9px; background:var(--ux-card); color:var(--ux-text); scroll-snap-align:start; }
.customer-ui .qb-service img { width:52px; height:52px; border-radius:7px; margin-bottom:6px; object-fit:cover; }
.customer-ui .qb-service-body { display:flex; flex-direction:column; gap:6px; padding:2px 22px 2px 2px; min-height:54px; }
.customer-ui .qb-service-name { display:block; font-size:12px; line-height:1.3; }
.customer-ui .qb-service-meta { display:block; font-size:13px; font-weight:700; line-height:1.4; opacity:1; color:var(--ux-text); margin-top:auto; }
.customer-ui .qb-check { width:18px; height:18px; border:1px solid var(--ux-border); background:transparent; }
.customer-ui .qb-check span { font-size:13px; }
.customer-ui .qb-service.is-on { border-color:var(--ux-selected); box-shadow:inset 0 0 0 1px var(--ux-selected); background:color-mix(in srgb,var(--ux-selected) 12%,var(--ux-card)); }
.customer-ui .qb-service.is-on .qb-check { background:var(--ux-selected); border-color:var(--ux-selected); }
.customer-ui .qb-day { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:56px; padding:6px 0; border:1px solid var(--ux-border); border-radius:9px; background:var(--ux-card); color:var(--ux-text); }
.customer-ui .qb-arrow { width:24px; min-height:44px; background:transparent; color:var(--ux-muted); }
.customer-ui .qb-day.is-on, .customer-ui .qb-slot.is-on { background:var(--ux-selected); border-color:var(--ux-selected); color:var(--ux-on-selected); }
.customer-ui .qb-slot { min-height:44px; padding:8px 4px; border:1px solid var(--ux-border); border-radius:8px; background:var(--ux-card); color:var(--ux-text); font-size:12px; }
.customer-ui .qb-bar { background:var(--ux-header-bg); border-color:var(--ux-border); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); z-index:45; }
.customer-ui .qb-cta { min-height:44px; padding:11px; border-radius:9px; background:var(--ux-accent); color:var(--ux-on-accent); font-size:15px; }
.customer-ui .qb-summary { opacity:1; color:var(--ux-muted); font-size:12px; }
.customer-ui .qb-modal { background:var(--ux-bg); color:var(--ux-text); }
.customer-ui .ux-drawer { position:fixed; inset:0 auto 0 0; margin:0; padding:0; width:min(82vw,320px); max-width:none; height:100dvh; max-height:none; border:0; border-right:1px solid var(--ux-border); background:var(--ux-bg); color:var(--ux-text); box-shadow:12px 0 50px #0005; }
.customer-ui .ux-drawer::backdrop { background:#0008; }
.customer-ui .ux-drawer-content { display:flex; flex-direction:column; min-height:100%; padding:calc(20px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(150deg,var(--ux-soft),transparent 70%); }
.customer-ui .ux-drawer-head { display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--ux-border); margin-bottom:10px; }
.customer-ui .ux-drawer-head img { width:76px; height:76px; border-radius:50%; object-fit:cover; }
.customer-ui .ux-drawer nav button, .customer-ui .ux-drawer-footer button { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:10px 4px; background:transparent; border:0; color:inherit; text-align:left; font-size:15px; }
.customer-ui .ux-drawer nav button:hover { background:var(--ux-soft); border-radius:8px; }
.customer-ui .ux-drawer-footer { margin-top:auto; padding-top:30px; }
.customer-ui .ux-drawer-footer > button:first-child { font-size:13px; }
.customer-ui .ux-drawer-footer .ux-drawer-close { justify-content:center; border:1px solid var(--ux-border); border-radius:9px; background:var(--ux-card); margin-top:8px; }
@media (min-width:768px) { .customer-ui .qb-wrap { padding-top:16px; } .customer-ui .qb-service { flex-basis:162px; } }

/* Catálogo independiente: las fotografías permanecen en Servicios. */
.customer-ui .ux-service-catalog { max-width:1000px; margin:0 auto; padding:0 16px 24px; }
.customer-ui .ux-service-catalog h2 { font-family:var(--t-font-display, Georgia, serif); font-size:28px; margin:0 0 8px; }
.customer-ui .ux-catalog-category { margin-top:26px; }
.customer-ui .ux-catalog-category > h3 { font-size:17px; margin-bottom:12px; }
.customer-ui .ux-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.customer-ui .ux-catalog-card { overflow:hidden; border:1px solid var(--ux-border); border-radius:14px; background:var(--ux-card); display:flex; flex-direction:column; }
.customer-ui .ux-catalog-card > img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.customer-ui .ux-catalog-body { padding:12px; display:flex; flex-direction:column; gap:10px; flex:1; }
.customer-ui .ux-catalog-body h4 { margin:0; font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.customer-ui .ux-catalog-meta { display:flex; flex-wrap:wrap; gap:6px 10px; justify-content:space-between; margin:0; font-size:13px; }
.customer-ui .ux-catalog-meta span, .customer-ui .ux-catalog-description { color:var(--ux-muted); }
.customer-ui .ux-catalog-description { font-size:13px; line-height:1.5; margin:0; white-space:pre-line; overflow-wrap:anywhere; }
.customer-ui .ux-catalog-body > button { margin-top:auto; width:100%; padding:10px 8px; }
.customer-ui .ux-drawer nav button[aria-current="page"] { background:var(--ux-soft); border-radius:8px; font-weight:700; }
@media (min-width:768px) { .customer-ui .ux-catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:350px) { .customer-ui .ux-catalog-grid { grid-template-columns:1fr; } }

/* Reserva por categoría, servicios en filas y resumen persistente. */
.customer-ui .qb-categories { display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; }
.customer-ui .qb-categories button { flex:0 0 auto; min-height:40px; padding:7px 15px; border:1px solid var(--ux-border); border-radius:24px; background:transparent; color:var(--ux-muted); font-size:14px; }
.customer-ui .qb-categories button.is-on { background:var(--ux-selected); color:var(--ux-on-selected); border-color:var(--ux-selected); }
.customer-ui .qb-services--list { display:flex; flex-direction:column; overflow:visible; gap:9px; padding:2px 0; }
.customer-ui .qb-services--list .qb-service { display:flex; align-items:center; gap:10px; flex:0 0 auto; width:100%; min-height:68px; padding:12px 14px; border-radius:11px; }
.customer-ui .qb-services--list .qb-service-body { flex:1; min-width:0; min-height:0; padding:0; gap:3px; }
.customer-ui .qb-services--list .qb-service-name { font-size:15px; overflow-wrap:anywhere; }
.customer-ui .qb-service-duration { color:var(--ux-muted); font-size:12px; }
.customer-ui .qb-service-price { font-size:16px; white-space:nowrap; }
.customer-ui .qb-services--list .qb-check { position:static; flex-shrink:0; width:22px; height:22px; }
.customer-ui .qb-times-panel { margin-top:14px; padding:14px; background:var(--ux-card); border:1px solid var(--ux-border); border-radius:12px; }
.customer-ui .qb-times-title { margin:0 0 12px; font-size:14px; font-weight:400; }
.customer-ui .qb-times-panel .qb-slots { grid-template-columns:repeat(3,minmax(0,1fr)); }
.customer-ui .qb-times-panel .qb-slot.is-on { background:var(--ux-soft); color:var(--ux-text); box-shadow:inset 0 0 0 1px var(--ux-selected); }
.customer-ui .qb-bar-inner { display:flex; align-items:center; gap:12px; }
.customer-ui .qb-bar .qb-summary { display:flex; flex-direction:column; flex:1; min-width:0; gap:4px; margin:0; font-size:11px; }
.customer-ui .qb-bar .qb-summary strong { font-size:20px; color:var(--ux-text); }
.customer-ui .qb-bar .qb-cta { width:auto; flex:1; font-size:14px; }
.customer-ui .qb-wrap .ux-trust button, .customer-ui .qb-wrap .ux-trust-served { min-height:28px; border-radius:20px; background:var(--ux-card); padding:4px 8px; display:inline-flex; align-items:center; gap:4px; }
@media (max-width:350px) { .customer-ui .qb-times-panel { padding:10px; } .customer-ui .qb-bar-inner { gap:8px; } .customer-ui .qb-bar .qb-cta { font-size:12px; } }

/* Encabezado de reservas: tarjeta luminosa y estadísticas reales. */
.customer-ui .qb-welcome { position:relative; isolation:isolate; margin:2px 0 28px; padding:20px 15px 18px; text-align:center; border:1px solid color-mix(in srgb,var(--ux-text) 36%,transparent); border-radius:20px; background:radial-gradient(ellipse at 95% 0%,color-mix(in srgb,var(--ux-accent) 34%,transparent),transparent 62%),linear-gradient(145deg,color-mix(in srgb,var(--ux-accent) 14%,var(--ux-bg)),var(--ux-card)); box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ux-text) 24%,transparent),inset 0 0 22px color-mix(in srgb,var(--ux-accent) 9%,transparent),0 10px 28px #0002; }
.customer-ui .qb-welcome::before { content:""; position:absolute; pointer-events:none; right:5%; top:-1px; width:38%; height:2px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ux-accent) 30%,white),transparent); box-shadow:0 0 16px 2px color-mix(in srgb,var(--ux-accent) 65%,transparent); }
.customer-ui .qb-welcome-kicker { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:30px; border:1px solid var(--ux-border); background:color-mix(in srgb,var(--ux-accent) 13%,var(--ux-card)); color:var(--ux-text); text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.045em; }
.customer-ui .qb-welcome-kicker > span { color:#dca554; font-size:15px; }
.customer-ui .qb-welcome h2 { margin:16px 0 12px; font-family:var(--t-font-display,Georgia,serif); font-size:clamp(27px,7.5vw,40px); font-weight:800; line-height:1.06; letter-spacing:-.035em; color:var(--ux-heading); text-wrap:balance; }
.customer-ui .qb-welcome h2 > span { color:var(--ux-heading); background:linear-gradient(100deg,color-mix(in srgb,var(--ux-accent) 65%,var(--ux-text)),var(--ux-heading) 85%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.customer-ui .qb-welcome .qb-welcome-sparkle { color:#ebbc6b; -webkit-text-fill-color:#ebbc6b; font-size:.85em; }
.customer-ui .qb-welcome-subtitle { margin:0; font-size:12px; line-height:1.5; color:var(--ux-muted); }
.customer-ui .qb-welcome-stats { display:flex; gap:10px; margin-top:18px; }
.customer-ui .qb-welcome-stat { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:11px 7px; border-radius:13px; color:var(--ux-text); }
.customer-ui .qb-welcome-rating { border:1px solid #bd914e; background:linear-gradient(135deg,#c8923426,transparent),var(--ux-card); box-shadow:inset 0 0 12px #dcaa5520,0 0 10px #dcaa5510; }
.customer-ui .qb-welcome-served { border:1px solid var(--ux-accent); background:linear-gradient(135deg,var(--ux-soft),transparent),var(--ux-card); box-shadow:inset 0 0 12px var(--ux-soft); }
.customer-ui .qb-welcome-stat-value { display:flex; align-items:center; justify-content:center; gap:5px; line-height:1.2; }
.customer-ui .qb-welcome-stat-value strong { font-size:clamp(20px,5.6vw,28px); }
.customer-ui .qb-welcome-rating .qb-welcome-stat-value { color:color-mix(in srgb,#dca554 80%,var(--ux-text)); }
.customer-ui .qb-welcome-stat-value .material-symbols-outlined { font-size:24px; font-variation-settings:'FILL' 1; }
.customer-ui .qb-welcome-served .material-symbols-outlined { color:var(--ux-accent); }
.customer-ui .qb-welcome-stat-label { font-size:12px; color:var(--ux-muted); }
.customer-ui .qb-welcome-stars { position:relative; font-size:12px; letter-spacing:-1px; white-space:nowrap; }
.customer-ui .qb-welcome-stars > span:first-child { opacity:.25; }
.customer-ui .qb-welcome-stars-fill { position:absolute; left:0; top:0; overflow:hidden; }
.customer-ui .qb-welcome-rating:hover { border-color:#edbf77; box-shadow:inset 0 0 12px #dcaa5530,0 0 12px #dcaa5520; }
@media (max-width:350px) { .customer-ui .qb-welcome { padding:16px 10px; } .customer-ui .qb-welcome-stats { gap:7px; } .customer-ui .qb-welcome-stars { font-size:10px; } .customer-ui .qb-welcome-stat-value { gap:3px; } }

/* Selección de especialista visible y legible. */
.customer-ui .qb-staff { padding:3px 1px 8px; }
.customer-ui .qb-person { width:108px; border:1px solid var(--ux-border); background:var(--ux-card); color:var(--ux-text); }
.customer-ui .qb-person.is-on { border-color:var(--ux-selected); box-shadow:inset 0 0 0 1px var(--ux-selected); background:var(--ux-soft); }
.customer-ui .qb-person-name { display:block; font-size:13px; overflow-wrap:anywhere; }

/* Último paso: hoja de confirmación. */
.customer-ui .qb-final { border:1px solid color-mix(in srgb,var(--ux-accent) 35%,var(--ux-border)); border-radius:34px 34px 0 0; background:linear-gradient(155deg,var(--ux-soft),transparent 65%),var(--ux-bg); padding:14px 22px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -10px 50px #0005; overscroll-behavior:contain; }
.customer-ui .qb-final-handle { width:48px; height:5px; border-radius:8px; background:color-mix(in srgb,var(--ux-text) 25%,transparent); margin:0 auto 20px; }
.customer-ui .qb-final h3 { font-size:28px; font-weight:800; line-height:1.2; margin:0 0 8px; }
.customer-ui .qb-final-subtitle { font-size:15px; color:var(--ux-muted); margin:0; }
.customer-ui .qb-final .qb-recap { padding:16px 18px; margin:20px 0 18px; border:1px solid var(--ux-border); border-radius:20px; background:color-mix(in srgb,var(--ux-bg) 80%,var(--ux-card)); }
.customer-ui .qb-final .qb-recap > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:7px 0; font-size:14px; }
.customer-ui .qb-final .qb-recap > div > :first-child { opacity:1; color:var(--ux-muted); flex-shrink:0; }
.customer-ui .qb-final .qb-recap > div > :last-child { text-align:right; overflow-wrap:anywhere; min-width:0; }
.customer-ui .qb-final .qb-recap .qb-final-staff { display:inline-flex; align-items:center; gap:5px; border:1px solid color-mix(in srgb,var(--ux-accent) 65%,transparent); border-radius:24px; padding:5px 11px; background:var(--ux-soft); font-weight:700; }
.customer-ui .qb-final-staff > span { color:#edbd65 !important; }
.customer-ui .qb-final .qb-recap .qb-final-total { border-top:1px dashed var(--ux-border); margin-top:10px; padding-top:13px; padding-bottom:0; }
.customer-ui .qb-final .qb-final-total > span { color:var(--ux-text) !important; font-weight:800; font-size:16px; }
.customer-ui .qb-final-total strong { color:var(--ux-accent); font-size:24px; }
.customer-ui .qb-final-field { display:flex; align-items:center; gap:10px; min-height:58px; padding:0 14px; margin:12px 0; border:1px solid var(--ux-border); border-radius:16px; background:color-mix(in srgb,var(--ux-bg) 92%,var(--ux-card)); }
.customer-ui .qb-final-field:focus-within { border-color:var(--ux-accent); box-shadow:0 0 0 1px var(--ux-accent); }
.customer-ui .qb-final-field > .material-symbols-outlined { font-size:26px; color:var(--ux-accent); }
.customer-ui .qb-final-country { border:1px solid var(--ux-border); border-radius:7px; padding:4px 7px; font-size:13px; font-weight:700; background:var(--ux-card); }
.customer-ui .qb-final-field .qb-input { min-width:0; width:100%; margin:0; padding:16px 0; border:0; border-radius:0; outline:none; background:transparent; color:var(--ux-text); font-size:16px; }
.customer-ui .qb-final-field .qb-input::placeholder { color:var(--ux-muted); opacity:.8; }
.customer-ui .qb-final-verify { position:relative; height:58px; margin:16px 0; border:1px solid color-mix(in srgb,var(--ux-accent) 65%,var(--ux-border)); border-radius:40px; background:var(--ux-bg); }
.customer-ui .qb-final-verify label { position:absolute; inset:0 12px 0 62px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; line-height:1.3; color:var(--ux-text); pointer-events:none; }
.customer-ui .qb-final-verify input { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:5px; appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; border-radius:40px; }
.customer-ui .qb-final-verify input::-webkit-slider-runnable-track { background:transparent; height:46px; }
.customer-ui .qb-final-verify input::-moz-range-track { background:transparent; height:46px; }
.customer-ui .qb-final-verify input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:46px; height:46px; border:0; border-radius:50%; background:var(--ux-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='m7 6 8 8-8 8m9-16 8 8-8 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat; box-shadow:0 0 16px var(--ux-soft); }
.customer-ui .qb-final-verify input::-moz-range-thumb { width:46px; height:46px; border:0; border-radius:50%; background:var(--ux-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='m7 6 8 8-8 8m9-16 8 8-8 8' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center/24px no-repeat; }
.customer-ui .qb-final-verified { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--ux-text); font-size:14px; margin:18px 0; }
.customer-ui .qb-final .qb-cta { min-height:54px; border-radius:15px; font-size:18px; font-weight:800; background:linear-gradient(115deg,var(--ux-accent),color-mix(in srgb,var(--ux-accent) 78%,#000)); }
@media (max-width:350px) { .customer-ui .qb-final { padding-left:14px; padding-right:14px; } .customer-ui .qb-final-verify label { font-size:11px; } .customer-ui .qb-final-field { padding:0 10px; gap:7px; } }

/* Botón de navegación circular con trazos propios. */
#app.customer-ui .ux-header-row > .ux-menu-toggle {
  appearance:none; -webkit-appearance:none; width:44px; height:44px;
  border-radius:50%; border:1px solid color-mix(in srgb,var(--ux-header-text) 12%,transparent);
  background:color-mix(in srgb,var(--ux-header-text) 5%,transparent);
  color:var(--ux-header-text); box-shadow:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
#app.customer-ui .ux-header-row > .ux-menu-toggle:hover {
  background:color-mix(in srgb,var(--ux-accent) 15%,var(--ux-header-bg));
  border-color:color-mix(in srgb,var(--ux-accent) 50%,transparent);
}
#app.customer-ui .ux-header-row > .ux-menu-toggle:active { transform:scale(.94); }
#app.customer-ui .ux-header-row > .ux-menu-toggle:focus-visible { outline:2px solid var(--ux-accent); outline-offset:3px; }
.customer-ui .ux-menu-glyph { display:block; flex-shrink:0; }
@media (prefers-reduced-motion:reduce) { #app.customer-ui .ux-header-row > .ux-menu-toggle { transition:none; } }

.customer-ui .qb-cart-draft,.customer-ui .qb-cart-panel { margin:18px 0; padding:16px; background:var(--ux-card); border:1px solid var(--ux-border); border-radius:16px; }
.customer-ui .qb-cart-draft > strong { display:block; margin-bottom:12px; }
.customer-ui .qb-cart-line { display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--ux-border); }
.customer-ui .qb-cart-line p { color:var(--ux-muted); font-size:12px; }
.customer-ui .qb-cart-toggle { border:1px solid var(--ux-border); color:var(--ux-text); background:var(--ux-card); border-radius:12px; padding:10px; min-height:44px; font-size:12px; }
.customer-ui .qb-cart-panel { position:fixed; z-index:55; bottom:calc(85px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:calc(100% - 28px); max-width:540px; max-height:65dvh; overflow:auto; box-shadow:0 12px 55px #0008; }

/* El carrito se abre como hoja sólida, solo bajo petición. */
.customer-ui .qb-cart-overlay { position:fixed; inset:0; z-index:1000; background:#0009; display:flex; align-items:flex-end; justify-content:center; padding:12px 12px 0; }
#app.customer-ui .qb-cart-overlay .qb-cart-panel { position:relative; inset:auto; transform:none; margin:0; width:100%; max-width:560px; max-height:85dvh; overflow-y:auto; overscroll-behavior:contain; border-radius:24px 24px 0 0; background:var(--ux-bg,#160d16); background-image:none; opacity:1; padding:18px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -12px 50px #0007; }
.customer-ui .qb-cart-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.customer-ui .qb-cart-heading h3 { margin:0; font-size:22px; }
.customer-ui .qb-cart-close { width:44px; height:44px; flex-shrink:0; border-radius:50%; border:1px solid var(--ux-border); background:var(--ux-card); color:var(--ux-text); font-size:20px; }
.customer-ui .qb-cart-panel .qb-cart-line { gap:14px; padding:14px 0; }
.customer-ui .qb-cart-line > div:first-child { min-width:0; overflow-wrap:anywhere; }
.customer-ui .qb-cart-line > div:last-child { flex-shrink:0; display:flex; flex-direction:column; }
.customer-ui .qb-cart-panel > .qb-cta { margin-top:12px; }