/**
 * Estilos del área privada del viticultor — Reservas Vendimia.
 *
 * Mobile-first: el layout por defecto corresponde al diseño Figma móvil.
 * A partir de 1024px se aplican las reglas de desktop.
 *
 * Reutiliza las variables del theme definidas en style.css :root —
 * primary-color-dark, primary-color-light, secondary-color-3, font-title,
 * font-body, space-*. Las variables específicas del módulo (--rv-tx-*,
 * --rv-ok, --rv-ok-bg) se definen localmente porque NO están en el theme
 * y son funcionales (grises de texto, verde estado "confirmada").
 */

/* Wrapper del shortcode (engloba todas las vistas: listado, detalle,
   wizard, confirmación). El estado --loading lo aplica el router AJAX
   mientras espera la respuesta del servidor. */
.rv-app {
    position: relative;
    min-height: 400px;
    margin-bottom: 45px;
}
.rv-app--loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 120ms ease;
}

/* Loader neutro mostrado al server-side. La caché de página solo guarda
   este shell; el contenido real lo carga el JS al arrancar. */
.rv-app__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    min-height: 400px;
}
.rv-app__placeholder .rv-spinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.rv-section {
    /* Heredadas del theme (style.css :root) */
    --rv-marron:   var(--primary-color-dark);   /* #321505 */
    --rv-beige:    var(--primary-color-light);  /* #FFFAEE */
    --rv-blanco:   var(--secondary-color-3);    /* #FFFFFF */

    /* Específicas del módulo (no existen en el theme) */
    --rv-borde:    #E5E5E5;
    --rv-tx-700:   #404040;
    --rv-tx-600:   #525252;
    --rv-tx-500:   #737373;
    --rv-ok:       #27A745;
    --rv-ok-bg:    #E8F5E9;

    background: var(--rv-beige);
    box-sizing: border-box;
    width: 100%;
    color: var(--rv-tx-700);
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-32);
}

/* ─────────── Cabecera ───────────
   En mobile NO se muestra (el toggle es lo único arriba).
   En desktop sí: título + subtítulo + CTA en una fila. */
.rv-section__header {
    display: none;
}

.rv-section__titulo {
    font-family: var(--font-title);
    font-weight: 300;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.8px;
    color: var(--rv-marron);
    margin: 0;
}

.rv-section__subtitulo {
    font-size: 18px;
    line-height: 26px;
    color: var(--rv-tx-500) !important;
    margin: 6px 0 0;
}

/* ─────────── Toggle Próximas/Histórico ───────────
   Replica Figma 144:11629 (l-buttonbar):
     - contenedor: pill blanca, borde gris, padding 4px
     - dos pestañas con flex:1 (mismo ancho), sin gap
     - activa: pill marrón / texto beige
     - inactiva: transparente / texto marrón

   El !important + box-shadow:none + outline:none son DEFENSIVOS: el theme
   aplica estilos a <button> (sombra, outline al focus) que crean el efecto
   de "sombreado" visible alrededor del toggle. */
.rv-tabs {
    display: flex;
    align-items: center;
    background: var(--rv-blanco) !important;
    border: 1px solid var(--rv-borde) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    box-shadow: none !important;
}

.rv-tab {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    padding: 12px var(--space-32) !important;
    border-radius: 999px !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: var(--rv-marron) !important;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color 120ms ease, color 120ms ease;
}

.rv-tab:hover {
    background: rgba(50, 21, 5, 0.06) !important;
}

.rv-tab:focus,
.rv-tab:active {
    box-shadow: none !important;
    outline: none !important;
}

/* Accesibilidad: focus visible solo cuando navegan con teclado. */
.rv-tab:focus-visible {
    outline: 2px solid var(--rv-marron) !important;
    outline-offset: 2px;
}

.rv-tab--active,
.rv-tab--active:hover,
.rv-tab--active:focus {
    background: var(--rv-marron) !important;
    color: var(--primary-color-light) !important;
}

/* ─────────── Listado ─────────── */
.rv-listado {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-16);
    min-height: 200px;
}

.rv-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
}

/* ─────────── Card de reserva ───────────
   Estructura anidada (replica Figma 144:11631):
     .rv-card                    padding 24, gap 24
       ├ .rv-card__info          gap 16
       │   ├ .rv-card__fecha-bloque   gap 6
       │   │   ├ .rv-card__head       fecha + tag
       │   │   └ .rv-card__hora
       │   ├ .rv-card__sep
       │   └ .rv-card__cuerpo    gap 6
       │       ├ .rv-card__variedad
       │       └ .rv-card__sub
       └ .rv-card__cta
   Se aplica !important defensivo en color/font-family/font-size porque el
   theme (style.css) usa reglas con !important sobre .color-* y elementos
   p/h2 generales que de otro modo pisan los estilos del módulo. */
.rv-card {
    background: var(--rv-blanco) !important;
    border: 1px solid var(--rv-borde) !important;
    border-radius: 20px !important;
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.rv-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 100%;
}

.rv-card__fecha-bloque {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.rv-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    width: 100%;
    margin: 0px !important;
    padding: 0px !important;
}
.rv-listado .rv-cta.rv-cta--secondary.rv-card__cta{
    font-weight: 600 !important;
}

.rv-card__fecha {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    color: var(--rv-marron) !important;
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}

.rv-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 16px !important;
    flex-shrink: 0;
    white-space: nowrap;
}

.rv-card__tag--ok {
    background: var(--rv-ok-bg) !important;
    color: var(--rv-ok) !important;
}

/* Tag rojo "Eliminada" para reservas borradas en el histórico (Figma 144:6274). */
.rv-card__tag--error {
    background: #FDECEA !important;
    color: #DC3545 !important;
}

/* Variante de card cuando la reserva ha sido eliminada:
   fondo gris suave y separador rojo (en vez del verde).
   Hace visualmente claro que la reserva ya no está activa. */
.rv-card--eliminada {
    background: #E5E5E5 !important;
}
.rv-card--eliminada .rv-card__sep {
    background: #DC3545 !important;
}

.rv-card__hora {
    font-family: var(--font-title) !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    line-height: 28px !important;
    letter-spacing: -0.48px !important;
    color: var(--rv-marron) !important;
    margin: 0 !important;
}

.rv-card__sep {
    border: 0 !important;
    height: 1px !important;
    background: var(--rv-ok) !important;
    margin: 0 !important;
    width: 100%;
}

.rv-card__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.rv-card__variedad {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    color: var(--rv-marron) !important;
    margin: 0 !important;
}

.rv-card__sub {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: var(--rv-tx-600) !important;
    margin: 0 !important;
}

.rv-card__cta {
    width: 100%;
    margin-top: 0;
    /* En MOBILE el botón "Ver detalle" no aparece: toda la card es un
       link (Figma 144:6467). Se muestra solo en desktop como decoración
       visual mediante la regla del @media >= 1024px. */
    display: none !important;
}

/* Cuando la card es un <a> (.rv-card--link) toda el área se clica para
   ir al detalle. Anulamos los estilos típicos del theme para links. */
.rv-card.rv-card--link {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
}
.rv-card.rv-card--link:hover {
    text-decoration: none !important;
    color: inherit !important;
    border-color: var(--rv-marron) !important;
}
.rv-card.rv-card--link:focus-visible {
    outline: 2px solid var(--rv-marron);
    outline-offset: 2px;
}

/* ─────────── Estado vacío ───────────
   Replica Figma 144:6478 (mobile) y 144:11695 (desktop). Cuando el
   viticultor no tiene NINGUNA reserva, se aplica la clase
   .rv-section--empty al root (gestionada por JS) que oculta toggle y
   CTA superior — el empty state es lo único visible.

   En MOBILE el contenido va sin caja directamente sobre el fondo beige
   de la sección. En DESKTOP sí lleva card blanca con border (regla en
   el @media >= 1024px). */
.rv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-32) !important;
    padding: var(--space-32) 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.rv-empty__icon .rv-empty__svg,
