/* Unob Reservaciones — customer-facing wizard.
   Brand tokens mirror admin/css/admin-style.css and are pulled directly from
   unobyrealmadrid.com's actual site (navy #0c0c2c header, #00219e royal-blue
   accent, #f2aa00 gold CTA buttons), scoped to .unob-reserva-root so they
   never leak into the surrounding theme. */

/* Titling Gothic FB (Normal/Medium cut) is the same display font family
   unobyrealmadrid.com uses for headings and buttons, self-hosted here under
   a commercial license so the wizard doesn't depend on another domain.
   font-display: swap avoids invisible text while it loads; the system font
   stack in each rule below is the fallback if this ever fails to load. */
@font-face {
    font-family: 'Titling';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/TitlingGothicFBNor-Med.woff2') format('woff2');
}

/* El tema (Hello Elementor) trae en su reset.css una regla genérica
   "button:focus, button:hover { background-color: rgb(204, 51, 102); color:
   #fff; }" (un rosa/magenta de "sensible default") que aplica a CUALQUIER
   <button> del sitio. Nuestros botones con su propio :hover/:focus ya la
   pisan por especificidad (.unob-btn-primary, .unob-area-card, etc.), pero
   cualquiera que NO declare su propio background en :hover/:focus - como
   .unob-select-trigger (el disparador de Fecha/Horario) - se queda
   mostrando ese rosa del tema en cuanto recibe focus. Se corrige abajo,
   directo en cada selector afectado, en vez de con una regla general aquí:
   una regla ".unob-reserva-root button:hover" de alcance amplio terminaría
   ganándole por especificidad a reglas más simples como ".unob-area-card:hover"
   (que no incluyen el tipo "button" en el selector) y las rompería. */

.unob-reserva-root {
    --unob-navy: #0c0c2c;
    --unob-navy-soft: #16183f;
    --unob-blue: #00219e;
    --unob-gold: #f2aa00;
    --unob-gold-soft: rgba(242, 170, 0, 0.18);
    --unob-cream: #faf8f4;
    --unob-ink: #1a1a1a;
    --unob-muted: #6b6b6b;
    --unob-line: #e2ddd3;
    color: var(--unob-ink);
}

/* The diagonal navy/blue striped bar under the header on unobyrealmadrid.com
   is the site's signature divider - echoed here under the stepper so the
   wizard reads as the same brand at a glance. */
.unob-wizard::before {
    content: '';
    display: block;
    height: 6px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        -45deg,
        var(--unob-navy),
        var(--unob-navy) 8px,
        var(--unob-blue) 8px,
        var(--unob-blue) 16px
    );
}

.unob-wizard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* The Mapa step is an interactive floor plan, not a form - at the same
   640px cap as every other step its seat markers end up cramped and hard
   to tap precisely, especially with several close together. Widen just
   this step so the map gets real room on desktop; the stepper/other steps
   keep the narrower, easier-to-read form width. */
.unob-wizard:has(.unob-step-mapa) {
    max-width: 960px;
}

/* Stepper — the one signature element: this flow really is a numbered
   sequence (Área → Fecha → Mapa → Datos → Pago), so numbering here encodes
   real information, not decoration. */
.unob-stepper {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.unob-stepper-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* A completed step's circle+label become a real button so the customer can
   jump straight back to it - same visual layout as the plain (non-clickable)
   version, just interactive. */
.unob-stepper-boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
}

.unob-stepper-boton:hover .unob-stepper-circulo {
    box-shadow: 0 0 0 3px var(--unob-gold-soft);
}

.unob-stepper-boton:focus,
.unob-stepper-boton:focus-visible {
    outline: 2px solid var(--unob-gold);
    outline-offset: 2px;
    border-radius: 8px;
    background: none;
}

.unob-stepper-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 19px);
    right: calc(-50% + 19px);
    height: 2px;
    background: var(--unob-line);
    z-index: 0;
}

.unob-stepper-item-hecho:not(:last-child)::after {
    background: var(--unob-gold);
}

.unob-stepper-circulo {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: #fff;
    border: 2px solid var(--unob-line);
    color: var(--unob-muted);
}

.unob-stepper-item-actual .unob-stepper-circulo {
    border-color: var(--unob-navy);
    background: var(--unob-navy);
    color: #fff;
}

.unob-stepper-item-hecho .unob-stepper-circulo {
    border-color: var(--unob-gold);
    background: var(--unob-gold);
    color: var(--unob-navy);
}

.unob-stepper-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--unob-muted);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.unob-stepper-item-actual .unob-stepper-label {
    color: var(--unob-navy);
}

