/*
 * La página pública de reserva de un salón (/reservar/{salón}). Es lo que abren las clientas, casi siempre en el móvil:
 * pensada para 380 px, con dedos grandes (44 px como mínimo) y sin nada de fuera (tipos de letra del sistema).
 *
 * También la usan, con su cabecera sencilla, la página de valoración (/valorar) y la del programa del cajón (/cajon). Lo
 * propio de la reserva (cabecera fija con los pasos y el buscador, barra pegada abajo, a todo el ancho en el móvil) va bajo
 * `.ob-booking` / `.ob-head.is-app`, para no cambiarles nada a ellas.
 */
.ob {
    --cobre: #A8614E;
    --cobre-hondo: #8A4E3A;
    --cobre-velo: #F7ECE6;
    --tinta: #241C19;
    --tinta-suave: #6B5D57;
    --apagado: #B9AEA8;
    --papel: #F6F3F0;
    --papel-alto: #FFFFFF;
    --linea: #E3DBD5;
    --verde: #2E7D57;
    --rojo: #A8402F;
    --rojo-velo: #FBEAE6;
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-text-size-adjust: 100%;
}

.ob *, .ob *::before, .ob *::after { box-sizing: border-box; }
/* Lo que el JS esconde con `hidden` queda escondido aunque su clase le ponga display (en "Ver mi cita", tras anular seguían
   a la vista "Cambiar de hora" y "Anular la cita"). Una sola regla para toda la página, en vez de una por clase. */
.ob [hidden] { display: none !important; }
/* Los enlaces de texto, en el cobre de la página (no en el azul del navegador); los botones ya llevan su color. */
.ob a:not(.ob-btn) { color: var(--cobre-hondo); }

/* Cabecera sencilla (valoración, cajón). */
.ob-head { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--papel-alto); border-bottom: 1px solid var(--linea); }
.ob-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; flex: none; }
.ob-head-text { min-width: 0; }
.ob-salon { margin: 0; font-weight: 700; font-size: 1.05rem; overflow-wrap: break-word; }
.ob-tag { margin: 0; color: var(--tinta-suave); font-size: .9rem; }

/* Cabecera de la reserva: fija arriba en todos los pasos. El salón a la izquierda, Molvox a la derecha y, debajo, los pasos y
   (en Servicio) el buscador con las familias. */
