/* ============================================================
 *  Space Paintball — Componente: flujo de reserva (acordeón)
 *  assets/css/reservas.css
 * ------------------------------------------------------------
 *  Animación de apertura + colores del calendario y las tandas.
 *  El tema global del sitio (tipografías, header, footer, etc.)
 *  vive en assets/css/estilos.css (se hace de último).
 *
 *  Paleta local (provisional, se alineará al tema final):
 *    azul marca   #0b1e3f
 *    verde claro  #8fd9ab   (disponible)
 *    verde oscuro #1f7a47   (seleccionado)
 *    ámbar        #f3d27a   (pocos cupos)
 *    gris/blanco  #eef1f6   (deshabilitado)
 * ============================================================ */

.reserva {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 16px 56px;
}

/* El atributo HTML [hidden] debe ganarle a cualquier display de abajo
   (si no, el botón Reservar con [hidden] se vería igual). */
.reserva [hidden] { display: none !important; }

.reserva__titulo {
    font-size: 1.7rem;
    color: #0b1e3f;
    margin: 0 0 22px;
}

/* ---------- Acordeón ---------- */
.acordeon {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.panel {
    border: 1px solid #e3e7ee;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: opacity .25s ease, border-color .25s ease;
}
.panel--abierto { border-color: #c8d2e0; box-shadow: 0 6px 18px rgba(11, 30, 63, .06); }

.panel__cab {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: #0b1e3f;
}
.panel__num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #9aa3b2;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .9rem;
    font-weight: 700;
    transition: background .25s ease;
}
.panel--abierto .panel__num { background: #0b1e3f; }
.panel--hecho   .panel__num { background: #1f7a47; }

.panel__titulo { font-weight: 600; flex: 1; }
.panel__resumen {
    color: #1f7a47;
    font-weight: 600;
    font-size: .95rem;
    margin-left: auto;
    padding-right: 6px;
}
.panel--abierto .panel__resumen { display: none; }      /* el resumen se ve solo cuando está colapsado */

.panel__flecha {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid #9aa3b2;
    border-bottom: 2px solid #9aa3b2;
    transform: rotate(45deg);
    transition: transform .3s ease;
}
.panel--abierto .panel__flecha { transform: rotate(-135deg); }

/* Panel bloqueado: atenuado y sin interacción */
.panel--bloqueado { opacity: .55; }
.panel--bloqueado .panel__cab { cursor: default; }

/* Animación de apertura: 0fr → 1fr (fluida, sin medir alturas en JS) */
.panel__cuerpo-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}
.panel--abierto .panel__cuerpo-wrap { grid-template-rows: 1fr; }
.panel__cuerpo {
    overflow: hidden;
    min-height: 0;
    padding: 0 18px;
    opacity: 0;
    transition: opacity .3s ease .05s;
}
.panel--abierto .panel__cuerpo { opacity: 1; }
.panel__cuerpo > :last-child { margin-bottom: 18px; }

/* ---------- Tarjetas de tipo de juego ---------- */
.tipos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    padding-top: 6px;
}
.tipo-card {
    border: 1px solid #d7dce6;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.tipo-card:hover { border-color: #1f7a47; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(11, 30, 63, .06); }
.tipo-card:focus-visible { outline: 2px solid #1f7a47; outline-offset: 2px; }
.tipo-card--sel { border-color: #1f7a47; box-shadow: 0 0 0 2px #1f7a47 inset; }
.tipo-card__media { margin-bottom: 12px; }
.tipo-card__img { width: 100%; border-radius: 10px; display: block; }
.tipo-card__nombre { font-weight: 700; color: #0b1e3f; font-size: 1.25rem; margin: 0 0 6px; }
.tipo-card__precio { font-weight: 700; color: #1f7a47; margin: 0 0 4px; }
.tipo-card__meta   { font-size: .9rem; color: #6b7280; margin: 0 0 12px; }

/* ---------- Calendario ---------- */
.calendario { padding-top: 6px; max-width: 430px; }
.calendario__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.calendario__mes {
    font-weight: 700;
    color: #0b1e3f;
    text-transform: capitalize;
}
.calendario__nav {
    width: 36px;
    height: 36px;
    border: 1px solid #d7dce6;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    color: #0b1e3f;
    transition: background .2s ease;
}
.calendario__nav:hover { background: #f1f4f9; }

.calendario__grilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.calendario__dow {
    text-align: center;
    font-size: .78rem;
    color: #9aa3b2;
    padding: 2px 0 4px;
    font-weight: 600;
}
.calendario__dia {
    aspect-ratio: 1 / 1;            /* celdas cuadradas */
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: .95rem;
    display: grid;
    place-items: center;
    background: #eef1f6;            /* deshabilitado por defecto */
    color: #c2c9d4;
    transition: transform .12s ease, background .2s ease, color .2s ease;
}
.calendario__dia--vacio   { background: transparent; cursor: default; }
.calendario__dia--rojo    { background: #eef1f6; color: #c2c9d4; }       /* sin cupos = blanco/gris */
.calendario__dia--amarillo{ background: #f3d27a; color: #0b1e3f; }       /* pocos cupos */
.calendario__dia--verde   { background: #8fd9ab; color: #0b1e3f; }       /* disponible */
.calendario__dia--verde:hover,
.calendario__dia--amarillo:hover { transform: scale(1.06); }
.calendario__dia--sel     { background: #1f7a47; color: #fff; font-weight: 700; }  /* seleccionado */
.calendario__dia[disabled]{ cursor: default; }
.calendario__dia[disabled]:hover { transform: none; }

.calendario__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    font-size: .8rem;
    color: #6b7280;
}
.leyenda::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: -1px;
}
.leyenda--verde::before    { background: #8fd9ab; }
.leyenda--amarillo::before { background: #f3d27a; }
.leyenda--rojo::before     { background: #eef1f6; border: 1px solid #dde2ea; }

/* ---------- Tandas ---------- */
.tandas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    padding-top: 6px;
}
.tanda {
    border: 0;
    border-radius: 10px;
    padding: 12px 10px;
    cursor: pointer;
    background: #8fd9ab;
    color: #0b1e3f;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    transition: transform .12s ease, box-shadow .2s ease;
}
.tanda:hover { transform: translateY(-2px); }
.tanda--sel  { box-shadow: 0 0 0 3px #1f7a47 inset; }
.tanda--no   { background: #f3e0e0; color: #b06a6a; cursor: not-allowed; }
.tanda--no:hover { transform: none; }
.tanda__hora    { font-weight: 700; font-size: 1.05rem; }
.tanda__detalle { font-size: .78rem; opacity: .85; }

/* ---------- Jugadores + precio ---------- */
.jugadores {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
}
.jugadores__btn {
    width: 44px;
    height: 44px;
    border: 1px solid #d7dce6;
    background: #fff;
    border-radius: 10px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #0b1e3f;
    transition: background .2s ease;
}
.jugadores__btn:hover { background: #f1f4f9; }
.jugadores__input {
    width: 88px;
    height: 44px;
    text-align: center;
    font-size: 1.15rem;
    border: 1px solid #d7dce6;
    border-radius: 10px;
    color: #0b1e3f;
}
.precio {
    margin-top: 14px;
    padding: 14px 16px;
    background: #0b1e3f;
    color: #fff;
    border-radius: 10px;
}
.precio p { margin: 3px 0; }
.precio strong { color: #8fd9ab; }

/* ---------- Acciones / botones ---------- */
.reserva__acciones {
    margin-top: 18px;
    text-align: right;
}
.reserva .btn {
    display: inline-block;
    background: #0b1e3f;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 13px 26px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, opacity .2s ease;
}
.reserva .btn:hover { transform: translateY(-1px); }
.reserva .btn--cta { background: #1f7a47; font-size: 1.05rem; }
.reserva .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Notas ---------- */
.nota { color: #6b7280; font-size: .9rem; margin: 8px 0 0; }
.nota--error { color: #c0392b; }
.nota--placeholder {
    border: 1px dashed #c8d2e0;
    border-radius: 8px;
    padding: 14px;
    background: #f7f9fc;
    margin-top: 4px;
}

/* ---------- Paso 0: selección de modalidad ---------- */
.seleccion__titulo {
    font-size: 1.15rem;
    color: #0b1e3f;
    margin: 4px 0 14px;
}

/* ---------- Layout de 2 columnas ---------- */
.reserva__doble {
    display: grid;
    grid-template-columns: 1fr;   /* móvil/tablet: producto arriba, reserva abajo */
    gap: 24px;
    align-items: start;
}
@media (min-width: 820px) {
    .reserva__doble {
        grid-template-columns: minmax(280px, 360px) 1fr;  /* escritorio: producto | reserva */
    }
}
.reserva__flujo { min-width: 0; }   /* evita que el calendario desborde la columna */

/* ---------- Columna de producto ---------- */
.producto {
    border: 1px solid #e3e7ee;
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(11, 30, 63, .05);
}
@media (min-width: 820px) {
    .producto { position: sticky; top: 16px; }  /* queda a la vista al hacer scroll */
}
.producto__cambiar {
    background: none;
    border: 0;
    color: #1f7a47;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 12px;
}
.producto__cambiar:hover { text-decoration: underline; }
.producto__media { margin-bottom: 12px; }
.producto__img {
    width: 100%;
    border-radius: 12px;
    display: block;
}
.producto__nombre { font-size: 1.3rem; color: #0b1e3f; margin: 0 0 6px; }
.producto__precio { color: #1f7a47; font-weight: 700; margin: 0 0 4px; }
.producto__meta   { color: #6b7280; font-size: .9rem; margin: 0 0 12px; }

/* Descripción: HTML libre que arma el admin (bullets, negritas, etc.) */
.producto__desc { color: #44506a; font-size: .95rem; line-height: 1.55; }
.producto__desc h1,
.producto__desc h2,
.producto__desc h3 { color: #0b1e3f; margin: 14px 0 6px; font-size: 1.05rem; }
.producto__desc p  { margin: 8px 0; }
.producto__desc ul,
.producto__desc ol { margin: 8px 0; padding-left: 20px; }
.producto__desc li { margin: 3px 0; }
.producto__desc strong { color: #0b1e3f; }
.producto__desc a { color: #1f7a47; }
.producto__desc img { border-radius: 8px; margin: 8px 0; }

/* ---------- Respeta "reducir movimiento" del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
    .panel__cuerpo-wrap,
    .panel__cuerpo,
    .panel__flecha,
    .panel__num,
    .calendario__dia,
    .tanda,
    .tipo-card,
    .btn { transition: none; }
}

/* ============================================================
   Carrito (placeholder de la Etapa C.4c)
   ============================================================ */
/* ============================================================
   Carrito y pago en dos columnas
   ------------------------------------------------------------
   Antes las dos pantallas topaban en 640px. En un monitor de 1920
   eso deja dos tercios de la pantalla vacíos y obliga a bajar hasta
   el final de una lista larga para encontrar el botón.

   Ahora: detalle a la izquierda, resumen de 320px a la derecha,
   pegajoso mientras se hace scroll. El total y el botón nunca se
   van de la vista. Es el patrón de Amazon y eBay, y la razón es
   medible: quien ya decidió no tiene que ir a buscar dónde seguir.

   En celular se apila, y el resumen pasa a una barra fija abajo.
   ============================================================ */
.reserva--carrito,
.reserva--pago {
    max-width: 1180px;
}

.cart-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

/* minmax(0,1fr) evita que una tabla o un nombre largo del detalle
   estire la columna y desarme la grilla. */
.cart-detalle { min-width: 0; }

.cart-resumen {
    position: sticky;
    top: 88px;              /* alto del encabezado pegajoso + aire */
}

.cart-resumen__caja {
    border: 1px solid #d7deea;
    border-radius: 12px;
    background: #fff;
    padding: 20px;
}

.cart-resumen__titulo {
    margin: 0 0 14px;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b7280;
}

.cart-resumen__linea {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 9px;
    font-size: .93rem;
}

/* La base imponible cierra el bloque de renglones: lleva una línea
   arriba para que se lea como subtotal de lo anterior. */
/* ============================================================
   Lista de comprobación, debajo del botón de finalizar
   ------------------------------------------------------------
   Verde lo cumplido, gris lo que falta. Siempre visible: un botón
   apagado sin explicación parece roto.

   El estado lo pone assets/js/pago-validacion.js en data-estado, y
   acá solo se pinta. Nada de clases que el JavaScript tenga que
   recordar agregar y quitar.
   ============================================================ */
.pago-checklist {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    font-size: .86rem;
}

.pago-checklist li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    color: var(--sp-muted, #6b7280);
    transition: color .2s ease;
}
.pago-checklist li[hidden] { display: none; }

/* El símbolo se dibuja con ::before y no con un <span> en el HTML:
   es decoración, y el lector de pantalla ya tiene el texto. */
.pago-checklist li::before {
    content: '○';
    flex: 0 0 auto;
    width: 1em;
    text-align: center;
    font-size: .95em;
}

.pago-checklist li[data-estado="ok"] {
    color: #14532d;
}
.pago-checklist li[data-estado="ok"]::before {
    content: '✓';
    font-weight: 700;
}

.cart-resumen__linea--base {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e9f0;
    font-weight: 600;
}

.cart-resumen__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 2px solid #e5e7eb;
    font-size: 1rem;
}
.cart-resumen__total strong {
    font-size: 1.35rem;
    color: #1f7a47;
}

.cart-resumen__nota {
    margin: 6px 0 16px;
    font-size: .8rem;
    color: #6b7280;
}

.cart-resumen__btn {
    display: block;
    width: 100%;
    text-align: center;
}

.cart-resumen__seguir {
    margin: 14px 0 0;
    text-align: center;
    font-size: .9rem;
}

@media (max-width: 900px) {
    .cart-cols {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* El resumen se va al final y deja de ser pegajoso: en una sola
       columna, pegarlo taparía el contenido. */
    .cart-resumen {
        position: static;
        order: 2;
    }
}

.reserva--carrito-viejo { max-width: 640px; }

.caja-resumen {
    border: 1px solid #d7deea;
    border-radius: 12px;
    padding: 18px 20px;
    background: #fff;
    margin: 8px 0 18px;
}
.caja-resumen__titulo { margin: 0 0 12px; font-size: 1.15rem; color: #0b1e3f; }
.caja-resumen__datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0;
}
.caja-resumen__datos dt { color: #6b7280; }
.caja-resumen__datos dd { margin: 0; font-weight: 600; color: #0b1e3f; }
.caja-resumen__hold {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed #d7deea;
    font-size: 1.05rem;
}
.caja-resumen__hold strong { color: #1f7a47; font-variant-numeric: tabular-nums; }

/* ============================================================
   Carrito — datos del cliente (C.4d-1)
   ============================================================ */
.contacto {
    border: 1px solid #d7deea;
    border-radius: 12px;
    padding: 18px 20px 20px;
    background: #fff;
    margin: 0 0 18px;
}
.contacto__titulo { margin: 0 0 14px; font-size: 1.15rem; color: #0b1e3f; }

/* --- Logueado: datos bloqueados --- */
.contacto__logueado { margin: 0 0 10px; color: #374151; }
.contacto__lock {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0 0 10px;
    padding: 12px 14px;
    background: #f7f9fc;
    border-radius: 8px;
}
.contacto__lock dt { color: #6b7280; }
.contacto__lock dd { margin: 0; font-weight: 600; color: #0b1e3f; }
.contacto__cambiar { margin: 0 0 4px; font-size: .9rem; }

/* --- Invitado: campos --- */
.campo { margin: 0 0 14px; }
.campo > label {
    display: block;
    margin: 0 0 5px;
    font-size: .92rem;
    font-weight: 600;
    color: #374151;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #c8d2e0;
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
}
.campo input:focus {
    outline: none;
    border-color: #0b1e3f;
    box-shadow: 0 0 0 3px rgba(11, 30, 63, .12);
}
.campo__input--mal,
.campo input.campo__input--mal { border-color: #c0392b; }
.campo__error { color: #c0392b; font-size: .85rem; margin: 5px 0 0; }

.campo__tel { display: flex; align-items: stretch; }
.campo__pais {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #c8d2e0;
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: #f1f4f9;
    color: #374151;
    font-weight: 600;
    white-space: nowrap;
}
.campo__tel input[type="tel"] { border-radius: 0 8px 8px 0; }

.campo__check {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0 0 14px;
    font-size: .92rem;
    color: #374151;
    cursor: pointer;
}
.campo__check input { margin-top: 3px; }

.contacto__login { margin: 0 0 6px; font-size: .92rem; color: #374151; }
.enlace {
    background: none;
    border: none;
    padding: 0;
    color: #0b3da6;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.enlace:hover { color: #0b1e3f; }

.nota--ok {
    color: #1f7a47;
    background: #eafaf0;
    border: 1px solid #bfe6cd;
    border-radius: 8px;
    padding: 10px 12px;
}

/* ============================================================
   Carrito multi-caja + país + modal de login (C.4d)
   ============================================================ */
.cajas { margin: 0 0 20px; }
.cajas__cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}
.cajas__titulo { margin: 0; font-size: 1.1rem; color: #0b1e3f; }
.cajas__total { text-align: right; margin: 6px 2px 0; color: #374151; }
.cajas__total strong { color: #0b1e3f; }

.caja-resumen__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
}
.caja-resumen__top .caja-resumen__titulo { margin: 0; }
.caja-eliminar {
    flex: none;
    width: 30px;
    height: 30px;
    line-height: 1;
    border: 1px solid #e2c4c4;
    background: #fbeeee;
    color: #c0392b;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
}
.caja-eliminar:hover { background: #f6dede; }
.caja-eliminar:disabled { opacity: .5; cursor: default; }

/* Selector de país */
.campo select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #c8d2e0;
    border-radius: 8px;
    font-size: 1rem;
    background: #fff;
}
.campo select:focus {
    outline: none;
    border-color: #0b1e3f;
    box-shadow: 0 0 0 3px rgba(11, 30, 63, .12);
}

/* Modal de login */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal[hidden] { display: none; }
.modal__fondo {
    position: absolute;
    inset: 0;
    background: rgba(11, 30, 63, .55);
}
.modal__caja {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.modal__titulo { margin: 0 0 14px; font-size: 1.2rem; color: #0b1e3f; }
.modal__x {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
}
.modal__x:hover { color: #0b1e3f; }
.modal .btn--cta { width: 100%; margin-top: 4px; }

/* ============================================================
   Página de pago (C.4e-1)
   ============================================================ */
/* El ancho de .reserva--pago se define arriba, junto al del carrito. */

.pago-bloque {
    border: 1px solid #d7deea;
    border-radius: 12px;
    padding: 16px 18px;
    background: #fff;
    margin: 0 0 16px;
}
.pago-bloque__titulo { margin: 0 0 12px; font-size: 1.1rem; color: #0b1e3f; }

.pago-cajas { list-style: none; margin: 0; padding: 0; }
.pago-caja {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #eef1f6;
}
.pago-caja:last-child { border-bottom: none; }
.pago-caja__desc { color: #374151; }
.pago-caja__monto { font-weight: 600; color: #0b1e3f; white-space: nowrap; }

.pago-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 2px solid #eef1f6;
    font-size: 1.05rem;
}
.pago-total strong { font-size: 1.25rem; color: #0b1e3f; }
.pago-contacto { margin: 12px 0 0; font-size: .9rem; color: #6b7280; }

/* Métodos de pago */
.pago-metodo {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid #d7deea;
    border-radius: 10px;
    margin: 0 0 10px;
    cursor: pointer;
}
.pago-metodo:hover { border-color: #b9c6da; }
.pago-metodo input { margin-top: 3px; }
.pago-metodo span { display: flex; flex-direction: column; gap: 2px; }
.pago-metodo strong { color: #0b1e3f; }
.pago-metodo small { color: #6b7280; }
.pago-metodo input:disabled ~ span { opacity: .55; }

/* Términos con scroll */
.terminos-scroll {
    max-height: 210px;
    overflow-y: auto;
    border: 1px solid #d7deea;
    border-radius: 10px;
    padding: 12px 14px;
    background: #f9fbfd;
    font-size: .9rem;
    color: #374151;
    line-height: 1.5;
}
.terminos-scroll p { margin: 0 0 10px; }
.terminos-fin { text-align: center; color: #9aa5b5; font-style: italic; }
.pago-acepto { margin: 12px 0 4px; }

.pago-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ============================================================
   Página de gracias (invitado) — C.4e-2
   ============================================================ */
.reserva--gracias { max-width: 560px; }
.gracias-intro { color: #374151; font-size: 1.05rem; line-height: 1.55; margin: 0 0 18px; }
.gracias-codigos {
    border: 1px solid #bfe6cd;
    background: #eafaf0;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 16px;
}
.gracias-codigos__titulo { margin: 0 0 10px; font-size: 1rem; color: #0b1e3f; }
.gracias-codigos__lista { list-style: none; margin: 0 0 8px; padding: 0; }
.gracias-codigos__lista li {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1f7a47;
    font-variant-numeric: tabular-nums;
}
.gracias-cuenta { color: #6b7280; font-size: .95rem; margin: 0 0 18px; }

/* ============================================================
   Productos dentro del carrito
   ============================================================ */
.linea-prod {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #e5e7eb;
}
.linea-prod:last-of-type { border-bottom: 0; }

.linea-prod__img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f3f6;
}
.linea-prod__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.linea-prod__nombre { margin: 0 0 4px; font-size: 1rem; line-height: 1.35; }
.linea-prod__nombre a { color: #0b1e3f; text-decoration: none; }
.linea-prod__nombre a:hover { text-decoration: underline; }
.linea-prod__precio { margin: 0; font-size: .85rem; color: #6b7280; }
.linea-prod__agotado { margin: 4px 0 0; font-size: .82rem; color: #b45309; font-weight: 600; }

.linea-prod__acciones { display: flex; align-items: center; gap: 12px; }
.linea-prod__cant {
    width: 62px;
    padding: 8px 6px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    text-align: center;
    font-size: .95rem;
}
.linea-prod__cant:focus { outline: none; border-color: #1f7a47; }
.linea-prod__sub {
    min-width: 86px;
    text-align: right;
    font-weight: 700;
    color: #0b1e3f;
    font-variant-numeric: tabular-nums;
}

.carrito-total-general {
    text-align: right;
    font-size: 1.1rem;
    color: #0b1e3f;
    padding: 14px 0;
    margin: 0 0 8px;
    border-top: 2px solid #e5e7eb;
}
.carrito-total-general strong { font-size: 1.3rem; color: #1f7a47; }

@media (max-width: 520px) {
    .linea-prod { grid-template-columns: 56px 1fr; }
    .linea-prod__img { width: 56px; height: 56px; }
    .linea-prod__acciones { grid-column: 1 / -1; justify-content: space-between; }
}

/* ============================================================
   Entrega en el checkout
   ============================================================ */
.envio-datos {
    margin: 14px 0 0;
    padding: 16px;
    background: #f7f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.envio-datos[hidden] { display: none; }
.envio-datos__fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.envio-datos .campo { display: block; margin-bottom: 12px; }
.envio-datos .campo span {
    display: block; font-size: .8rem; color: #6b7280; margin-bottom: 4px;
}
/* SOLO LOS CAMPOS DE TEXTO, no todo lo que sea <input>.
   ------------------------------------------------------------
   Antes decía `.envio-datos input`, así que también estiraba los
   RADIOS de elegir dirección y la casilla de guardar: el círculo
   ocupaba el ancho de la columna y el texto quedaba empujado fuera
   de la tarjeta.

   No se había visto porque este bloque estaba siempre oculto —el
   bug del lote 75— así que nadie llegó a mirarlo. */
.envio-datos select,
.envio-datos input[type="text"],
.envio-datos input[type="tel"],
.envio-datos input[type="number"],
.envio-datos textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px;
    font-size: .95rem; font-family: inherit;
}

/* Los radios y casillas vuelven a su tamaño natural, por si algo más
   los estira. */
.envio-datos input[type="radio"],
.envio-datos input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
}

.envio-datos select:focus,
.envio-datos input:focus,
.envio-datos textarea:focus { outline: none; border-color: #1f7a47; }
.envio-datos select:disabled { background: #f1f3f6; color: #9aa2ae; }

.envio-costo {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 4px 0 0; padding: 12px 14px;
    background: #eafaf0; border: 1px solid #bfe6cd; border-radius: 10px;
}
.envio-costo[hidden] { display: none; }
.envio-costo span { color: #0b1e3f; font-size: .92rem; }
.envio-costo strong { font-size: 1.15rem; color: #1f7a47; }
.envio-costo small { color: #6b7280; font-size: .82rem; }

.envio-aviso {
    margin: 8px 0 0; padding: 10px 14px;
    background: #fee2e2; border: 1px solid #fecaca; border-radius: 10px;
    color: #991b1b; font-size: .88rem;
}
.envio-aviso[hidden] { display: none; }

/* ---------- Totales del pago, con envío ---------- */
.pago-totales { border-top: 1px solid #e5e7eb; padding-top: 12px; margin-top: 12px; }
.pago-subtotal {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 0 0 6px; font-size: .95rem; color: #6b7280;
}
.pago-subtotal[hidden] { display: none; }
.pago-subtotal--envio span:last-child { color: #1f7a47; font-weight: 600; }
.pago-totales .pago-total {
    border-top: 1px solid #e5e7eb; padding-top: 10px; margin: 10px 0 0;
}
.pago-total--actualizado {
    animation: totalPulso .7s ease;
}
@keyframes totalPulso {
    0%   { background: #d1fae5; }
    100% { background: transparent; }
}
.pago-caja__envio {
    display: block; font-size: .78rem; color: #6b7280; font-style: normal; margin-top: 2px;
}
.pago-entrega__aviso {
    margin: 0 0 14px; font-size: .9rem; color: #6b7280;
}

/* ============================================================
   Productos sugeridos en la reserva
   ============================================================ */
.sugeridos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.sugerido {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}
.sugerido[hidden] { display: none; }
.sugerido--elegido { border-color: #1f7a47; background: #f4fbf7; }
.sugerido--agotado { opacity: .6; }

.sugerido__img {
    width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #f1f3f6;
}
.sugerido__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sugerido__nombre { margin: 0 0 2px; font-size: .9rem; line-height: 1.3; color: #0b1e3f; }
.sugerido__precio { font-size: .9rem; font-weight: 700; color: #1f7a47; }
.sugerido__agotado { grid-column: 1 / -1; font-size: .8rem; color: #b45309; text-align: center; }

.sugerido__cant {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 6px; justify-content: center;
    margin-top: 4px;
}
.sugerido__btn {
    width: 30px; height: 30px;
    border: 1px solid #d0d5dd; border-radius: 7px;
    background: #fff; color: #0b1e3f;
    font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.sugerido__btn:hover { background: #f4f6f9; border-color: #1f7a47; }
.sugerido__cant input {
    width: 48px; padding: 6px 4px;
    border: 1px solid #d0d5dd; border-radius: 7px;
    text-align: center; font-size: .95rem; font-weight: 700; color: #0b1e3f;
    background: #fff;
}

/* ============================================================
   Carrito: un solo flujo continuo
   Reservas, entradas y productos comparten el mismo contenedor
   para que se lean como una sola lista, no como bloques sueltos.
   ============================================================ */
.cajas {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 4px 18px 14px;
    margin-bottom: 14px;
}
.cajas__cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 0 10px;
    border-bottom: 1px solid #eef1f5;
    margin-bottom: 4px;
}
.cajas__titulo {
    margin: 0;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b7280;
    font-weight: 700;
}
.cajas__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 10px 0 0;
    padding-top: 12px;
    border-top: 1px solid #eef1f5;
    font-size: .92rem;
    color: #6b7280;
}
.cajas__total strong { font-size: 1.05rem; color: #0b1e3f; }

/* Cada reserva y cada entrada, como filas de la misma lista */
.caja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #f2f4f7;
}
.caja:last-of-type { border-bottom: 0; }
.caja__datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.caja__codigo {
    font-weight: 700;
    color: #0b1e3f;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .5px;
}
.caja__detalle { font-size: .86rem; color: #6b7280; }
.caja__monto {
    font-weight: 700;
    color: #0b1e3f;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Las líneas de producto usan la misma altura y ritmo */
.linea-prod { padding: 13px 0; border-bottom: 1px solid #f2f4f7; }
.linea-prod:last-of-type { border-bottom: 0; }

/* Total general: cierra el flujo */
.carrito-total-general {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
    margin: 0 0 16px;
    font-size: 1rem;
    color: #0b1e3f;
}
.carrito-total-general strong { font-size: 1.35rem; color: #1f7a47; }

/* Resumen del pago: mismo lenguaje visual */
.pago-bloque {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 4px 18px 16px;
    margin-bottom: 14px;
}
.pago-bloque__titulo {
    margin: 0;
    padding: 16px 0 12px;
    border-bottom: 1px solid #eef1f5;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b7280;
    font-weight: 700;
}
.pago-caja {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #f2f4f7;
    list-style: none;
}
.pago-caja:last-child { border-bottom: 0; }
.pago-caja__desc { color: #1f2937; min-width: 0; }
.pago-caja__desc small { color: #9aa2ae; }
.pago-caja__monto { font-weight: 700; color: #0b1e3f; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pago-resumen-lista { margin: 0; padding: 0; }

/* ============================================================
   Sumarse a una reserva existente (desde la página de reservas)
   ============================================================ */
.unirse-caja { margin: 0 0 20px; }
.unirse-abrir {
    width: 100%;
    padding: 13px 18px;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #0b1e3f;
    font-size: .95rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.unirse-abrir:hover { border-color: #1f7a47; background: #f7fbf8; }

.unirse-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 12px 12px;
    border-top: 0;
    padding: 16px 18px;
    margin-top: -4px;
}
.unirse-panel[hidden] { display: none; }
.unirse-intro { margin: 0 0 12px; font-size: .9rem; color: #6b7280; }

.unirse-buscar { display: flex; gap: 8px; }
.unirse-buscar input {
    flex: 1; padding: 11px 13px;
    border: 1px solid #d0d5dd; border-radius: 8px; font-size: 1rem;
}
.unirse-buscar input:focus { outline: none; border-color: #1f7a47; }

.unirse-hallada {
    background: #eafaf0; border: 1px solid #bfe6cd; border-radius: 10px;
    padding: 12px 15px; margin: 12px 0; font-size: .92rem; color: #14532d; line-height: 1.55;
}
.unirse-hallada[hidden] { display: none; }
.unirse-hallada small { color: #4b7a5e; }

.unirse-error {
    background: #fee2e2; border: 1px solid #fecaca; border-radius: 10px;
    padding: 11px 15px; margin: 12px 0; font-size: .9rem; color: #991b1b;
}
.unirse-error[hidden] { display: none; }

.unirse-cantidad { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; max-width: 180px; }
.unirse-cantidad[hidden] { display: none; }
.unirse-cantidad span { font-size: .8rem; color: #6b7280; }
.unirse-cantidad input {
    padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px;
    font-size: 1rem; text-align: center;
}
.unirse-panel .btn[hidden] { display: none; }

/* La columna derecha agrupa el atajo de "ya tengo reserva" y el flujo,
   para que el grid siga siendo de dos columnas. */
.reserva__col { min-width: 0; display: flex; flex-direction: column; }

/* Producto del carrito ligado a una reserva */
.linea-prod__reserva {
    margin: 4px 0 0; font-size: .8rem; color: #1f7a47;
}

/* Aviso: quien ya tiene reserva compra en la tienda */
.reserva__aviso-tienda {
    background: #eef4ff; border: 1px solid #cfe0ff; border-radius: 12px;
    padding: 13px 18px; margin: 0 0 16px;
    font-size: .92rem; color: #1e3a5f;
}
.reserva__aviso-tienda a { color: #1f7a47; font-weight: 600; }

/* ============================================================
   Pago mixto: créditos + dinero
   ============================================================ */
.pago-metodo--mixto { border-style: dashed; }

.mixto__cuerpo {
    margin: 4px 0 0;
    padding: 16px;
    background: #f7f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.mixto__cuerpo[hidden] { display: none; }

.mixto__campo { display: block; margin-bottom: 12px; }
.mixto__campo span { display: block; font-size: .85rem; color: #6b7280; margin-bottom: 8px; }
.mixto__campo input[type="range"] {
    width: 100%;
    accent-color: #1f7a47;
    cursor: pointer;
}

.mixto__numeros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mixto__numeros input[type="number"] {
    width: 130px;
    padding: 10px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.mixto__numeros input[type="number"]:focus { outline: none; border-color: #1f7a47; }
.mixto__equivale { font-size: .95rem; color: #1f7a47; font-weight: 600; }

.mixto__resto {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 0 0 10px; padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: .95rem; color: #6b7280;
}
.mixto__resto strong { font-size: 1.15rem; color: #0b1e3f; }

.mixto__aviso {
    margin: 0;
    padding: 10px 12px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: .84rem;
    color: #7c5c0a;
    line-height: 1.5;
}

/* Miniatura en las líneas de entrada del carrito */
.caja--con-img { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; }
.caja__img {
    width: 56px; height: 56px;
    border-radius: 10px; overflow: hidden; background: #f1f3f6;
    display: block;
}
.caja__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Detalle de qué se entrega cómo */
.entrega-detalle {
    background: #f7f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 15px;
    margin: 0 0 12px;
}
.entrega-detalle__linea { margin: 0 0 4px; font-size: .88rem; color: #6b7280; }
.entrega-detalle__linea strong { color: #0b1e3f; display: block; }
.entrega-detalle__lista {
    margin: 4px 0 10px; padding-left: 18px;
    font-size: .86rem; color: #1f2937;
}
.entrega-detalle__lista:last-child { margin-bottom: 0; }
.entrega-detalle__lista small { color: #9aa2ae; }

/* ============================================================
   Resumen del pago agrupado por reserva
   ============================================================ */
.grupo {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0 14px 6px;
    margin-bottom: 12px;
    background: #fcfdfe;
}
.grupo:last-of-type { margin-bottom: 0; }

.grupo__cab {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 0 10px;
    border-bottom: 1px solid #eef1f5;
}
.grupo__codigo {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 1px;
    color: #0b1e3f;
    font-size: .92rem;
}
.grupo__detalle { font-size: .84rem; color: #6b7280; }
.grupo .pago-cajas { margin: 0; padding: 0; }

/* Miniatura en el resumen del pago */
.pago-caja--img { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; }
.pago-caja__mini {
    width: 44px; height: 44px;
    border-radius: 8px; overflow: hidden; background: #f1f3f6; display: block;
}
.pago-caja__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Responsive del checkout ---------- */
@media (max-width: 640px) {
    .pago-caja, .pago-caja--img {
        grid-template-columns: 44px 1fr;
        row-gap: 4px;
    }
    .pago-caja--img .pago-caja__monto { grid-column: 2; text-align: left; }
    .pago-caja__desc { min-width: 0; word-break: break-word; }
    .grupo { padding: 0 11px 4px; }
    .grupo__cab { padding: 10px 0 8px; }
    .envio-datos__fila { grid-template-columns: 1fr; }
    .mixto__numeros { flex-direction: column; align-items: stretch; }
    .mixto__numeros input[type="number"] { width: 100%; }
    .linea-prod { grid-template-columns: 48px 1fr; }
    .linea-prod__img { width: 48px; height: 48px; }
    .caja--con-img { grid-template-columns: 48px 1fr; }
    .caja__img { width: 48px; height: 48px; }
    .caja--con-img .linea-prod__acciones { grid-column: 1 / -1; justify-content: space-between; }
}

/* ============================================================
   Contador del apartado en la pantalla de pago
   ============================================================ */
.pago-contador {
    margin: 0 0 18px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fffbea;
    border: 1px solid #fde68a;
    color: #7c5c0a;
    font-size: .92rem;
}
.pago-contador strong {
    font-variant-numeric: tabular-nums;   /* los dígitos no bailan */
}
.pago-contador[data-urgente="1"] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* ============================================================
   Botones y enlaces: una sola acción principal por pantalla
   ------------------------------------------------------------
   Antes "ir a la tienda" salía en verde y "volver al carrito" en
   azul, sin más razón que el orden en que se escribieron. La regla
   ahora: un solo botón lleno por pantalla —la acción que queremos
   que se apriete— y todo lo demás enlaces de texto del mismo color.
   ============================================================ */
.cart-resumen__seguir a,
.pago-acciones .enlace {
    color: var(--sp-navy);
    text-decoration: none;
    font-size: .9rem;
}
.cart-resumen__seguir a:hover,
.pago-acciones .enlace:hover {
    text-decoration: underline;
}

.pago-acciones {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 16px 0 0;
}
.pago-acciones .btn {
    width: 100%;
    text-align: center;
}
.pago-acciones .enlace {
    text-align: center;
}

/* La miniatura de las entradas, igual que la de los productos. */
.pago-caja__mini img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* ============================================================
   Cajas de grupo — MISMA estructura en carrito y pago
   ------------------------------------------------------------
   Una caja por reserva, con sus entradas y sus productos adentro
   separados en "solo retiro" y "se pueden enviar". Al final, una
   caja de productos sueltos.

   El marcado de cada línea de producto vive en
   carrito/_linea-producto.php, compartido por las dos pantallas:
   duplicarlo garantizaba que tarde o temprano se desincronizaran.
   ============================================================ */
.grupo-caja {
    border: 1px solid #d7deea;
    border-radius: 12px;
    background: #fff;
    padding: 0 0 4px;
    margin-bottom: 16px;
    overflow: hidden;
}
.grupo-caja--sueltos {
    border-style: dashed;
}

.grupo-caja__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    background: #f7f9fc;
    border-bottom: 1px solid #e5e9f0;
}

.grupo-caja__codigo {
    display: block;
    font-weight: 700;
    color: #0b1e3f;
    letter-spacing: .5px;
}
.grupo-caja__detalle {
    display: block;
    font-size: .88rem;
    color: #6b7280;
    margin-top: 2px;
}

/* El reloj de cada apartado. Va en la cabecera de su propia caja
   —no arriba de la página— porque cada reserva vence cuando le toca. */
.grupo-caja__reloj {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: #fffbea;
    border: 1px solid #fde68a;
    color: #7c5c0a;
    font-size: .82rem;
    white-space: nowrap;
}
.grupo-caja__reloj strong {
    font-variant-numeric: tabular-nums;   /* los dígitos no bailan */
}
.grupo-caja__reloj[data-urgente="1"] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Los rótulos de subsección: "solo retiro" y "se pueden enviar". */
.grupo-caja__sub {
    margin: 0;
    padding: 12px 18px 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #6b7280;
}

/* ============================================================
   Una línea dentro de la caja
   ============================================================ */
.linea-g {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-top: 1px solid #f1f4f8;
}
.grupo-caja__cab + .linea-g,
.grupo-caja__sub + .linea-g {
    border-top: 0;
}

/* La reserva no lleva miniatura: se corre una columna. */
.linea-g--reserva {
    grid-template-columns: minmax(0, 1fr) auto;
}

.linea-g__img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f2f4f7;
    display: block;
}
.linea-g__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.linea-g__datos { min-width: 0; }

.linea-g__nombre {
    margin: 0 0 3px;
    font-size: .98rem;
    font-weight: 700;
    color: #0b1e3f;
}
.linea-g__nombre a {
    color: inherit;
    text-decoration: none;
}
.linea-g__nombre a:hover { text-decoration: underline; }

.linea-g__meta {
    display: block;
    margin: 0;
    font-size: .86rem;
    color: #6b7280;
}
.linea-g__nota {
    display: block;
    margin-top: 3px;
    font-size: .8rem;
    color: #9aa5b5;
}
.linea-g__agotado {
    margin: 3px 0 0;
    font-size: .84rem;
    color: #991b1b;
}

.linea-g__acciones {
    display: flex;
    align-items: center;
    gap: 10px;
}

.linea-g__cant {
    width: 62px;
    padding: 6px 8px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: .92rem;
    text-align: center;
}
.linea-g__cant-fija {
    font-size: .9rem;
    color: #6b7280;
}

.linea-g__monto {
    min-width: 92px;
    text-align: right;
    font-weight: 700;
    color: #0b1e3f;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .linea-g {
        grid-template-columns: 56px minmax(0, 1fr);
        row-gap: 10px;
    }
    .linea-g--reserva { grid-template-columns: 1fr; }
    .linea-g__img { width: 56px; height: 56px; }
    .linea-g__acciones {
        grid-column: 1 / -1;
        justify-content: space-between;
    }
    .grupo-caja__cab { align-items: flex-start; }
}

/* ============================================================
   Resumen: desglose contable
   ============================================================ */
.cart-resumen__linea--desc span:last-child { color: #1f7a47; }
.cart-resumen__linea[hidden] { display: none; }

/* El neto a pagar, cuando se canjean créditos: es el número que de
   verdad se cobra, así que manda sobre el total de arriba. */
.cart-resumen__total--neto {
    border-top: 0;
    margin-top: 4px;
    padding-top: 0;
}
.cart-resumen__total--neto strong {
    font-size: 1.5rem;
}

.cart-resumen__impuesto {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 16px;
    font-size: .82rem;
    color: #6b7280;
}

/* Cabecera: el juego manda y el código va como referencia entre
   paréntesis. Antes el código iba primero, que es lo que el sistema
   necesita para buscar, no lo que la persona reconoce de un vistazo. */
.grupo-caja__codigo small {
    font-weight: 400;
    color: #6b7280;
    letter-spacing: 0;
}

/* En el pago no se quitan líneas: se vuelve al carrito. */
.grupo-caja__editar {
    margin: 0;
    padding: 10px 18px 14px;
    border-top: 1px solid #f1f4f8;
    font-size: .88rem;
}
.grupo-caja__editar a {
    color: #0b1e3f;
    text-decoration: none;
}
.grupo-caja__editar a:hover { text-decoration: underline; }

/* ============================================================
   Forma de pago: lista de opciones e instrucciones
   ============================================================ */
.pago-bloque__sub {
    margin: 0 0 10px;
    font-size: .88rem;
    color: var(--sp-muted, #6b7280);
}

.pago-metodo__ins {
    display: block;
    margin-top: 4px;
    line-height: 1.5;
}
.pago-metodo__ins[hidden] { display: none; }
.pago-metodo__ins a { color: inherit; }

/* Distintivo de cada método: dos palabras al lado del nombre. Verde
   el que confirma solo, ámbar el que necesita que alguien verifique
   el pago. Se ve ANTES de elegir, que es cuando sirve para decidir. */
.pago-metodo__sello {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fffbea;
    color: #7c5c0a;
    font-size: .68rem;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    vertical-align: middle;
}
.pago-metodo__sello--rapido {
    background: #dcfce7;
    color: #14532d;
}

@media (max-width: 480px) {
    /* En celular el sello baja: al lado del nombre parte la línea. */
    .pago-metodo__sello {
        display: block;
        margin: 4px 0 0;
        width: fit-content;
    }
}

/* Cuando los créditos cubren toda la orden, la lista de métodos se
   atenúa: no se va a usar ninguno. NO se desactiva, porque si la
   persona baja los créditos vuelve a hacer falta, y un control
   deshabilitado que reaparece habilitado desconcierta más de lo que
   ayuda. */
[data-sin-dinero="1"] .pago-metodo:not(.pago-metodo--mixto) {
    opacity: .45;
}

.pago-instrucciones__aviso {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fffbea;
    border: 1px solid #fde68a;
    color: #7c5c0a;
    font-size: .86rem;
}

.mixto__cubre {
    margin: 8px 0 0;
    color: #14532d;
    font-weight: 700;
    font-size: .9rem;
}

/* ============================================================
   Quitar reserva: en la cabecera, con texto
   ------------------------------------------------------------
   Separado del resto por espacio, y sin color de peligro salvo al
   pasar el cursor: es destructivo pero no urgente, y pintarlo de
   rojo permanente lo vuelve lo primero que se ve de la caja.
   ============================================================ */
.grupo-caja__quitar {
    flex: 0 0 auto;
    margin-left: 12px;
    padding: 6px 12px;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    background: #fff;
    color: var(--sp-muted, #6b7280);
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.grupo-caja__quitar:hover {
    color: #991b1b;
    border-color: #fecaca;
    background: #fef2f2;
}
.grupo-caja__quitar:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* La cabecera de «Para llevar a casa» usa la misma estructura que la
   de reserva, así que hereda su tipografía sin nada extra. */
.grupo-caja--sueltos .cab-reserva__titulo {
    color: var(--sp-navy, #0b1e3f);
}

@media (max-width: 560px) {
    /* En celular el botón baja a su propia línea: al lado del título
       parte la cabecera en dos renglones raros. */
    .grupo-caja__quitar {
        margin: 8px 0 0;
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   Diálogo de confirmación propio
   ------------------------------------------------------------
   Reemplaza a window.confirm(), que deja de funcionar en silencio
   si alguien marcó «impedir que esta página cree más diálogos».
   ============================================================ */
.sp-dialogo {
    position: fixed;
    inset: 0;
    z-index: 200;              /* encima del encabezado (50) y los avisos (49) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(11, 30, 63, .55);
}

.sp-dialogo__caja {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.sp-dialogo__titulo {
    margin: 0 0 14px;
    font-size: 1.15rem;
    color: var(--sp-navy, #0b1e3f);
}

.sp-dialogo__cuerpo {
    font-size: .93rem;
    line-height: 1.55;
    color: #374151;
}

/* La cabecera clonada de la reserva, dentro del diálogo. */
.sp-dialogo__cuerpo .cab-reserva {
    padding: 12px 14px;
    margin: 0 0 12px;
    border-radius: 10px;
    background: #f7f9fc;
}

.sp-dialogo__lleva {
    margin: 0 0 6px;
    font-weight: 700;
    color: var(--sp-navy, #0b1e3f);
}
.sp-dialogo__nota {
    margin: 0;
    color: var(--sp-muted, #6b7280);
    font-size: .88rem;
}

.sp-dialogo__pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* El botón destructivo, distinguible de un vistazo. Va a la derecha
   y la salida segura a la izquierda, que es la que recibe el foco. */
.btn--peligro {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}
.btn--peligro:hover {
    background: #991b1b;
    border-color: #991b1b;
}

@media (max-width: 480px) {
    .sp-dialogo__pie {
        flex-direction: column-reverse;   /* el destructivo abajo, lejos del pulgar */
    }
    .sp-dialogo__pie .btn { width: 100%; }
}

/* La imagen y el nombre de cada línea llevan a la ficha del producto.
   El nombre se subraya al pasar el cursor; la imagen se aclara. */
.linea-g__img {
    transition: opacity .15s ease;
}
a.linea-g__img:hover { opacity: .8; }

/* «Pagada — la estamos confirmando». Ámbar y no rojo: no es un
   problema, es un estado intermedio legítimo. Va debajo del detalle,
   antes del cupo, para que se lea en el orden en que importa: qué
   reserva es, cuándo, en qué estado está. */
.cab-reserva__estado {
    display: block;
    width: fit-content;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fffbea;
    border: 1px solid #fde68a;
    color: #7c5c0a;
    font-size: .76rem;
    font-weight: 700;
}

/* ============================================================
   P-2 · Entrega: dos grupos, una sola caja
   ------------------------------------------------------------
   El retiro se presenta como una opción de envío más —Baymard mide
   que se pasa por alto cuando no se hace así— y el costo va al lado
   del nombre del grupo, no escondido en el total.
   ============================================================ */
.entrega-grupo {
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.entrega-grupo--envio { margin-bottom: 0; }

.entrega-grupo__cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.entrega-grupo__nombre {
    font-weight: 700;
    color: var(--sp-navy, #0b1e3f);
}
.entrega-grupo__precio {
    font-size: .9rem;
    font-weight: 700;
    color: #14532d;
    white-space: nowrap;
}
.entrega-grupo__nota {
    margin: 4px 0 0;
    font-size: .84rem;
    color: var(--sp-muted, #6b7280);
}

.entrega-lista {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

/* El subtítulo de cada reserva dentro de un grupo. El juego en negrita
   y la referencia en gris: son dos datos distintos y tienen que verse
   distintos —Baymard mide que el 40% de los sitios falla en eso—. */
.entrega-sub {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid #eef2f7;
    font-size: .84rem;
}
.entrega-sub:first-child { margin-top: 0; }
.entrega-sub[hidden] { display: none; }

.entrega-sub__juego {
    font-weight: 700;
    color: var(--sp-navy, #0b1e3f);
}
.entrega-sub__ref {
    color: var(--sp-muted, #6b7280);
    font-size: .78rem;
}

/* La cantidad, fija a la izquierda: alinea la columna y se lee de un
   vistazo sin buscarla dentro del nombre. */
.entrega-item__cant {
    flex: 0 0 auto;
    min-width: 2.2em;
    color: var(--sp-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

.entrega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 0;
    border-top: 1px solid #f1f4f8;
    font-size: .9rem;
}
.entrega-item:first-child { border-top: 0; }
.entrega-item[hidden] { display: none; }

.entrega-item__nombre { flex: 1 1 auto; }

.entrega-item__ref,
.entrega-item__fijo {
    font-size: .78rem;
    color: var(--sp-muted, #6b7280);
}
.entrega-item__fijo { font-style: italic; }

/* El botón de mover: discreto pero claramente pulsable. Es la acción
   principal de esta caja y se usa una vez por producto. */
.entrega-item__mover {
    flex: 0 0 auto;
    padding: 5px 11px;
    border: 1px solid #cfe3d6;
    border-radius: 999px;
    background: #fff;
    color: #1f7a47;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}
.entrega-item__mover:hover {
    background: #eafaf0;
    border-color: #1f7a47;
}

.entrega-grupo__vacio {
    margin: 12px 0 0;
    font-size: .85rem;
    color: var(--sp-muted, #6b7280);
    font-style: italic;
}
.entrega-grupo__vacio[hidden] { display: none; }

/* .entrega-direcciones se define una sola vez, más abajo, junto con
   el resto de su bloque. Acá quedaba una versión suelta de cuando la
   caja no tenía direcciones adentro. */
.entrega-direcciones[hidden] { display: none; }

@media (max-width: 520px) {
    /* En celular el botón baja: al lado del nombre parte la línea. */
    .entrega-item { align-items: flex-start; }
    .entrega-item__nombre { flex: 1 1 100%; }
    .entrega-item__mover { margin-top: 4px; }
}

/* ============================================================
   Las direcciones, dentro del grupo de envío
   ------------------------------------------------------------
   El estilo de .dir-opcion y .envio-datos ya existe en estilos.css:
   acá solo se les da el aire y la separación que necesitan ahora que
   viven DENTRO de una caja, no como bloque suelto de la página.
   ============================================================ */
.entrega-direcciones {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e5e9f0;
}

/* La lista de líneas termina y empiezan las direcciones: sin este
   respiro las dos cosas se leen como una sola. */
.entrega-direcciones .envio-datos {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}

.entrega-direcciones .campo {
    display: block;
    margin-bottom: 12px;
}
.entrega-direcciones .campo > span {
    display: block;
    margin-bottom: 5px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--sp-navy, #0b1e3f);
}

/* El costo del envío cierra el bloque, alineado a la derecha como el
   precio del grupo: los dos números de envío en la misma columna. */
.entrega-direcciones .envio-costo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #f1f4f8;
    font-size: .88rem;
}
.entrega-direcciones .envio-costo > span { flex: 1 1 auto; }
.entrega-direcciones .envio-costo strong {
    font-size: 1rem;
    color: #14532d;
}
.entrega-direcciones .envio-costo small {
    flex: 1 1 100%;
    color: var(--sp-muted, #6b7280);
    font-size: .78rem;
}

.dir-elegir__nota {
    margin: 0 0 12px;
    font-size: .82rem;
}

/* El formulario de dirección nueva, cuando se despliega. */
.entrega-direcciones .envio-datos__fila {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 560px) {
    .entrega-direcciones .envio-datos__fila {
        grid-template-columns: 1fr;
    }
}

/* El campo de créditos ahora pide un MONTO, así que lleva el símbolo
   de moneda pegado a la izquierda: sin él, un número suelto al lado de
   «créditos» se lee como cantidad de créditos. */
.mixto__numeros {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mixto__moneda {
    font-weight: 700;
    color: var(--sp-navy, #0b1e3f);
}
.mixto__numeros input[type="number"] {
    width: 8em;
    flex: 0 0 auto;
}
.mixto__equivale {
    color: var(--sp-muted, #6b7280);
    font-size: .85rem;
}