/* Every step renders as a single quiet card. Wizard.jsx unmounts/remounts
   each step on navigation, so this animation plays automatically every
   time the customer moves forward or back - a light echo of the smooth
   question-to-question transitions in UNO's Typeform-style event form. */
@keyframes unob-paso-entrada {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.unob-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--unob-blue);
    border: none;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(10, 26, 47, 0.18);
    box-sizing: border-box;
    color: #fff;
    animation: unob-paso-entrada 0.35s ease;
}

.unob-step h2 {
    margin: 0;
    font-family: 'Titling', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: #fff;
}

.unob-step label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.85);
    margin: 4px 0 -6px;
}

/* Underlined, transparent fields directly on the blue panel - matching the
   cumpleaños/event form reference - instead of boxed white inputs. */
.unob-step input[type="text"],
.unob-step input[type="tel"],
.unob-step input[type="email"],
.unob-step input[type="number"],
.unob-select-trigger {
    font: inherit;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 2px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0;
    background: transparent;
    color: #fff;
}

.unob-step input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.unob-step input:focus,
.unob-select-trigger:focus,
.unob-select-trigger:focus-visible,
.unob-select-trigger:hover {
    outline: none;
    border-bottom-color: var(--unob-gold);
    /* Pisa el rosa del tema (button:focus, button:hover en reset.css de
       Hello Elementor) - :focus-visible solo no basta porque en varios
       navegadores no se activa con un click de mouse en un <button>, dejando
       pasar el :focus liso del tema; :hover hace falta aparte porque el tema
       lo dispara igual con solo pasar el mouse, sin necesidad de foco. Ver la
       nota larga más arriba, junto a .unob-reserva-root. */
    background: transparent;
}

/* Custom dropdown (UnobSelect) replacing native <select> - a native
   select's open option list is drawn by the OS/browser and can't be
   styled, so this renders our own trigger + list instead. */
.unob-select {
    position: relative;
}

.unob-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}

.unob-select-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.unob-select-placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.unob-select-flecha {
    flex: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.unob-select-lista {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--unob-blue);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.unob-select-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font: inherit;
    font-size: 15px;
    padding: 10px 12px;
    margin: 2px 0;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
}

.unob-select-opcion:hover,
.unob-select-opcion:focus {
    background: rgba(255, 255, 255, 0.2);
}

/* Una hora/duración ya sin mesas libres se muestra en el select en vez de
   desaparecer (ver StepFechaHora.jsx), para que el cliente no piense que
   ese horario no existe - solo se ve "apagada" y sin poder elegirse. */
.unob-select-opcion-llena {
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
}

.unob-select-opcion-llena:hover,
.unob-select-opcion-llena:focus {
    background: transparent;
}

/* The calendar panel is position:absolute (see .unob-calendario below) so it
   doesn't push the rest of the step's fields down - at ~350px tall it ends
   up floating over whatever's rendered right below Fecha (the Corporate Cup
   checkbox, Continuar, etc.), and since those keep their normal opacity
   they're still readable poking out around its edges. Reads as a confusing
   "double layer" rather than a clean dropdown. This dimming backdrop behind
   the panel (but above the rest of the step) fixes that without having to
   rework the dropdown into something that reserves layout space. */
.unob-calendario-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    /* High enough alpha that whatever's underneath (Corporate Cup checkbox,
       Continuar, etc.) stops being legible - a merely-dimmed 0.55 still let
       that text read through "ghosted", which looked just as broken as no
       backdrop at all, especially next to the much-narrower 280px calendar. */
    background: rgba(8, 8, 28, 0.92);
}

/* Custom calendar (UnobDatePicker) replacing native <input type="date"> -
   same reasoning as UnobSelect: the native date picker popup is drawn by
   the OS/browser and can't be restyled. */