.ob-head.is-app { position: sticky; top: 0; z-index: 30; display: block; padding: 0; box-shadow: 0 2px 10px rgba(36, 28, 25, .06); }
.ob-brand { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; padding: 8px 16px 6px; }
.ob-head.is-app .ob-logo { width: 40px; height: 40px; }
.ob-logo.is-initial { display: grid; place-items: center; background: var(--cobre); color: #fff; font-weight: 800; font-size: 1.3rem; }
.ob-head.is-app .ob-head-text { flex: 1; }
.ob-head.is-app .ob-salon { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
.ob-head.is-app .ob-tag { font-size: .84rem; line-height: 1.3; }
.ob a.ob-by { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--tinta-suave); font-size: .66rem; line-height: 1; text-decoration: none; }
.ob-by img { display: block; width: 88px; height: auto; }
.ob-by:focus-visible { outline: 3px solid rgba(168, 97, 78, .5); outline-offset: 2px; border-radius: 6px; }

/* Los pasos: los ya hechos se pueden tocar para volver. */
.ob-steps { list-style: none; display: flex; gap: 4px; max-width: 560px; margin: 0 auto; padding: 0 12px; }
.ob-steps li { flex: 1; min-width: 0; }
.ob-step { display: block; width: 100%; min-height: 34px; padding: 6px 2px 5px; border: 0; border-bottom: 3px solid var(--linea); background: none; font: inherit; font-size: .76rem; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.ob-step:disabled { color: var(--tinta-suave); -webkit-text-fill-color: currentColor; opacity: 1; }
.ob-steps li.is-current .ob-step { color: var(--cobre-hondo); border-bottom-color: var(--cobre); font-weight: 700; }
.ob-steps li.is-done .ob-step { color: var(--tinta); border-bottom-color: var(--cobre); cursor: pointer; }
.ob-steps li.is-done .ob-step:hover { color: var(--cobre-hondo); }
.ob-step:focus-visible { outline: 3px solid rgba(168, 97, 78, .5); outline-offset: -3px; }

/* Buscador y familias (solo en Servicio). */
.ob-tools { display: grid; gap: 6px; max-width: 560px; margin: 0 auto; padding: 8px 16px; }
.ob-search { position: relative; display: flex; align-items: center; }
.ob-search-icon { position: absolute; left: 12px; color: var(--tinta-suave); pointer-events: none; }
/* 16 px de letra: con menos, Safari del iPhone acerca la página al tocar el campo. */
.ob-search-input { width: 100%; min-height: 44px; padding: 8px 44px 8px 42px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--papel); font: inherit; font-size: 16px; color: var(--tinta); -webkit-appearance: none; appearance: none; }
.ob-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ob-search-input::placeholder { color: var(--tinta-suave); opacity: 1; }
.ob-search-input:focus { outline: 3px solid rgba(168, 97, 78, .35); border-color: var(--cobre); background: var(--papel-alto); }
.ob-search-clear { position: absolute; right: 2px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font: inherit; font-size: 1.5rem; line-height: 1; color: var(--tinta-suave); cursor: pointer; }
.ob-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; }
.ob-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 5px 14px; border: 1.5px solid var(--linea); border-radius: 999px; background: var(--papel-alto); font: inherit; font-size: .9rem; font-weight: 600; color: var(--tinta); white-space: nowrap; cursor: pointer; }
.ob-chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.ob-chip.is-picked { border-color: var(--cobre); color: var(--cobre-hondo); }
.ob-chip.is-picked[aria-pressed="true"] { background: var(--cobre); border-color: var(--cobre); color: #fff; }
.ob-chip-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cobre); color: #fff; font-size: .74rem; font-weight: 700; }
.ob-chip[aria-pressed="true"] .ob-chip-count { background: #fff; color: var(--cobre-hondo); }
.ob-chip:focus-visible { outline: 3px solid rgba(168, 97, 78, .5); outline-offset: 2px; }

/* Esperando al servidor: una barra fina que se mueve bajo la cabecera. */
.ob-loading { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; overflow: hidden; background: var(--cobre-velo); }
.ob-loading::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--cobre); animation: ob-progress 1s ease-in-out infinite; }
@keyframes ob-progress { from { left: -40%; } to { left: 100%; } }

.ob-main { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 16px 96px; }

.ob-card { background: var(--papel-alto); border: 1px solid var(--linea); border-radius: 16px; padding: 18px 16px; box-shadow: 0 1px 2px rgba(36, 28, 25, .06); }
.ob-card h1, .ob-card h2 { margin: 0 0 4px; font-size: 1.3rem; line-height: 1.25; }
.ob-help { margin: 0 0 12px; color: var(--tinta-suave); font-size: .92rem; }

/* En el móvil la reserva va a todo el ancho, como una app: la tarjeta sin bordes laterales y la barra de abajo de lado a lado. */
.ob-booking .ob-main { padding: 0 0 24px; }
.ob-booking .ob-card { border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
.ob-booking .ob-main > .ob-notice, .ob-booking .ob-app > .ob-notice { margin: 12px 16px 0; }
@media (min-width: 600px) {
    .ob-booking .ob-main { padding: 20px 16px 48px; }
    .ob-booking .ob-card { border-width: 1px; border-radius: 16px; box-shadow: 0 1px 2px rgba(36, 28, 25, .06); }
    .ob-booking .ob-main > .ob-notice, .ob-booking .ob-app > .ob-notice { margin: 0 0 12px; }
}

.ob-notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--cobre-velo); border: 1px solid var(--linea); font-size: .94rem; }
.ob-notice.is-warn { background: var(--rojo-velo); border-color: #ecc9c1; }

.ob-services { display: grid; gap: 8px; margin-top: 10px; }
.ob-category { margin: 12px 0 2px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); font-weight: 700; }
.ob-service { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--papel-alto); cursor: pointer; }
.ob-service:has(input:checked) { border-color: var(--cobre); background: var(--cobre-velo); }
.ob-service input { width: 22px; height: 22px; accent-color: var(--cobre); flex: none; }
.ob-service-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-service-name { font-weight: 600; overflow-wrap: break-word; }
.ob-service-meta { color: var(--tinta-suave); font-size: .86rem; }
.ob-service-price { font-weight: 600; white-space: nowrap; }

