/* ───────────────────────────────────────────────────────────────
   Canal "ordenar desde casa" — pantallas de cuenta del cliente final
   (registro, login, mi cuenta). Estética alineada al menú QR:
   fondo claro, card blanca, acento azul #0a3a72.
   ─────────────────────────────────────────────────────────────── */

/* 2026-10-15: #app y el contenedor de errores son flex y centran: sin este ancho, en las pantallas del cliente el
   contenedor se encogía al tamaño de la tarjeta (franja angosta en medio y tarjetas "a todo lo ancho" que no lo eran). */
.custom-error-boundary:has(.cta-wrap) { width: 100%; }

.cta-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: #fcfaf7;
}

/* En escritorio el contenido se pega arriba (no flota centrado dejando huecos enormes) */
@media (min-width: 768px) {
    .cta-wrap {
        align-items: flex-start;
        padding: 2.5rem 1.5rem;
    }
}

.cta-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(10, 58, 114, 0.10);
    padding: 2rem 1.75rem;
    animation: ctaFadeIn 0.35s ease both;
}

@keyframes ctaFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cta-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0a3a72;
    text-align: center;
}

.cta-sub {
    margin: 0.35rem 0 1.5rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
}

.cta-field {
    margin-bottom: 1rem;
}

.cta-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
}

.cta-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 0.9rem;
    border: 1px solid #d8dde5;
    border-radius: 11px;
    font-size: 1rem;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cta-field input:focus {
    outline: none;
    border-color: #0a3a72;
    box-shadow: 0 0 0 3px rgba(10, 58, 114, 0.12);
}