.unob-calendario {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    width: 280px;
    max-width: 90vw;
    padding: 14px;
    background: var(--unob-blue);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.unob-calendario-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.unob-calendario-cabecera button {
    font: inherit;
    font-size: 18px;
    line-height: 1;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.unob-calendario-cabecera button:hover,
.unob-calendario-cabecera button:focus {
    background: rgba(255, 255, 255, 0.15);
}

.unob-calendario-cabecera button:disabled {
    color: rgba(255, 255, 255, 0.25);
    cursor: not-allowed;
}

.unob-calendario-cabecera button:disabled:hover {
    background: transparent;
}

.unob-calendario-dias-semana,
.unob-calendario-grid {
    display: grid;
    /* minmax(0, 1fr), not plain 1fr: a bare 1fr track still won't shrink a
       cell below its content's min-content width (CSS Grid's implicit
       min-width:auto on grid items), and a <button> with its default
       padding/box model needs more than 1/7 of 250px here - the day-button
       and weekday-letter columns were overflowing the calendar's own 280px
       box because of this, with the last couple of columns each row
       spilling out past its right edge into whatever's behind it. */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.unob-calendario-dias-semana {
    margin-bottom: 4px;
}

.unob-calendario-dias-semana span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
}

.unob-calendario-dia {
    aspect-ratio: 1;
    /* Without this, the browser's own <button> UA padding (asymmetric on
       most browsers) pushes the digit off-center inside the square cell,
       worse on single-digit days than on "10"/"31" etc - explicit flex
       centering with zero padding makes every digit land dead-center. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font: inherit;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
}

.unob-calendario-dia:hover,
.unob-calendario-dia:focus {
    background: rgba(255, 255, 255, 0.25);
}

.unob-calendario-dia:disabled {
    background: transparent;
    color: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
}

.unob-calendario-dia-seleccionado {
    background: var(--unob-gold);
    color: var(--unob-navy);
    font-weight: 700;
}

.unob-select-check {
    flex: none;
    width: 14px;
    color: var(--unob-gold);
    font-weight: 700;
}

/* Horario: "Inicio" and "Hasta" as two <select>s side by side under one
   "Horario" heading, both always formatted 12h am/pm by us (formatearHora12h)
   instead of relying on a native time-input's OS-dependent picker/format. */
.unob-horario-rango {
    display: flex;
    gap: 14px;
}

.unob-horario-subcampo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.unob-horario-subcampo label {
    margin: 0;
}

/* Duración is informative only here - the actual end time is picked via the
   "Hasta" select above, this just states the resulting length in words. */
.unob-duracion-informativo {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* Checkbox rows read as plain sentences, not shouty uppercase fields. */
.unob-check {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
}

.unob-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--unob-gold);
}

.unob-tipo-reserva {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.unob-check input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--unob-gold);
}

.unob-step a {
    color: #fff;
    text-decoration: underline;
}

/* Birthday palco configurator - each part (pack, proplayer, orden de
   apartados, invitados) is its own wizard step (StepPackCumpleanos.jsx etc),
   these rules style their shared bits. */
.unob-pack-cumpleanos-opciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.unob-pack-cumpleanos-opcion {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    text-transform: none;
}

.unob-pack-cumpleanos-opcion input {
    margin-top: 3px;
    accent-color: var(--unob-gold);
}

.unob-pack-cumpleanos-detalle {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.unob-pack-cumpleanos-detalle p {
    margin: 0 0 6px;
    font-weight: 600;
}

.unob-pack-cumpleanos-detalle ul {
    margin: 0;
    padding-left: 18px;
}

.unob-pack-cumpleanos-instrucciones {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 10px;
}

.unob-apartado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.unob-apartado-fijo {
    flex-direction: column;
    align-items: flex-start;
}

.unob-apartado-nombre {
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}

.unob-apartado-detalle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.unob-apartados-ordenables {
    list-style: none;
    margin: 0;
    padding: 0;
}

.unob-apartado-acciones {
    display: flex;
    gap: 4px;
}

.unob-apartado-acciones button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
}

.unob-apartado-acciones button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Same visual language as .unob-error (soft red) but not a blocking error -
   just an important, always-visible constraint for birthday palco bookings. */
.unob-cumpleanos-nota-horario {
    background: rgba(255, 158, 150, 0.15);
    border: 1px solid rgba(255, 158, 150, 0.4);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    color: #fff;
    margin: 0 0 4px;
}

.unob-step a:hover {
    color: var(--unob-gold);
}

/* Área cards */
.unob-area-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.unob-area-card {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 22px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    font-family: 'Titling', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.unob-area-card::after {
    content: '→';
    color: var(--unob-gold);
    font-size: 20px;
    margin-left: 12px;
}

.unob-area-card:hover {
    border-color: var(--unob-gold);
    box-shadow: 0 2px 10px rgba(10, 26, 47, 0.08);
}

/* Restaurante = dorado/amarillo de marca, Palco = azul - nunca magenta. */
.unob-area-card--restaurante {
    border-color: var(--unob-gold);
    background: rgba(242, 170, 0, 0.12);
}

.unob-area-card--restaurante::after {
    color: var(--unob-gold);
}

.unob-area-card--restaurante:hover,
.unob-area-card--restaurante:focus {
    border-color: var(--unob-gold);
    background: rgba(242, 170, 0, 0.2);
}

/* The step's own panel background is already --unob-blue (#00219e) (see
   .unob-step-area below) - giving this card that same blue as its border/
   fill made it blend straight into the panel, invisible, while the gold
   Restaurante card next to it stayed visible. White reads clearly on the
   blue panel without reaching for an off-brand accent. */
.unob-area-card--palco {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.14);
}

.unob-area-card--palco::after {
    color: #fff;
}

.unob-area-card--palco:hover,
.unob-area-card--palco:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.22);
}

