/* Reserva pública: asistente por pasos, limitado a esta pantalla. */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap'); html body[data-page="reservas"] { --rv-bg: #fff; --rv-surface: #fff; --rv-text: #111; --rv-muted: #666; --rv-border: #e8e8e8; --rv-ink: #1a1a1a; background: var(--rv-bg) !important; color: var(--rv-text) !important; font-family: Inter, system-ui, sans-serif !important; min-height: 100%; padding: 0 !important; } html body[data-page="reservas"][data-theme="light"] { background: #fff !important; } html body[data-page="reservas"] .reservas-wizard, html body[data-page="reservas"] .reservas-wizard * { box-sizing: border-box; } html body[data-page="reservas"] .reservas-wizard { display: block !important; min-height: 100dvh; width: 100%; max-width: none !important; margin: 0 !important; gap: 0 !important; padding: 0 !important; color: var(--rv-text); background: var(--rv-bg); padding-bottom: env(safe-area-inset-bottom); } html body[data-page="reservas"] .reservas-wizard .main-content:not(.hide) { display: block !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body[data-page="reservas"] .reservas-wizard .main-content:not(.hide)::before, html body[data-page="reservas"] .reservas-wizard .main-content:not(.hide)::after, html body[data-page="reservas"] .reservas-wizard #bookingForm::before, html body[data-page="reservas"] .reservas-wizard #bookingForm::after { content: none !important; display: none !important; } html body[data-page="reservas"] .rv-wizard-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 68px; padding: 10px max(20px, calc((100vw - 920px) / 2)); border-bottom: 1px solid rgba(232,232,232,.85); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html body[data-page="reservas"] .rv-wizard-header .rv-header-back, html body[data-page="reservas"] .rv-wizard-header .rv-header-exit { position: static !important; display: inline-flex; width: max-content; min-height: 0; align-items: center; padding: 8px 2px; border: 0; border-radius: 6px; background: transparent; color: var(--rv-muted); font: 500 14px/1 Inter, sans-serif; letter-spacing: 0; text-transform: none; box-shadow: none !important; transform: none !important; text-decoration: none; cursor: pointer; } html body[data-page="reservas"] .rv-wizard-header .rv-header-back { grid-column: 1; justify-self: start; } html body[data-page="reservas"] .rv-wizard-header .rv-header-exit { grid-column: 3; justify-self: end; } html body[data-page="reservas"] .rv-header-back svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } html body[data-page="reservas"] .rv-wizard-header .rv-header-back:hover, html body[data-page="reservas"] .rv-wizard-header .rv-header-exit:hover { background: transparent; color: #111; box-shadow: none !important; transform: none !important; } html body[data-page="reservas"] .rv-wizard-brand { position: static; grid-column: 2; justify-self: center; transform: none; font: 600 20px/1.05 'Playfair Display', Georgia, serif; text-align: center; white-space: nowrap; } html body[data-page="reservas"] .rv-wizard-brand span { display: block; margin-top: 4px; color: var(--rv-muted); font: 600 9px/1 Inter, sans-serif; letter-spacing: 2.4px; } html body[data-page="reservas"] .rv-progress-wrap { width: min(100% - 40px, 780px); margin: 0 auto; padding: 22px 0 8px; } html body[data-page="reservas"] .rv-progress-bar { display: flex; gap: 6px; margin-bottom: 10px; } html body[data-page="reservas"] .rv-progress-step { flex: 1; height: 4px; border-radius: 10px; background: #e6e6e6; transition: background .25s ease; } html body[data-page="reservas"] .rv-progress-step.active, html body[data-page="reservas"] .rv-progress-step.done { background: var(--rv-ink); } html body[data-page="reservas"] .rv-progress-label { color: var(--rv-muted); font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; } html body[data-page="reservas"] .rv-booking-form { position: relative; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body[data-page="reservas"] .rv-wizard-main { width: min(100% - 40px, 780px); min-height: 440px; margin: 0 auto; padding: 24px 0 130px; } html body[data-page="reservas"] .rv-step { animation: rv-step-in .44s cubic-bezier(.16,1,.3,1) both; } html body[data-page="reservas"] .rv-step[hidden] { display: none !important; } html body[data-page="reservas"] .rv-step h1 { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 8px; color: #17191d; font: 600 clamp(26px, 4vw, 30px)/1.16 'DM Sans', Inter, system-ui, sans-serif; letter-spacing: -.7px; } html body[data-page="reservas"] .rv-step-heading-icon { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border: 1px solid #e8ebef; border-radius: 14px; background: #f3f5f7; color: #475569; } html body[data-page="reservas"] .rv-step-heading-icon svg { display: block; width: 21px; height: 21px; } html body[data-page="reservas"] .rv-step-heading-text { min-width: 0; } html body[data-page="reservas"] .rv-step-help { position: relative; display: inline-flex; flex: 0 0 auto; margin-left: auto; } html body[data-page="reservas"] .rv-step-help-button { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 1px solid #cdd3da; border-radius: 50%; background: #fff; color: #657080; box-shadow: none; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1); } html body[data-page="reservas"] .rv-step-help-button:hover, html body[data-page="reservas"] .rv-step-help.is-open .rv-step-help-button { border-color: #59616d; background: #1a1a1a; color: #fff; transform: scale(1.04); } html body[data-page="reservas"] .rv-step-help-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } html body[data-page="reservas"] .rv-step-help-popover { position: absolute; z-index: 20; top: calc(100% + 9px); right: 0; display: grid; width: min(286px, calc(100vw - 40px)); gap: 7px; padding: 14px; border: 1px solid #e4e7eb; border-radius: 14px; background: rgba(255,255,255,.98); color: #586170; box-shadow: 0 12px 28px rgba(17,24,39,.13); font: 400 12px/1.42 Inter, system-ui, sans-serif; letter-spacing: 0; opacity: 0; pointer-events: none; transform: translate3d(0,-5px,0) scale(.98); transform-origin: top right; transition: opacity .18s ease, transform .22s cubic-bezier(.16,1,.3,1); } html body[data-page="reservas"] .rv-step-help-popover strong { color: #17191d; font: 700 12px/1.2 Inter, system-ui, sans-serif; } html body[data-page="reservas"] .rv-step-help-popover span { display: block; } html body[data-page="reservas"] .rv-step-help-popover b { color: #17191d; } html body[data-page="reservas"] .rv-step-help.is-open .rv-step-help-popover { opacity: 1; pointer-events: auto; transform: translate3d(0,0,0) scale(1); } html body[data-page="reservas"] .rv-step-subtitle { margin: 0 0 24px; color: var(--rv-muted); font: 400 15px/1.55 Inter, sans-serif; } @keyframes rv-step-in { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.998); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes rv-service-select { from { opacity: .9; transform: scale(.99); } to { opacity: 1; transform: scale(1); } } html body[data-page="reservas"] .rv-service-list { display: grid; gap: 15px; } html body[data-page="reservas"] .rv-service-card { position: relative; display: flex; width: 100%; min-height: 76px; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #e7e9ec; border-radius: 18px; background: var(--rv-surface); box-shadow: 0 3px 10px rgba(15,23,42,.035); color: var(--rv-text); cursor: pointer; text-align: left; transition: border-color .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease; } html body[data-page="reservas"] .rv-service-card:hover { border-color: #cbd0d6; box-shadow: 0 5px 15px rgba(15,23,42,.07); transform: translateY(-1px); } html body[data-page="reservas"] .rv-service-card::after { content: ''; position: absolute; top: 50%; right: 16px; display: grid; width: 18px; height: 18px; place-items: center; border: 1.7px solid #aeb4bb; border-radius: 50%; background: transparent; color: transparent; font: 700 12px/1 Inter, sans-serif; transform: translateY(-50%); transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.16,1,.3,1); } html body[data-page="reservas"] .rv-service-card.selected { border-color: #b7bcc3; background: #f0f1f3; box-shadow: 0 4px 13px rgba(15,23,42,.065); animation: rv-service-select .34s cubic-bezier(.16,1,.3,1) both; } html body[data-page="reservas"] .rv-service-card.selected::after { content: '✓'; border-color: #78828c; background: #78828c; color: #fff; } html body[data-page="reservas"] .rv-service-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 15px; background: #e9edf1; color: #111820; transition: background-color .28s ease, color .28s ease, transform .28s cubic-bezier(.16,1,.3,1); } html body[data-page="reservas"] .rv-service-icon svg { display: block; width: 25px; height: 25px; stroke-width: 1.9; } html body[data-page="reservas"] .rv-service-card:hover .rv-service-icon { background: #e4e8ed; transform: scale(1.03); } html body[data-page="reservas"] .rv-service-card.selected .rv-service-icon { background: #e2e6eb; color: #101820; } html body[data-page="reservas"] .rv-service-info { display: grid; flex: 1 1 auto; gap: 5px; min-width: 0; padding-right: 0; text-align: left; } html body[data-page="reservas"] .rv-service-info strong { color: #111820; font: 700 15px/1.25 Inter, system-ui, sans-serif; letter-spacing: .015em; text-transform: uppercase; } html body[data-page="reservas"] .rv-service-info small { color: #737b84; font: 500 10px/1.45 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; } html body[data-page="reservas"] .rv-service-meta { display: grid; flex: 0 0 auto; gap: 5px; padding-right: 30px; text-align: right; } html body[data-page="reservas"] .rv-service-meta strong { color: #111820; font: 700 15px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; } html body[data-page="reservas"] .rv-service-meta small { color: #737b84; font: 500 10px/1.2 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; } html body[data-page="reservas"] .calendar-status { margin: 0 0 12px; color: var(--rv-muted); font-size: 13px; } html body[data-page="reservas"] .calendar-status.error { padding: 12px 14px; border: 1px solid #f2c6c6; border-radius: 12px; background: #fff7f7; color: #aa3131; } html body[data-page="reservas"] .rv-calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 20px; } html body[data-page="reservas"] .rv-calendar-nav .calendar-nav-btn { display: grid; width: 40px; min-width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--rv-border); border-radius: 12px; background: #fff; color: var(--rv-text); font: 500 13px Inter, sans-serif; cursor: pointer; } html body[data-page="reservas"] .rv-calendar-nav .calendar-nav-btn:disabled { opacity: .4; cursor: default; } html body[data-page="reservas"] .rv-calendar-nav .month-label { flex: 1; color: var(--rv-text); font-size: 14px; font-weight: 600; text-align: center; text-transform: capitalize; } html body[data-page="reservas"] .rv-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } html body[data-page="reservas"] .rv-month { min-width: 0; padding: 12px 4px 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } html body[data-page="reservas"] .rv-month h2 { margin: 0 0 22px; color: var(--rv-text); font: 600 16px Inter, sans-serif; text-align: center; text-transform: capitalize; } html body[data-page="reservas"] .rv-month .weekdays, html body[data-page="reservas"] .rv-month .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; } html body[data-page="reservas"] .rv-month .weekdays { margin-bottom: 12px; } html body[data-page="reservas"] .rv-month .weekdays span { color: #898989; font-size: 10px; font-weight: 500; text-align: center; } html body[data-page="reservas"] .rv-month .day { width: 100%; min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--rv-text); font: 500 13px Inter, sans-serif; } html body[data-page="reservas"] .rv-month .day { transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.16,1,.3,1); } html body[data-page="reservas"] .rv-month .day.available { cursor: pointer; } html body[data-page="reservas"] .rv-month .day.available:hover:not(.selected) { border-color: transparent; background: #f1f1f1; } html body[data-page="reservas"] .rv-month .day.today:not(.selected) { border-color: transparent; background: #f1f1f1; } html body[data-page="reservas"] .rv-month .day.selected, html body[data-page="reservas"] .rv-month .day.selected:hover { background: var(--rv-ink) !important; color: #fff !important; } html body[data-page="reservas"] .rv-month .day.selected { background: var(--rv-ink) !important; color: #fff !important; padding-bottom: 0 !important; border-radius: 11px; animation: rv-service-select .32s cubic-bezier(.16,1,.3,1) both; } html body[data-page="reservas"] .rv-month .day.selected::after { content: none !important; display: none !important; } html body[data-page="reservas"] .rv-month .day:disabled, html body[data-page="reservas"] .rv-month .day.closed, html body[data-page="reservas"] .rv-month .day.full { color: #c4c4c4; cursor: default; } html body[data-page="reservas"] .rv-month .day.empty { visibility: hidden; } html body[data-page="reservas"] .rv-calendar-note { margin: 14px 0 0; color: var(--rv-muted); font-size: 12px; line-height: 1.5; } html body[data-page="reservas"] .rv-barber-picker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; } html body[data-page="reservas"] .rv-barber-picker label { color: var(--rv-muted); font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; } html body[data-page="reservas"] .rv-barber-picker select { min-width: 130px; padding: 7px 28px 7px 10px; border: 1px solid transparent; border-radius: 8px; background-color: transparent; color: #555; font: 700 12px Inter, sans-serif; letter-spacing: .4px; text-transform: uppercase; } html body[data-page="reservas"] .selected-date { display: block !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--rv-muted) !important; font-size: 14px; } html body[data-page="reservas"] .selected-date::before { content: none !important; display: none !important; } html body[data-page="reservas"] .selected-date__label { margin-right: 7px; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; } html body[data-page="reservas"] .selected-date__value { color: var(--rv-text); font-weight: 600; text-transform: capitalize; } html body[data-page="reservas"] .rv-time-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } html body[data-page="reservas"] .rv-time-grid .time-btn { min-height: 48px; border: 1px solid var(--rv-border) !important; border-radius: 12px !important; background: #fff !important; color: var(--rv-text) !important; font: 500 14px Inter, sans-serif; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; } html body[data-page="reservas"] .rv-time-grid .time-btn:hover { border-color: var(--rv-ink); } html body[data-page="reservas"] .rv-time-grid .time-btn.selected { border-color: var(--rv-ink) !important; background: var(--rv-ink) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(26,26,26,.14); animation: rv-service-select .32s cubic-bezier(.16,1,.3,1) both; } html body[data-page="reservas"] .rv-time-grid .no-slots { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--rv-border); border-radius: 12px; color: var(--rv-muted); text-align: center; } html body[data-page="reservas"] .rv-form-fields { display: grid; gap: 17px; max-width: 620px; } html body[data-page="reservas"] .rv-form-fields .form-group { display: grid; gap: 8px; margin: 0; } html body[data-page="reservas"] .rv-form-fields label { display: flex; align-items: center; gap: 8px; color: #444; font: 700 11px/1.3 'DM Sans', Inter, sans-serif; letter-spacing: .8px; text-transform: uppercase; } html body[data-page="reservas"] .rv-field-icon { display: inline-flex; flex: 0 0 17px; width: 17px; height: 17px; align-items: center; justify-content: center; color: #707b8b; } html body[data-page="reservas"] .rv-field-icon svg { display: block; width: 16px; height: 16px; stroke-width: 1.8; } html body[data-page="reservas"] .rv-form-fields label span { color: #888; font-weight: 500; text-transform: none; letter-spacing: 0; } html body[data-page="reservas"] .rv-form-fields label .rv-field-icon { color: #707b8b; font-weight: 400; text-transform: none; letter-spacing: 0; } html body[data-page="reservas"] .rv-form-fields input { width: 100%; min-height: 54px; padding: 0 15px; border: 1px solid var(--rv-border); border-radius: 14px; outline: 0; background-color: #fff !important; background-image: none !important; color: var(--rv-text); font: 400 15px Inter, sans-serif; box-shadow: none; } html body[data-page="reservas"] .rv-form-fields #nombre, html body[data-page="reservas"] .rv-form-fields #telefono, html body[data-page="reservas"] .rv-form-fields #correo { background-image: none !important; background-position: initial !important; padding-left: 15px !important; } html body[data-page="reservas"] .rv-form-fields input:focus { border-color: #777; box-shadow: 0 0 0 3px rgba(0,0,0,.06); } html body[data-page="reservas"] .rv-form-fields input::placeholder { color: #aaa; } html body[data-page="reservas"] .rv-phone-row { display: flex; overflow: hidden; min-height: 54px; border: 1px solid var(--rv-border); border-radius: 14px; background: #fff; } html body[data-page="reservas"] .rv-phone-row:focus-within { border-color: #777; box-shadow: 0 0 0 3px rgba(0,0,0,.06); } html body[data-page="reservas"] .rv-phone-row .rv-phone-prefix { display: grid; flex: 0 0 auto; place-items: center; padding: 0 14px; border-right: 1px solid var(--rv-border); background: #f8f8f8; color: #555; font-size: 14px; } html body[data-page="reservas"] .rv-phone-row input { min-width: 0; border: 0; border-radius: 0; background-image: none !important; box-shadow: none !important; } html body[data-page="reservas"] .rv-form-status { min-height: 0; margin-top: 12px; color: #b3261e; font-size: 13px; } html body[data-page="reservas"] .rv-summary-card { max-width: 620px; margin: 4px auto 0; } html body[data-page="reservas"] .rv-optional { color: #7b6d5e; font: 500 .76em/1.2 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; } html body[data-page="reservas"] .rv-ticket { overflow: hidden; border-radius: 22px; filter: drop-shadow(0 12px 22px rgba(29,45,69,.12)); } html body[data-page="reservas"] .rv-ticket__head, html body[data-page="reservas"] .rv-ticket__body { border: 1px solid #e1e6ed; } html body[data-page="reservas"] .rv-ticket__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; overflow: hidden; padding: 31px 24px 22px; border-bottom: 0; border-radius: 22px 22px 0 0; background: #f4f7fb; -webkit-mask: radial-gradient(circle 11px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 11px at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat; } html body[data-page="reservas"] .rv-ticket__head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: repeating-linear-gradient(-45deg, #d94f4f 0 7px, #fff 7px 14px, #3b78e0 14px 21px, #fff 21px 28px); } html body[data-page="reservas"] .rv-ticket__when { display: flex; min-width: 0; align-items: flex-end; gap: 12px; } html body[data-page="reservas"] .rv-ticket__day { color: #172b4d; font: 600 clamp(54px, 14vw, 76px)/.82 'Playfair Display', Georgia, serif; font-variant-numeric: lining-nums; } html body[data-page="reservas"] .rv-ticket__date { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding-bottom: 2px; } html body[data-page="reservas"] .rv-ticket__date strong { color: #172b4d; font-size: 15px; font-weight: 700; } html body[data-page="reservas"] .rv-ticket__date small { color: #68778c; font-size: 13px; text-transform: capitalize; } html body[data-page="reservas"] .rv-ticket__time { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 5px; } html body[data-page="reservas"] .rv-ticket__time span { color: #68778c; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; } html body[data-page="reservas"] .rv-ticket__time strong { color: #1a1a1a; font: 600 clamp(28px, 8vw, 38px)/.95 'Playfair Display', Georgia, serif; font-variant-numeric: tabular-nums; } html body[data-page="reservas"] .rv-ticket__body { position: relative; margin: 0; padding: 11px 24px 9px; border-top: 0; border-radius: 0 0 22px 22px; background: #fff; -webkit-mask: radial-gradient(circle 11px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 11px at 0 0, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat; } html body[data-page="reservas"] .rv-ticket__body::before { content: ""; position: absolute; top: 0; left: 20px; right: 20px; border-top: 2px dashed #d9e0e9; } html body[data-page="reservas"] .rv-ticket__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #edf0f4; } html body[data-page="reservas"] .rv-ticket__row:last-child { border-bottom: 0; } html body[data-page="reservas"] .rv-ticket__row dt { margin: 0; color: #68778c; font-size: 13px; } html body[data-page="reservas"] .rv-ticket__row dd { margin: 0; color: #172b4d; font-size: 14px; font-weight: 600; text-align: right; overflow-wrap: anywhere; } html body[data-page="reservas"] .rv-ticket__row dd.rv-ticket__status { padding: 5px 11px; border-radius: 999px; background: #eaf0f8; color: #344a68; font-size: 12px; } html body[data-page="reservas"] .rv-empty-state { padding: 18px; border: 1px dashed var(--rv-border); border-radius: 14px; color: var(--rv-muted); text-align: center; } html body[data-page="reservas"] .rv-bottom-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 25; display: flex; justify-content: center; gap: 10px; padding: 14px max(20px, calc((100vw - 780px) / 2)); padding-bottom: max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(232,232,232,.9); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } html body[data-page="reservas"] .rv-continue { flex: 1; width: 100%; max-width: 780px; min-height: 58px; border: 0; border-radius: 999px; background: #17191c; color: #fff; font: 700 14px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease, color .3s ease, box-shadow .3s ease; } html body[data-page="reservas"] .rv-continue:hover:not(:disabled) { background: #303030; box-shadow: 0 7px 22px rgba(0,0,0,.15); transform: translate3d(0,-1px,0); } html body[data-page="reservas"] .rv-continue:active:not(:disabled) { background: #111; box-shadow: 0 2px 8px rgba(0,0,0,.12); transform: scale(.99); transition-duration: .14s; } html body[data-page="reservas"] .rv-continue:disabled { background: #dedede; color: #999; cursor: not-allowed; } html body[data-page="reservas"] .rv-finalize { max-width: 780px; } html body[data-page="reservas"] .rv-back-step { flex: 0 0 auto; min-width: 86px; border: 1px solid var(--rv-border); border-radius: 14px; background: #fff; color: var(--rv-text); font: 600 14px Inter, sans-serif; cursor: pointer; } html body[data-page="reservas"] [hidden] { display: none !important; } html body[data-page="reservas"] .rv-data-control, html body[data-page="reservas"] .rv-submit-proxy { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; } html body[data-page="reservas"] .rv-step button:focus-visible, html body[data-page="reservas"] .rv-bottom-bar button:focus-visible, html body[data-page="reservas"] .rv-form-fields input:focus-visible { outline: 3px solid rgba(26,26,26,.22); outline-offset: 2px; } @media (max-width: 700px) { html body[data-page="reservas"] .rv-wizard-header { min-height: 60px; padding: 8px 16px; } html body[data-page="reservas"] .rv-wizard-header .rv-header-back, html body[data-page="reservas"] .rv-wizard-header .rv-header-exit { font-size: 13px; } html body[data-page="reservas"] .rv-wizard-brand { font-size: 18px; } html body[data-page="reservas"] .rv-progress-wrap, html body[data-page="reservas"] .rv-wizard-main { width: calc(100% - 32px); } html body[data-page="reservas"] .rv-progress-wrap { padding-top: 18px; } html body[data-page="reservas"] .rv-wizard-main { min-height: 0; padding-top: 20px; } html body[data-page="reservas"] .rv-step-subtitle { margin-bottom: 20px; font-size: 14px; } html body[data-page="reservas"] .rv-step h1 { gap: 10px; font-size: 25px; letter-spacing: -.55px; } html body[data-page="reservas"] .rv-step-heading-icon { flex-basis: 36px; width: 36px; height: 36px; border-radius: 12px; } html body[data-page="reservas"] .rv-step-heading-icon svg { width: 19px; height: 19px; } html body[data-page="reservas"] .rv-months { grid-template-columns: 1fr; gap: 14px; } html body[data-page="reservas"] .rv-month { padding: 10px 2px 14px; } html body[data-page="reservas"] .rv-month h2 { margin-bottom: 20px; } html body[data-page="reservas"] .rv-calendar-nav .month-label { font-size: 12px; } html body[data-page="reservas"] .rv-calendar-nav .calendar-nav-btn { width: 38px; min-width: 38px; height: 38px; font-size: 12px; } html body[data-page="reservas"] .rv-month .days, html body[data-page="reservas"] .rv-month .weekdays { gap: 4px; } html body[data-page="reservas"] .rv-month .day { border-radius: 9px; font-size: 12px; } html body[data-page="reservas"] .rv-service-card { min-height: 76px; gap: 12px; padding: 12px; } html body[data-page="reservas"] .rv-service-icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 14px; } html body[data-page="reservas"] .rv-service-icon svg { width: 24px; height: 24px; } html body[data-page="reservas"] .rv-service-info strong { font-size: 13px; } html body[data-page="reservas"] .rv-service-info small { font-size: 9px; letter-spacing: .1em; } html body[data-page="reservas"] .rv-service-meta { padding-right: 30px; } html body[data-page="reservas"] .rv-service-meta strong { font-size: 13px; } html body[data-page="reservas"] .rv-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } html body[data-page="reservas"] .rv-time-grid .time-btn { min-height: 46px; font-size: 13px; } html body[data-page="reservas"] .rv-bottom-bar { padding-right: 16px; padding-left: 16px; } html body[data-page="reservas"] .rv-continue { min-height: 54px; } html body[data-page="reservas"] .rv-back-step { min-width: 74px; font-size: 12px; } html body[data-page="reservas"] .rv-ticket__head { padding: 27px 17px 19px; } html body[data-page="reservas"] .rv-ticket__body { padding: 10px 17px 8px; } html body[data-page="reservas"] .rv-ticket__row { gap: 10px; padding: 12px 0; } html body[data-page="reservas"] .rv-ticket__row dt { font-size: 12px; } html body[data-page="reservas"] .rv-ticket__row dd { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { html body[data-page="reservas"] .rv-step, html body[data-page="reservas"] .rv-service-card, html body[data-page="reservas"] .rv-month .day, html body[data-page="reservas"] .rv-time-grid .time-btn, html body[data-page="reservas"] .rv-continue { animation: none !important; transition: none !important; } } .rv-barber-picker { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0 0 12px; } .rv-barber-picker label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1; white-space: nowrap; flex: 0 0 auto; } .rv-barber-picker-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; } .rv-barber-picker-icon svg { width: 100%; height: 100%; } .rv-barber-picker select { flex: 1 1 auto; min-width: 0; width: auto; height: 38px; padding: 0 10px; font-size: 14px; border-radius: 8px; } /* ========================================================================== Soft-glass: materialidad de las tarjetas de servicio (solo visual) Aislado a .rv-service-card / .rv-service-icon. No toca .rv-continue. ========================================================================== */ @keyframes rv-service-sheen { from { background-position: 120% 0; } to { background-position: 0% 0; } } html body[data-page="reservas"] .rv-service-card { isolation: isolate; border-color: rgba(15,23,42,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(15,23,42,.035), inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 2px rgba(15,23,42,.04), 0 8px 22px -6px rgba(15,23,42,.09); } /* reflejo líquido: amplio, curvo, casi imperceptible (detrás del contenido) */ html body[data-page="reservas"] .rv-service-card::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 8% -20%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%), linear-gradient(168deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 42%, rgba(15,23,42,.018) 100%); background-size: 100% 100%, 200% 100%; opacity: .8; transition: opacity .45s cubic-bezier(.16,1,.3,1); } html body[data-page="reservas"] .rv-service-card:hover { border-color: rgba(15,23,42,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(15,23,42,.04), inset 0 0 0 1px rgba(255,255,255,.4), 0 1px 2px rgba(15,23,42,.05), 0 12px 26px -8px rgba(15,23,42,.12); } /* seleccionada: más profundidad y reflejo un poco más presente */ html body[data-page="reservas"] .rv-service-card.selected { border-color: rgba(15,23,42,.17); box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -2px 6px rgba(15,23,42,.05), inset 0 0 0 1px rgba(255,255,255,.55), 0 2px 4px rgba(15,23,42,.06), 0 14px 30px -8px rgba(15,23,42,.16); } html body[data-page="reservas"] .rv-service-card.selected::before { opacity: 1; background: radial-gradient(130% 100% at 10% -25%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 58%), linear-gradient(162deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 52%, rgba(15,23,42,.03) 100%), linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.4) 48%, rgba(255,255,255,0) 66%); background-size: 100% 100%, 100% 100%, 220% 100%; background-position: 0 0, 0 0, 0% 0; animation: rv-service-sheen 1.1s cubic-bezier(.16,1,.3,1) both; } html body[data-page="reservas"] .rv-service-card::after { box-shadow: inset 0 1px 1px rgba(15,23,42,.06); } html body[data-page="reservas"] .rv-service-card.selected::after { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(15,23,42,.22); } /* icon-box: mismo material, un nivel por encima de la tarjeta */ html body[data-page="reservas"] .rv-service-icon { position: relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 4px rgba(15,23,42,.045), inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 1px rgba(15,23,42,.05), 0 4px 9px -3px rgba(15,23,42,.12); transition: background-color .28s ease, color .28s ease, transform .28s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; } html body[data-page="reservas"] .rv-service-icon::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 52%); } html body[data-page="reservas"] .rv-service-icon svg { position: relative; } html body[data-page="reservas"] .rv-service-card.selected .rv-service-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 5px rgba(15,23,42,.06), inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 1px rgba(15,23,42,.07), 0 5px 11px -3px rgba(15,23,42,.16); } @media (prefers-reduced-motion: reduce) { html body[data-page="reservas"] .rv-service-card::before { animation: none !important; transition: none !important; } } /* ========================================================================== Ajuste 2: tarjeta seleccionada más fiel a la referencia + barra de progreso ========================================================================== */ /* --- Tarjeta seleccionada: borde cristal, ola diagonal, borde inferior claro --- */ html body[data-page="reservas"] .rv-service-card.selected { border-color: rgba(110,126,148,.34); background-image: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 45%, rgba(15,23,42,.035) 100%); box-shadow: inset 0 2px 1px rgba(255,255,255,1), inset 0 1px 0 1px rgba(255,255,255,.7), inset 0 -3px 5px rgba(255,255,255,.95), inset 0 -1px 0 rgba(120,135,155,.28), inset 0 8px 18px -8px rgba(15,23,42,.09), 0 2px 3px rgba(15,23,42,.07), 0 16px 30px -10px rgba(15,23,42,.24); } html body[data-page="reservas"] .rv-service-card.selected::before { opacity: 1; background: /* arco brillante curvo en el borde superior */ radial-gradient(140% 70% at 50% -18%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%), /* ola diagonal suave */ linear-gradient(112deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.42) 34%, rgba(255,255,255,.1) 46%, rgba(255,255,255,0) 58%), /* curva inferior tipo líquido */ radial-gradient(120% 60% at 70% 125%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 60%), /* barrido animado al seleccionar */ linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 66%); background-size: 100% 100%, 100% 100%, 100% 100%, 240% 100%; background-repeat: no-repeat; background-position: 0 0, 0 0, 0 0, 0% 0; animation: rv-service-sheen 1.2s cubic-bezier(.16,1,.3,1) both; } /* icon-box dentro de la seleccionada: un poco más de volumen */ html body[data-page="reservas"] .rv-service-card.selected .rv-service-icon { box-shadow: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -3px 6px rgba(15,23,42,.08), inset 0 0 0 1px rgba(255,255,255,.45), 0 0 0 1px rgba(15,23,42,.08), 0 6px 12px -3px rgba(15,23,42,.2); } /* normales: borde inferior claro, más cercano a la referencia */ html body[data-page="reservas"] .rv-service-card:not(.selected) { box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 4px rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.4), 0 1px 2px rgba(15,23,42,.05), 0 8px 20px -8px rgba(15,23,42,.12); } /* --- Barra de progreso: relleno que avanza + partículas discretas --- */ @keyframes rv-bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes rv-bar-spark { 0% { left: 0; opacity: 0; } 12% { opacity: .9; } 80% { opacity: .55; } 100% { left: 100%; opacity: 0; } } html body[data-page="reservas"] .rv-progress-step { position: relative; } html body[data-page="reservas"] .rv-progress-step.active:not(.done) { background: #e6e6e6; } html body[data-page="reservas"] .rv-progress-step.active::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--rv-ink); transform-origin: left center; animation: rv-bar-fill .75s cubic-bezier(.16,1,.3,1) both; } html body[data-page="reservas"] .rv-progress-step.active::after { content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 2px; margin-top: -1px; border-radius: 50%; background: rgba(23,25,28,.55); pointer-events: none; box-shadow: -5px -4px 0 -.2px rgba(23,25,28,.45), -9px 3px 0 -.4px rgba(23,25,28,.35), -14px -6px 0 -.5px rgba(23,25,28,.28), -19px 5px 0 -.6px rgba(23,25,28,.2), -25px -3px 0 -.6px rgba(23,25,28,.14); animation: rv-bar-spark .75s cubic-bezier(.16,1,.3,1) both; } @media (prefers-reduced-motion: reduce) { html body[data-page="reservas"] .rv-progress-step.active::before, html body[data-page="reservas"] .rv-progress-step.active::after { animation: none !important; } html body[data-page="reservas"] .rv-progress-step.active::after { display: none; } } /* ========================================================================== Ajuste 3: tarjeta seleccionada = "losa de vidrio" biselada (como la referencia) + partículas del progreso más visibles ========================================================================== */ html body[data-page="reservas"] .rv-service-card.selected { border-color: rgba(140,156,178,.38); background-image: linear-gradient(100deg, rgba(120,136,160,.13) 0%, rgba(150,164,184,.06) 45%, rgba(255,255,255,.22) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 0 0 7px rgba(176,188,204,.17), inset 0 2px 3px 6px rgba(255,255,255,.28), inset 0 -4px 5px -1px rgba(255,255,255,.95), inset 0 10px 22px -10px rgba(15,23,42,.10), 0 2px 3px rgba(15,23,42,.07), 0 18px 32px -12px rgba(30,45,70,.30); } html body[data-page="reservas"] .rv-service-card.selected::before { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='white' stop-opacity='.8'/%3E%3Cstop offset='.8' stop-color='white' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='.3'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='white' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='white' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 38 C30 38 52 30 72 14 S92 1 100 2 L100 40 L0 40Z' fill='white' fill-opacity='.24'/%3E%3Cpath d='M0 40 C34 40 58 34 78 20 S94 9 100 8' fill='none' stroke='url(%23h)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 38 C30 38 52 30 72 14 S92 1 100 2' fill='none' stroke='url(%23g)' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"), radial-gradient(150% 65% at 45% -22%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 62%), linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 48%, rgba(255,255,255,0) 66%); background-size: 100% 100%, 100% 100%, 240% 100%; background-repeat: no-repeat; background-position: 0 0, 0 0, 0% 0; animation: rv-service-sheen 1.2s cubic-bezier(.16,1,.3,1) both; } html body[data-page="reservas"] .rv-service-card.selected .rv-service-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), inset 0 2px 2px rgba(255,255,255,.9), inset 0 -4px 7px rgba(255,255,255,.55), inset 0 -1px 0 rgba(120,136,160,.25), 0 0 0 1px rgba(120,136,160,.16), 0 7px 14px -4px rgba(30,45,70,.22); } /* partículas del progreso: más notorias pero finas */ @keyframes rv-bar-spark { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: .8; } 100% { left: 100%; opacity: 0; } } html body[data-page="reservas"] .rv-progress-step.active::before { animation-duration: .9s; } html body[data-page="reservas"] .rv-progress-step.active::after { width: 3px; height: 3px; margin-top: -1.5px; background: rgba(23,25,28,.9); animation-duration: .9s; box-shadow: -6px -5px 0 0 rgba(23,25,28,.75), -11px 4px 0 -.3px rgba(23,25,28,.65), -17px -8px 0 -.3px rgba(23,25,28,.55), -23px 7px 0 -.4px rgba(23,25,28,.45), -30px -4px 0 -.5px rgba(23,25,28,.35), -37px 6px 0 -.6px rgba(23,25,28,.25), -45px -7px 0 -.7px rgba(23,25,28,.16), 0 0 6px 1px rgba(23,25,28,.25); } /* ========================================================================== Ajuste 4: partículas del progreso con movimiento propio Cada punto sale de la cabeza de la barra, se dispersa hacia atrás, sube/baja distinto, se encoge y se desvanece. ========================================================================== */ @keyframes rv-bar-head { from { left: 0; } to { left: 100%; } } @keyframes rv-bar-dots { 0% { background-color: rgba(23,25,28,.85); box-shadow: 0 0 0 0 rgba(23,25,28,.8), 0 0 0 0 rgba(23,25,28,.8), 0 0 0 0 rgba(23,25,28,.8), 0 0 0 0 rgba(23,25,28,.8), 0 0 0 0 rgba(23,25,28,.8), 0 0 0 0 rgba(23,25,28,.8), 0 0 0 0 rgba(23,25,28,.8), 0 0 5px 1px rgba(23,25,28,.28); } 35% { background-color: rgba(23,25,28,.8); box-shadow: -8px -6px 0 0 rgba(23,25,28,.8), -13px 5px 0 0 rgba(23,25,28,.7), -19px -9px 0 -.3px rgba(23,25,28,.62), -26px 8px 0 -.3px rgba(23,25,28,.52), -33px -5px 0 -.4px rgba(23,25,28,.42), -41px 7px 0 -.5px rgba(23,25,28,.32), -49px -8px 0 -.6px rgba(23,25,28,.22), 0 0 6px 1px rgba(23,25,28,.22); } 100% { background-color: rgba(23,25,28,0); box-shadow: -20px -14px 0 -1px rgba(23,25,28,0), -32px 12px 0 -1px rgba(23,25,28,0), -46px -17px 0 -1px rgba(23,25,28,0), -60px 15px 0 -1px rgba(23,25,28,0), -74px -10px 0 -1px rgba(23,25,28,0), -88px 13px 0 -1px rgba(23,25,28,0), -102px -15px 0 -1px rgba(23,25,28,0), 0 0 0 0 rgba(23,25,28,0); } } html body[data-page="reservas"] .rv-progress-step.active::after { animation: rv-bar-head .9s cubic-bezier(.16,1,.3,1) both, rv-bar-dots 1.25s cubic-bezier(.2,.6,.3,1) both; } /* ========================================================================== Selector de barbero: label arriba + control tipo "select card" Solo CSS. Ícono tijera+peine va dentro del select (background-image), el ícono genérico de persona del HTML se oculta. ========================================================================== */ html body[data-page="reservas"] .rv-barber-picker { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 22px; } html body[data-page="reservas"] .rv-barber-picker label { display: block; color: var(--rv-muted); font: 500 14px/1.2 Inter, sans-serif; letter-spacing: 0; text-transform: none; } /* oculta el ícono de persona (el nuevo va dentro del select) */ html body[data-page="reservas"] .rv-barber-picker-icon { display: none; } html body[data-page="reservas"] .rv-barber-picker select { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 54px; padding: 0 44px 0 60px; border: 1px solid var(--rv-border); border-radius: 12px; background-color: #fafafa; background-repeat: no-repeat, no-repeat; background-position: left 14px center, right 16px center; background-size: 34px 34px, 16px 16px; background-image: url("data:image/webp;base64,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"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); color: var(--rv-ink); font: 700 17px Inter, sans-serif; letter-spacing: 0; text-transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(15,23,42,.04), 0 6px 16px -8px rgba(15,23,42,.10); cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease; } html body[data-page="reservas"] .rv-barber-picker select:hover, html body[data-page="reservas"] .rv-barber-picker select:focus-visible { border-color: var(--rv-ink); outline: none; } @media (max-width: 640px) { html body[data-page="reservas"] .rv-barber-picker select { height: 52px; font-size: 16px; } /* 16px evita zoom en iOS */ } /* -------------------------------------------------------------------------- Barbero: tarjetas con foto (solo presentación). El