/**
 * Sistema de diseño del formulario público.
 *
 * Los tokens replican los de volcanlanin.ar/reservas (extraídos de su CSS
 * compilado): primary teal 174/72/46, accent fuego 32/95/55, radio .875rem
 * y la familia de sombras "card / glow / teal / fire".
 *
 * Tailwind viene por CDN y resuelve el grueso del layout; acá queda sólo lo
 * que el CDN no puede expresar: variables, animaciones y los estados de los
 * controles nativos (radios, checkbox, scrollbar).
 */

:root {
    --primary:            174 72% 46%;
    --primary-dark:       174 78% 30%;
    --accent:              32 95% 55%;
    --ink:                222 28% 12%;
    --muted:              222 12% 46%;
    --line:               220 14% 90%;
    --surface:              0  0% 100%;
    --canvas:             210 24% 97%;

    --radius:             .875rem;

    --shadow-card:        0 4px 24px -4px hsla(222, 28%, 8%, .06);
    --shadow-card-hover:  0 12px 40px -8px hsla(222, 28%, 8%, .12);
    --shadow-teal:        0 8px 32px -8px hsla(174, 72%, 46%, .30);
    --shadow-fire:        0 8px 32px -8px hsla( 32, 95%, 55%, .35);
    --shadow-glow:        0 0 60px -12px hsla(174, 72%, 46%, .25);

    --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
    --font-body:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: hsl(var(--canvas));
    color: hsl(var(--ink));
}

h1, h2, h3, .font-display { font-family: var(--font-display); }

/* Fondo: dos halos muy suaves, teal arriba a la izquierda y fuego a la
   derecha. Fijo, para que no "viaje" con el scroll del wizard. */
.lienzo::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 40rem at 12% -10%, hsla(174, 72%, 46%, .10), transparent 60%),
        radial-gradient(48rem 32rem at 95%  8%, hsla( 32, 95%, 55%, .09), transparent 60%);
}

/* ---------- Sombras nombradas ---------- */
.sombra-card       { box-shadow: var(--shadow-card); }
.sombra-card-hover { box-shadow: var(--shadow-card-hover); }
.sombra-teal       { box-shadow: var(--shadow-teal); }
.sombra-fuego      { box-shadow: var(--shadow-fire); }
.sombra-glow       { box-shadow: var(--shadow-glow); }

/* ---------- Cards de opción (ciudad, equipo) ----------
   El <input> real queda oculto pero sigue en el DOM y en el tab order:
   el foco del teclado se dibuja sobre la etiqueta con :has(). */
/* El label ancla al input oculto: sin position:relative acá, el input
   absoluto se posicionaría contra el viewport y arrastraría el scroll. */
.opcion { position: relative; display: block; }
.opcion input { position: absolute; inset: 0 auto auto 0; opacity: 0; width: 0; height: 0; }

.opcion-card {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: var(--radius);
    border: 1.5px solid hsl(var(--line));
    background: hsl(var(--surface));
    padding: .875rem 1rem;
    transition: border-color .18s, box-shadow .18s, transform .18s, background-color .18s;
}
.opcion-card:hover {
    border-color: hsl(var(--primary) / .45);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}
.opcion input:checked + .opcion-card {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / .06);
    box-shadow: var(--shadow-teal);
}
.opcion input:focus-visible + .opcion-card {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* Tilde de seleccionado */
.opcion-card .tilde {
    position: absolute;
    top: .625rem;
    right: .625rem;
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
    color: #fff;
    font-size: .7rem;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s, transform .18s;
}
.opcion input:checked + .opcion-card .tilde { opacity: 1; transform: scale(1); }

/* ---------- Campos ---------- */
.campo {
    width: 100%;
    border-radius: .75rem;
    border: 1.5px solid hsl(var(--line));
    background: hsl(var(--surface));
    padding: .625rem .875rem;
    font-family: var(--font-body);
    font-size: .9375rem;
    color: hsl(var(--ink));
    transition: border-color .15s, box-shadow .15s;
}
.campo::placeholder { color: hsl(var(--muted) / .65); }
.campo:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / .16);
}
.campo.tiene-error {
    border-color: hsl(0 72% 58%);
    box-shadow: 0 0 0 3px hsl(0 72% 58% / .14);
}

.etiqueta {
    display: block;
    margin-bottom: .375rem;
    font-size: .8125rem;
    font-weight: 600;
    color: hsl(var(--ink) / .78);
}

/* ---------- Stepper de pasos ---------- */
.paso-num {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 9999px;
    border: 2px solid hsl(var(--line));
    background: hsl(var(--surface));
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 700;
    color: hsl(var(--muted));
    transition: all .22s;
}
.paso.activo   .paso-num { border-color: hsl(var(--primary)); background: hsl(var(--primary)); color: #fff; box-shadow: var(--shadow-teal); }
.paso.completo .paso-num { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .12); color: hsl(var(--primary-dark)); }
.paso.activo   .paso-label { color: hsl(var(--ink)); font-weight: 700; }
.paso.completo .paso-label { color: hsl(var(--primary-dark)); }

/* ---------- Checkbox de conformidad ---------- */
.check {
    appearance: none;
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .0625rem;
    border-radius: .375rem;
    border: 1.5px solid hsl(var(--line));
    background: hsl(var(--surface));
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.check:checked {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E");
    background-size: 100%;
}
.check:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

/* ---------- Transición entre pasos ---------- */
@keyframes entrar {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.panel-paso { animation: entrar .28s cubic-bezier(.22, 1, .36, 1); }

@media (prefers-reduced-motion: reduce) {
    .panel-paso { animation: none; }
    html { scroll-behavior: auto; }
    .opcion-card:hover { transform: none; }
}

/* Alpine: evita el parpadeo del markup sin inicializar. */
[x-cloak] { display: none !important; }