/* ======================================================
   LADO PÚBLICO — formulario de pedido (Publico.cshtml) y
   pedido registrado (Gracias.cshtml).
   Flujo por pasos: bienvenida → 5 pasos → registrado.
   Mobile-first; en escritorio, resumen fijo a la derecha.
   Paleta de marca: ciruela, lila, amarillo ARE, rosa empolvado.
====================================================== */

:root {
    --ciruela: #5D4C65;
    --tinta: #6e5b74;
    --tinta-suave: #857a8c;
    --ciruela-suave: #7a6882;
    --lila: #C3A4CD;
    --lila-claro: #E9D9EE;
    --lila-bruma: #F3E7F6;
    --crema: #FBF8FC;
    --amarillo: #E0C389;
    --amarillo-bruma: #F7EEDB;
    --rosa: #DDA4B0;
    --rosa-bruma: #F8E8EC;
    --texto-suave: #9b8ca5;
    --blanco: #ffffff;
    --error: #b25d6e;
    --sombra: 0 14px 34px rgba(160, 120, 175, .15), 0 4px 12px rgba(160, 120, 175, .08);
    --radio: 24px;
    --barra-alto: 76px;
    color-scheme: light;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { background: var(--crema); }

body {
    margin: 0;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 15px;
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Fondo en una capa fija (background-attachment: fixed falla en iPhone) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 8%, rgba(224, 195, 137, .18), transparent 38%),
        radial-gradient(circle at 92% 90%, rgba(221, 164, 176, .16), transparent 40%),
        linear-gradient(165deg, var(--crema) 0%, var(--lila-bruma) 55%, var(--lila-claro) 100%);
}

h1, h2, h3, h4 {
    font-family: 'Merriweather', Georgia, serif;
    margin: 0;
    color: var(--tinta);
    text-wrap: balance;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2.5px solid var(--lila); outline-offset: 2px; border-radius: 8px; }

.visualmente-oculto {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Marco ---------- */
.app {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 16px calc(var(--barra-alto) + 28px);
}

/* Bienvenida: todo queda arriba, con un salto suave bajo la cabecera. */
.app:has(.pantalla[data-pantalla="0"]:not([hidden])) { padding-bottom: 28px; }
.app:has(.pantalla[data-pantalla="0"]:not([hidden])) .cuerpo { padding-top: 18px; }

@media (min-width: 900px) {
    .app:has(.pantalla[data-pantalla="0"]:not([hidden])) .cuerpo { padding-top: 40px; }
}

    .app.sin-barra { padding-bottom: 40px; }

.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

    /* Logo más grande para que se lea "Floral Studio" */
    .cabecera img { height: 68px; width: auto; }

@media (min-width: 900px) {
    .cabecera img { height: 84px; }
}

.ayuda {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-suave);
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(195, 164, 205, .45);
    border-radius: 999px;
    padding: 7px 12px;
    text-decoration: none;
}

/* ---------- Progreso: 5 tramos ---------- */
.progreso {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

.progreso-paso {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

    .progreso-paso:disabled { cursor: default; }

.progreso-linea {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: var(--lila-claro);
    overflow: hidden;
}

    .progreso-linea i {
        display: block;
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--lila), var(--rosa));
        transition: width .5s cubic-bezier(.2, .8, .2, 1);
    }

.progreso-paso.hecho .progreso-linea i,
.progreso-paso.actual .progreso-linea i { width: 100%; }

.progreso-paso.actual .progreso-linea i { background: linear-gradient(90deg, var(--lila), var(--amarillo)); }