.rv-empty__icon svg {
    width: 120px;
    height: 120px;
}

/* Diseño del calendario en MOBILE: cuerpo blanco con border marrón
   (Figma 144:6483). En desktop se mantienen los fills del SVG
   server-side (cuerpo beige sin border, Figma 144:11696). */
@media (max-width: 1023.98px) {
    .rv-empty__svg .rv-cal__bg {
        fill: #FFFFFF;
    }
    .rv-empty__svg .rv-cal__border {
        stroke: #321505;
        stroke-width: 2;
    }
}

.rv-empty__title {
    font-family: var(--font-title) !important;
    font-weight: 300 !important;
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: -0.64px !important;
    color: var(--rv-marron) !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    margin-top: -15px !important;
}

.rv-empty__desc {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 18x !important;
    line-height: 24px !important;
    color: var(--rv-tx-500) !important;
    text-align: center !important;
    margin: 0 !important;
    max-width: 480px;
}

.rv-empty__cta {
    width: 280px;
    max-width: 100%;
}

/* En el empty state ocultamos subtítulo y CTAs superior/inferior — el
   empty state lleva su propio CTA "Nueva reserva" dentro. El TOGGLE
   Próximas/Histórico se mantiene visible (Figma 144:6478 / 144:6479)
   para que el viticultor pueda cambiar de pestaña aunque la activa
   esté vacía y descubrir que sí tiene reservas en la otra. */
.rv-section--empty .rv-section__subtitulo,
.rv-section--empty .rv-cta--mobile,
.rv-section--empty .rv-cta--desktop,
.rv-section--empty .rv-total {
    display: none !important;
}

/* ─────────── Total agregado ─────────── */
.rv-total {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--rv-tx-700);
    letter-spacing: 0.64px;
    margin: 0;
    align-self: flex-start;
}

.rv-total strong {
    font-weight: 600 !important;
    margin-right: 4px;
}

/* ─────────── Botones CTA ─────────── */
.rv-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--space-16) var(--space-32);
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    text-decoration: none;
    transition: opacity 120ms ease, background 120ms ease;
    cursor: pointer;
    box-sizing: border-box;
}

.rv-cta--primary {
    background: var(--rv-marron);
    color: var(--primary-color-light);
}
.rv-cta--primary *{
    color: var(--primary-color-light) !important;
}

.rv-cta--primary:hover {
    background: #4a2008;
    color: var(--primary-color-light);
    text-decoration: none;
}

.rv-cta--secondary {
    background: var(--rv-blanco);
    color: var(--rv-marron);
    border: 1px solid var(--rv-marron);
    font-size: 16px;
    padding: 10px var(--space-32);
    font-weight: 600;
}

.rv-cta--secondary:hover {
    background: var(--rv-marron);
    color: var(--rv-blanco);
}

.rv-cta--full {
    width: 100%;
}

.rv-cta__icon {
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
}

.rv-cta--desktop {
    display: none;
}
.rv-cta.rv-cta--primary,
.rv-cta.rv-cta--primary *{
    font-weight: 600 !important;
}

/* ─────────── Loading / errores ─────────── */
.rv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--rv-tx-500);
    padding: 40px 0;
    font-size: 14px;
}

/* ─── Loader global de AJAX ────────────────────────────────
   Barra fina superior estilo YouTube que se muestra siempre
   que haya una petición fetch activa a admin-ajax.php. El JS
   de wizard.js inyecta el elemento y togglea `rv-ajax-loading`
   sobre <body>. */
.rv-ajax-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
    opacity: 0;
    transition: opacity 180ms ease;
}
body.rv-ajax-loading .rv-ajax-loader {
    opacity: 1;
}
.rv-ajax-loader__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(90deg,
        rgba(50, 21, 5, 0)   0%,
        rgba(50, 21, 5, 0.9) 50%,
        rgba(50, 21, 5, 0)   100%);
    animation: rv-ajax-loader-slide 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes rv-ajax-loader-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

.rv-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--rv-borde);
    border-top-color: var(--rv-marron);
    border-radius: 50%;
    animation: rv-spin 700ms linear infinite;
}

@keyframes rv-spin {
    to { transform: rotate(360deg); }
}

.rv-error {
    text-align: center;
    color: #b32d2e;
    padding: var(--space-24);
}

/* ─────────────────────────────────────────────────────
   Desktop (>= 1024px)
   ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {

    .rv-section {
        align-items: flex-start;
        gap: var(--space-48);
    }

    /* Cabecera con título a la izquierda y CTA arriba derecha */
    .rv-section__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        gap: var(--space-32);
    }

    .rv-section__textos {
        max-width: 540px;
    }

    /* En desktop el CTA está arriba, ocultamos el de mobile */
    .rv-cta--mobile {
        display: none;
    }

    .rv-cta--desktop {
        display: inline-flex;
        flex-shrink: 0;
        min-width: 280px;
    }

    /* Toggle alineado a la izquierda en lugar de centrado */
    .rv-tabs {
        align-self: flex-start;
    }

    /* Listado: grid responsive de cards */
    .rv-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: var(--space-24);
        align-items: stretch;
    }

    /* En desktop el botón "Ver detalle" se ancla al pie de la card para que
       todas las cards de una misma fila terminen alineadas, aunque el cuerpo
       tenga distinta altura. */
    .rv-card__cta {
        display: inline-flex !important;   /* override del mobile hidden */
        margin-top: auto;
    }

    /* Estado vacío en desktop: card más estrecha y centrada */
    .rv-empty {
        background: var(--rv-blanco) !important;
        border: 1px solid var(--rv-borde) !important;
        border-radius: 24px !important;
        padding: var(--space-48) 10px !important;
        max-width: 600px;
        margin: 0 auto;
        align-self: center;
    }
}

/* ════════════════════════════════════════════════════════════════════
   DETALLE DE RESERVA
   Replica Figma 144:6445 (mobile) y 144:11643 (desktop).
   ════════════════════════════════════════════════════════════════════ */

.rv-detalle {
    --rv-marron:    var(--primary-color-dark);
    --rv-beige:     var(--primary-color-light);
    --rv-blanco:    var(--secondary-color-3);
    --rv-naranja:   var(--cta-color);            /* #F6831A */
    --rv-rojo:      #DC3545;
    --rv-rojo-hover:#b9293b;
    --rv-verde:     #27A745;
    --rv-verde-bg:  #E8F5E9;
    --rv-borde:     #E5E5E5;
    --rv-tx-700:    #404040;
    --rv-tx-600:    #525252;
    --rv-tx-500:    #737373;
    --rv-gris-icon: #D4D4D4;

    background: var(--rv-beige);
    font-family: var(--font-body);
    color: var(--rv-tx-700);
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    box-sizing: border-box;
    width: 100%;
    /* Forzamos left por si el contenedor padre (e.g. .vc_row del theme)
       aplica text-align: center genérico a los elementos. */
    text-align: left;
}

/* ─── Header (back + título) ─── */
.rv-detalle__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-16);
    width: 100%;
    align-self: flex-start;
    text-align: left;
}

.rv-detalle__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--rv-blanco) !important;
    border: 1.5px solid var(--rv-marron) !important;
    color: var(--rv-marron) !important;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: background 120ms ease;
}
.rv-detalle__back:hover {
    background: var(--rv-marron) !important;
    color: var(--primary-color-light) !important;
}
/* En mobile mostramos el chevron; el return-arrow es solo desktop. */
.rv-detalle__back-icon--desktop { display: none; }
.rv-detalle__back-img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}
.rv-detalle__back-text--desktop {
    display: none;
}

.rv-detalle__titulos {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1 1 auto;
}
.rv-detalle__titulo {
    font-family: var(--font-title) !important;
    font-weight: 300 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    letter-spacing: -0.4px !important;
    color: var(--rv-marron) !important;
    margin: 0 !important;
}
.rv-detalle__codigo {
    display: none;
}

