/* 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');
}

.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-visible {
    outline: 2px solid var(--unob-gold);
    outline-offset: 2px;
    border-radius: 8px;
}

.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-visible {
    outline: none;
    border-bottom-color: var(--unob-gold);
}

/* 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 {
    background: rgba(255, 255, 255, 0.2);
}

/* 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 {
    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;
    grid-template-columns: repeat(7, 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;
    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 {
    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-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);
}

.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. */
.unob-mapa-reset {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: rgba(10, 26, 47, 0.88);
    border-color: rgba(255, 255, 255, 0.4);
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.unob-mapa-reset:hover {
    background: rgba(10, 26, 47, 1);
}

.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-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-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; }
.unob-unidad-seleccionada { border-color: var(--unob-gold); box-shadow: 0 0 0 2px var(--unob-gold-soft); }

/* 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;
}

/* 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;
}

/* Black/navy, matching the "Aceptar"/"Continuar"/"Enviar" buttons used
   throughout UNO's Typeform-style cumpleaños/event booking form. */
.unob-btn-primary {
    flex: 1;
    background: var(--unob-navy);
    color: #fff;
}

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

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

.unob-btn-atras:hover {
    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;
}

/* 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;
    }
}