.cta-btn {
    width: 100%;
    padding: 0.9rem;
    border: none;
    border-radius: 11px;
    background: #0a3a72;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.cta-btn:hover:not(:disabled) { background: #0c4488; }
.cta-btn:disabled { opacity: 0.6; cursor: default; }

.cta-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.cta-ok {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

/* 2026-10-15: aviso informativo (login/registro: para qué se pide entrar) */
.cta-info {
    display: flex; align-items: flex-start; gap: 0.5rem;
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
    border-radius: 10px; padding: 0.7rem 0.85rem; font-size: 0.88rem; line-height: 1.4;
    margin-bottom: 1rem; text-align: left;
}
.cta-info i { margin-top: 0.15rem; color: #2563eb; }

/* 2026-10-15: ventana "Para confirmar tu pedido, inicia sesión" (ClientePideSesion) */
.pide-sesion { padding: 1.5rem 1.4rem 0.6rem; text-align: center; }
.pide-sesion-icono {
    width: 56px; height: 56px; margin: 0 auto 0.8rem; border-radius: 16px;
    background: #e8f0fb; color: #0a3a72; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}
.pide-sesion h2 { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 800; color: #0a3a72; }
.pide-sesion-texto { margin: 0 0 1rem; color: #4b5563; font-size: 0.95rem; line-height: 1.45; }
.pide-sesion-puntos {
    list-style: none; margin: 0 0 1.2rem; padding: 0.8rem 0.9rem; text-align: left;
    background: #f7f8fa; border-radius: 12px; display: grid; gap: 0.55rem;
}
.pide-sesion-puntos li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #374151; }
.pide-sesion-puntos i { width: 1.1rem; text-align: center; color: #0a3a72; }
.pide-sesion .cta-btn + .cta-btn { margin-top: 0.6rem; }

/* 2026-10-15: cerrar sesión — pantalla "Cerrando sesión…" y aviso flotante "Sesión cerrada" */
.cli-saliendo {
    position: fixed; inset: 0; z-index: 1400;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 58, 114, 0.35); backdrop-filter: blur(3px);
    animation: appFadeIn 0.15s ease;
}
.cli-saliendo-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    background: #fff; color: #0a3a72; border-radius: 18px;
    padding: 1.6rem 2.2rem; box-shadow: 0 16px 40px rgba(10, 58, 114, 0.25);
}
.cli-saliendo-card i { font-size: 1.8rem; }
.cli-saliendo-card strong { font-size: 1.05rem; }

.cli-toast {
    position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1100;
    width: min(440px, calc(100vw - 2rem));
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: #fff; border: 1px solid #d1fae5; border-left: 4px solid #16a34a; border-radius: 14px;
    padding: 0.85rem 0.9rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    animation: cliToastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes cliToastIn {
    from { opacity: 0; transform: translate(-50%, -12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.cli-toast-icono { color: #16a34a; font-size: 1.25rem; margin-top: 0.1rem; }
.cli-toast-txt { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.cli-toast-txt strong { color: #111827; font-size: 0.98rem; }
.cli-toast-txt span { color: #4b5563; font-size: 0.86rem; line-height: 1.35; }
.cli-toast-x {
    background: none; border: none; color: #9ca3af; cursor: pointer;
    padding: 0.1rem 0.25rem; font-size: 1rem; line-height: 1;
}
.cli-toast-x:hover { color: #374151; }

/* 2026-10-14: aviso neutro (sesión expirada) */
.cta-aviso {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

/* Perfil (P1.3) — 2026-10-15: misma tarjeta que "Mi cuenta" (encabezado azul + cuerpo) con dos tarjetas internas
   (Datos personales / Seguridad). Celular: apiladas; tablet/escritorio: lado a lado.
   ".cta-card.cta-card-perfil" (2 clases) para ganarle a ".cta-card-cuenta { max-width: 560px }", que va más abajo. */
.cta-card.cta-card-perfil { max-width: 480px; text-align: left; }
.cta-card-perfil .cuenta-banner { text-align: center; }
.perfil-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.perfil-seccion {
    margin-top: 0; min-width: 0;
    border: 1px solid #eef0f3; border-radius: 14px; background: #fff;
    padding: 1.1rem 1.1rem 1.2rem;
}
.perfil-seccion-titulo {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 0 0 0.9rem;
}
.perfil-seccion-titulo i {
    width: 28px; height: 28px; border-radius: 8px; background: #e8f0fb; color: #0a3a72;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
}

/* Campo con ícono a la izquierda (se combina con .cta-input-wrap cuando lleva el ojo a la derecha) */
.cta-input-icono { position: relative; }
.cta-input-icono > i {
    position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: 0.92rem; pointer-events: none;
}
.cta-field .cta-input-icono input { padding-left: 2.5rem; }

/* Contraseña plegada: "Contraseña •••••••• · Cambiar ›" */
.perfil-pass-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.85rem 0.95rem; border-radius: 12px; background: #f7f8fa;
}
.perfil-pass-txt { display: flex; flex-direction: column; gap: 0.15rem; }
.perfil-pass-label { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; }
.perfil-pass-puntos { font-size: 1.05rem; color: #111827; letter-spacing: 0.15em; }
.perfil-pass-cambiar {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: #fff; border: 1px solid #d8dde5; border-radius: 10px;
    color: #0a3a72; font-weight: 700; font-size: 0.9rem; padding: 0.5rem 0.85rem; cursor: pointer;
}
.perfil-pass-cambiar i { font-size: 0.7rem; }
.perfil-pass-cambiar:hover { border-color: #0a3a72; background: #f7faff; }

/* Revisión en vivo de la nueva contraseña */
.perfil-checks { list-style: none; margin: -0.25rem 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.perfil-checks li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: #6b7280; }
.perfil-checks li i { font-size: 0.8rem; color: #d1d5db; }
.perfil-checks li.ok { color: #15803d; }
.perfil-checks li.ok i { color: #16a34a; }

.perfil-cancelar {
    width: 100%; margin-top: 0.5rem; padding: 0.7rem;
    background: none; border: none; color: #6b7280; font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.perfil-cancelar:hover { color: #111827; }

/* Tablet / escritorio: las dos tarjetas lado a lado */
@media (min-width: 768px) {
    .cta-card.cta-card-perfil { max-width: 720px; }
    .perfil-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
}

/* Escritorio (2026-10-15): tarjeta ancha (hasta 1100 px), igual que "Mis pedidos" */
@media (min-width: 1024px) {
    .cta-card.cta-card-perfil { max-width: 1100px; }
    .cta-card-perfil .cuenta-body { padding: 1.5rem 2rem 2rem; }
    .perfil-grid { gap: 1.5rem; }
    .perfil-seccion { padding: 1.4rem 1.5rem 1.5rem; }
}

.cta-btn-sec {
    background: #fff;
    color: #0a3a72;
    border: 1.5px solid #0a3a72;
}
.cta-link-volver {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.25rem;
    color: #0a3a72;
    font-size: 0.9rem;
    cursor: pointer;
    background: none;
    border: none;
}

/* Picker de direcciones guardadas (P1.4) en el checkout */
.dir-lista { display: grid; gap: 0.5rem; margin-bottom: 0.6rem; }
.dir-opcion {
    display: flex; align-items: flex-start; gap: 0.7rem; width: 100%;
    text-align: left; cursor: pointer;
    padding: 0.75rem 0.85rem; border-radius: 12px;
    border: 1.5px solid #e5e7eb; background: #fff; color: #111827;
}
.dir-opcion:hover { border-color: #93b4dd; }
.dir-opcion.active { border-color: #0a3a72; background: #f3f8ff; box-shadow: 0 2px 8px rgba(10,58,114,0.08); }
.dir-opcion > i { margin-top: 0.15rem; color: #0a3a72; font-size: 1rem; flex-shrink: 0; }
.dir-opcion-txt { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.dir-opcion-etq { font-size: 0.82rem; font-weight: 700; color: #0a3a72; }
.dir-opcion-dir { font-size: 0.9rem; color: #1f2937; }
.dir-opcion-ref { font-size: 0.8rem; color: #6b7280; }
.dir-guardar {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0.6rem 0 0.4rem; font-size: 0.88rem; color: #374151; cursor: pointer;
}
.dir-guardar input { width: auto; margin: 0; }

/* ═══ Libreta de direcciones (P1.4): diseño formal ═══ */
.cta-card-dirs { max-width: 560px; }
.cta-opcional { font-weight: 400; color: #9ca3af; font-size: 0.82em; }

/* Lista de direcciones: 1 col móvil, 2 col escritorio */
.dir-items { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-bottom: 1.1rem; }
@media (min-width: 640px) { .dir-items { grid-template-columns: 1fr 1fr; } }

.dir-item {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid #e8ebf0; border-radius: 14px; background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dir-item:hover { border-color: #cdd9ea; box-shadow: 0 4px 14px rgba(10,58,114,0.07); }
.dir-item.es-pred { border-color: #0a3a72; background: #f5f9ff; }

.dir-item-icono {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 12px; background: #e8f0fb; color: #0a3a72;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.dir-item.es-pred .dir-item-icono { background: #0a3a72; color: #fff; }

.dir-item-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.dir-item-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dir-item-etq { font-weight: 700; color: #111827; font-size: 0.98rem; }
.dir-pill {
    display: inline-flex; align-items: center; gap: 0.28rem;
    background: #0a3a72; color: #fff; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.16rem 0.5rem; border-radius: 999px;
}
.dir-pill i { font-size: 0.62rem; color: #ffd24a; }
.dir-item-dir { font-size: 0.9rem; color: #374151; line-height: 1.3; word-break: break-word; }
.dir-item-ref { font-size: 0.8rem; color: #6b7280; display: flex; align-items: center; gap: 0.35rem; }
.dir-item-ref i { color: #9ca3af; }

.dir-item-acciones { display: flex; flex-direction: column; gap: 0.35rem; flex-shrink: 0; }
.dir-item-acciones button {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid #e5e7eb; background: #fff; color: #0a3a72;
    cursor: pointer; font-size: 0.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.12s ease;
}
.dir-item-acciones button:hover { border-color: #0a3a72; background: #f3f8ff; }
.dir-item-acciones .dir-del { color: #b91c1c; }
.dir-item-acciones .dir-del:hover { border-color: #b91c1c; background: #fef2f2; }

/* Estado vacío */
.dir-empty { text-align: center; padding: 1.75rem 1rem 1.5rem; color: #6b7280; }
.dir-empty i { font-size: 2.6rem; color: #cbd5e1; margin-bottom: 0.7rem; }
.dir-empty p { margin: 0; font-weight: 700; color: #374151; font-size: 1rem; }
.dir-empty span { display: block; margin-top: 0.25rem; font-size: 0.88rem; }

/* Botón agregar (afordancia punteada) */
.dir-agregar {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
    padding: 0.85rem; border-radius: 12px;
    border: 1.5px dashed #9fb6d4; background: #f7faff; color: #0a3a72;
    font-size: 0.96rem; font-weight: 700; cursor: pointer; transition: all 0.12s ease;
}
.dir-agregar:hover { border-color: #0a3a72; background: #eef4ff; }

/* Modal de formulario (reusa selector-tienda-overlay/modal) */
.dir-form-modal { padding: 0; overflow: hidden; }
.dir-form-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem; border-bottom: 1px solid #eef0f3;
}
.dir-form-head h2 { margin: 0; font-size: 1.1rem; font-weight: 800; color: #0a3a72; }
.dir-form-x { background: none; border: none; color: #9ca3af; font-size: 1.15rem; cursor: pointer; padding: 0.2rem; }
.dir-form-x:hover { color: #0a3a72; }
.dir-form-body { padding: 1.1rem 1.1rem 0.4rem; overflow-y: auto; }
.dir-form-pie { padding: 0.6rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }

.cta-alt {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    color: #6b7280;
}

.cta-alt a {
    color: #0a3a72;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.cta-alt a:hover { text-decoration: underline; }

/* Pantalla "Mi cuenta" */
.cta-saludo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.cta-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0a3a72;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.cta-dato {
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}

.cta-dato span:first-child { color: #6b7280; }
.cta-dato span:last-child { color: #111827; font-weight: 600; }

.cta-btn-secundario {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.85rem;
    border: 1px solid #d8dde5;
    border-radius: 11px;
    background: #fff;
    color: #b91c1c;
    font-size: 0.98rem;
    font-weight: 600;
    cursor: pointer;
}

.cta-btn-secundario:hover { background: #fef2f2; }

/* ───────────────────────────────────────────────────────────────
   Selección de sucursal
   ─────────────────────────────────────────────────────────────── */
.suc-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.suc-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 1rem 1.1rem;
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.suc-card:hover {
    border-color: #0a3a72;
    box-shadow: 0 4px 14px rgba(10, 58, 114, 0.10);
}

.suc-card:active { transform: scale(0.99); }

.suc-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.suc-nombre {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0a3a72;
}

.suc-dir {
    font-size: 0.85rem;
    color: #6b7280;
}

.suc-chevron {
    color: #9ca3af;
    font-size: 0.9rem;
}

/* ───────────────────────────────────────────────────────────────
   Barra flotante "Ver mi pedido" (menú del cliente)
   ─────────────────────────────────────────────────────────────── */
.cliente-cart-bar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 460px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border: none;
    border-radius: 14px;
    background: #0a3a72;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(10, 58, 114, 0.35);
    z-index: 50;
}

.cliente-cart-bar:hover { background: #0c4488; }

.ccb-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 0.4rem;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.9rem;
}

.ccb-label { flex: 1; text-align: left; }
.ccb-total { font-weight: 700; }

/* ───────────────────────────────────────────────────────────────
   Carrito / checkout / historial del cliente
   ─────────────────────────────────────────────────────────────── */
.cli-items {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
}

/* Cada línea del carrito = tarjeta */
.cli-item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cli-item:hover { border-color: #dbe3ef; box-shadow: 0 4px 14px rgba(10,58,114,0.06); }
.cli-item-alerta { border-color: #fdba74; background: #fff8f1; }

.cli-item-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; }
.cli-item-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.cli-item-nombre { font-weight: 700; color: #111827; line-height: 1.25; }
.cli-item-obs {
    font-size: 0.8rem; color: #6b7280; display: flex; align-items: center; gap: 0.35rem;
}
.cli-item-obs i { color: #9ca3af; font-size: 0.72rem; }
.cli-item-componentes {
    list-style: none; margin: 0.15rem 0 0; padding: 0.4rem 0.6rem;
    background: #f7f8fa; border-radius: 10px; display: flex; flex-direction: column; gap: 0.1rem;
}
.cli-item-componentes li { font-size: 0.8rem; color: #4b5563; padding-left: 0.85rem; position: relative; }
.cli-item-componentes li::before { content: "↳"; position: absolute; left: 0; color: #9ca3af; }
.cli-item-precio { font-size: 0.8rem; color: #9ca3af; }

/* Estado del kit en el carrito (completo / faltan componentes) */
.cli-kit-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    font-weight: 600;
    margin: 0.1rem 0;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    width: fit-content;
}
.cli-kit-ok { color: #166534; background: #dcfce7; }
.cli-kit-falta { color: #9a3412; background: #ffedd5; }

/* Pie de la tarjeta: cantidad/editar a la izquierda, subtotal a la derecha */
.cli-item-pie {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding-top: 0.55rem; border-top: 1px dashed #eef0f3;
}
.cli-item-subtotal { font-weight: 800; color: #0a3a72; font-size: 1.05rem; margin-left: auto; }

/* Controles de cantidad (antes sin estilo en el carrito) */
.cantidad-controls {
    display: inline-flex; align-items: center; gap: 0.15rem;
    border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.12rem; background: #fff;
}
.btn-cantidad {
    width: 30px; height: 30px; border: none; background: #f3f5f8; color: #0a3a72;
    border-radius: 8px; font-size: 1.05rem; font-weight: 700; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s ease;
}
.btn-cantidad:hover { background: #e3ebf6; }
.btn-cantidad:active { background: #d4e0f1; }
.cantidad-display { min-width: 30px; text-align: center; font-weight: 700; color: #111827; }

/* Botón "Completar/Editar" del kit en el carrito (espejo del icono de detalle del mesero) */
.cli-item-editar-kit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #0a3a72;
    background: #fff;
    color: #0a3a72;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.32rem 0.65rem;
    border-radius: 9px;
}
.cli-item-editar-kit.incompleto {
    border-color: #ea580c;
    color: #fff;
    background: #ea580c;
}

/* Cantidad fija (no editable) de una línea de kit en el carrito */
.cli-item-cant-fija {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #374151;
    padding: 0.3rem 0.7rem;
    background: #f3f5f8;
    border-radius: 9px;
}
.cli-item-cant-fija i { color: #0a3a72; font-size: 0.78rem; }

.cli-item-quitar {
    border: none;
    background: none;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.2rem;
    flex-shrink: 0;
    transition: color 0.12s ease;
}
.cli-item-quitar:hover { color: #b91c1c; }

/* Resumen de totales (carrito) */
.cli-resumen {
    background: #f7f8fa; border-radius: 14px; padding: 0.9rem 1rem; margin-bottom: 1rem;
}
.cli-resumen-fila {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.92rem; color: #6b7280;
}
.cli-resumen-fila + .cli-resumen-fila { margin-top: 0.5rem; }
.cli-resumen-total {
    padding-top: 0.6rem; margin-top: 0.6rem; border-top: 1px solid #e5e7eb;
    font-size: 1.05rem; color: #111827; font-weight: 600;
}
.cli-resumen-total strong { color: #0a3a72; font-size: 1.35rem; }

/* Botón continuar con total a la derecha */
.cli-continuar {
    display: flex; align-items: center; justify-content: space-between;
}
.cli-continuar-total { font-weight: 800; }

/* Vaciar carrito (texto rojo discreto) */
.cli-vaciar {
    width: 100%; margin-top: 0.5rem; border: none; background: none;
    color: #b91c1c; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    padding: 0.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.cli-vaciar:hover { text-decoration: underline; }

/* Layout carrito/checkout: 1 columna en móvil, 2 columnas (contenido | resumen) en tablet/escritorio */
.cli-form { min-width: 0; }
.cli-foot { display: flex; flex-direction: column; gap: 0.7rem; }
/* Dentro del pie, el gap manda el espaciado: neutralizamos márgenes sueltos */
.cli-foot .cli-resumen { margin-bottom: 0; }
.cli-foot .cli-vaciar { margin-top: 0; }
.cli-foot .cta-error { margin-bottom: 0; }

/* Nota de pago (checkout) */
.cli-pago-nota {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; color: #6b7280; margin: 0;
}
.cli-pago-nota i { color: #16a34a; }

/* Checkout: elegir cómo pagar (solo si la sucursal acepta pago en línea) */
.co-pago-opciones { display: flex; flex-direction: column; gap: 0.5rem; }
.co-pago-opcion {
    display: flex; align-items: center; gap: 0.7rem; cursor: pointer;
    padding: 0.75rem 0.9rem; background: #f7f8fa; border-radius: 12px;
    border: 1.5px solid #eef0f3; transition: border-color 0.15s, background 0.15s;
}
.co-pago-opcion.sel { border-color: #0a3a72; background: #eef4fb; }
.co-pago-opcion input { accent-color: #0a3a72; margin: 0; flex-shrink: 0; }
.co-pago-opcion > i { color: #0a3a72; font-size: 1.05rem; flex-shrink: 0; }
.co-pago-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.co-pago-txt strong { font-size: 0.92rem; color: #111827; }
.co-pago-txt small { font-size: 0.8rem; color: #6b7280; }

/* Checkout: secciones del formulario (agrupan con título e ícono, dan aire) */
.co-seccion { margin-bottom: 1.4rem; }
.co-seccion:last-child { margin-bottom: 0; }
.co-seccion-tit {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 0 0.75rem; font-size: 1.02rem; font-weight: 700; color: #0a3a72;
}
.co-seccion-tit i { color: #0a3a72; font-size: 0.95rem; }
.co-seccion-opc { font-weight: 500; font-size: 0.8rem; color: #9ca3af; }

/* Checkout: bloque "Recoges en" (sucursal de recolección) */
.co-recoger {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.9rem 1rem; background: #f7f8fa; border-radius: 12px;
    border: 1px solid #eef0f3;
}
.co-recoger > i { color: #0a3a72; font-size: 1.1rem; margin-top: 0.15rem; flex-shrink: 0; }
.co-recoger-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.co-recoger-nom { font-weight: 700; color: #111827; }
.co-recoger-dir { font-size: 0.88rem; color: #4b5563; }
.co-recoger-nota { font-size: 0.82rem; color: #6b7280; margin-top: 0.15rem; }

/* Checkout: lista "Tu pedido" dentro del panel de resumen */
.co-resumen-items { padding-bottom: 0.85rem; border-bottom: 1px solid #eef0f3; }
.co-resumen-tit {
    font-size: 0.78rem; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.55rem;
}
.co-items-lista { display: flex; flex-direction: column; gap: 0.45rem; max-height: 240px; overflow-y: auto; }
.co-ritem { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.88rem; }
.co-ritem-cant { color: #0a3a72; font-weight: 700; flex-shrink: 0; }
.co-ritem-nom { color: #374151; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-ritem-precio { color: #111827; font-weight: 600; flex-shrink: 0; }

/* Ancho base del carrito/checkout (móvil): tarjeta con banner azul.
   OJO: definir la base ANTES del @media o el media se pisa por orden de cascada. */
.cta-card-carrito { max-width: 540px; }

/* ── Escritorio/tablet: el carrito/checkout deja de ser "tarjeta" y se vuelve PÁGINA completa
   (estilo e-commerce): encabezado a la izquierda + productos amplios + panel de resumen fijo. ── */
@media (min-width: 768px) {
    .cta-card-carrito {
        max-width: 1200px;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        overflow: visible;
    }

    /* El banner azul se convierte en encabezado de página (texto oscuro, alineado a la izquierda) */
    .cta-card-carrito .cuenta-banner {
        background: none;
        color: #0a3a72;
        text-align: left;
        padding: 0 0 1rem;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #e9ecf1;
        display: flex;
        align-items: center;
        gap: 0.9rem;
    }
    .cta-card-carrito .cuenta-banner .cta-avatar {
        width: 48px; height: 48px; flex-shrink: 0;
        background: #e8f0fb; color: #0a3a72; margin: 0; font-size: 1.2rem;
    }
    .cta-card-carrito .cuenta-banner h1 { font-size: 1.8rem; }
    .cta-card-carrito .cuenta-banner .cuenta-rol {
        color: #6b7280; opacity: 1; font-size: 0.95rem; margin: 0 0 0 auto; align-self: flex-end;
    }
    .cta-card-carrito .cuenta-body { padding: 0; }

    /* Contenido a 2 columnas: productos (amplios) | resumen */
    .cli-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 2.5rem;
        align-items: start;
    }
    .cli-items { margin-bottom: 0; gap: 0.9rem; }

    /* Productos más grandes en escritorio */
    .cta-card-carrito .cli-item { padding: 1.1rem 1.3rem; }
    .cta-card-carrito .cli-item-nombre { font-size: 1.08rem; }

    /* El resumen + botones viven en un panel blanco fijo a la derecha */
    .cli-foot {
        position: sticky; top: 2rem;
        background: #fff;
        border: 1px solid #eef0f3;
        border-radius: 16px;
        padding: 1.4rem;
        box-shadow: 0 6px 20px rgba(10,58,114,0.06);
    }
    .cli-foot .cli-resumen { background: transparent; padding: 0; }
    .cli-foot .cli-resumen-total { border-top-color: #eef0f3; }

    /* Estado vacío centrado y acotado (no estirado a todo el ancho de la página) */
    .cta-card-carrito .dir-empty,
    .cta-card-carrito .cuenta-body > .dir-agregar {
        max-width: 480px; margin-left: auto; margin-right: auto;
    }
}

/* Total simple (detalle de pedido / checkout) */
.cli-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 0 0.25rem;
    border-top: 2px solid #f0f0f0;
    margin-top: 0.5rem;
    font-size: 1.05rem;
}

.cli-total strong { color: #0a3a72; font-size: 1.2rem; }

/* Toggle recoger / domicilio */
.cli-toggle { display: flex; gap: 0.5rem; }

.cli-toggle-btn {
    flex: 1;
    padding: 0.7rem;
    border: 1px solid #d8dde5;
    border-radius: 11px;
    background: #fff;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cli-toggle-btn.active {
    border-color: #0a3a72;
    background: #0a3a72;
    color: #fff;
}

/* Confirmación */
.cli-ok-icon { font-size: 3.2rem; color: #16a34a; margin-bottom: 0.5rem; }

.cli-folio {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin: 0.75rem auto;
    padding: 0.6rem 1.4rem;
    background: #f0f6ff;
    border-radius: 12px;
}
.cli-folio span { font-size: 0.78rem; color: #6b7280; }
.cli-folio strong { font-size: 1.6rem; color: #0a3a72; }

/* Historial */
.cli-pedido {
    padding: 0.8rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.cli-pedido-top { display: flex; justify-content: space-between; align-items: center; }
.cli-pedido-folio { font-weight: 700; color: #0a3a72; font-size: 1.05rem; }
.cli-pedido-estado { font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; }
.estado-cocina { background: #fef3c7; color: #92400e; }
.estado-error { background: #fef2f2; color: #b91c1c; }
.estado-nuevo { background: #e5e7eb; color: #374151; }
/* 2026-10-14 (LISTO-ENTREGADO) */
.estado-listo { background: #dbeafe; color: #1e40af; }
.estado-entregado { background: #dcfce7; color: #166534; }
/* 2026-10-15 (SINCRONIZAR-CAJA): pagado en línea o cobrado en caja */
.estado-pagado { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.estado-pagado i { font-size: 0.7rem; margin-right: 0.15rem; }
.cli-det-estados { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
/* Cancelado: gris apagado, no rojo de alarma — para el cliente es un hecho, no un error. */
.estado-cancelado { background: #f3f4f6; color: #6b7280; text-decoration: line-through; }
.cli-pedido-meta { display: flex; justify-content: space-between; font-size: 0.82rem; color: #6b7280; margin-top: 0.25rem; }
.cli-pedido-total { font-weight: 700; color: #111827; margin-top: 0.25rem; }

/* ─── Chip de tienda en el header del menú (estilo Liverpool) ─── */
.mq-tienda-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    background: transparent;
    border: none;
    padding: 0.15rem 0;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.mq-tienda-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mq-tienda-chip .mq-tienda-chevron { font-size: 0.65rem; opacity: 0.8; }

/* ─── Modal selector de tienda (estilo La Casa de Toño) ─── */
.selector-tienda-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1200;
    animation: appFadeIn 0.15s ease;
}
.selector-tienda-modal {
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    background: #fff;
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0.5rem;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
}
@media (min-width: 520px) {
    .selector-tienda-overlay { align-items: center; }
    .selector-tienda-modal { border-radius: 18px; }
}
.selector-tienda-buscador {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d8dde6;
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}
.selector-tienda-buscador input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.95rem;
    color: #111827;
    background: transparent;
}
.selector-tienda-lista {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.selector-tienda-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    background: #f7f8fa;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.selector-tienda-item.activa {
    border-color: #0a3a72;
    background: #eef4ff;
}
.selector-tienda-nombre { font-weight: 700; color: #0a3a72; font-size: 1rem; }
.selector-tienda-dir { font-size: 0.85rem; color: #4b5563; line-height: 1.25; }
.selector-tienda-vacio { text-align: center; color: #6b7280; padding: 1.5rem 0; }
.selector-tienda-cerrar {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.9rem;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}

/* ─── Confirmar cambio de tienda (carrito lleno) ─── */
.cli-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
    padding: 1rem;
    animation: appFadeIn 0.15s ease;
}
.cli-confirm-modal {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem 1.25rem 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.cli-confirm-icon { font-size: 2.2rem; color: #d97706; margin-bottom: 0.5rem; }
.cli-confirm-titulo { font-size: 1.2rem; font-weight: 700; color: #0a3a72; margin: 0 0 0.5rem; }
.cli-confirm-texto { font-size: 0.92rem; color: #4b5563; line-height: 1.45; margin: 0 0 1.1rem; }

/* ─── Acciones del header (cuenta + carrito) y menú de cuenta ─── */
.mq-topbar-actions { display: flex; align-items: center; gap: 0.3rem; }

/* Botón de cuenta: cuando hay sesión muestra el primer nombre junto al ícono */
.mq-cuenta-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.mq-cuenta-btn.mq-cuenta-on {
    width: auto;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}
.mq-cuenta-nombre {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menú de la cuenta (2026-10-15): se despliega debajo del botón de cuenta del encabezado, ya no es modal.
   Con el menú abierto el encabezado sube de capa para quedar sobre el buscador (z 4) y la barra del carrito (z 50). */
.mesaqr-skin .mq-topbar.mq-topbar-menu-abierto { z-index: 60; }
.mq-cuenta-wrap { position: relative; }
.mq-cuenta-fondo { position: fixed; inset: 0; background: transparent; z-index: 1; }
.mq-cuenta-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 2;
    min-width: 240px; max-width: calc(100vw - 2rem);
    background: #fff; border-radius: 14px; padding: 0.5rem 0.75rem 0.25rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); border: 1px solid #eef0f3;
    animation: appFadeIn 0.12s ease;
}
.mq-cuenta-menu .cuenta-sheet-saludo { padding: 0.45rem 0.25rem 0.7rem; }
.mq-cuenta-menu .cuenta-sheet-item { padding: 0.75rem 0.25rem; font-size: 0.95rem; }
/* La última opción antes de "Cerrar" (que en escritorio no se ve) va sin línea abajo */
.mq-cuenta-menu .cuenta-sheet-item:nth-last-child(2) { border-bottom: none; }
.mq-cuenta-menu .cuenta-sheet-item:hover { background: #f7faff; }
.mq-cuenta-cerrar { display: none; }

/* Celular: el mismo menú sale desde abajo con el fondo oscurecido y "Cerrar", como era antes. */
@media (max-width: 767px) {
    .mq-cuenta-fondo { background: rgba(0, 0, 0, 0.45); animation: appFadeIn 0.15s ease; }
    .mq-cuenta-menu {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0;
        min-width: 0; max-width: none; border: none;
        border-radius: 18px 18px 0 0; padding: 1rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
        animation: mq-slide-up 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mq-cuenta-menu .cuenta-sheet-item { padding: 0.9rem 0.5rem; font-size: 1rem; }
    .mq-cuenta-menu .cuenta-sheet-item:nth-last-child(2) { border-bottom: 1px solid #f5f5f5; }
    .mq-cuenta-cerrar { display: block; }
}
.cuenta-sheet-saludo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #0a3a72;
    padding: 0.4rem 0.4rem 0.8rem;
    border-bottom: 1px solid #f0f0f0;
}
.cuenta-sheet-saludo i { font-size: 1.4rem; }
.cuenta-sheet-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.9rem 0.5rem;
    font-size: 1rem;
    color: #111827;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
}
.cuenta-sheet-item i { width: 1.2rem; text-align: center; color: #6b7280; }
.cuenta-sheet-salir { color: #b91c1c; }
.cuenta-sheet-salir i { color: #b91c1c; }

/* ─── Detalle de pedido (historial) ─── */
.cli-pedido-click { cursor: pointer; }
.cli-pedido-click:active { background: #f7f8fa; }
.cli-pedido-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 0.25rem; }
.cli-pedido-ver { font-size: 0.8rem; color: #0a3a72; font-weight: 600; }
.cli-pedido-ver i { font-size: 0.7rem; }

.cli-det-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.cli-det-dir { font-size: 0.85rem; color: #4b5563; margin: 0 0 0.6rem; }
.cli-det-dir i { color: #0a3a72; margin-right: 0.3rem; }
.cli-det-item { padding: 0.55rem 0.2rem; border-bottom: 1px solid #f0f0f0; }
.cli-det-item-top { display: flex; justify-content: space-between; gap: 0.6rem; }
.cli-det-item-nombre { font-weight: 600; color: #111827; font-size: 0.95rem; }
.cli-det-item-precio { font-weight: 700; color: #0a3a72; white-space: nowrap; }
.cli-det-comps { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.cli-det-comps li { font-size: 0.85rem; color: #4b5563; line-height: 1.4; }
.cli-det-obs { font-size: 0.83rem; color: #6b7280; font-style: italic; margin: 0.25rem 0 0; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVO + ENRIQUECIDO: login / cuenta / pedidos (escritorio · tablet · móvil)
   Mobile-first: base = móvil (apilado); @media ensancha en pantallas grandes.
   Mantiene paleta #0a3a72 / #fcfaf7.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Login a 2 paneles (branding + formulario) ── */
.cta-card-auth { padding: 0; overflow: hidden; max-width: 420px; }

.auth-brand {
    background: linear-gradient(150deg, #0a3a72 0%, #0c4488 60%, #1257a8 100%);
    color: #fff;
    padding: 1.5rem 1.75rem;
    text-align: center;
}
.auth-brand-logo {
    width: 54px; height: 54px;
    border-radius: 16px;
    background: rgba(255,255,255,0.16);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 0.6rem;
}
.auth-brand h2 { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.auth-brand p { margin: 0.3rem 0 0; font-size: 0.9rem; opacity: 0.9; }
.auth-brand-features { list-style: none; margin: 1.1rem 0 0; padding: 0; text-align: left; display: none; }
.auth-brand-features li {
    display: flex; align-items: flex-start; gap: 0.55rem;
    font-size: 0.9rem; line-height: 1.35; margin-bottom: 0.7rem; opacity: 0.95;
}
.auth-brand-features i { margin-top: 0.15rem; color: #7dd3fc; }
.auth-form { padding: 1.75rem 1.75rem 2rem; }

/* Input con botón (ojo de contraseña) */
.cta-input-wrap { position: relative; display: flex; align-items: center; }
.cta-input-wrap input { padding-right: 2.8rem; }
.cta-eye {
    position: absolute; right: 0.6rem;
    background: none; border: none; cursor: pointer;
    color: #9ca3af; font-size: 1rem; padding: 0.4rem;
}
.cta-eye:hover { color: #0a3a72; }

@media (min-width: 768px) {
    .cta-card-auth {
        max-width: 760px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .auth-brand {
        padding: 2.5rem 2rem;
        display: flex; flex-direction: column; justify-content: center; text-align: left;
    }
    .auth-brand-logo { margin-bottom: 1rem; }
    .auth-brand h2 { font-size: 1.7rem; }
    .auth-brand p { font-size: 0.98rem; }
    .auth-brand-features { display: block; }
    .auth-form { padding: 2.5rem 2.25rem; display: flex; flex-direction: column; justify-content: center; }
    .auth-form .cta-title { text-align: left; }
    .auth-form .cta-sub { text-align: left; }
    .auth-form .cta-alt { text-align: left; }
}

/* ── Mi cuenta enriquecida ── */
.cta-card-cuenta { max-width: 560px; padding: 0; overflow: hidden; }
.cuenta-banner {
    background: linear-gradient(150deg, #0a3a72 0%, #0c4488 100%);
    color: #fff; padding: 1.75rem 1.5rem 1.5rem; text-align: center;
}
.cuenta-banner .cta-avatar {
    background: rgba(255,255,255,0.18); margin-bottom: 0.6rem;
}
.cuenta-banner h1 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.cuenta-banner .cuenta-rol { font-size: 0.85rem; opacity: 0.85; margin-top: 0.15rem; }
.cuenta-body { padding: 1.5rem; }

.cuenta-datos-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-bottom: 1.25rem; }
.cuenta-dato-card {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.8rem 0.9rem; background: #f7f8fa; border-radius: 12px;
}
.cuenta-dato-card i {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px; background: #e8f0fb; color: #0a3a72;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.cuenta-dato-card .cuenta-dato-txt { display: flex; flex-direction: column; min-width: 0; }
.cuenta-dato-card .cuenta-dato-label { font-size: 0.72rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; }
.cuenta-dato-card .cuenta-dato-valor { font-size: 0.95rem; color: #111827; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.cuenta-acciones { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.cuenta-accion {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    padding: 0.95rem 1rem; border-radius: 12px; border: 1px solid #e5e7eb;
    background: #fff; color: #111827; font-size: 1rem; font-weight: 600; cursor: pointer;
    text-align: left;
}
.cuenta-accion i:first-child { width: 1.3rem; text-align: center; color: #0a3a72; }
.cuenta-accion .cuenta-accion-chevron { margin-left: auto; color: #cbd5e1; font-size: 0.8rem; }
.cuenta-accion:hover { border-color: #0a3a72; box-shadow: 0 4px 12px rgba(10,58,114,0.08); }
.cuenta-accion.primaria { background: #0a3a72; color: #fff; border-color: #0a3a72; }
.cuenta-accion.primaria i { color: #fff; }
.cuenta-accion.primaria:hover { background: #0c4488; }
.cuenta-accion.salir { color: #b91c1c; }
.cuenta-accion.salir i:first-child { color: #b91c1c; }

@media (min-width: 600px) {
    .cuenta-datos-grid { grid-template-columns: 1fr 1fr; }
}

/* "Mi cuenta" en escritorio (2026-10-15): tarjeta ancha (hasta 1100 px), igual que "Mis pedidos" y "Mi perfil".
   Clase propia porque cta-card-cuenta también la usan el carrito, el checkout y las direcciones. */
@media (min-width: 1024px) {
    .cta-card-micuenta { max-width: 1100px; }
    .cta-card-micuenta .cuenta-body { padding: 1.5rem 2rem; }
}

/* ── Mis pedidos enriquecido ── */
.cta-card-pedidos { max-width: 620px; }
.cli-pedido {
    border: 1px solid #eef0f3; border-radius: 14px; padding: 0.9rem 1rem;
    margin-bottom: 0.7rem; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cli-pedido-click:hover { border-color: #0a3a72; box-shadow: 0 4px 14px rgba(10,58,114,0.08); }
.cli-pedido-entrega { display: inline-flex; align-items: center; gap: 0.35rem; }
.cli-pedido-entrega i { color: #0a3a72; }

/* Lista de pedidos (tarjeta horizontal: ícono · info · total) */
.ped-items { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.1rem; }
.ped-item {
    display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left;
    background: #fff; border: 1px solid #eef0f3; border-radius: 14px;
    padding: 0.85rem 1rem; cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ped-item:hover { border-color: #0a3a72; box-shadow: 0 4px 14px rgba(10,58,114,0.08); }
.ped-item:active { transform: scale(0.99); }
.ped-icono {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px;
    background: #e8f0fb; color: #0a3a72; font-size: 1.15rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.ped-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.ped-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ped-folio { font-weight: 800; color: #0a3a72; font-size: 1.05rem; }
.ped-sub { font-size: 0.82rem; color: #6b7280; }
.ped-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem;
    flex-shrink: 0; text-align: right;
}
.ped-total { font-weight: 800; color: #111827; font-size: 1.1rem; }
.ped-ver { font-size: 0.78rem; color: #0a3a72; font-weight: 600; white-space: nowrap; }
.ped-ver i { font-size: 0.68rem; margin-left: 0.15rem; }

/* Mis pedidos: una sola columna también en tablet/escritorio (en 2 columnas se veía saturado); la tarjeta
   conserva el ancho para que cada pedido ocupe todo el renglón. */
@media (min-width: 700px) {
    .cta-card-pedidos { max-width: 720px; }
}
.cta-link-volver-arriba { margin: 0 0 0.9rem; padding: 0; }

/* 2026-10-19 (VOLVER-NOTORIO): el regreso de arriba (Mis pedidos "Volver al menú", Perfil y Direcciones "Volver a mi
   cuenta") era un enlace chico que no se veía, sobre todo en escritorio. Ahora es un botón: ancho completo en celular y
   grande en escritorio. REVERSION: quitar este bloque. */
.cta-link-volver.cta-link-volver-arriba {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 50px;
    margin: 0 0 1.1rem;
    padding: 0.7rem 1rem;
    background: #eaf2fc;
    color: #0a3a72;
    border: 1.5px solid #0a3a72;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(10, 58, 114, 0.10);
    transition: background 0.15s, box-shadow 0.15s;
}
.cta-link-volver.cta-link-volver-arriba i { font-size: 1rem; }
.cta-link-volver.cta-link-volver-arriba:hover { background: #d9e8fa; box-shadow: 0 3px 10px rgba(10, 58, 114, 0.16); }
.cta-link-volver.cta-link-volver-arriba:focus-visible { outline: 3px solid #93b4dd; outline-offset: 2px; }
@media (min-width: 700px) {
    .cta-link-volver.cta-link-volver-arriba {
        display: inline-flex;
        width: auto;
        min-height: 50px;
        padding: 0.75rem 1.7rem;
        font-size: 1.12rem;
    }
}

/* Mis pedidos por partes (2026-10-15): "Recientes" / "Pedidos anteriores" y el botón para traer más */
.ped-seccion {
    margin: 0 0 0.55rem; font-size: 0.75rem; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ped-ver-mas {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%;
    padding: 0.8rem; border-radius: 12px; border: 1px solid #d8dde5; background: #fff;
    color: #0a3a72; font-size: 0.95rem; font-weight: 700; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ped-ver-mas:hover { border-color: #0a3a72; background: #f7faff; }
.ped-ver-mas:disabled { opacity: 0.7; cursor: default; }

/* Mis pedidos en escritorio: tarjeta ancha (hasta 1100 px; a todo lo ancho se veía demasiado larga) y cada pedido reparte sus datos en el
   renglón (folio y estado · entrega y fecha · total y "Ver detalle") en lugar de quedar en una lista angosta. */
@media (min-width: 1024px) {
    .cta-card-pedidos { max-width: 1100px; }
    .cta-card-pedidos .cuenta-body { padding: 1.5rem 2rem; }
    .ped-item { padding: 0.9rem 1.5rem; gap: 1.25rem; }
    .ped-info { flex-direction: row; align-items: center; gap: 2.5rem; }
    .ped-top { flex: 0 0 22rem; flex-wrap: nowrap; } /* cabe "Esperando que el restaurante lo acepte" */
    .ped-sub { font-size: 0.92rem; }
    .ped-right { flex-direction: row; align-items: center; gap: 2.5rem; }
}

/* Direcciones: ensanchar la tarjeta en tablet/escritorio (la rejilla 2-col ya existe a 640px) */
@media (min-width: 768px) {
    .cta-card-dirs { max-width: 720px; }
}
/* Escritorio (2026-10-15): tarjeta ancha (hasta 1100 px), igual que "Mi cuenta" */
@media (min-width: 1024px) {
    .cta-card-dirs { max-width: 1100px; }
    .cta-card-dirs .cuenta-body { padding: 1.5rem 2rem; }
}

/* ───────────────────────────────────────────────────────────────
   Carrito tipo CAJÓN lateral (estilo La Casa de Toño / apps de comida)
   Se desliza desde la derecha sobre el menú, con el fondo oscurecido.
   ─────────────────────────────────────────────────────────────── */
.cart-drawer-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(17, 24, 39, 0.45);
    display: flex; justify-content: flex-end;
    animation: cartOverlayIn 0.2s ease both;
}
@keyframes cartOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.cart-drawer {
    width: 100%; max-width: 420px; height: 100%;
    background: #fff; display: flex; flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.18);
    animation: cartSlideIn 0.25s ease both;
}
@keyframes cartSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.cart-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid #eef0f3; flex-shrink: 0;
}
.cart-drawer-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #0a3a72; }
.cart-drawer-x { background: none; border: none; font-size: 1.35rem; color: #9ca3af; cursor: pointer; padding: 0.2rem; line-height: 1; }
.cart-drawer-x:hover { color: #0a3a72; }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }

.cart-line { display: flex; gap: 0.8rem; padding-bottom: 1rem; border-bottom: 1px solid #f0f0f0; }
.cart-line:last-child { border-bottom: none; padding-bottom: 0; }
.cart-line-alerta { background: #fff8f1; border: 1px solid #fdba74; border-radius: 12px; padding: 0.7rem; }

.cart-line-img {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
    background: #f3f5f8; color: #9fb6d4; font-size: 1.4rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.cart-line-img img { width: 100%; height: 100%; object-fit: cover; }

.cart-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.cart-line-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: flex-start; }
.cart-line-nombre { font-weight: 700; color: #111827; line-height: 1.25; }
.cart-line-precio { font-weight: 800; color: #0a3a72; white-space: nowrap; }

.cart-line-comps {
    list-style: none; margin: 0.1rem 0 0; padding: 0.4rem 0.6rem;
    background: #f7f8fa; border-radius: 10px; display: flex; flex-direction: column; gap: 0.1rem;
}
.cart-line-comps li { font-size: 0.8rem; color: #4b5563; padding-left: 0.85rem; position: relative; }
.cart-line-comps li::before { content: "↳"; position: absolute; left: 0; color: #9ca3af; }
.cart-line-obs { font-size: 0.8rem; color: #6b7280; font-style: italic; }

.cart-line-acc { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.2rem; flex-wrap: wrap; }

/* Botones +/− del cajón = MISMO estilo que el modal de detalle de producto
   (redondos con degradado azul, texto blanco, sombra). */
.cart-line .cantidad-controls { gap: 0.55rem; border: none; padding: 0; background: transparent; }
.cart-line .btn-cantidad {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #0056A4 0%, #0070D0 100%);
    color: #fff; border: none; font-size: 1.15rem; font-weight: 700; line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 86, 164, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: inline-flex; align-items: center; justify-content: center;
}
.cart-line .btn-cantidad:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 16px rgba(0, 86, 164, 0.5);
    background: linear-gradient(135deg, #0056A4 0%, #0070D0 100%);
}
.cart-line .btn-cantidad:active { transform: scale(0.96); background: linear-gradient(135deg, #0056A4 0%, #0070D0 100%); }
.cart-line .cantidad-display { min-width: 40px; text-align: center; color: #0f172a; font-size: 1.05rem; font-weight: 700; }
.cart-line-cant-fija {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem; font-weight: 700; color: #374151;
    padding: 0.3rem 0.65rem; background: #f3f5f8; border-radius: 9px;
}
.cart-line-cant-fija i { color: #0a3a72; font-size: 0.78rem; }
.cart-line-editar {
    border: 1px solid #0a3a72; background: #fff; color: #0a3a72;
    font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 9px; cursor: pointer;
}
.cart-line-editar:hover { background: #eef4ff; }
.cart-line-editar.incompleto { border-color: #ea580c; background: #ea580c; color: #fff; }
.cart-line-quitar {
    margin-left: auto; border: none; background: none; color: #cbd5e1;
    cursor: pointer; font-size: 0.95rem; padding: 0.2rem; transition: color 0.12s ease;
}
.cart-line-quitar:hover { color: #b91c1c; }

.cart-drawer-foot {
    border-top: 1px solid #eef0f3; padding: 1.1rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.6rem; flex-shrink: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}
.cart-drawer-tot { display: flex; justify-content: space-between; align-items: center; font-size: 1.05rem; color: #111827; }
.cart-drawer-tot strong { color: #0a3a72; font-size: 1.4rem; }
.cart-drawer-seguir { border: none; background: none; color: #0a3a72; font-weight: 600; font-size: 0.9rem; cursor: pointer; padding: 0.4rem; }
.cart-drawer-seguir:hover { text-decoration: underline; }

.cart-drawer-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: #6b7280; padding: 2rem;
}
.cart-drawer-empty i { font-size: 2.8rem; color: #cbd5e1; margin-bottom: 0.8rem; }
.cart-drawer-empty p { margin: 0; font-weight: 700; color: #374151; }
.cart-drawer-empty span { font-size: 0.88rem; margin-top: 0.25rem; }

/* ───────────────────────────────────────────────────────────────
   Carrito PÁGINA (/cuenta/carrito) — tabla responsiva:
   tarjeta en móvil/tablet, tabla ANCHA estilo Liverpool en escritorio (≥1024).
   ─────────────────────────────────────────────────────────────── */
.cart-table { display: flex; flex-direction: column; gap: 0.7rem; }
.cart-head { display: none; }

.cart-row {
    border: 1px solid #eef0f3; border-radius: 14px; background: #fff;
    padding: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem;
}
.cart-row.alerta { border-color: #fdba74; background: #fff8f1; }

.cart-c-prod { display: flex; gap: 0.85rem; align-items: flex-start; }
.cart-c-img {
    width: 64px; height: 64px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
    background: #f3f5f8; color: #9fb6d4; font-size: 1.4rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.cart-c-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-c-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.cart-c-nombre { font-weight: 700; color: #111827; line-height: 1.25; }
.cart-c-editar {
    align-self: flex-start; margin-top: 0.15rem;
    border: 1px solid #0a3a72; background: #fff; color: #0a3a72;
    font-size: 0.78rem; font-weight: 600; padding: 0.32rem 0.7rem; border-radius: 9px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.cart-c-editar:hover { background: #eef4ff; }
.cart-c-editar.incompleto { border-color: #ea580c; background: #ea580c; color: #fff; }

.cart-c-precio, .cart-c-cant, .cart-c-total { display: flex; justify-content: space-between; align-items: center; }
.cart-lbl { color: #6b7280; font-size: 0.85rem; font-weight: 600; }
.cart-c-val { font-weight: 700; color: #111827; }
.cart-c-val small { color: #9ca3af; font-weight: 500; font-size: 0.75rem; }
.cart-c-sub { color: #0a3a72; font-size: 1.05rem; }
.cart-c-quitar {
    align-self: flex-end; border: none; background: none; color: #cbd5e1;
    cursor: pointer; font-size: 0.95rem; padding: 0.2rem; transition: color 0.12s ease;
}
.cart-c-quitar:hover { color: #b91c1c; }

/* +/− redondos azules (igual que el modal de detalle de producto) */
.cart-c-cant .cantidad-controls { gap: 0.55rem; border: none; padding: 0; background: transparent; }
.cart-c-cant .btn-cantidad {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #0056A4 0%, #0070D0 100%);
    color: #fff; border: none; font-size: 1.15rem; font-weight: 700; line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 86, 164, 0.35);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cart-c-cant .btn-cantidad:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(0, 86, 164, 0.5); }
.cart-c-cant .btn-cantidad:active { transform: scale(0.96); }
.cart-c-cant .cantidad-display { min-width: 40px; text-align: center; color: #0f172a; font-size: 1.05rem; font-weight: 700; }

/* ≥1024: tabla ancha con columnas (Producto · Precio · Cantidad · Total) */
@media (min-width: 1024px) {
    .cta-card-carrito { max-width: 1320px; }
    .cli-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; }

    .cart-table {
        background: #fff; border: 1px solid #eef0f3; border-radius: 16px;
        box-shadow: 0 6px 20px rgba(10, 58, 114, 0.05);
        padding: 0.25rem 1.5rem 0.75rem; gap: 0;
    }
    .cart-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 130px 170px 120px 40px;
        align-items: center; gap: 1.25rem;
        padding: 1rem 0 0.85rem; border-bottom: 2px solid #e9ecf1;
        font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em;
        color: #6b7280; font-weight: 700;
    }
    .cart-head-total { text-align: right; }

    .cart-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 130px 170px 120px 40px;
        align-items: center; gap: 1.25rem;
        border: none; border-bottom: 1px solid #f0f0f0; border-radius: 0;
        background: transparent; padding: 1.15rem 0;
    }
    .cart-row:last-child { border-bottom: none; }
    .cart-row.alerta { background: #fff8f1; border-radius: 12px; padding: 1.15rem 0.75rem; }

    .cart-lbl { display: none; }
    .cart-c-precio, .cart-c-cant, .cart-c-total { display: block; }
    .cart-c-total { text-align: right; }
    .cart-c-quitar { align-self: center; justify-self: center; }

    /* Checkout: más angosto que el carrito (un formulario a 900px se ve estirado) */
    .cta-card-checkout { max-width: 1040px; }
}

/* Checkout: el formulario va en un PANEL blanco (igual que la tabla del carrito),
   para que ambas páginas se vean consistentes en modo página (tablet/escritorio). */
@media (min-width: 768px) {
    .cta-card-checkout .cli-form {
        background: #fff;
        border: 1px solid #eef0f3;
        border-radius: 16px;
        box-shadow: 0 6px 20px rgba(10, 58, 114, 0.05);
        padding: 1.75rem;
        align-self: start;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Modificadores ("Personalizar") del canal cliente — chips de lo elegido.
   Se usan en el modal del producto, en el cajón del carrito, en /cuenta/carrito
   y en el checkout, para que el cliente vea SIEMPRE lo mismo antes de pagar.
   El modal en sí reusa .mod-* de menu.css (mismo componente que mesero y QR).
   ───────────────────────────────────────────────────────────────────────────── */
.cli-mods-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
}

.cli-mod-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #eef4fb;
    border: 1px solid #d6e4f5;
    color: #23415f;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

/* La operación (SIN / CON / EXTRA…) va destacada: es lo que cambia el platillo. */
.cli-mod-chip .cli-mod-op {
    font-weight: 700;
    color: #0056A4;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

[data-theme='dark'] .cli-mod-chip {
    background: rgba(0, 86, 164, 0.18);
    border-color: rgba(0, 112, 208, 0.35);
    color: #d7e6f7;
}

[data-theme='dark'] .cli-mod-chip .cli-mod-op { color: #6ab0f0; }

/* ───────────────────────────────────────────────────────────────
   2026-10-15: tarjetas de producto COMPACTAS en el menú del cliente (/cuenta/menu, clase cli-menu).
   La base (mesaqr-menu.css) fuerza una foto de mínimo 200–220 px de alto y por eso la tarjeta se veía enorme.
   Solo cambian tamaños; la mesa QR y el kiosco usan el mismo skin y quedan igual.
   ─────────────────────────────────────────────────────────────── */
.cli-menu.mesaqr-skin .producto-card { border-radius: 14px; }
/* height:auto anula el "height: 70px" genérico de carrito.css, que el mínimo de 200 px de la base tapaba */
.cli-menu.mesaqr-skin .producto-icon { aspect-ratio: 4 / 3; min-height: 0; height: auto; max-height: none; }
.cli-menu.mesaqr-skin .producto-nombre-placeholder { font-size: 0.85rem; padding: 0.75rem; }
.cli-menu.mesaqr-skin .producto-precio-badge {
    top: 0.5rem; right: 0.5rem; font-size: 0.78rem; padding: 0.3rem 0.6rem;
}
.cli-menu.mesaqr-skin .producto-info { padding: 0.65rem 0.8rem 0.2rem; }
.cli-menu.mesaqr-skin .producto-nombre { font-size: 0.92rem; line-height: 1.2; }
.cli-menu.mesaqr-skin .producto-footer { padding: 0 0.7rem 0.65rem; }
.cli-menu.mesaqr-skin .producto-cta { width: 32px; height: 32px; min-width: 32px; }
.cli-menu.mesaqr-skin .producto-cta i { font-size: 0.85rem; }

/* Rejilla: celular = 2 por fila (como antes); de tablet en adelante, tarjetas de ~180 px que llenan la fila.
   auto-fill deja el mismo tamaño aunque la categoría tenga solo 1 o 2 productos. */
@media (min-width: 600px) {
    .cli-menu.mesaqr-skin.mq-vista-2col .productos-grid,
    .cli-menu.mesaqr-skin.mq-vista-2col .productos-grid-small {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 1rem;
    }
}

/* ───────────────────────────────────────────────────────────────
   2026-10-15 (MENU-MODERNO): menú del cliente más actual. Todo con .cli-menu (la mesa QR no cambia).
   REVERSION: borrar desde aquí hasta el final + el respaldo de ClienteMenu.razor (scratchpad respaldo-menu-2026-10-15).
   ─────────────────────────────────────────────────────────────── */

/* Foto: color plano detrás; la foto (si hay y carga) lo tapa. Sin foto ya no sale el nombre repetido ni el ícono de
   imagen rota. (Íconos por tipo de producto se probaron y se quitaron: con nombres sin relación se veían mal.) */
.cli-menu.mesaqr-skin .cli-prod-foto {
    background: #f3f3f3;
}
.cli-menu.mesaqr-skin .cli-prod-foto img { position: absolute; inset: 0; z-index: 1; }

/* Nombre + una línea de descripción */
.cli-menu.mesaqr-skin .producto-info { gap: 0.2rem; }
.cli-menu .cli-prod-desc {
    margin: 0; font-size: 0.8rem; color: #6b7280; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Precio abajo a la izquierda, "+" a la derecha */
.cli-menu.mesaqr-skin .cli-prod-footer { justify-content: space-between; gap: 0.5rem; padding-top: 0.35rem; margin-top: auto; }
.cli-menu .cli-prod-precio {
    font-size: 1rem;
    font-weight: 700;
    color: #0a3a72;
    letter-spacing: -0.01em;
}
.cli-menu .cli-prod-precio-cargando {
    width: 54px; height: 14px; border-radius: 6px;
    background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 50%, #eceff3 75%); background-size: 200% 100%;
    animation: cliBrillo 1.2s ease-in-out infinite;
}

/* Barra de categorías fija arriba al desplazarse + fila de secciones.
   carrito.css pone "overflow-y: auto" al contenido: eso lo vuelve su propio marco de desplazamiento y la barra
   nunca se quedaba fija (la que se desplaza es la página). Aquí no hace falta: el contenido crece con la página. */
.cli-menu .carrito-content { overflow: visible; }
.cli-menu .cli-nav-sticky {
    position: sticky; top: 0; z-index: 5;
    background: var(--mq-bg, #fcfaf7);
    margin: 0 -1rem 0.9rem; padding: 0.35rem 1rem 0.45rem;
    box-shadow: 0 8px 12px -12px rgba(15, 23, 42, 0.35);
}
.cli-menu.mesaqr-skin .cli-nav-sticky .categorias-scroll-container { margin: 0 !important; }
.cli-menu.mesaqr-skin .cli-nav-sticky .categorias-scroll { padding: 0.2rem 0 0.35rem !important; }

/* Tarjetas grises animadas mientras carga */
.cli-menu .carrito-content > .cli-skel-grid { padding: 0; }   /* carrito.css da 1rem a cada div hijo */
.cli-skel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
@media (min-width: 600px) {
    .cli-skel-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
}
.cli-skel-card { background: #fff; border: 1px solid #eef0f3; border-radius: 14px; overflow: hidden; padding-bottom: 0.8rem; }
.cli-skel-foto, .cli-skel-linea {
    background: linear-gradient(90deg, #eceff3 25%, #f5f7fa 50%, #eceff3 75%); background-size: 200% 100%;
    animation: cliBrillo 1.2s ease-in-out infinite;
}
.cli-skel-foto { aspect-ratio: 4 / 3; }
.cli-skel-linea { height: 12px; border-radius: 6px; margin: 0.8rem 0.8rem 0; }
.cli-skel-linea.cli-skel-corta { width: 45%; margin-top: 0.5rem; }
@keyframes cliBrillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* "Sprite se agregó a tu pedido" + el carrito brinca */
.cli-agregado {
    position: fixed; left: 50%; bottom: 1.25rem; z-index: 1100;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 0.5rem; max-width: calc(100vw - 2rem);
    background: #111827; color: #fff; border-radius: 999px; padding: 0.65rem 1.1rem;
    font-size: 0.9rem; font-weight: 600; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    animation: cliAgregadoEntra 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cli-agregado.con-barra { bottom: 5.4rem; }      /* encima de "Ver mi pedido" */
.cli-agregado i { color: #4ade80; }
.cli-agregado span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes cliAgregadoEntra {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.mq-cart-badge.cli-bump { animation: cliBump 0.6s ease; }
.cliente-cart-bar.cli-bump { animation: cliBumpBarra 0.6s ease; }
@keyframes cliBump { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.35); } }
@keyframes cliBumpBarra {
    0%, 100% { transform: translateX(-50%) scale(1); }
    35% { transform: translateX(-50%) scale(1.04); }
}

/* 2026-10-15: en el detalle del producto del cliente, "Agregar al carrito" queda fijo abajo del modal aunque el
   contenido se desplace (observaciones, personalizar). El modal es el que se desplaza (max-height 92vh). */
.cli-modal-producto .cli-cta-barra {
    position: sticky; bottom: 0; z-index: 3;
    background: #fff;
    margin: 0.25rem -1.4rem -1.4rem;          /* hasta las orillas y el fondo del modal (padding de .preview-body) */
    padding: 0.75rem 1.4rem 1rem;
    box-shadow: 0 -10px 18px -14px rgba(15, 23, 42, 0.45);
}
.cli-modal-producto .cli-cta-barra .preview-cta { width: 100%; margin: 0; }   /* la base del modal le pone margen a los lados */
/* 2026-10-15: foto del detalle sobre gris claro (como la tarjeta) en lugar del degradado azul. La foto se sigue
   mostrando completa (object-fit: contain de la base) para no recortar productos. */
.cli-modal-producto .preview-imagen { background: #f3f3f3; }
/* 2026-10-15: detalle del producto del cliente en tonos neutros (como la tarjeta): sin los fondos y orillas azules ni la
   franja azul de arriba del panel de cantidad. Los botones de acción (+/−, Agregar al carrito) siguen en azul. */
.cli-modal-producto .preview-placeholder { color: #9ca3af; text-shadow: none; }
.modal-preview-card.cli-modal-producto .producto-detalle-cantidad {
    background: #f7f7f7; border: 1px solid #e5e7eb;
}
.modal-preview-card.cli-modal-producto .producto-detalle-cantidad::before { display: none; }
.modal-preview-card.cli-modal-producto .producto-detalle-cantidad label { color: #374151; }
.modal-preview-card.cli-modal-producto .btn-toggle-observaciones {
    background: #f7f7f7; border: 1px solid #e5e7eb; color: #374151;
}
.modal-preview-card.cli-modal-producto .btn-toggle-observaciones:hover { background: #efefef; }
.modal-preview-card.cli-modal-producto .observaciones-container { background: #f7f7f7; }

/* 2026-10-16 (TIEMPO-APROX): tiempo aproximado de preparación — siempre como estimado */
.cli-tiempo-aprox {
    display: flex; align-items: center; gap: 0.4rem;
    margin: -0.15rem 1rem 0.6rem; font-size: 0.85rem; color: #4b5563;
}
.cli-tiempo-aprox i { color: #0a3a72; }
.cli-tiempo-aprox strong { color: #111827; }
.co-recoger-tiempo { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: #374151; }
.co-recoger-tiempo i { color: #0a3a72; margin-right: 0.2rem; }
.cli-listo-aprox {
    display: flex; align-items: flex-start; gap: 0.6rem; text-align: left;
    margin: 0.6rem auto 0.4rem; max-width: 360px;
    padding: 0.7rem 0.9rem; border-radius: 12px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
}
.cli-listo-aprox i { font-size: 1.1rem; margin-top: 0.1rem; color: #2563eb; }
.cli-listo-aprox div { display: flex; flex-direction: column; gap: 0.1rem; }
.cli-listo-aprox strong { font-size: 0.95rem; }
.cli-listo-aprox span { font-size: 0.8rem; color: #475569; }
.cli-listo-aprox-izq { margin: 0 0 0.6rem; max-width: none; }
.ped-listo-aprox { font-size: 0.8rem; color: #1e40af; font-weight: 600; }
.ped-listo-aprox i { margin-right: 0.15rem; }

/* 2026-10-16 (TIENDA-ABIERTA-APP): sucursal que no está recibiendo pedidos (menú, selector de tienda y checkout). */
.cli-tienda-cerrada {
    display: flex; align-items: flex-start; gap: 0.6rem; text-align: left;
    margin: -0.15rem 1rem 0.7rem;
    padding: 0.7rem 0.9rem; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
    font-size: 0.88rem; line-height: 1.35;
}
.cli-tienda-cerrada i { font-size: 1.05rem; margin-top: 0.1rem; color: #ea580c; }
.cli-tienda-cerrada strong { color: #7c2d12; }
.cli-tienda-cerrada.co-tienda-cerrada { margin: 0 0 0.7rem; }
.cli-tienda-revisar {
    display: inline-block; margin-left: 0.25rem; padding: 0; border: none; background: none;
    color: #c2410c; font-weight: 700; text-decoration: underline; cursor: pointer; font-size: inherit;
}
.cli-tienda-revisar:disabled { opacity: 0.6; cursor: default; }
.selector-tienda-cerrada { font-size: 0.8rem; font-weight: 600; color: #c2410c; }
.selector-tienda-cerrada i { margin-right: 0.2rem; }

/* 2026-10-16 (PRODUCTO-NO-DISPONIBLE): producto sin precio en la lista de la sucursal: atenuado, sin "+", "No disponible". */
/* .mesaqr-skin .producto-card hace "all: unset" (pesa más que una sola clase): por eso va con .cli-menu .producto-card. */
.cli-menu .producto-card.cli-prod-no-disponible { opacity: 0.6; }
.cli-menu .producto-card.cli-prod-no-disponible:hover { transform: none; box-shadow: var(--mq-card-shadow); }
.cli-menu .cli-prod-no-disponible .cli-prod-foto img { filter: grayscale(1); }
.cli-prod-no-disp {
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
    background: #f3f4f6; color: #6b7280; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
}