/* ─── Cuerpo ─── */
.rv-detalle__cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.rv-detalle__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

/* Mobile only: aplastamos las dos columnas (display: contents) para que
   sus hijos pasen al flex del .rv-detalle__cuerpo. Así podemos reordenar
   con `order` los elementos que vienen de columnas distintas en HTML.
   Resultado: card-fecha → badge → lista de campos → aviso → botón
   "Eliminar reserva" al final. En desktop las columnas vuelven a ser
   cajas (>=1024px las sobreescribe el media query). */
@media (max-width: 1023.98px) {
    .rv-detalle__col           { display: contents; }
    .rv-detalle__card-fecha    { order: 1; }
    .rv-detalle__badge         { order: 2; }
    .rv-detalle__lista         { order: 3; }
    .rv-detalle__aviso         { order: 4; }
    .rv-detalle__borrar        { order: 5; }

    /* Separador también debajo del último campo (Figma: línea cierra la
       lista) y más aire antes del botón "Eliminar reserva". */
    .rv-detalle__lista .rv-detalle__campo:last-child {
        border-bottom: 1px solid var(--rv-borde);
        padding-bottom: 12px;
    }
    .rv-detalle__borrar {
        margin-top: 16px;
    }
}

/* ─── Card de fecha (mobile: pequeña, desktop: hero) ─── */
.rv-detalle__card-fecha {
    position: relative;
    background: var(--rv-blanco) !important;
    border: 1px solid var(--rv-borde) !important;
    border-radius: 20px !important;
    padding: 20px;
    box-sizing: border-box;
}

.rv-detalle__fecha-bloque {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rv-detalle__fecha-grande {
    font-family: var(--font-title) !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.48px !important;
    color: #000 !important;
    margin: 0 !important;
    display: inline-block;
    max-width: 70%;
}
.rv-detalle__dia,
.rv-detalle__dia-num {
    font-weight: 600;
}
.rv-detalle__mes {
    font-weight: 400;
}
.rv-detalle__anio {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    color: var(--rv-tx-600) !important;
    margin: 0 !important;
}

/* Mobile: hora en columna derecha de la card; layout absoluto sobre la card */
.rv-detalle__franja-hora-mobile {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: var(--font-title) !important;
    font-weight: 500 !important;
    font-size: 32px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.64px !important;
    color: #000 !important;
    margin: 0 !important;
}
.rv-detalle__franja-fin-mobile {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    color: var(--rv-tx-600) !important;
    margin: 0 !important;
}

/* En mobile el bloque "Franja horaria" no se muestra (es solo desktop). */
.rv-detalle__sep,
.rv-detalle__franja-bloque {
    display: none;
}

/* ─── Aviso debajo de la card ─── */
.rv-detalle__aviso {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 18px !important;
    letter-spacing: 0.28px !important;
    color: var(--rv-rojo) !important;
    margin: 0 !important;
}
.rv-detalle__aviso-icon {
    display: inline-flex;
    color: var(--rv-rojo);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── Badge "Reserva confirmada" ─── */
.rv-detalle__badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--rv-verde-bg);
    padding: 10px 16px;
    border-radius: 12px;
    align-self: stretch;
}
.rv-detalle__badge-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--rv-verde);
    flex-shrink: 0;
}
.rv-detalle__badge-text {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--rv-verde) !important;
    line-height: 1.2;
}

/* ─── Lista de detalles (mobile: inline con separadores) ─── */
.rv-detalle__lista {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rv-detalle__campo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rv-borde);
}
.rv-detalle__campo:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.rv-detalle__campo-label {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.84px !important;
    color: var(--rv-tx-700) !important;
    line-height: 1.2;
    text-transform: uppercase;
}
.rv-detalle__campo-valor {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 26px !important;
    color: var(--rv-marron) !important;
}