.progreso-nombre {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.progreso-paso.actual .progreso-nombre { color: var(--tinta); }

/* ---------- Layout con resumen ---------- */
/* minmax(0, 1fr) + min-width: 0: sin esto, la fila de categorías (que no
   se parte) ensanchaba la columna y la página se movía de costado. */
.cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

    .cuerpo > main {
        min-width: 0;
        /* Las pantallas entran deslizándose desde un costado (entraDer/entraIzq). Ese
           desplazamiento, aunque sea de 28 px, ensancha la página un instante y el
           navegador del celular reacomoda todo ("se mueve"). Se recorta en horizontal;
           el padding/margen de 16 px deja sitio para que la sombra de la tarjeta no se corte. */
        overflow-x: clip;
        padding-inline: 16px;
        margin-inline: -16px;
    }

@media (min-width: 900px) {
    .cuerpo.con-resumen { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* ---------- Pantallas y transiciones ---------- */
.pantalla.entra-der { animation: entraDer .45s cubic-bezier(.2, .8, .2, 1) both; }
.pantalla.entra-izq { animation: entraIzq .45s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes entraDer { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes entraIzq { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.tarjeta {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 24px 20px;
}

@media (min-width: 640px) { .tarjeta { padding: 30px 32px; } }

.paso-encabezado {
    margin-bottom: 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-height: 100px;
}

    .paso-texto { flex: 1; min-width: 0; }

    /* Compañera del paso (Areli, Venus o Zeus): de pie sobre el contenido, con un
       halo lila suave detrás y un leve flotar; entra con un pequeño "pop". */
    .paso-personaje {
        position: relative;
        flex: 0 0 auto;
        align-self: flex-end;
        margin: 0 -4px -4px 0;
        pointer-events: none;
    }

        .paso-personaje::before {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 4%;
            width: 125%;
            aspect-ratio: 1;
            transform: translateX(-50%);
            border-radius: 50%;
            background: radial-gradient(circle, var(--lila-bruma) 0%, rgba(243, 231, 246, 0) 68%);
            z-index: 0;
        }

        .paso-personaje img {
            position: relative;
            z-index: 1;
            display: block;
            height: 96px;
            width: auto;
            max-width: 112px;
            object-fit: contain;
            filter: drop-shadow(0 6px 10px rgba(93, 76, 101, .13));
            animation: personajeEntra .6s cubic-bezier(.2, .8, .2, 1) .12s both, flotar 5.5s ease-in-out .8s infinite;
        }

@keyframes personajeEntra {
    from { opacity: 0; transform: translateY(14px) scale(.92); }
    to { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
    .paso-encabezado { min-height: 0; align-items: center; }
    .paso-personaje { align-self: center; margin: 0 -4px 0 0; }
    .paso-personaje img { height: 124px; max-width: 150px; }
}

/* Pantalla de carga al registrar el pedido */
.registrando {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 24px;
    background: rgba(251, 248, 252, .9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: aparece .3s ease both;
}

    .registrando[hidden] { display: none; }

    .registrando img { height: 130px; width: auto; margin-bottom: 8px; animation: flotar 3.2s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(93, 76, 101, .15)); }
    .registrando strong { font-family: 'Merriweather', Georgia, serif; font-size: 19px; color: var(--tinta); }
    .registrando span { font-size: 14px; color: var(--tinta-suave); }

    .paso-encabezado small,
    .antetitulo {
        display: block;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--texto-suave);
        margin-bottom: 6px;
    }

    .paso-encabezado h2 { font-size: 23px; line-height: 1.3; }

    .paso-encabezado p {
        margin: 8px 0 0;
        color: var(--tinta-suave);
        font-size: 14.5px;
        line-height: 1.6;
        max-width: 52ch;
    }

/* ---------- Bienvenida ---------- */
/* Tarjeta única: ilustración del taller arriba (al costado en escritorio),
   saludo corto y un solo botón. Entrada escalonada y suave. */
.bienvenida {
    display: grid;
    padding: 0;
    overflow: hidden;
    max-width: 480px;
    margin: 4px auto 0;
}

.bienvenida-arte {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

    .bienvenida-arte img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 40%;
        opacity: 0;
        /* El fundido hacia el blanco va en la imagen misma (sin capa encima):
           una capa superpuesta dejaba una línea fina en el borde. */
        -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    }

    .bienvenida-arte img.lista {
        opacity: 1;
        animation: arteEntra 1s cubic-bezier(.2, .8, .2, 1) both, respira 14s ease-in-out 1s infinite;
    }


.bienvenida-texto {
    display: grid;
    gap: 12px;
    padding: 6px 26px 28px;
    text-align: center;
    justify-items: center;
}

    .bienvenida-texto > * { animation: subeSuave .7s cubic-bezier(.2, .8, .2, 1) both; }
    .bienvenida-texto > :nth-child(1) { animation-delay: .25s; }
    .bienvenida-texto > :nth-child(2) { animation-delay: .38s; }
    .bienvenida-texto > :nth-child(3) { animation-delay: .5s; }

    .bienvenida h1 {
        font-size: 30px;
        line-height: 1.25;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .bienvenida .lead {
        margin: 0;
        font-size: 15px;
        line-height: 1.7;
        color: var(--tinta-suave);
        max-width: 32ch;
        text-wrap: pretty;
    }

.bienvenida-corazon {
    font-size: .62em;
    color: var(--lila);
    display: inline-block;
    animation: latido 2.6s ease-in-out 1.2s infinite;
}

.bienvenida-cta { display: grid; gap: 10px; width: 100%; margin-top: 10px; }

.bienvenida-nota { text-align: center; font-size: 12.5px; color: var(--texto-suave); display: flex; gap: 6px; justify-content: center; align-items: center; }

.btn-comenzar { padding-top: 15px; padding-bottom: 15px; font-size: 16px; }
    .btn-comenzar i { transition: transform .25s ease; }
    .btn-comenzar:hover i { transform: translateX(4px); }

@keyframes arteEntra { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes subeSuave { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes latido {
    0%, 60%, 100% { transform: scale(1); }
    15% { transform: scale(1.18); }
    30% { transform: scale(.96); }
    45% { transform: scale(1.1); }
}

@media (min-width: 900px) {
    .bienvenida { max-width: 940px; grid-template-columns: 1.15fr 1fr; align-items: center; margin-top: 24px; }
    .bienvenida-arte { aspect-ratio: auto; height: 100%; min-height: 440px; }
    .bienvenida-arte img {
        -webkit-mask-image: linear-gradient(to right, #000 70%, transparent 100%);
        mask-image: linear-gradient(to right, #000 70%, transparent 100%);
    }
    .bienvenida-texto { padding: 40px 48px 40px 28px; text-align: left; justify-items: start; }
    .bienvenida h1 { font-size: 38px; }
    .bienvenida-cta { max-width: 300px; }
    .bienvenida-nota { justify-content: flex-start; }
}

@keyframes flotar {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-8px) rotate(-1.2deg); }
}

.num {
    flex: 0 0 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 13px;
    background: var(--lila-bruma);
    color: var(--tinta);
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    padding: 14px 22px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease, background .2s, opacity .2s;
}

    .btn:active { transform: scale(.98); }
    .btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-principal { background: var(--lila); color: #fff; box-shadow: 0 8px 18px rgba(195, 164, 205, .45); }
.btn-principal:hover { background: #b393be; color: #fff; }
.btn-suave { background: var(--lila-bruma); color: var(--tinta); }
.btn-bloque { width: 100%; }

/* ---------- Catálogo ---------- */
.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-bottom: 16px;
}

    .chips::-webkit-scrollbar { display: none; }

.chip {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--lila-claro);
    background: var(--blanco);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: all .2s;
}

    .chip.activo { background: var(--lila); border-color: var(--lila); color: #fff; }

.grilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 640px) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.producto {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border-radius: 20px;
    border: 1.5px solid var(--lila-bruma);
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
    animation: aparece .4s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes aparece { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.producto.elegido { border-color: var(--lila); box-shadow: 0 10px 24px rgba(160, 120, 175, .2); }

.producto-foto {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    overflow: hidden;
    background: linear-gradient(145deg, var(--lila-bruma), var(--lila-claro));
    display: grid;
    place-items: center;
}

    /* Foto como background-image (no <img>) para que el celular no ofrezca
       "Guardar imagen" al mantener presionado. No es infalible, pero bloquea
       los flujos normales de guardar. */
    .producto-foto .foto {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        transition: transform .4s ease;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        pointer-events: none;
    }

    .producto-foto .sin-foto { font-size: 34px; color: rgba(93, 76, 101, .4); }

.producto:hover .producto-foto .foto { transform: scale(1.04); }

/* Check de producto elegido */
.check-elegido {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--lila);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 4px 10px rgba(195, 164, 205, .5);
    border: 2px solid rgba(255, 255, 255, .9);
    transform: scale(0);
    transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}

    .check-elegido .bi { line-height: 1; }

.producto.elegido .check-elegido { transform: scale(1); }

.producto-info { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

    .producto-info h3 { font-family: 'Public Sans', sans-serif; font-size: 14px; line-height: 1.35; font-weight: 600; }

    .producto-info .precio { font-family: 'Merriweather', serif; font-weight: 700; font-size: 15px; }

.producto-accion { margin-top: auto; }

.btn-agregar {
    width: 100%;
    border: 1.5px solid var(--lila);
    background: none;
    color: var(--tinta);
    border-radius: 999px;
    padding: 8px 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .2s;
}

    .btn-agregar:hover { background: var(--lila-bruma); }

.contador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: var(--lila-bruma);
    border-radius: 999px;
    padding: 3px;
}

    .contador button {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: var(--blanco);
        color: var(--tinta);
        display: grid;
        place-items: center;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(93, 76, 101, .1);
    }

    .contador span { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.5ch; text-align: center; }

.catalogo-vacio { color: var(--texto-suave); font-size: 14px; padding: 16px 0; }

/* ---------- Personajes dan consejos ---------- */
.consejo {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 18px;
}

    .consejo img { height: 76px; flex-shrink: 0; animation: flotar 4.2s ease-in-out infinite; }

    .consejo p {
        margin: 0;
        background: var(--rosa-bruma);
        border-radius: 18px 18px 18px 4px;
        padding: 12px 14px;
        font-size: 13.5px;
        line-height: 1.5;
    }

/* ---------- Formularios ---------- */
.campos { display: grid; gap: 14px; }

@media (min-width: 640px) {
    .campos.dos { grid-template-columns: 1fr 1fr; }
    .campos .ancho { grid-column: 1 / -1; }
}

.campo { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

    .campo > label { font-size: 13px; font-weight: 600; color: var(--tinta); }

.entrada {
    position: relative;
    display: flex;
    align-items: center;
}

    .entrada > .bi {
        position: absolute;
        left: 14px;
        color: var(--lila);
        font-size: 16px;
        pointer-events: none;
        z-index: 1;
    }

.control {
    width: 100%;
    min-width: 0;
    border: 1.5px solid var(--lila-claro);
    background: var(--crema);
    border-radius: 14px;
    padding: 13px 14px 13px 42px;
    font-size: 15px;
    transition: border-color .2s, background .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

    .control::placeholder { color: var(--texto-suave); opacity: 1; }

select.control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239b8ca5'%3E%3Cpath d='M1.6 5.2a.6.6 0 0 1 .85 0L8 10.75l5.55-5.55a.6.6 0 1 1 .85.85l-6 6a.6.6 0 0 1-.85 0l-6-6a.6.6 0 0 1 0-.85z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 13px;
    padding-right: 38px;
}

input[type="date"].control { min-height: 50px; }

textarea.control { padding-left: 14px; min-height: 96px; resize: vertical; }

.control:focus {
    outline: none;
    border-color: var(--lila);
    background: var(--blanco);
    box-shadow: 0 0 0 4px rgba(195, 164, 205, .2);
}

.campo .pista { font-size: 12.5px; color: var(--texto-suave); }

/* Mensajes de error: los mismos spans asp-validation-for del servidor */
.error-msg { font-size: 12.5px; color: var(--error); }
.error-msg:empty { display: none; }

.campo.invalido .control { border-color: var(--rosa); background: var(--rosa-bruma); }

.campo.valido .entrada::after {
    content: "";
    position: absolute;
    right: 14px;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C3A4CD'%3E%3Cpath d='M13.85 3.65a.5.5 0 0 1 0 .7l-7 7a.5.5 0 0 1-.7 0l-3.5-3.5a.5.5 0 1 1 .7-.7L6.5 10.3l6.65-6.65a.5.5 0 0 1 .7 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Opciones grandes (modalidad): radios reales dentro de la tarjeta */
.opciones { display: grid; gap: 12px; margin-bottom: 8px; }
@media (min-width: 640px) { .opciones { grid-template-columns: 1fr 1fr; } }

.opcion {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
    border: 1.5px solid var(--lila-claro);
    background: var(--blanco);
    border-radius: 20px;
    padding: 16px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

    .opcion input { position: absolute; opacity: 0; pointer-events: none; }

    .opcion .icono {
        flex: 0 0 44px;
        height: 44px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: var(--lila-bruma);
        font-size: 20px;
        color: var(--tinta);
        transition: background .2s, color .2s;
    }

    .opcion b { display: block; font-size: 15px; margin-bottom: 3px; }
    .opcion .txt { font-size: 13px; color: var(--tinta-suave); line-height: 1.45; }

    .opcion.activa { border-color: var(--lila); background: var(--crema); box-shadow: 0 8px 20px rgba(160, 120, 175, .14); }
    .opcion.activa .icono { background: var(--lila); color: #fff; }
    .opcion:focus-within { outline: 2.5px solid var(--lila); outline-offset: 2px; }

.grupo-error { margin: 0 0 12px; }

.precio-delivery {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: #8a6d2f;
    background: var(--amarillo-bruma);
    border-radius: 999px;
    padding: 4px 10px;
    width: fit-content;
}

.bloque-condicional { animation: aparece .35s ease both; }

.campos-modalidad { margin-top: 10px; }

/* Turnos como botones (el <select> real queda oculto) */
.turnos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 8px;
}

.turno {
    border: 1.5px solid var(--lila-claro);
    background: var(--blanco);
    border-radius: 14px;
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: all .2s;
}

    .turno small { display: block; font-weight: 400; font-size: 11px; color: var(--texto-suave); }
    .turno.activo { background: var(--lila); border-color: var(--lila); color: #fff; }
    .turno.activo small { color: rgba(255, 255, 255, .75); }

.turnos-vacio { font-size: 13.5px; color: var(--texto-suave); grid-column: 1 / -1; }

.subtitulo {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 15px;
    margin: 22px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .subtitulo .bi { color: var(--lila); }
    .subtitulo .opcional { font-family: 'Public Sans', sans-serif; font-weight: 400; font-size: 13px; color: var(--texto-suave); }

.check-linea { display: flex; gap: 8px; align-items: center; font-size: 13.5px; margin: 14px 0; cursor: pointer; }

    .check-linea input { width: 17px; height: 17px; accent-color: var(--lila); }

/* ---------- Revisión ---------- */
.revision { display: grid; gap: 12px; }

.rev-bloque {
    border: 1.5px solid var(--lila-bruma);
    border-radius: 18px;
    padding: 14px 16px;
}

.rev-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px;
}

    .rev-titulo span { display: inline-flex; align-items: center; gap: 8px; }
    .rev-titulo .bi { color: var(--lila); }

.btn-editar {
    background: none;
    border: none;
    color: var(--tinta-suave);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 4px 6px;
    border-radius: 8px;
}

    .btn-editar:hover { background: var(--lila-bruma); }

    .btn-editar .bi { color: inherit; }

.rev-texto { font-size: 14px; line-height: 1.6; color: var(--tinta-suave); overflow-wrap: anywhere; }
.rev-texto b { color: var(--tinta); font-weight: 600; }

.lineas-total { display: grid; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.lineas-total div { display: flex; justify-content: space-between; gap: 12px; color: var(--tinta-suave); }
.lineas-total div span:last-child { color: var(--tinta); white-space: nowrap; }
.lineas-total .total { font-weight: 700; font-size: 16px; border-top: 1px dashed var(--lila-claro); padding-top: 10px; }
.lineas-total .total span { color: var(--tinta) !important; }

.adelanto {
    margin-top: 14px;
    border-radius: 18px;
    background: var(--amarillo-bruma);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

    .adelanto > div { min-width: 0; }
    .adelanto small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9a7b3c; }
    .adelanto .txt { font-size: 12.5px; color: var(--tinta-suave); }
    .adelanto strong { font-family: 'Merriweather', serif; font-size: 24px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* En celular el monto va debajo del texto, para que el texto no se parta
   en muchas líneas. */
@media (max-width: 430px) {
    .adelanto { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
    .adelanto strong { font-size: 26px; }
}

.sin-cortar { white-space: nowrap; }

.seguro {
    margin: 12px 0 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--tinta-suave);
    line-height: 1.5;
}

    .seguro .bi { color: var(--lila); margin-top: 2px; }

.alerta-servidor {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--rosa-bruma);
    color: var(--error);
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 14px;
}

    .alerta-servidor ul { margin: 0; padding-left: 18px; }

/* ---------- Resumen lateral (escritorio) ---------- */
.resumen-lateral { display: none; }

@media (min-width: 900px) {
    .cuerpo.con-resumen .resumen-lateral { display: block; position: sticky; top: 20px; }
}

.resumen-arte { display: flex; justify-content: center; margin: -6px 0 6px; }
.resumen-arte img { height: 150px; animation: flotar 5s ease-in-out infinite; }

.resumen-lateral h3 { font-size: 16px; margin-bottom: 12px; }

.mini-lista { display: grid; gap: 8px; margin-bottom: 14px; font-size: 13.5px; }
.mini-lista div { display: flex; justify-content: space-between; gap: 10px; }
.mini-lista div span:last-child { white-space: nowrap; }
.mini-lista .vacio { color: var(--texto-suave); font-style: italic; }

/* ---------- Barra inferior ---------- */
.barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--lila-bruma);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    transition: transform .35s ease;
}

    /* Además de bajarla, se vuelve invisible: en el celular la barra del navegador
       al contraerse deja ver el borde inferior de un elemento fixed "escondido". */
    .barra.oculta {
        transform: translateY(110%);
        visibility: hidden;
        pointer-events: none;
        transition: transform .35s ease, visibility 0s linear .35s;
    }

.barra-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.barra-total { flex: 1; min-width: 0; line-height: 1.25; }
.barra-total small { display: block; font-size: 12px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-total strong { font-family: 'Merriweather', serif; font-size: 18px; font-variant-numeric: tabular-nums; display: inline-block; white-space: nowrap; }

/* Celulares angostos: botones de la barra más compactos para que el total
   y el detalle entren completos. */
@media (max-width: 400px) {
    .barra-inner { gap: 10px; }
    .barra .btn { padding: 12px 16px; font-size: 14px; }
    .btn-atras { width: 42px; height: 42px; }
    .barra-total small { font-size: 11px; }
    .barra-total strong { font-size: 17px; }
    .progreso { gap: 4px; }
    .progreso-nombre { font-size: 10px; letter-spacing: 0; }
}

/* Muy angosto (≈320 px): "Confirmar pedido" pasa a "Confirmar". */
@media (max-width: 360px) {
    .barra .btn .txt-largo { display: none; }
}
.barra-total strong.salta { animation: salta .4s ease; }

@keyframes salta { 40% { transform: scale(1.12); color: #a7849f; } }

.btn-atras {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--lila-claro);
    background: var(--blanco);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
}

/* ---------- Pedido registrado (Gracias) ---------- */
.listo {
    position: relative;
    overflow: hidden;
    max-width: 720px;
    margin: 0 auto;
}

.listo-cabeza { text-align: center; position: relative; z-index: 1; }

    .listo-cabeza .personaje { height: 170px; animation: flotar 4.5s ease-in-out infinite; }
    .listo-cabeza h2 { font-size: 25px; margin: 10px 0 8px; }
    .listo-cabeza .lead { margin: 0 auto; max-width: 40ch; color: var(--tinta-suave); line-height: 1.6; font-size: 14.5px; }

.codigo {
    display: inline-block;
    margin: 14px 0 4px;
    font-weight: 700;
    letter-spacing: .06em;
    background: var(--lila-bruma);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 14px;
}

.seccion-listo { margin-top: 24px; position: relative; z-index: 1; }

.titulo-seccion {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 14px;
}

    .titulo-seccion .bi { color: var(--lila); }

.medios { display: grid; gap: 12px; }
@media (min-width: 640px) { .medios { grid-template-columns: 1fr 1fr; } }
.medios > * { min-width: 0; }

.medio {
    border: 1.5px solid var(--lila-bruma);
    border-radius: 18px;
    padding: 14px 16px;
    display: grid;
    gap: 10px;
}

    .medio.destacado { border: 1.5px dashed var(--lila); background: var(--crema); }

.medio-cabeza { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.medio-cabeza img { height: 30px; border-radius: 8px; }
.medio-cabeza img.banco { height: 22px; border-radius: 0; }
.medio-cabeza .bi { font-size: 24px; color: var(--lila); }
.medio-cabeza b { font-size: 14.5px; }

.dato-copiable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .dato-copiable .valor { min-width: 0; line-height: 1.35; }
    .dato-copiable .valor small { display: block; font-size: 11.5px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }

    /* Todos los números (Yape, cuentas y CCI) del mismo tamaño y en una sola
       línea; el tamaño se adapta al ancho para que el CCI (20 dígitos) entre
       completo incluso en celulares angostos. */
    .dato-copiable .valor strong {
        display: block;
        font-size: clamp(13px, 3.7vw, 15px);
        font-variant-numeric: tabular-nums;
        letter-spacing: .01em;
        white-space: nowrap;
    }

/* Celular: medios de pago centrados; cada número con su botón "Copiar"
   debajo (así el número tiene todo el ancho y no se corta). */
@media (max-width: 430px) {
    .medio { text-align: center; justify-items: center; }
    .medio-cabeza { justify-content: center; }
    .dato-copiable { flex-direction: column; gap: 8px; width: 100%; }
    .dato-copiable .valor strong { font-size: clamp(14px, 4.2vw, 16px); }
}

.medio .nota { font-size: 13px; color: var(--tinta-suave); line-height: 1.5; }

.btn-copiar {
    border: none;
    background: var(--lila-bruma);
    color: var(--tinta);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

    .btn-copiar.copiado { background: var(--lila); color: #fff; }

.pasos-pago { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--tinta-suave); }
.pasos-pago li { display: flex; gap: 10px; align-items: center; }
.pasos-pago .num { flex-basis: 24px; height: 24px; font-size: 11px; }

.listo-acciones { display: grid; gap: 10px; margin-top: 18px; }

.fila-resumen { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; padding: 4px 0; }
.fila-resumen span:first-child { color: var(--texto-suave); flex-shrink: 0; }
.fila-resumen span:last-child { text-align: right; overflow-wrap: anywhere; }

.confeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }

    .confeti span {
        position: absolute;
        top: -12px;
        width: 9px;
        height: 12px;
        border-radius: 80% 0 80% 0;
        opacity: 0;
        animation: confeti 3s ease-out forwards;
    }

@keyframes confeti {
    0% { opacity: 0; transform: translateY(0) rotate(0); }
    10% { opacity: .9; }
    100% { opacity: 0; transform: translateY(460px) rotate(560deg); }
}

/* ---------- Aviso flotante ---------- */
.toast-flotante {
    position: fixed;
    left: 50%;
    bottom: calc(var(--barra-alto) + 18px);
    transform: translate(-50%, 20px);
    background: var(--lila);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 50;
    white-space: nowrap;
}

    .toast-flotante.visible { opacity: 1; transform: translate(-50%, 0); }

    /* Avisos largos (p. ej. el servidor rechazó el pedido): varias líneas, sin salirse de la pantalla. */
    .toast-flotante.largo {
        white-space: normal;
        width: max-content;
        max-width: min(92vw, 440px);
        text-align: center;
        line-height: 1.35;
        border-radius: 18px;
    }

/* Pantalla de carga inicial (Venus) */
.cargando {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(circle at 12% 8%, rgba(224, 195, 137, .18), transparent 38%),
        radial-gradient(circle at 92% 90%, rgba(221, 164, 176, .16), transparent 40%),
        linear-gradient(165deg, var(--crema) 0%, var(--lila-bruma) 55%, var(--lila-claro) 100%);
    transition: opacity .55s ease, visibility .55s ease;
}

    .cargando.retirado { opacity: 0; visibility: hidden; pointer-events: none; }

    .cargando img {
        height: 150px;
        width: auto;
        margin-bottom: 6px;
        filter: drop-shadow(0 10px 16px rgba(93, 76, 101, .16));
        animation: flotar 3.4s ease-in-out infinite;
    }

    .cargando strong { font-family: 'Merriweather', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--tinta); }

.cargando-puntos { display: flex; gap: 7px; margin-top: 6px; }

    .cargando-puntos i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--lila);
        animation: puntoLatido 1.2s ease-in-out infinite;
    }

        .cargando-puntos i:nth-child(2) { animation-delay: .18s; background: var(--rosa); }
        .cargando-puntos i:nth-child(3) { animation-delay: .36s; background: var(--amarillo); }

@keyframes puntoLatido {
    0%, 80%, 100% { transform: scale(.6); opacity: .5; }
    40% { transform: scale(1.15); opacity: 1; }
}

/* La bienvenida espera a que se retire la pantalla de carga para animarse. */
body:not(.pagina-lista) .bienvenida-arte img,
body:not(.pagina-lista) .bienvenida-texto > *,
body:not(.pagina-lista) .bienvenida-corazon { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}