.unob-area-card:focus,
.unob-area-card:focus-visible {
    outline: 2px solid var(--unob-gold);
    outline-offset: 2px;
}

/* Map step */
.unob-mapa-contenedor {
    position: relative;
    width: 100%;
    /* Fallback only, before the render photo loads (see StepMapa.jsx's
       aspectRatioImagen) - once it does, an inline style overrides this to
       match the photo's own ratio exactly, so object-fit:contain never
       letterboxes it regardless of what an admin uploads. */
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--unob-line);
}

/* "Restablecer vista" floats over the map instead of sitting in normal
   flow above it - it used to push the image down inside the fixed
   aspect-ratio container, clipping the bottom of the map (overflow:
   hidden) and eating into the pan/zoom/tap area. */
/* button.unob-mapa-reset (element + class), not just .unob-mapa-reset: the
   markup also carries .unob-btn-ghost (StepMapa.jsx), whose own
   "background: transparent" sits later in this file and was winning the
   cascade at equal specificity - this button ended up see-through over the
   floor plan photo instead of the solid dark pill it's meant to be. */
button.unob-mapa-reset {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: var(--unob-navy);
    border-color: var(--unob-navy);
    color: #fff;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

button.unob-mapa-reset:hover,
button.unob-mapa-reset:focus {
    background: var(--unob-navy-soft);
}

.unob-mapa-transform-wrapper,
.unob-mapa-transform-content {
    width: 100% !important;
    height: 100% !important;
}

.unob-mapa-lienzo {
    position: relative;
    width: 100%;
    height: 100%;
}

.unob-mapa-imagen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Palco selection: "opción A o B" as two (or more) cards, each with its own
   render photo, instead of pins on one shared zona image - a palco is a
   whole distinct space, not a small point among many on the same map. */
.unob-palco-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.unob-palco-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    color: #fff;
    text-align: center;
}

.unob-palco-card-imagen {
    width: 100%;
    height: 160px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}

.unob-palco-card-nombre {
    font-weight: 700;
    font-size: 16px;
}