.ob-pros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ob-pro { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--papel-alto); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ob-pro[aria-checked="true"] { border-color: var(--cobre); background: var(--cobre-velo); }
.ob-pro-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cobre); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.ob-pro.is-any .ob-pro-avatar { background: var(--tinta-suave); }
/* Un nombre no se parte a media palabra ("Cualquier/a"): si una sola palabra no cabe, se corta con guion por sílabas. */
.ob-pro-name { min-width: 0; font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.ob-pro:only-child, .ob-pro.is-any { grid-column: 1 / -1; }
/* ¿Solo con ella o le vale otra? Debajo de las profesionales, con una elegida. */
.ob-wish { margin-top: 16px; }
.ob-wish[hidden] { display: none; }
.ob-wish-title { margin: 0 0 8px; font-weight: 700; }
.ob-wish-options { display: grid; gap: 8px; }
.ob-wish-option { display: grid; gap: 2px; min-height: 56px; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--papel-alto); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ob-wish-option span { color: var(--tinta-suave); font-size: 14px; }
.ob-wish-option[aria-checked="true"] { border-color: var(--cobre); background: var(--cobre-velo); }
.ob-wish-option:focus-visible { outline: 3px solid rgba(168, 97, 78, .5); outline-offset: 2px; }
@media (max-width: 420px) {
    .ob-pro { gap: 8px; padding: 8px; }
    .ob-pro-avatar { width: 32px; height: 32px; }
}

/* Tu pelo: "¿Has venido antes?" (si sí, su móvil; si su ficha tiene talla, se usa esa) y, si no, cómo de largo lo tiene, con un
   dibujo de cada largo en vez de las letras S, M, L… Lo que se le reserva, debajo. */
.ob-size-ask { margin-top: 4px; }
.ob-size-phone { margin: 12px 0 0; }
.ob-notice.is-ok { margin: 4px 0 0; }
.ob-notice.is-ok .ob-link-btn { margin: 0; padding: 8px 0 0; min-height: 40px; }
.ob-link-btn { display: block; margin: 6px 0 0; padding: 10px 4px; min-height: 44px; background: none; border: 0; color: var(--cobre-hondo); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ob-size-title { margin: 16px 0 8px; font-weight: 700; }
.ob-size-tip { margin: 8px 0 0; }
.ob-sizes { display: grid; gap: 8px; }
.ob-size { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 0 12px; min-height: 64px; padding: 8px 12px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--papel-alto); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ob-size-pic { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: var(--papel); font-size: 1.3rem; font-weight: 700; color: var(--tinta-suave); overflow: hidden; }
.ob-size-pic svg { width: 40px; height: 44px; margin-top: 4px; }
.ob-hair { fill: var(--cobre-hondo); }
.ob-hair-face { fill: #EBCDBA; }
.ob-hair-body { fill: var(--apagado); }
.ob-size strong { font-weight: 600; }
.ob-size span:not(.ob-size-pic) { color: var(--tinta-suave); font-size: .9rem; }
.ob-size[aria-checked="true"] { border-color: var(--cobre); background: var(--cobre-velo); }
.ob-size[aria-checked="true"] .ob-size-pic { background: var(--papel-alto); box-shadow: inset 0 0 0 2px var(--cobre); }
.ob-size:focus-visible { outline: 3px solid rgba(168, 97, 78, .5); outline-offset: 2px; }
.ob-size-result { display: grid; gap: 4px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--papel); list-style: none; font-size: .94rem; }
.ob-size-result li { display: flex; justify-content: space-between; gap: 10px; }
.ob-size-result li span { color: var(--tinta-suave); white-space: nowrap; }
.ob-notice p { margin: 0; }

.ob-state { margin: 10px 0; padding: 14px; border-radius: 12px; background: var(--papel); color: var(--tinta-suave); }
.ob-state.is-loading { display: flex; align-items: center; gap: 10px; }
.ob-state.is-empty { text-align: center; }
.ob-state.is-empty p { margin: 4px 0; }
.ob-state.is-empty .ob-btn { margin-top: 8px; }
.ob-state.is-error { background: var(--rojo-velo); color: var(--rojo); }
.ob-state.is-error p { margin: 0 0 8px; }
.ob-spinner { flex: none; width: 20px; height: 20px; border: 2.5px solid var(--linea); border-top-color: var(--cobre); border-radius: 50%; animation: ob-spin .8s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }

/* Día y hora. Arriba lo que se reserva; luego el mes con "Días | Mes"; la tira o el calendario; y las horas por franjas. */
.ob-picked { margin: 2px 0 12px; color: var(--tinta-suave); font-size: .92rem; }
.ob-picked strong { color: var(--tinta); font-weight: 600; }
/* Arriba "Días | Mes" a todo el ancho; debajo el mes (en la vista de mes, entre sus flechas). */
.ob-when-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; margin: 4px 0 8px; }
.ob-month { flex: 1; min-width: 0; margin: 0; font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-when-head.is-month .ob-month { text-align: center; }
.ob-nav { flex: none; width: 40px; height: 40px; border: 1.5px solid var(--linea); border-radius: 50%; background: var(--papel-alto); font: inherit; font-size: 1.4rem; line-height: 1; color: var(--tinta); cursor: pointer; }
.ob-nav:disabled { opacity: .35; cursor: not-allowed; }
.ob-seg { order: -1; flex: 1 0 100%; display: flex; padding: 3px; border-radius: 999px; background: var(--papel); }
.ob-seg button { flex: 1; min-height: 38px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: var(--tinta-suave); cursor: pointer; }
.ob-seg button[aria-pressed="true"] { background: var(--papel-alto); color: var(--tinta); box-shadow: 0 1px 3px rgba(36, 28, 25, .18); }
.ob-nav:focus-visible, .ob-seg button:focus-visible, .ob-cal-day:focus-visible { outline: 3px solid rgba(168, 97, 78, .5); outline-offset: 2px; }

.ob-days { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 10px; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; }
.ob-day { flex: none; width: 58px; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--papel-alto); font: inherit; color: inherit; cursor: pointer; }
.ob-day small { font-size: .72rem; text-transform: uppercase; color: var(--tinta-suave); }
.ob-day strong { font-size: 1.2rem; line-height: 1.1; }
.ob-day i, .ob-cal-day i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
.ob-day:disabled { background: var(--papel); border-style: dashed; color: var(--apagado); cursor: default; }
.ob-day:disabled small { color: var(--apagado); }
.ob-day[aria-checked="true"] { border-color: var(--cobre); background: var(--cobre); color: #fff; }
.ob-day[aria-checked="true"] small { color: #fff; }
.ob-day[aria-checked="true"] i, .ob-cal-day[aria-checked="true"] i { background: #fff; }
.ob-day.is-more { width: auto; padding: 0 14px; border-style: dashed; color: var(--cobre-hondo); font-weight: 600; }
.ob-day.is-skeleton { border-color: transparent; background: linear-gradient(90deg, var(--papel) 0%, #EDE7E2 50%, var(--papel) 100%) 0 0 / 200% 100%; animation: ob-shine 1.2s ease-in-out infinite; cursor: default; }
@keyframes ob-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.ob-cal { margin: 0 0 6px; }
.ob-cal-week, .ob-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ob-cal-week { margin-bottom: 4px; text-align: center; font-size: .74rem; font-weight: 700; color: var(--tinta-suave); }
.ob-cal-grid { transition: opacity .15s; }
.ob-cal.is-loading .ob-cal-grid { opacity: .35; pointer-events: none; }
.ob-cal-day { aspect-ratio: 1 / 1; min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 10px; background: var(--cobre-velo); font: inherit; font-weight: 700; color: var(--tinta); cursor: pointer; }
.ob-cal-day:disabled { background: none; font-weight: 400; color: var(--apagado); cursor: default; }
.ob-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--tinta-suave); }
.ob-cal-day[aria-checked="true"] { background: var(--cobre); color: #fff; }

.ob-day-label { margin: 6px 0; font-weight: 600; }
/* La fecha llega en minúsculas ("martes 6 de octubre"): solo la primera letra en mayúscula, no cada palabra. */
.ob-day-label::first-letter, .ob-summary::first-letter, .ob-done-when::first-letter { text-transform: uppercase; }
.ob-slots { display: grid; }
.ob-time-group { margin: 10px 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); font-weight: 700; }
.ob-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ob-time { min-height: 44px; border: 1.5px solid var(--linea); border-radius: 10px; background: var(--papel-alto); font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.ob-time[aria-checked="true"], .ob-time:active { border-color: var(--cobre); background: var(--cobre); color: #fff; }

.ob-summary { margin: 6px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--cobre-velo); font-size: .94rem; }
.ob-summary strong { font-size: 1rem; }
.ob-form { display: grid; gap: 12px; }
.ob-field { display: grid; gap: 4px; font-weight: 600; font-size: .94rem; }
.ob-field small { font-weight: 400; color: var(--tinta-suave); }
.ob-field input, .ob-field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 12px; font: inherit; font-weight: 400; color: var(--tinta); background: var(--papel-alto); }
.ob-field textarea { min-height: 72px; resize: vertical; }
.ob-field input:focus, .ob-field textarea:focus { outline: 3px solid rgba(168, 97, 78, .35); border-color: var(--cobre); }
.ob-field.has-error input { border-color: var(--rojo); }
.ob-field-error { color: var(--rojo); font-weight: 600; font-size: .86rem; }
.ob-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ob-privacy { margin: 0; color: var(--tinta-suave); font-size: .84rem; }
/* Código al móvil: el navegador ya recordado, la pista de por dónde le llegará y la casilla del código, grande y espaciada. */
.ob-trusted { padding: 10px 14px; border-radius: 12px; background: var(--cobre-velo); border: 1px solid var(--linea); font-size: .94rem; }
.ob-trusted p { margin: 0; }
.ob-trusted .ob-link-btn { margin: 0; padding: 8px 0 0; min-height: 40px; }
.ob-field [data-ob-code-hint] { font-size: .86rem; }
.ob-code-input { font-size: 1.6rem !important; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.ob-code-more { display: grid; gap: 0; margin-top: 6px; }
.ob-code-more .ob-link-btn { margin: 0; text-align: left; }
.ob-code-more .ob-help { margin: 4px 0 0; }
.ob-link-btn[disabled] { color: var(--tinta-suave); text-decoration: none; opacity: .6; cursor: not-allowed; }
.ob-card > .ob-privacy { margin-top: 14px; }
.ob-form-error { padding: 12px 14px; border-radius: 12px; background: var(--rojo-velo); color: var(--rojo); font-weight: 600; }

.ob-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.ob-bar-info { margin: 0; color: var(--tinta-suave); font-size: .9rem; }
/* En la reserva, la barra de cada paso (lo elegido, Atrás y el botón para seguir) se queda pegada abajo mientras se baja por
   la lista, de lado a lado de la tarjeta. Si el paso es corto, va justo debajo. */
.ob-booking .ob-bar { position: sticky; bottom: 0; z-index: 10; flex-wrap: wrap; gap: 8px 10px; margin: 16px -16px -18px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linea); box-shadow: 0 -6px 16px rgba(36, 28, 25, .07); }
.ob-booking .ob-bar-info { flex: 1 1 90px; min-width: 0; font-size: .86rem; line-height: 1.3; }
.ob-booking .ob-bar-info strong { display: block; color: var(--tinta); font-size: .98rem; }
.ob-booking .ob-bar .ob-btn:last-child { margin-left: auto; }
.ob-booking .ob-bar .ob-btn:not(.is-ghost) { min-width: 128px; }
.ob-booking .ob-bar .ob-btn.is-ghost { padding: 10px 14px; }
@media (min-width: 600px) {
    .ob-booking .ob-bar { border-radius: 0 0 16px 16px; }
}
.ob-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.ob-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px; border: 0; border-radius: 12px; background: var(--cobre); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.ob-btn:hover { background: var(--cobre-hondo); }
.ob-btn:focus-visible, .ob-pro:focus-visible, .ob-day:focus-visible, .ob-time:focus-visible, .ob-service:focus-within { outline: 3px solid rgba(168, 97, 78, .5); outline-offset: 2px; }
.ob-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ob-btn.is-ghost { background: transparent; color: var(--cobre-hondo); border: 1.5px solid var(--linea); }
.ob-btn.is-danger { background: var(--rojo); }
.ob-btn.is-loading, .ob-link-btn.is-loading { pointer-events: none; }
.ob-btn.is-loading::before, .ob-link-btn.is-loading::before { content: ""; flex: none; width: 18px; height: 18px; margin-right: 10px; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: ob-spin .8s linear infinite; }
.ob-btn.is-loading { background: var(--cobre-hondo); }
.ob-btn.is-ghost.is-loading { background: var(--cobre-velo); }
.ob-btn.is-ghost.is-loading::before, .ob-link-btn.is-loading::before { border-color: var(--linea); border-top-color: var(--cobre); }
.ob-link-btn.is-loading { display: inline-flex; align-items: center; text-decoration: none; }

/* Que se note el toque: todo lo que se pulsa se hunde un poco y oscurece mientras el dedo está encima (en el móvil no hay
   "hover"), sin el recuadro gris del navegador. */
.ob-btn, .ob-link-btn, .ob-service, .ob-pro, .ob-size, .ob-wish-option, .ob-day, .ob-cal-day, .ob-time, .ob-chip, .ob-nav, .ob-seg button, .ob-step, .ob-search-clear {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform .08s ease-out, background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
.ob-btn:not([disabled]):active, .ob-service:active, .ob-pro:active, .ob-size:active, .ob-wish-option:active, .ob-day:not(:disabled):active,
.ob-cal-day:not(:disabled):active, .ob-time:active, .ob-chip:active, .ob-nav:not(:disabled):active, .ob-seg button:active { transform: scale(.96); }
.ob-btn:not([disabled]):active { background: var(--cobre-hondo); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18); }
.ob-btn.is-ghost:not([disabled]):active { background: var(--cobre-velo); border-color: var(--cobre); }
.ob-service:active, .ob-pro:active, .ob-size:active, .ob-wish-option:active, .ob-chip:active { border-color: var(--cobre); background: var(--cobre-velo); }
.ob-day:not(:disabled):active, .ob-cal-day:not(:disabled):active { border-color: var(--cobre); }
.ob-link-btn:not([disabled]):active, .ob-steps li.is-done .ob-step:active { color: var(--tinta); opacity: .7; }
@media (prefers-reduced-motion: reduce) {
    .ob-btn:not([disabled]):active, .ob-service:active, .ob-pro:active, .ob-size:active, .ob-wish-option:active, .ob-day:not(:disabled):active,
    .ob-cal-day:not(:disabled):active, .ob-time:active, .ob-chip:active, .ob-nav:not(:disabled):active, .ob-seg button:active { transform: none; }
}

.ob-done { text-align: center; }
.ob-check { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 2rem; display: grid; place-items: center; }
.ob-done-when { margin: 6px 0; font-size: 1.15rem; font-weight: 700; }
.ob-done .ob-btn { margin-top: 8px; }

.ob-facts { margin: 12px 0; display: grid; gap: 8px; }
.ob-facts div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.ob-facts dt { color: var(--tinta-suave); font-size: .9rem; }
.ob-facts dd { margin: 0; font-weight: 600; text-transform: none; }
.ob-confirm { margin-top: 14px; padding: 14px; border: 1.5px solid var(--rojo); border-radius: 12px; background: var(--rojo-velo); }
.ob-confirm p { margin: 0; }

.ob-closed { text-align: center; }
.ob-foot { padding: 18px 16px 28px; text-align: center; font-size: .82rem; color: var(--tinta-suave); }
.ob-foot p { margin: 0; }

@media (min-width: 480px) {
    .ob-times { grid-template-columns: repeat(5, 1fr); }
    /* Con más ancho, las casillas del mes no crecen en alto: el calendario cabe sin bajar. */
    .ob-cal-day { aspect-ratio: auto; min-height: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
    .ob-card { animation: ob-in .18s ease-out; }
    @keyframes ob-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* Sin movimiento: la barra de "cargando" quieta y a todo el ancho, y la rueda girando despacio. */
@media (prefers-reduced-motion: reduce) {
    .ob-loading::before { left: 0; width: 100%; opacity: .5; animation: none; }
    .ob-spinner { animation-duration: 2.4s; }
    .ob-day.is-skeleton { animation: none; }
}

/* /cajon: descargar el programa del cajón automático en el PC del salón. */
.ob-field .ob-code-input { font-family: ui-monospace, Menlo, monospace; font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; }
.ob-steps-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: .94rem; }

/* La portada del negocio al pie de la página de reservar (horario, servicios y precios): para quien llega desde Google. Discreta,
   sin tarjeta, para no competir con la reserva. */
.ob-about { margin: 28px 0 0; padding: 18px 16px 0; border-top: 1px solid var(--linea); color: var(--tinta-suave); font-size: .92rem; }
@media (min-width: 600px) { .ob-about { padding: 18px 4px 0; } }
.ob-about[hidden] { display: none; }
.ob-about h2 { margin: 0; font-size: 1.05rem; color: var(--tinta); }
.ob-about h3 { margin: 16px 0 6px; font-size: .95rem; color: var(--tinta); }
.ob-about-kind { margin: 2px 0 0; }
.ob-about-hours { margin: 0; }
.ob-about-hours div, .ob-about-services li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.ob-about-hours dt { font-weight: 600; }
.ob-about-hours dd { margin: 0; text-align: right; }
.ob-about-services { list-style: none; margin: 0; padding: 0; }
.ob-about-services li + li { border-top: 1px dashed var(--linea); }
.ob-about-services li > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ob-about-contact { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ob-about-contact a { color: var(--cobre-hondo); }
.ob-about-rating { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ob-about-rating strong { font-size: 1.3rem; color: var(--tinta); }
.ob-about-stars { color: var(--cobre); letter-spacing: 1px; }
.ob-about-reviews { list-style: none; margin: 8px 0 0; padding: 0; }
.ob-about-reviews li { padding: 8px 0; }
.ob-about-reviews li + li { border-top: 1px dashed var(--linea); }
.ob-about-reviews p { margin: 0 0 2px; color: var(--tinta); }

/* ---- La página de la cita (manage.html.twig, rehecha el 26-oct): el estado arriba, la cita como un billete con su hoja de
   calendario, el negocio con «Cómo llegar» y «Llamar», y los botones a todo el ancho, uno debajo de otro (con el pulgar). */
.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; }
.ob-appt { padding: 20px 18px 22px; }
.ob-appt h1 { margin: 10px 0 6px; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.01em; }
.ob-lead { margin: 0 0 4px; color: var(--tinta-suave); font-size: 1rem; line-height: 1.45; }
.ob-lead strong { color: var(--tinta); }

.ob-status { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.ob-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ob-status.is-ok { background: #E6F2EB; color: var(--verde); }
.ob-status.is-warn { background: var(--rojo-velo); color: var(--rojo); }
.ob-status.is-off { background: #EFEAE7; color: var(--tinta-suave); }
.ob-status.is-past { background: #EFEAE7; color: var(--tinta-suave); }

.ob-appt-card { margin-top: 18px; border: 1px solid var(--linea); border-radius: 16px; background: var(--papel-alto); box-shadow: 0 2px 10px rgba(36, 28, 25, .06); overflow: hidden; }
.ob-ticket { display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: center; padding: 16px; }
.ob-ticket-date { display: grid; justify-items: center; overflow: hidden; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel-alto); text-transform: uppercase; }
.ob-ticket-weekday { width: 100%; padding: 3px 0; background: var(--cobre); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-align: center; }
.ob-ticket-day { padding: 2px 0 0; font-size: 1.85rem; line-height: 1.1; font-weight: 800; color: var(--tinta); }
.ob-ticket-month { padding: 0 0 5px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--tinta-suave); }
.ob-ticket-body p { margin: 0; }
.ob-ticket-time { font-size: 1.7rem; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.ob-ticket-day-long { margin-top: 2px !important; color: var(--tinta-suave); font-size: .95rem; }
.ob-ticket-day-long::first-letter { text-transform: uppercase; }
.ob-ticket-what { margin-top: 8px !important; font-weight: 700; line-height: 1.3; }
.ob-ticket-who { color: var(--tinta-suave); font-size: .95rem; }

.ob-place { padding: 14px 16px 16px; border-top: 1.5px dashed var(--linea); }
.ob-place p { margin: 0; }
.ob-place-name { font-weight: 700; }
.ob-place-address { color: var(--tinta-suave); font-size: .93rem; }
.ob-place-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ob-chip-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--linea); border-radius: 999px; color: var(--cobre-hondo); font-size: .92rem; font-weight: 700; text-decoration: none; }
.ob-chip-link:active { background: var(--cobre-velo); }

/* Anulada: la cita se ve apagada y la hora tachada, para que no se confunda con una que sigue en pie. */
.ob-appt-card.is-off { box-shadow: none; background: #FBF9F8; }
.ob-appt-card.is-off .ob-ticket-weekday { background: var(--apagado); }
.ob-appt-card.is-off .ob-ticket-day, .ob-appt-card.is-off .ob-ticket-time, .ob-appt-card.is-off .ob-ticket-what { color: var(--tinta-suave); }
.ob-appt-card.is-off .ob-ticket-time { text-decoration: line-through; text-decoration-thickness: 2px; }

.ob-stack { display: grid; gap: 10px; margin-top: 20px; }
.ob-stack .ob-btn { width: 100%; min-height: 54px; font-size: 1.02rem; }
.ob-stack .ob-notice { margin: 0; }
.ob-btn.is-danger-ghost { background: transparent; color: var(--rojo); border: 1.5px solid #e2b8ae; }
.ob-btn.is-danger-ghost:hover { background: var(--rojo-velo); }
.ob-btn.is-danger-ghost:not([disabled]):active { background: var(--rojo-velo); border-color: var(--rojo); box-shadow: none; }
.ob-btn.is-danger:hover { background: #8f3426; }
.ob-alt { margin: 6px 0 0; color: var(--tinta-suave); font-size: .93rem; text-align: center; }
.ob-alt a { color: var(--cobre-hondo); font-weight: 700; }
.ob-appt-card.is-off .ob-place-links { display: none; }

/* ---- Cambiar una cita (page.html.twig con ?cambia=, 26-oct): arriba la cita de ahora como un billete pequeño, con «Cambiando
   esta cita»; al confirmar, «Antes» tachado y «Ahora» resaltado; al acabar, el billete de la nueva. */
.ob-change { margin: 0 0 14px; padding: 14px 14px 12px; border: 1.5px solid #ecc9c1; border-radius: 16px; background: var(--papel-alto); }
.ob-change .ob-appt-card { margin-top: 10px; }
.ob-change-help { margin: 10px 2px 0; color: var(--tinta-suave); font-size: .93rem; line-height: 1.45; }
.ob-change-help a { display: inline-block; margin-left: 4px; font-weight: 700; }
.ob-appt-card.is-compact { box-shadow: none; }
.ob-appt-card.is-compact .ob-ticket { grid-template-columns: 56px 1fr; gap: 14px; padding: 12px; }
.ob-appt-card.is-compact .ob-ticket-day { font-size: 1.5rem; }
.ob-appt-card.is-compact .ob-ticket-time { font-size: 1.35rem; }
.ob-appt-card.is-compact .ob-ticket-what { margin-top: 4px !important; }

.ob-swap { display: grid; margin: 10px 0 12px; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.ob-swap-row { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 8px; margin: 0; padding: 12px 14px; }
.ob-swap-row + .ob-swap-row { border-top: 1px solid var(--linea); }
.ob-swap-label { color: var(--tinta-suave); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ob-swap-when::first-letter { text-transform: uppercase; }
.ob-swap-row.is-old .ob-swap-when { color: var(--tinta-suave); text-decoration: line-through; }
.ob-swap-row.is-new { background: #E6F2EB; }
.ob-swap-row.is-new .ob-swap-label { color: var(--verde); }
.ob-swap-row.is-new .ob-swap-when { font-weight: 800; }

.ob-done .ob-appt-card { margin: 14px 0 6px; text-align: left; }
.ob-done .ob-lead { margin-top: 8px; }
.ob-done .ob-btn { width: 100%; min-height: 54px; }

/* La señal (online_booking/deposit.html.twig): lo que se paga, bien grande, y sus reglas en cuatro líneas. */
.ob-deposit-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 14px 16px; border-radius: 14px; background: var(--cobre-velo); border: 1px solid var(--linea); }
.ob-deposit-amount span { font-weight: 650; }
.ob-deposit-amount strong { font-size: 1.6rem; line-height: 1; }
.ob-deposit-rules { margin: 0 0 16px; padding-left: 20px; color: var(--tinta-suave); font-size: .94rem; display: grid; gap: 4px; }
.ob-deposit form { margin: 0; }
.ob-deposit form .ob-btn { width: 100%; }
.ob-deposit-note { margin-top: 12px; }