/* ─── Botón danger (rojo "Eliminar reserva") ─── */
.rv-cta--danger {
    background: var(--rv-rojo, #DC3545) !important;
    color: var(--rv-blanco, #fff) !important;
    border: 0 !important;
    /* DEFENSIVO: el theme aplica sombra a <button>; este CTA es un <button>. */
    box-shadow: none !important;
}
.rv-cta--danger:hover {
    background: var(--rv-rojo-hover, #b9293b) !important;
    color: var(--rv-blanco, #fff) !important;
}
.rv-cta--danger * {
    color: var(--rv-blanco, #fff) !important;
}

/* ─── Botón outline (marrón sobre blanco) ─── */
.rv-cta--outline {
    background: var(--rv-blanco, #fff) !important;
    color: var(--rv-marron) !important;
    border: 1px solid var(--rv-marron) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    /* DEFENSIVO: el theme aplica sombra a <button>; este CTA puede ser un <button>. */
    box-shadow: none !important;
}
.rv-cta--outline:hover {
    background: var(--rv-marron) !important;
    color: var(--primary-color-light) !important;
}

/* ─── Estado not found ─── */
.rv-detalle--not-found {
    text-align: center;
    padding: 40px 24px;
    gap: var(--space-16);
    align-items: center;
}

/* ════════════════════════════════════════════════════════════════════
   MODAL ELIMINAR RESERVA
   Replica Figma 144:6263 (mobile bottom sheet) y 144:11800 (desktop centered).
   ════════════════════════════════════════════════════════════════════ */

.rv-modal[hidden] {
    display: none !important;
}
.rv-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;          /* mobile = bottom sheet */
    justify-content: center;
}

.rv-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.rv-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    background: var(--primary-color-light) !important;
    border-radius: 32px 32px 0 0;
    padding: 24px 10px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}

.rv-modal__grabber {
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: #D4D4D4;
}
.rv-modal__cerrar--desktop {
    display: none;
}

.rv-modal__alert {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(246, 131, 26, 0.12);     /* halo naranja claro */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rv-modal__alert-icon {
    font-family: 'Cormorant Garamond', 'Reckless Neue', serif !important;
    font-weight: 300 !important;
    font-size: 80px !important;
    line-height: 1 !important;
    color: var(--cta-color, #F6831A) !important;
    transform: translateY(2px);
}

.rv-modal__textos {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
    padding: 0 16px;
    max-width: 100%;
}
.rv-modal__titulo {
    font-family: var(--font-title) !important;
    font-weight: 300 !important;
    font-size: 24px !important;
    line-height: 32px !important;
    color: var(--primary-color-dark) !important;
    margin: 0 !important;
}
.rv-modal__desc {
    font-family: var(--font-body) !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    letter-spacing: -0.36px !important;
    color: #404040 !important;
    margin: 0 !important;
    text-align: center !important;
}

.rv-modal__acciones {
    display: flex;
    flex-direction: column;       /* mobile = botones apilados, danger arriba */
    gap: 12px;
    width: 100%;
    max-width: 360px;
}
.rv-modal__acciones .rv-cta {
    width: 100%;
}
/* En mobile el orden visual del Figma es: danger arriba, outline abajo.
   En el HTML está como outline → danger; usamos `order` para invertir. */
.rv-modal__btn-cancelar { order: 2; }
.rv-modal__btn-confirmar { order: 1; }

.rv-modal__error {
    color: #b32d2e;
    font-size: 14px;
    text-align: center;
    margin: 0 !important;
    padding: 0 24px;
}

body.rv-modal-open {
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   DESKTOP (>= 1024px) — DETALLE + MODAL
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* Header desktop: link "← Volver", título grande, código naranja,
       todo alineado a la izquierda como en el Figma 144:11643. El
       text-align: left !important blinda contra reglas del theme que
       pueden estar centrando los <h2>/<p> dentro del shortcode. */
    .rv-detalle__header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
        text-align: left !important;
        width: 100%;
    }
    .rv-detalle__back {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto;
        height: auto;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        color: var(--rv-marron) !important;
        font-family: var(--font-body) !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        gap: 10px;
        align-self: flex-start !important;
    }
    .rv-detalle__back-icon {
        display: inline-flex !important;
        color: var(--rv-marron) !important;
    }
    /* En desktop ocultamos el chevron mobile y mostramos el return-arrow. */
    .rv-detalle__back-icon--mobile  { display: none !important; }
    .rv-detalle__back-icon--desktop { display: inline-flex !important; }
    .rv-detalle__back:hover {
        background: transparent !important;
        color: var(--rv-marron) !important;
        text-decoration: underline !important;
    }
    .rv-detalle__back-text--desktop {
        display: inline;
    }
    .rv-detalle__titulos {
        align-items: flex-start !important;
        text-align: left !important;
        width: auto;
    }
    .rv-detalle__titulo {
        font-size: 40px !important;
        line-height: 48px !important;
        letter-spacing: -0.8px !important;
        text-align: left !important;
        width: auto;
    }
    .rv-detalle__codigo {
        display: block;
        font-family: var(--font-body) !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        letter-spacing: 0.84px !important;
        color: var(--rv-naranja) !important;
        margin: 0 !important;
        text-transform: uppercase;
        text-align: left !important;
        margin-top: 15px !important;
    }

    /* 2 columnas */
    .rv-detalle__cuerpo {
        flex-direction: row;
        align-items: flex-start;
        gap: 68px;
    }
    .rv-detalle__col--principal {
        flex: 0 0 600px;
        max-width: 600px;
        gap: 18px;
    }
    .rv-detalle__col--datos {
        flex: 1 1 0;
        max-width: 552px;
        gap: 18px;
    }

    /* Card fecha hero: border naranja, padding grande, layout columna */
    .rv-detalle__card-fecha {
        border: 1.5px solid var(--rv-naranja) !important;
        border-radius: 24px !important;
        padding: 32px;
        min-height: 290px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 24px;
    }
    .rv-detalle__fecha-bloque {
        gap: 8px;
    }
    .rv-detalle__fecha-grande {
        font-size: 40px !important;
        line-height: 1.1 !important;
        letter-spacing: -0.8px !important;
        max-width: 100%;
    }
    .rv-detalle__anio {
        font-family: var(--font-body) !important;
        font-weight: 400 !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
    .rv-detalle__sep {
        display: block;
        border: 0;
        height: 1px;
        background: var(--rv-borde);
        margin: 0;
        width: 100%;
    }
    .rv-detalle__franja-bloque {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .rv-detalle__franja-label {
        font-family: var(--font-body) !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        letter-spacing: 1.28px !important;
        color: var(--rv-tx-600) !important;
        margin: 0 !important;
        text-transform: uppercase;
    }
    .rv-detalle__franja-hora {
        font-family: var(--font-title) !important;
        font-weight: 300 !important;
        font-size: 36px !important;
        line-height: 52px !important;
        color: var(--rv-marron) !important;
        margin: 0 !important;
    }
    /* En desktop ocultamos la hora "mobile" (absoluta) */
    .rv-detalle__franja-hora-mobile,
    .rv-detalle__franja-fin-mobile {
        display: none;
    }

    /* En desktop el badge va arriba (sin cambios) */

    /* Lista: cada item es una card propia */
    .rv-detalle__lista {
        gap: 18px;
    }
    .rv-detalle__campo {
        background: var(--rv-blanco) !important;
        border: 1px solid var(--rv-borde) !important;
        border-radius: 12px !important;
        padding: 10px 18px;
        gap: 4px;
        flex-direction: column;
    }
    .rv-detalle__campo:last-child {
        border-bottom: 1px solid var(--rv-borde) !important;
        padding-bottom: 10px;
    }
    .rv-detalle__campo-label {
        text-transform: none;
    }
    .rv-detalle__campo-valor {
        font-size: 18px !important;
    }

    /* ─── Modal: centrado en lugar de bottom sheet ─── */
    .rv-modal {
        align-items: center;
        padding: 24px;
    }
    .rv-modal__panel {
        width: auto;
        max-width: 600px;
        border-radius: 32px;
        padding: 24px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.24);
    }
    .rv-modal__grabber--mobile {
        display: none;
    }
    .rv-modal__cerrar--desktop {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        background: var(--rv-blanco) !important;
        border: 1px solid var(--rv-borde) !important;
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(50, 21, 5, 0.06),
                    0 2px 6px rgba(50, 21, 5, 0.08);
        color: var(--rv-marron) !important;
        cursor: pointer;
        padding: 0;
        margin: 0;
        line-height: 0;
        transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
        box-shadow: none !important;
        border: none !important;
    }
    .rv-modal__cerrar--desktop:hover {
        background: #fafafa !important;
        border-color: var(--rv-marron) !important;
        box-shadow: 0 2px 4px rgba(50, 21, 5, 0.10),
                    0 4px 12px rgba(50, 21, 5, 0.12);
    }
    .rv-modal__cerrar--desktop svg {
        display: block;
    }

    /* Un pelín más de aire entre la cruz (absoluta) y el icono naranja */
    .rv-modal__panel {
        padding-top: 45px;
        padding-bottom: 45px;
    }
    .rv-modal__titulo {
        font-size: 32px !important;
        line-height: 40px !important;
        letter-spacing: -0.64px !important;
    }
    .rv-modal__textos {
        max-width: 478px;
    }
    .rv-modal__acciones {
        flex-direction: row;
        max-width: 478px;
    }
    .rv-modal__acciones .rv-cta {
        flex: 1 1 0;
    }
    /* En desktop el orden vuelve a ser: outline izq, danger der */
    .rv-modal__btn-cancelar  { order: 0; }
    .rv-modal__btn-confirmar { order: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   WIZARD "NUEVA RESERVA"
   Replica Figma 144:6430 / 144:11722 (paso 1),
              144:6416 / 144:11744 (paso 2 color),
              144:6384 / 144:11766 (paso 2 variedad),
              144:6368 / 189:1711  (paso 3 fecha — pendiente),
              144:6323 / 226:19259 (paso 4 kilos — pendiente).
   ════════════════════════════════════════════════════════════════════ */

.rv-wizard {
    --rv-marron:    var(--primary-color-dark);
    --rv-beige:     var(--primary-color-light);
    --rv-blanco:    var(--secondary-color-3);
    --rv-naranja:   var(--cta-color);
    --rv-borde:     #E5E5E5;
    --rv-tx-700:    #404040;
    --rv-tx-500:    #737373;
    --rv-progress-bg: #F4E6D5;

    background: var(--rv-beige);
    color: var(--rv-tx-700);
    font-family: var(--font-body);
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ─── Header del wizard (back + progreso) ─── */
.rv-wizard__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.rv-wizard__back {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    text-decoration: none !important;
    color: var(--rv-marron) !important;
}
.rv-wizard__back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--rv-blanco) !important;
    border: 1.5px solid var(--rv-marron) !important;
    color: var(--rv-marron) !important;
    flex-shrink: 0;
}
/* En mobile mostramos el chevron; el return-arrow es solo desktop. */
.rv-wizard__back-icon--desktop { display: none; }
.rv-wizard__back-img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}
.rv-wizard__back-text--mobile {
    font-family: var(--font-title) !important;
    font-weight: 300 !important;
    font-size: 20px !important;
    line-height: 28px !important;
    letter-spacing: -0.4px !important;
    color: #000 !important;
}
.rv-wizard__back-text--desktop {
    display: none;
}

.rv-wizard__progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.rv-wizard__progress-label {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: 1.28px !important;
    color: var(--rv-naranja) !important;
    margin: 0 !important;
    text-transform: uppercase;
}
.rv-wizard__progress-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--rv-progress-bg);
    overflow: hidden;
}
.rv-wizard__progress-fill {
    height: 100%;
    background: var(--rv-marron);
    border-radius: 999px;
    transition: width 200ms ease;
}

/* ─── Cuerpo común ─── */
.rv-wizard__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.rv-wizard__titulos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* .rv-wizard__titulos--centrados-desktop: en mobile alineado a la izquierda;
   desktop lo centra (regla en el @media). */
.rv-wizard__titulo {
    font-family: var(--font-title) !important;
    font-weight: 300 !important;
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: -0.64px !important;
    color: var(--rv-marron) !important;
    margin: 0 !important;
}
.rv-wizard__subtitulo {
    font-family: var(--font-body) !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    letter-spacing: -0.36px !important;
    color: var(--rv-tx-700) !important;
    margin: 0 !important;
}
.rv-wizard__subtitulo--meta {
    color: var(--rv-naranja) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 1.12px !important;
    text-transform: uppercase;
}

/* ─── Cards de opción grande (pasos 1 y 2 color) ─── */
.rv-wizard__opciones {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.rv-opt-card {
    background: var(--rv-blanco) !important;
    border: 2px solid var(--rv-marron) !important;
    border-radius: 24px !important;
    padding: 10px !important;
    height: 160px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 32px;
    text-decoration: none !important;
    color: var(--rv-marron) !important;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
    box-sizing: border-box;
}
/* Mobile: el grupo icono + label se ancla al inicio de la card (no se
   centra como bloque). Así los iconos de las dos cards quedan en el
   mismo X y el texto queda justo al lado del icono, conservando la
   relación visual original. */
@media (max-width: 1023.98px) {
    .rv-opt-card {
        justify-content: flex-start !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        gap: 24px;
    }
}
.rv-opt-card:hover {
    background: #fff7e8 !important;
    transform: translateY(-2px);
}
.rv-opt-card__icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rv-opt-card__icon svg,
.rv-opt-card__icon img,
.rv-opt-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.rv-opt-card__circulo {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.rv-opt-card__circulo--blanco {
    background: #E6DF73;
    border: 1.5px solid var(--rv-marron);
}
.rv-opt-card__circulo--negro {
    background: #B5151D;
}
.rv-opt-card__label {
    font-family: var(--font-title) !important;
    font-weight: 300 !important;
    font-size: 32px !important;
    line-height: 32px !important;
    letter-spacing: -0.64px !important;
    color: var(--rv-marron) !important;
}

/* ─── Buscador (paso 2 variedad) ─── */
.rv-buscador {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--rv-blanco) !important;
    border: 1px solid var(--rv-borde) !important;
    border-radius: 999px !important;
    padding: 0 24px;
    height: 56px;
    width: 100%;
    box-sizing: border-box;
}
.rv-buscador__icon {
    display: inline-flex;
    color: var(--rv-tx-500);
    flex-shrink: 0;
}
.rv-buscador__input {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    flex: 1;
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: var(--rv-marron) !important;
    padding: 0 !important;
    height: 100%;
    min-width: 0;
}
.rv-buscador__input::placeholder {
    color: var(--rv-tx-500);
}

/* ─── Meta (paso 2 variedad) ─── */
/* Dos variantes: en mobile va DESPUÉS del buscador (naranja, tracking),
   en desktop va ANTES del buscador dentro del bloque de título (gris,
   sin tracking). Cada una se muestra/oculta por breakpoint. */
.rv-meta-variedades {
    font-family: var(--font-body) !important;
    margin: 0 !important;
    width: 100%;
}
.rv-meta-variedades--mobile {
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    letter-spacing: 1.12px !important;
    color: var(--rv-naranja) !important;
    text-transform: uppercase;
}
.rv-meta-variedades--desktop {
    display: none;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: #737373 !important;
    text-align: center !important;
}

/* ─── Lista de variedades (paso 2 variedad) ─── */
/* Mobile: caja gris con scroll interno, cards en columna apiladas
   (Figma 144:6384 — "c-lista-scrol" 370x356 con bg #F4F4F4 y radius 12). */
.rv-lista-variedades {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    background: #F4F4F4;
    border-radius: 12px;
    padding: 14px;
    max-height: 60vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.rv-variedad-card {
    background: var(--rv-blanco) !important;
    border: 1px solid var(--rv-borde) !important;
    border-radius: 12px !important;
    padding: 10px 24px !important;
    height: 64px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    text-decoration: none !important;
    color: var(--rv-marron) !important;
    box-sizing: border-box;
    transition: background 120ms ease;
}
.rv-variedad-card:hover {
    background: #fff7e8 !important;
}
/* Estado oculto por filtro de búsqueda. Necesita !important porque
   .rv-variedad-card declara `display: flex !important` arriba. */
.rv-variedad-card--oculta {
    display: none !important;
}
.rv-variedad-card__nombre {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    color: var(--rv-marron) !important;
}
.rv-variedad-card__chev {
    color: var(--rv-marron);
    flex-shrink: 0;
    display: inline-flex;
}

/* ════════════════════════════════════════════════════════════════════
   WIZARD — DESKTOP (>= 1024px)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    .rv-wizard {
        gap: 49px;
        padding: 0;
    }

    /* Back link en desktop: solo flecha + "Volver" inline */
    .rv-wizard__back {
        gap: 10px;
    }
    .rv-wizard__back-icon {
        width: 24px;
        height: 24px;
        background: transparent !important;
        border: 0 !important;
    }
    /* En desktop ocultamos el chevron mobile y mostramos el return-arrow. */
    .rv-wizard__back-icon--mobile  { display: none; }
    .rv-wizard__back-icon--desktop { display: inline-flex; }
    .rv-wizard__back-text--mobile {
        display: none;
    }
    .rv-wizard__back-text--desktop {
        display: inline;
        font-family: var(--font-body) !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        color: var(--rv-marron) !important;
    }

    /* Cuerpo centrado vertical y horizontalmente */
    .rv-wizard__body {
        align-items: center;
        gap: 64px;
        min-height: 60vh;
        justify-content: center;
    }

    .rv-wizard__titulos {
        align-items: center;
        text-align: center;
    }
    .rv-wizard__titulo {
        font-size: 40px !important;
        line-height: 48px !important;
        letter-spacing: -0.8px !important;
    }
    .rv-wizard__subtitulo {
        font-size: 20px !important;
        line-height: 26px !important;
        letter-spacing: -0.4px !important;
        max-width: 480px;
    }

    /* Opciones en fila */
    .rv-wizard__opciones--2col {
        flex-direction: row;
        gap: 32px;
        justify-content: center;
    }
    .rv-opt-card {
        width: 400px;
        height: 240px;
    }

    /* Meta: en desktop usamos la variante gris dentro del bloque
       de título (gap 12px con el h2). La variante mobile naranja
       se oculta. (Figma 144:11776) */
    .rv-meta-variedades--mobile  { display: none; }
    .rv-meta-variedades--desktop { display: block; }

    /* Buscador centrado y más ancho */
    .rv-buscador {
        max-width: 600px;
        align-self: center;
    }

    /* Lista en desktop: sin caja gris, wrap libre con gap 24px */
    .rv-lista-variedades {
        background: transparent;
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
        max-height: none;
        overflow-y: visible;
        justify-content: center;
    }
    .rv-variedad-card {
        flex: 0 0 334px;
        max-width: 334px;
    }

    /* Compactar SOLO la pantalla de variedad (mucho contenido vertical):
       reduce el gap header→body y el gap entre título/meta/buscador/lista.
       `:has(.rv-lista-variedades)` aísla la regla a este paso, no afecta a
       los otros pasos del wizard. */
    .rv-wizard:has(.rv-lista-variedades) {
        gap: 24px;
    }
    .rv-wizard__body:has(.rv-lista-variedades) {
        gap: 40px;
        min-height: 0;
        justify-content: flex-start;
    }
}

/* ════════════════════════════════════════════════════════════════════
   WIZARD PASO 3 — Selector de día + franjas horarias
   Replica Figma 144:6368 (mobile) y 189:1711 (desktop).
   ════════════════════════════════════════════════════════════════════ */

.rv-dias {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}
.rv-dias__cabecera {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: 1.44px !important;
    color: var(--primary-color-dark) !important;
    margin: 0 !important;
    text-align: center !important;
    text-transform: uppercase;
}
.rv-dias__dia-activo {
    color: var(--cta-color) !important;
}

.rv-dias__scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.rv-dias__flecha {
    display: none;
    align-items: center;
    justify-content: center;
    /* Botón compacto (Figma 226:18904 → 36px diámetro, borde fino marrón). */
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: 999px;
    background: var(--secondary-color-3) !important;
    border: 1px solid var(--primary-color-dark) !important;
    color: var(--primary-color-dark) !important;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none !important;
    outline: none !important;
}
.rv-dias__flecha svg {
    width: 25px;
    height: 25px;
    display: block;
}
.rv-dias__lista {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: none;
}
.rv-dias__lista::-webkit-scrollbar { display: none; }

.rv-dia {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--secondary-color-3) !important;
    border: 1px solid #737373 !important;
    border-radius: 999px;
    width: 72px;
    height: 72px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    color: #404040 !important;
    flex-shrink: 0;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.12) !important;
    outline: none !important;
    scroll-snap-align: center;
    transition: background 120ms ease, color 120ms ease;
}
.rv-dia__sem {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.28px !important;
    color: inherit !important;
}
.rv-dia__num {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.36px !important;
    color: #000 !important;
}
.rv-dia__mes {
    display: none;
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    color: inherit !important;
}
.rv-dia--active {
    background: var(--primary-color-dark) !important;
    border-color: var(--primary-color-dark) !important;
    color: var(--cta-color) !important;
}
.rv-dia--active .rv-dia__num {
    color: var(--secondary-color-3) !important;
}
.rv-dia--active .rv-dia__mes {
    color: var(--primary-color-light) !important;
}

/* ─── Franjas del día ─── */
.rv-franjas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
/* Envoltorio de la lista scrollable: sobre él van los degradados (arriba y
   abajo) como pista de scroll. Es no-scrollable (scrollea el grupo interior),
   así los degradados quedan fijos en sus bordes. */
.rv-franjas__scroll {
    position: relative;
}
.rv-franjas__scroll::before,
.rv-franjas__scroll::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
    z-index: 1;
}
/* Arriba: visible solo cuando has bajado (hay franjas por encima). */
.rv-franjas__scroll::before {
    top: 0;
    background: linear-gradient(to top, transparent, var(--rv-beige));
}
/* Abajo: visible mientras queden franjas por debajo (no estás al final). */
.rv-franjas__scroll::after {
    bottom: 0;
    background: linear-gradient(to bottom, transparent, var(--rv-beige));
}
.rv-franjas__scroll.is-scroll-top::before { opacity: 1; }
.rv-franjas__scroll.is-scroll::after      { opacity: 1; }
.rv-franjas__cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: -0.28px !important;
    color: #404040 !important;
    margin: 0 !important;
}
.rv-franjas__icon {
    display: inline-flex !important;
    color: #27A745 !important;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.rv-franjas__icon svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    fill: #27A745 !important;
}
.rv-franjas__icon svg path {
    fill: #27A745 !important;
}
.rv-franjas__grupo[hidden] { display: none !important; }
.rv-franjas__grupo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    /* Scroll propio de la lista: si hay muchas franjas, la lista scrollea por
       dentro y el botón "Continuar" queda visible sin mover la página. */
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

/* Mensaje "no hay franjas este día" — cuando el día seleccionado existe
   en la tira pero ningún slot es compatible con la variedad elegida. */
.rv-franjas__vacio {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: #737373 !important;
    text-align: center;
    margin: 0 !important;
    padding: 32px 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed #E5E5E5;
    border-radius: 12px;
}

.rv-franja-card {
    background: var(--secondary-color-3) !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    text-decoration: none !important;
    color: var(--primary-color-dark) !important;
    box-sizing: border-box;
    transition: background 120ms ease, border-color 120ms ease;
}
.rv-franja-card:hover {
    background: #fff7e8 !important;
    border-color: var(--primary-color-dark) !important;
}
.rv-franja-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.rv-franja-card__hora {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    line-height: 29px !important;
    color: var(--primary-color-dark) !important;
    margin: 0 !important;
}
.rv-franja-card__disp {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #525252 !important;
    margin: 0 !important;
}
.rv-franja-card__badge {
    display: inline-flex;
    align-items: center;
    background: #FBE3C7 !important;
    color: #9A4E0B !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 18px !important;
    padding: 4px 12px;
    border-radius: 999px;
    align-self: flex-start;
}
.rv-franja-card__chev {
    color: var(--primary-color-dark);
    flex-shrink: 0;
    display: inline-flex;
}

/* Franja seleccionada (Figma 144:9502 / 226:19101) — border naranja
   y check circular naranja en lugar del chevron. */
.rv-franja-card--seleccionada {
    border: 2px solid var(--cta-color) !important;
}
.rv-franja-card__check {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--cta-color);
    color: var(--secondary-color-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Franja LLENA: se muestra pero en rojo y no se puede seleccionar. */
.rv-franja-card--ocupada,
.rv-franja-card--ocupada:hover {
    background: #FCEBEB !important;
    border-color: #E6B0B0 !important;
    color: #B32424 !important;
    cursor: not-allowed;
}
.rv-franja-card--ocupada .rv-franja-card__hora {
    color: #B32424 !important;
    opacity: 0.85;
}
.rv-franja-card__badge--ocupada {
    background: #F3C6C6 !important;
    color: #8A1F1F !important;
}

/* CTA visualmente deshabilitado (link <a> sin atributo disabled) */
.rv-cta--disabled {
    background: #E5E5E5 !important;
    color: #737373 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
.rv-cta--disabled:hover {
    background: #E5E5E5 !important;
    color: #737373 !important;
}

/* ─── Aviso info (desktop solo) ─── */
.rv-wizard__info-msg {
    display: none;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.64px !important;
    color: #404040 !important;
    margin: 0 !important;
}
.rv-wizard__info-icon {
    display: inline-flex;
    color: var(--cta-color);
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .rv-wizard__info-msg--desktop {
        display: flex;
    }
    .rv-dias__cabecera { display: none; }   /* desktop: la fecha activa va dentro de la card del día */
    .rv-dias__flecha {
        display: inline-flex;
    }
    /* La tira actúa como carrusel: sólo 7 días visibles a la vez.
       Cada día = (ancho-lista − 6*gap) / 7. El scroll horizontal sigue
       activo para hacer scrollBy de un día desde las flechas. */
    .rv-dias__scroll {
        gap: 16px;
    }
    .rv-dias__lista {
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 16px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .rv-dias__lista::-webkit-scrollbar { display: none; }

    .rv-dia {
        flex: 0 0 calc((100% - 96px) / 7);   /* 6 gaps de 16px = 96px */
        width: auto;
        height: 100px;
        border-radius: 16px;
        gap: 2px;
        background: var(--secondary-color-3) !important;
        border: 1px solid #B3B3B3 !important;
        box-shadow: none !important;
        padding: 12px 0;
    }
    .rv-dia__sem {
        font-size: 13px !important;
        color: #737373 !important;
    }
    .rv-dia__num {
        font-family: var(--font-title) !important;
        font-weight: 300 !important;
        font-size: 32px !important;
        line-height: 40px !important;
        letter-spacing: -0.64px !important;
        color: var(--primary-color-dark) !important;
    }
    .rv-dia__mes {
        display: block;
        font-size: 12px !important;
        color: #737373 !important;
    }
    .rv-dia--active {
        background: var(--primary-color-dark) !important;
        border-color: var(--primary-color-dark) !important;
    }
    .rv-dia--active .rv-dia__sem,
    .rv-dia--active .rv-dia__mes {
        color: var(--primary-color-light) !important;
    }
    .rv-dia--active .rv-dia__num {
        color: var(--secondary-color-3) !important;
    }

    /* Grid de franjas: SIEMPRE 2 columnas en desktop (replica Figma).
       Antes usábamos auto-fill con minmax, lo que daba 3-4 columnas en
       pantallas anchas. El Figma muestra exactamente 2 columnas. */
    .rv-franjas__grupo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .rv-franja-card {
        min-height: 90px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   WIZARD PASO 4 — Kilos (stepper + barra reserva)
   Replica Figma 144:6323 (mobile) y 226:19259 (desktop).
   ════════════════════════════════════════════════════════════════════ */

/* Resumen contextual de la franja elegida */
.rv-resumen {
    background: var(--secondary-color-3) !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 12px !important;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}
.rv-resumen__label {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.96px !important;
    color: var(--cta-color) !important;
    margin: 0 !important;
    text-transform: uppercase;
}
.rv-resumen__franja {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    color: var(--primary-color-dark) !important;
    margin: 0 !important;
}
.rv-resumen__disp {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: #737373 !important;
    margin: 0 !important;
}

/* Stepper +/- con input central */
.rv-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.rv-stepper__btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    border: 0 !important;
    cursor: pointer;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rv-stepper__btn--minus {
    background: var(--secondary-color-3) !important;
    border: 1.5px solid var(--primary-color-dark) !important;
    color: var(--primary-color-dark) !important;
}
.rv-stepper__btn--plus {
    background: var(--cta-color) !important;
    color: var(--secondary-color-3) !important;
}
.rv-stepper__input {
    background: var(--secondary-color-3) !important;
    border: 1.5px solid #E5E5E5 !important;
    border-radius: 12px !important;
    height: 88px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.rv-stepper__valor {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 40px !important;
    line-height: 44px !important;
    color: var(--primary-color-dark) !important;
    margin: 0 !important;
    text-align: center;
    /* Es un <input> editable; lo "vestimos" como si fuera texto plano. */
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    -moz-appearance: textfield;   /* oculta los spinners nativos en Firefox */
}
.rv-stepper__valor::-webkit-outer-spin-button,
.rv-stepper__valor::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.rv-stepper__valor:focus {
    outline: 0 !important;
    box-shadow: none !important;
}
.rv-stepper__unidad {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 15px !important;
    color: #737373 !important;
    margin: 0 !important;
    text-align: center;
}

/* Barra de progreso de la reserva */
.rv-barra-reserva {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.rv-barra-reserva__texto {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: #404040 !important;
    margin: 0 !important;
}
.rv-barra-reserva__track {
    height: 8px;
    border-radius: 999px;
    background: #F4E6D5;
    overflow: hidden;
}
.rv-barra-reserva__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--cta-color);
    transition: width 160ms ease, background-color 160ms ease;
}
/* Cuando la barra llega al 100% (kilos reservados = capacidad de la franja)
   cambia de naranja claro a naranja oscuro para señalar "lleno". */
.rv-barra-reserva__fill--full {
    background: #C2620B !important;
}

.rv-wizard__error {
    color: #b32d2e;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    text-align: center;
    margin: 0 !important;
}

/* ─── Mensaje de error de capacidad (paso 4 "no caben tantos kilos") ─── */
.rv-mensaje-error[hidden] {
    display: none !important;
}
.rv-mensaje-error {
    background: #FDECEA !important;
    border: 1px solid #DC3545 !important;
    border-radius: 12px !important;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}
.rv-mensaje-error__cabecera {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.rv-mensaje-error__icon {
    flex-shrink: 0;
    display: inline-flex;
}
.rv-mensaje-error__titulo {
    flex: 1 1 0;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: var(--primary-color-dark) !important;
    margin: 0 !important;
}
.rv-mensaje-error__desc {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 20px !important;
    color: #404040 !important;
    margin: 0 !important;
}
.rv-mensaje-error__link,
a.rv-mensaje-error__link,
.rv-mensaje-error a.rv-mensaje-error__link {
    display: inline-block !important;
    font-family: var(--font-body) !important;
    /* Mismo peso/tamaño que el título (Figma): SemiBold 16/22, sin subrayado. */
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    color: var(--primary-color-dark) !important;
    text-decoration: none !important;
}
.rv-mensaje-error__link:hover {
    color: var(--cta-color) !important;
    text-decoration: none !important;
}

/* Stepper en estado disabled (capacidad excedida) */
.rv-stepper--disabled .rv-stepper__btn--minus {
    border-color: #B3B3B3 !important;
    color: #B3B3B3 !important;
}
.rv-stepper--disabled .rv-stepper__btn--plus {
    background: #E5E5E5 !important;
    color: #737373 !important;
}
.rv-stepper--disabled .rv-stepper__valor {
    color: #B3B3B3 !important;
}

@media (min-width: 1024px) {
    .rv-resumen,
    .rv-stepper,
    .rv-barra-reserva,
    .rv-mensaje-error {
        max-width: 560px;
        align-self: center;
    }
    /* Botón "Continuar" / "Confirmar reserva" más estrecho que la columna
       (Figma: ~360px de ancho centrado, no ocupa los 560px). */
    .rv-wizard__body > .rv-cta {
        max-width: 360px;
        align-self: center;
    }
    .rv-stepper {
        justify-content: center;
        gap: 16px;
    }
    .rv-stepper__input {
        flex: 0 0 180px;
    }
}

/* Mobile: extra aire entre la barra de reserva y el CTA primary del paso 4. */
@media (max-width: 1023.98px) {
    .rv-barra-reserva + .rv-cta,
    .rv-barra-reserva + .rv-mensaje-error + .rv-cta {
        margin-top: 16px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PANTALLA "RESERVA CONFIRMADA"
   Replica Figma 144:6297 (mobile) y 226:18587 (desktop).
   ════════════════════════════════════════════════════════════════════ */

.rv-confirmada {
    /* Variables locales (la .rv-card que se reusa aquí dentro las espera) */
    --rv-marron:    var(--primary-color-dark);
    --rv-beige:     var(--primary-color-light);
    --rv-blanco:    var(--secondary-color-3);
    --rv-borde:     #E5E5E5;
    --rv-ok:        #27A745;
    --rv-ok-bg:     #E8F5E9;
    --rv-tx-700:    #404040;
    --rv-tx-600:    #525252;
    --rv-tx-500:    #737373;

    background: var(--primary-color-light);
    font-family: var(--font-body);
    color: #404040;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    /* Aire arriba (en mobile el check se cortaba al borde superior del panel)
       y abajo. El desktop sobreescribe a 40/80 más abajo. */
    padding: 32px 16px 40px;
    box-sizing: border-box;
    text-align: center;
}

.rv-confirmada__alert {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* Círculo verde sólido con el check en blanco (Figma 144:6297). */
    background: #27A745 !important;
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rv-confirmada__textos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center !important;
    width: 100%;
    align-items: center;
}
.rv-confirmada__titulo {
    font-family: var(--font-title) !important;
    font-weight: 300 !important;
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: -0.64px !important;
    color: var(--primary-color-dark) !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100%;
}
.rv-confirmada__codigo {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: 1.28px !important;
    color: var(--cta-color) !important;
    margin: 0 !important;
    text-transform: uppercase;
    text-align: center !important;
    width: 100%;
}

.rv-confirmada__resumen {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 480px;
}

.rv-confirmada__email {
    background: #FFF3E0;
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.rv-confirmada__email-icon {
    color: var(--primary-color-dark);
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 2px;
}
.rv-confirmada__email-textos {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rv-confirmada__email-titulo {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: -0.28px !important;
    color: var(--primary-color-dark) !important;
    margin: 0 !important;
}
.rv-confirmada__email-direccion {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: -0.24px !important;
    color: #404040 !important;
    margin: 0 !important;
    word-break: break-all;
}

.rv-confirmada__acciones {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 480px;
}

.rv-confirmada--error {
    text-align: center;
    padding: 40px 24px;
    gap: 16px;
}

/* ════════════════════════════════════════════════════════════════════
   PANTALLA "RESERVA BORRADA"
   Replica Figma 144:6310 (mobile) y 226:19548 (desktop).
   Estructura idéntica a .rv-confirmada (icono + título + desc + email +
   2 botones) pero con icono papelera rojo y CTAs orientadas al histórico.
   ════════════════════════════════════════════════════════════════════ */

.rv-borrada {
    background: var(--primary-color-light);
    font-family: var(--font-body);
    color: #404040;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.rv-borrada__alert {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.12);
    color: #DC3545;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rv-borrada__textos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center !important;
    width: 100%;
    align-items: center;
}
.rv-borrada__titulo {
    font-family: var(--font-title) !important;
    /* Reckless Neue Book (400), no Light — el diseño usa Book más sólido. */
    font-weight: 400 !important;
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: -0.64px !important;
    color: #321505 !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100%;
}
.rv-borrada__desc {
    font-family: var(--font-body) !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    letter-spacing: -0.36px !important;
    color: #404040 !important;
    margin: 0 !important;
    text-align: center !important;
    max-width: 326px;
}

.rv-borrada__email {
    background: #FFF3E0 !important;
    border-radius: 12px !important;
    padding: 8px 20px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content;
    max-width: 480px;
    box-sizing: border-box;
}
.rv-borrada__email-icon {
    color: #321505 !important;
    flex-shrink: 0;
    display: inline-flex !important;
}
.rv-borrada__email-texto {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: -0.28px !important;
    color: #321505 !important;
    margin: 0 !important;
}

.rv-borrada__acciones {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 480px;
}
/* Refuerzo de colores y visibilidad sobre cualquier override del theme.
   Diseño Figma: primary = #321505 con texto blanco; outline = blanco con
   borde #321505 y texto #321505. */
.rv-borrada__acciones .rv-cta {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.rv-borrada__acciones .rv-cta--primary,
.rv-borrada__acciones .rv-cta--primary * {
    background: #321505 !important;
    color: #FFFFFF !important;
    border: 0 !important;
}
.rv-borrada__acciones .rv-cta--outline,
.rv-borrada__acciones .rv-cta--outline * {
    background: #FFFFFF !important;
    color: #321505 !important;
    border: 1px solid #321505 !important;
}

.rv-borrada--error {
    text-align: center;
    padding: 40px 24px;
    gap: 16px;
}

@media (min-width: 1024px) {
    .rv-borrada {
        gap: 42px;
        padding: 60px 80px 0px !important;
    }
    .rv-borrada__titulo {
        font-size: 40px !important;
        line-height: 48px !important;
        letter-spacing: -0.8px !important;
    }
    .rv-borrada__email {
        max-width: 600px;
    }
    .rv-borrada__acciones {
        flex-direction: row;
        width: 700px;
        max-width: 100%;
    }
    .rv-borrada__acciones .rv-cta {
        flex: 1 1 0;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PANTALLA "SIN DISPONIBILIDAD"
   Replica Figma 144:6286 (mobile) y 226:18904 (desktop).
   Se muestra cuando intentas confirmar una reserva y la franja se ha
   ocupado entre que cargaste el bundle y pulsaste el botón.
   ════════════════════════════════════════════════════════════════════ */

.rv-sin-disp {
    background: var(--primary-color-light);
    font-family: var(--font-body);
    color: #404040;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 60px 32px 80px;
}

.rv-sin-disp__alert {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(246, 131, 26, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rv-sin-disp__alert-icon {
    font-family: 'Cormorant Garamond', 'Reckless Neue', serif !important;
    font-weight: 300 !important;
    font-size: 80px !important;
    line-height: 1 !important;
    color: var(--cta-color, #F6831A) !important;
    transform: translateY(2px);
}

.rv-sin-disp__textos {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    text-align: center !important;
    width: 100%;
    max-width: 480px;
}
.rv-sin-disp__titulo {
    font-family: var(--font-title) !important;
    /* Reckless Neue Book (400), no Light — diseño Figma. */
    font-weight: 400 !important;
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: -0.64px !important;
    color: #321505 !important;
    margin: 0 !important;
    text-align: center !important;
}
.rv-sin-disp__desc {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    text-align: center;
}
.rv-sin-disp__desc p {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    letter-spacing: -0.36px !important;
    color: #404040 !important;
    margin: 0 !important;
    text-align: center !important;
}
.rv-sin-disp__desc p.rv-sin-disp__desc--bold,
p.rv-sin-disp__desc--bold {
    font-weight: 700 !important;
    color: #321505 !important;
}

.rv-sin-disp__acciones {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 480px;
}
/* Refuerzo de colores y visibilidad sobre cualquier override del theme.
   Diseño Figma 144:6286 / 226:18904: primary = #321505 fondo + texto blanco;
   outline = blanco con borde #321505 y texto #321505. */
.rv-sin-disp__acciones .rv-cta {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.rv-sin-disp__acciones .rv-cta--primary,
.rv-sin-disp__acciones .rv-cta--primary * {
    background: #321505 !important;
    color: #FFFFFF !important;
    border: 0 !important;
}
.rv-sin-disp__acciones .rv-cta--outline,
.rv-sin-disp__acciones .rv-cta--outline * {
    background: #FFFFFF !important;
    color: #321505 !important;
    border: 1px solid #321505 !important;
}
.rv-wizard__back{
    margin-top: 55px !important;
    margin-bottom: 15px !important;
}
.rv-borrada__acciones .rv-cta--outline{
    font-weight: 600 !important;
}

@media (min-width: 1024px) {
    .rv-sin-disp {
        gap: 56px;
        padding: 80px;
        justify-content: center;
        min-height: 60vh;
    }
    .rv-sin-disp__titulo {
        font-size: 40px !important;
        line-height: 48px !important;
        letter-spacing: -0.8px !important;
    }
    .rv-sin-disp__acciones {
        flex-direction: row;
        width: 700px;
        max-width: 100%;
    }
    .rv-sin-disp__acciones .rv-cta {
        flex: 1 1 0;
    }
    .rv-confirmada {
        /* Padding vertical compacto (antes 60/60, ahora 32/40) — el módulo
           queda más pegado al borde superior del panel como en el Figma. */
        gap: 32px;
        padding: 32px 80px 40px;
    }
    .rv-confirmada__titulo {
        font-size: 40px !important;
        line-height: 48px !important;
        letter-spacing: -0.8px !important;
    }
    .rv-confirmada__resumen {
        width: 400px;
    }
    .rv-confirmada__acciones {
        flex-direction: row;
        width: 700px;
        max-width: 100%;
    }
    .rv-confirmada__acciones .rv-cta {
        flex: 1 1 0;
    }
    .rv-wizard__back{
        margin-top: 0px !important;
    }
    .rv-detalle__aviso,
    .rv-borrada__email{
        margin-bottom: 15px !important;
    }
    .rv-app:has(.rv-confirmada){
        margin-bottom: 0px !important;
    }
    .rv-app:has(.rv-sin-disp){
        margin-bottom: 0px !important;
    }
    .rv-app.rv-sin-disp{
        padding-bottom: 0px !important;
    }
}
@media (max-width: 1023.5px){
    .rv-app > section.rv-section > .rv-total{
        display: none !important;
    }
    .rv-listado{
        margin-bottom: 65px !important;
    }
    .rv-wizard__body .rv-wizard__subtitulo{
        margin-bottom: 40px !important;
        text-align: left !important;
    }
    .rv-detalle__anio{
        margin-top: 15px !important;
    }
    .rv-detalle__franja-fin-mobile{
        bottom: 20px !important;
    }
    .rv-detalle__back-icon.rv-detalle__back-icon--mobile{
        display: flex !important;
    }
    .rv-detalle__aviso{
        display: none !important;
    }
    .rv-borrada{
        padding-top: 120px !important;
    }
    .rv-borrada__email{
        margin-top: 20px !important;
        margin-bottom: 35px !important;
    }
    header.rv-wizard__header{
        margin-bottom: 0px !important;
    }
    .rv-app:has(.rv-confirmada){
        margin-top: 65px !important;
    }
}