.unob-palco-card-capacidad {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.unob-palco-card-motivo {
    font-size: 12px;
    color: #ff9e96;
}

.unob-palco-card:hover,
.unob-palco-card:focus {
    background: rgba(255, 255, 255, 0.12);
}

.unob-palco-card-seleccionada {
    border-color: var(--unob-gold);
    box-shadow: 0 0 0 2px var(--unob-gold-soft);
}

.unob-palco-card-deshabilitada {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Numbered seats sold individually on a día de partido/evento público
   (punto 9/10), pinned over that palco's own foto at the positions an
   admin placed them at (see admin/js/mapas.js's abrirEditorAsientos) -
   reuses .unob-unidad/.unob-mapa-contenedor, same as mesas. This tab strip
   just switches which palco's foto+seats are shown, since seats belong to
   one physical palco and shouldn't mix across two. */
.unob-asientos-selector-palco {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.unob-asiento-palco-tab {
    background: rgba(255, 255, 255, 0.08);
}

.unob-asiento-palco-tab-activa {
    border-color: var(--unob-gold);
    background: rgba(242, 170, 0, 0.15);
    color: var(--unob-gold);
}

/* Chair-shaped rectangles, not dots - admin/js/mapas.js lets an admin
   rotate each one (in translate(-50%,-50%) rotate(Xdeg)) to line up with
   however the actual chair sits in the render photo. Sizing/transform is
   set inline per-unidad in StepMapa.jsx (position and rotation vary per
   seat); this only carries the shared shape and per-estado coloring. */
.unob-unidad {
    position: absolute;
    /* width/height/border-radius are set inline per-unidad (Editar in the
       Mapas admin lets each mesa be scaled and set to rectángulo/círculo
       independently) - these are just a fallback for the rare case neither
       is provided. */
    width: 26px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 7px;
    overflow: hidden;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
}

/* No background box on any estado - a solid rectangle covered too much of
   the render photo. Disponible just shows its number in white with a dark
   text-shadow for legibility over the photo; ocupado/apagado dim the number
   instead so they still read as "not a real option" without a shape. */
.unob-unidad-disponible { background: rgba(255, 255, 255, 0); color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.unob-unidad-disponible:hover,
.unob-unidad-disponible:focus { background: rgba(255, 255, 255, 0.25); }
.unob-unidad-ocupado { background: transparent; color: rgba(255, 255, 255, 0.55); cursor: not-allowed; pointer-events: none; }
.unob-unidad-apagado { background: transparent; color: rgba(255, 255, 255, 0.3); cursor: not-allowed; pointer-events: none; }
/* El número ya se ve apagado, pero sobre la foto del mapa eso solo no
   resalta lo suficiente a simple vista - encima se pone una X roja grande,
   dentro de los límites del punto (no con offset negativo, porque
   .unob-unidad tiene overflow:hidden y la recortaría). */
.unob-unidad-ocupado::after,
.unob-unidad-apagado::after {
    content: '✕';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: #ff3b30;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}
/* Marcadamente más visible que un simple borde delgado - fondo dorado
   sólido + contorno blanco + resplandor, para que una mesa/asiento ya
   elegido se distinga de un vistazo sobre la foto del mapa. */
.unob-unidad-seleccionada {
    background: var(--unob-gold) !important;
    border: 2px solid #ffffff;
    color: #0c0c2c !important;
    text-shadow: none !important;
    box-shadow: 0 0 0 3px rgba(242, 170, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

/* Shown once the selected mesas already cover the party's capacity: every
   other still-"disponible" mesa disappears entirely and stops responding to
   clicks, so it's obvious there's nothing left to pick (it reappears the
   moment a selected mesa is deselected). Kept in the layout (not display:
   none) so the map doesn't reflow when mesas blink in and out. */
.unob-unidad-bloqueada { opacity: 0; cursor: not-allowed; pointer-events: none; }

/* A palco whose own capacidad can't cover the party - unlike mesas, palcos
   aren't combined, so this one just isn't a valid option. Stays visible
   (unlike unob-unidad-bloqueada) since the customer needs to see it exists
   and understand why it's dimmed, not have it vanish. */
.unob-unidad-capacidad-insuficiente { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* Summary list on the payment step */
.unob-step-pago ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
}

.unob-error {
    color: #ff9e96;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

/* Reservation QR / tarjeta-de-cliente-frecuente block shown on StepPago's
   confirmation screen - same look the QR used to have on WooCommerce's own
   order-received page (Unob_Reservation_Qr::imprimir(), now unused since
   confirmar_reserva_sin_cobro() never sends anyone there - see
   includes/class-booking-service.php). */
.unob-qr-confirmacion {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.unob-qr-confirmacion h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: #fff;
}

.unob-qr-confirmacion p {
    margin: 0 0 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

.unob-qr-confirmacion img {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
}

/* Reserves room for the capacidad message on the Mapa step to wrap onto a
   second line (it easily does, e.g. "Tu reservación es de 10 personas...")
   without the whole card - map, buttons and all - visibly jumping down
   when that happens. */
.unob-mapa-aviso {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.unob-mapa-aviso p {
    margin: 0;
}

.unob-aviso-tolerancia {
    background: rgba(242, 170, 0, 0.85);
    border: 1px solid var(--unob-gold);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--unob-navy);
    margin: 0;
}

/* Buttons */
.unob-step-acciones {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.unob-btn {
    font-family: 'Titling', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.unob-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Dorado/amarillo de marca una vez que el paso está completo y se puede
   avanzar ("se prende") - mientras falta algo, queda apagado/gris vía la
   opacidad de .unob-btn:disabled de arriba. */
.unob-btn-primary {
    flex: 1;
    background: var(--unob-gold);
    color: var(--unob-navy);
}

.unob-btn-primary:disabled {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
}

.unob-btn-primary:hover:not(:disabled),
.unob-btn-primary:focus:not(:disabled) {
    background: #cc9000;
}

.unob-btn-atras {
    background: #fff;
    border-color: #fff;
    color: var(--unob-navy);
}

.unob-btn-atras:hover,
.unob-btn-atras:focus {
    background: rgba(255, 255, 255, 0.85);
}

.unob-btn-ghost {
    align-self: flex-start;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 13px;
    padding: 6px 12px;
    margin-bottom: 8px;
}

.unob-btn-ghost:hover,
.unob-btn-ghost:focus {
    background: rgba(255, 255, 255, 0.12);
}

/* Mobile-first by default (everything above already stacks in one column);
   a little extra breathing room once there's room for it. */
@media (min-width: 640px) {
    .unob-step {
        padding: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .unob-step {
        animation: none;
    }
}