/* SinFila Premium Vanilla CSS Style Guide & UI System */

:root {
    /* Mundo crema (2026-10-15): mismos nombres de variable que el tema oscuro
       anterior para no tocar cada componente; ahora describen fondo claro. */
    --bg-dark: #fff9f1;          /* fondo de página (crema) */
    --bg-card: #ffffff;          /* tarjetas */
    --bg-card-hover: #fff1de;    /* papel: hover, campos, superficies hundidas */
    --text-main: #241608;
    --text-muted: #6b5642;
    /* Acento por defecto (cuenta del comensal, directorio). La tienda lo pisa
       con el color del restaurante. */
    --brand-color: #fe5b22;
    --brand-color-rgb: 254, 91, 34;
    --brand-contrast: #1a0b04;
    --success: #12805c;
    --success-rgb: 18,128,92;
    --warning: #f59e0b;
    --danger: #c8322a;
    --border-color: #ede1cb;
    --basil: #1f4d36;
    --basil-deep: #15301f;
    --mustard: #f2a93b;
    --shadow-premium: 0 18px 40px -26px rgba(66, 36, 10, 0.35);
    --font-sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(0.95); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 15px rgba(var(--brand-color-rgb), 0.4); }
    50% { box-shadow: 0 0 25px rgba(var(--brand-color-rgb), 0.7); }
}

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

.animate-fade-in {
    animation: fadeIn 0.4s ease forwards;
}

.animate-bounce {
    animation: pulse 2s infinite ease-in-out;
}

/* ---------------------------------------------------- */
/* CUSTOMER MENU VIEW                                  */
/* ---------------------------------------------------- */

.store-container {
    max-width: 600px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: 100px;
    background-color: var(--bg-dark);
    position: relative;
    box-shadow: 0 0 60px -20px rgba(66, 36, 10, 0.18);
}

.store-header {
    background: linear-gradient(180deg, rgba(var(--brand-color-rgb), 0.14) 0%, rgba(255, 249, 241, 0) 100%);
    padding: 30px 20px;
    border-bottom: 1px solid var(--border-color);
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.brand-logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background-color: var(--bg-card);
    border: 2px solid var(--brand-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-color);
    margin-bottom: 15px;
    box-shadow: var(--shadow-premium);
    overflow: hidden;
}

.tenant-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.menu-item-thumb {
    flex-shrink: 0;
    width: 92px;
    height: 92px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    position: relative;
}

.menu-item-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.45;
}

.menu-item-thumb--clickable {
    padding: 0;
    cursor: zoom-in;
    transition: border-color 0.2s ease, transform 0.15s ease;
}

.menu-item-thumb--clickable:hover {
    border-color: rgba(var(--brand-color-rgb), 0.55);
    transform: scale(1.03);
}

.menu-item-thumb--clickable:active {
    transform: scale(0.98);
}

.menu-item-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.menu-item-thumb-zoom {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Visor de imagen del menú */
[x-cloak] {
    display: none !important;
}

.menu-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.menu-lightbox-close {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.menu-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.menu-lightbox-figure {
    max-width: min(520px, 100%);
    width: 100%;
    margin: 0;
    animation: fadeIn 0.25s ease;
}

.menu-lightbox-img {
    width: 100%;
    max-height: min(70vh, 520px);
    object-fit: contain;
    border-radius: 16px;
    display: block;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.menu-lightbox-caption {
    margin-top: 14px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
}

.menu-lightbox-enter { transition: opacity 0.2s ease; }
.menu-lightbox-enter-start { opacity: 0; }
.menu-lightbox-enter-end { opacity: 1; }
.menu-lightbox-leave { transition: opacity 0.15s ease; }
.menu-lightbox-leave-start { opacity: 1; }
.menu-lightbox-leave-end { opacity: 0; }

.item-prep-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(36, 22, 8, 0.09);
    padding: 2px 8px;
    border-radius: 50px;
    margin-bottom: 6px;
}

.logo-placeholder svg {
    width: 36px;
    height: 36px;
}

.brand-info h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.tagline {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.status-badge {
    margin-top: 12px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(var(--success-rgb), 0.2);
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--success);
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: var(--success);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

.wait-speed-badge {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

.wait-speed-badge--fast {
    border: 1px solid rgba(var(--success-rgb), 0.2);
    background-color: rgba(var(--success-rgb), 0.1);
    color: var(--success);
}

.wait-speed-badge--moderate {
    border: 1px solid rgba(217, 119, 6, 0.2);
    background-color: rgba(217, 119, 6, 0.1);
    color: #a85d06;
}

.wait-speed-badge--slow {
    border: 1px solid rgba(100, 116, 139, 0.2);
    background-color: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.store-menu {
    padding: 20px;
}

.menu-category-section {
    margin-bottom: 30px;
    animation: fadeIn 0.5s ease;
}

.category-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.menu-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-item-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.menu-item-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--brand-color-rgb), 0.4);
}

.item-details {
    flex: 1;
    min-width: 0;
}

.menu-item-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.item-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-color);
}

.btn-add-cart {
    background-color: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--brand-color-rgb), 0.4);
    transition: transform 0.1s ease, filter 0.1s ease;
}

.btn-add-cart:active {
    transform: scale(0.9);
}

.btn-add-cart:hover {
    filter: brightness(1.1);
}

.sold-out {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.unavailable {
    opacity: 0.6;
}

/* Floating Cart Button */
.cart-floating-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 100;
    background-color: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(var(--brand-color-rgb), 0.5);
    cursor: pointer;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: white;
    color: var(--brand-color);
    font-size: 0.8rem;
    font-weight: 800;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Cart Drawer */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 150;
    backdrop-filter: blur(4px);
}

.cart-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    max-height: 85vh;
    background-color: var(--bg-card);
    border-top: 2px solid var(--brand-color);
    border-radius: 24px 24px 0 0;
    z-index: 200;
    padding: 24px;
    overflow-y: auto;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
    animation: fadeIn 0.3s ease;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.drawer-header h2,
.drawer-header h3 {
    font-size: 1.4rem;
    font-weight: 700;
}

/* Hoja de modificadores / extras */
.config-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border-top: 2px solid var(--brand-color);
    border-radius: 24px 24px 0 0;
    z-index: 210;
    padding: 24px;
    box-shadow: 0 -16px 40px -12px rgba(66, 36, 10, 0.25);
    animation: fadeIn 0.3s ease;
}

.config-sheet .drawer-body {
    overflow-y: auto;
    flex: 1;
}

.config-group {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.config-group:last-child {
    border-bottom: none;
}

.config-group-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.config-group-rule {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.config-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
}

.config-option.is-checked {
    border-color: var(--brand-color);
    background: rgba(var(--brand-color-rgb), 0.08);
}

.config-option-name {
    flex: 1;
}

.config-option-price {
    font-weight: 700;
    color: var(--brand-color);
}

.config-note-input {
    width: 100%;
}

.drawer-footer {
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.cart-item-mods {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 2px 0 0;
}

.cart-item-mods--note {
    font-style: italic;
}

.btn-close-drawer {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

.cart-items-list {
    margin-bottom: 25px;
    max-height: 200px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.cart-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
}

.cart-item-subtotal {
    font-size: 0.85rem;
    color: var(--brand-color);
    font-weight: 700;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-qty {
    background-color: var(--bg-dark);
    color: var(--text-main);
    border: 1.5px solid var(--border-color);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-qty:hover {
    border-color: var(--brand-color);
    color: var(--brand-color);
}

.item-qty {
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}

.btn-remove {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    margin-left: 5px;
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.form-group input {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    width: 100%;
}

.form-group input:focus {
    outline: none;
    border-color: var(--brand-color);
}

.variant-select {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    width: 100%;
    cursor: pointer;
}

.variant-select:focus {
    outline: none;
    border-color: var(--brand-color);
}

.error-field {
    border-color: var(--danger) !important;
}

.error-msg {
    color: var(--danger);
    font-size: 0.75rem;
    margin-top: 2px;
}

.cart-total-section {
    margin-top: 15px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.total-row span:first-child {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
}

.total-row .total-amount {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
}

.btn-checkout {
    background-color: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
    border: none;
    border-radius: 50px;
    padding: 16px;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(var(--brand-color-rgb), 0.35);
    transition: transform 0.1s ease, filter 0.15s ease;
}

.btn-checkout:hover {
    filter: brightness(1.06);
}

.btn-checkout:active {
    transform: scale(0.98);
}

.empty-cart-state {
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
}

.empty-cart-state svg {
    margin-bottom: 15px;
    opacity: 0.3;
}

/* ---------------------------------------------------- */
/* CUSTOMER FLOW COMPONENTS (menú, carrito, checkout,    */
/* reservas) — chips, steppers, pantalla de éxito        */
/* ---------------------------------------------------- */

.category-chip-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 20px 16px;
    scrollbar-width: none;
}

.category-chip-nav::-webkit-scrollbar {
    display: none;
}

.category-chip {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 50px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.category-chip:hover,
.category-chip.is-active {
    border-color: var(--brand-color);
    color: var(--brand-color);
    background: rgba(var(--brand-color-rgb), 0.1);
}

/* Stepper circular (−/N/+) — cantidad de comensales, etc. */
.stepper {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.stepper-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.stepper-btn:hover {
    border-color: var(--brand-color);
    color: var(--brand-color);
}

.stepper-btn:active {
    transform: scale(0.92);
}

.stepper-btn--solid {
    background: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
    box-shadow: 0 4px 14px rgba(var(--brand-color-rgb), 0.4);
}

.stepper-btn--solid:hover {
    color: #fff;
    filter: brightness(1.08);
}

.stepper-value {
    min-width: 28px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 800;
}

/* Chips de fecha (tira horizontal de próximos días) */
.date-chip-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: none;
}

.date-chip-strip::-webkit-scrollbar {
    display: none;
}

.date-chip {
    flex-shrink: 0;
    width: 56px;
    padding: 10px 0;
    border-radius: 16px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.date-chip-weekday {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.date-chip-day {
    font-size: 1.1rem;
    font-weight: 800;
}

.date-chip.is-active {
    border-color: var(--brand-color);
    background: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
}

.date-chip.is-active .date-chip-weekday {
    color: rgba(255, 255, 255, 0.85);
}

.date-chip-more {
    background: none;
    border: 1.5px dashed var(--border-color);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    justify-content: center;
}

/* Chips de horario */
.time-slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.time-slot-chip {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.time-slot-chip.is-active {
    border-color: var(--brand-color);
    background: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
}

/* Pantalla de éxito (confirmación con check) */
.success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px 40px;
}

.success-screen-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 30px rgba(var(--brand-color-rgb), 0.4);
    animation: fadeIn 0.4s ease;
}

.success-screen-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.success-screen-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    max-width: 320px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.success-screen-detail {
    width: 100%;
    max-width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px 18px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.success-screen-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.success-screen-detail-row span:first-child {
    color: var(--text-muted);
}

.success-screen-detail-row span:last-child {
    font-weight: 700;
}

/* ---------------------------------------------------- */
/* CUSTOMER ORDER STATUS VIEW                           */
/* ---------------------------------------------------- */

.status-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
}

@media (min-width: 900px) {
    .status-layout {
        grid-template-columns: 1.2fr 1fr;
        max-width: 1100px;
        margin: 0 auto;
    }
}

.status-container {
    min-height: 100vh;
    padding-bottom: 50px;
}

.ready-card h2 {
    color: var(--success);
    font-weight: 800;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

/* ---------------------------------------------------- */
/* KITCHEN KANBAN DASHBOARD                             */
/* ---------------------------------------------------- */

.kitchen-container {
    padding: 20px;
    min-height: 100vh;
    background-color: var(--bg-card-hover);
}

.kitchen-header {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 25px;
}

.btn-store-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-contrast, #1a0b04);
    background-color: var(--brand-color);
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(var(--brand-color-rgb), 0.3);
}

.kanban-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 900px) {
    .kanban-board {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .kanban-board--with-approval {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.kanban-column {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.col-approval .column-header { border-bottom-color: #818cf8; }
.col-pending .column-header { border-bottom-color: var(--brand-color); }
.col-preparing .column-header { border-bottom-color: var(--warning); }
.col-ready .column-header { border-bottom-color: var(--success); }

.column-header h2 {
    font-size: 1.15rem;
    font-weight: 800;
}

.count-badge {
    background-color: var(--bg-dark);
    color: var(--text-main);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    border: 1px solid var(--border-color);
}

.column-body {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
    padding-right: 2px;
}

.column-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 0;
    font-size: 0.85rem;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
}

.order-card {
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fadeIn 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-no {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--brand-color);
}

.preparing-card .order-no { color: var(--warning); }
.ready-card .order-no { color: var(--success); }

.order-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* KDS: estación, demoras, líneas */
.kds-station-select {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
}

.order-card.is-late {
    border-color: var(--danger, #c0392b);
    box-shadow: 0 0 0 1px var(--danger, #c0392b), 0 4px 6px rgba(0, 0, 0, 0.15);
}

.kds-late-badge {
    background: var(--danger, #c0392b);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 6px;
}

.kds-lines { list-style: none; margin: 0; padding: 0; }

.kds-line-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85rem;
    padding: 5px 0;
    cursor: pointer;
    display: block;
}

.kds-line-toggle span { color: var(--text-main); font-weight: 600; }

.kds-line-check {
    display: inline-block;
    width: 16px;
    color: var(--border-color);
    font-weight: 800;
}

.kds-line-toggle.is-ready { text-decoration: line-through; opacity: 0.55; }
.kds-line-toggle.is-ready .kds-line-check { color: var(--success); }

.kds-print-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.order-customer {
    font-size: 0.95rem;
    color: var(--text-main);
}

.order-items {
    background-color: rgba(36, 22, 8, 0.05);
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(36, 22, 8, 0.09);
}

.order-items ul {
    list-style: none;
}

.order-items li {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 3px 0;
}

.order-items li span {
    color: var(--text-main);
    font-weight: 500;
}

.order-items li .kds-variant {
    color: var(--text-muted);
    font-weight: 500;
}

.order-items li .kds-mods {
    display: block;
    color: var(--brand-color);
    font-weight: 700;
    font-size: 0.82rem;
}

.order-items li .kds-note {
    display: block;
    color: var(--text-main);
    font-weight: 700;
    font-style: italic;
}

.btn-action {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: filter 0.1s ease;
}

.btn-action:hover {
    filter: brightness(1.1);
}

.btn-accept { background-color: var(--brand-color); color: var(--brand-contrast, #1a0b04); }
.btn-ready { background-color: var(--warning); color: #000; }
.btn-complete { background-color: var(--success); color: white; }
.btn-approve { background-color: #818cf8; color: white; }

.payment-method-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    background-color: rgba(129, 140, 248, 0.15);
    color: #818cf8;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------- */
/* STORE ACTION BAR (Agregar + / Pagar)                 */
/* ---------------------------------------------------- */

.store-menu.has-action-bar {
    padding-bottom: 120px;
}

.menu-item-card.in-cart {
    border-color: rgba(var(--brand-color-rgb), 0.5);
    box-shadow: 0 0 0 1px rgba(var(--brand-color-rgb), 0.2);
}

.item-qty-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.item-qty-badge {
    font-size: 0.85rem;
    font-weight: 800;
    min-width: 22px;
    text-align: center;
    color: var(--brand-color);
}

.store-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px -10px rgba(66, 36, 10, 0.2);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-width: 600px;
    margin: 0 auto;
}

.store-action-bar.visible {
    transform: translateY(0);
}

.action-bar-summary {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.action-bar-count {
    color: var(--text-muted);
    font-weight: 600;
}

.action-bar-total {
    font-weight: 800;
    color: var(--text-main);
    font-size: 1.1rem;
}

.action-bar-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.action-bar-buttons--single {
    grid-template-columns: 1fr;
}

.btn-action-pay {
    background: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
    border: none;
    border-radius: 50px;
    padding: 14px;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-sans);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(var(--brand-color-rgb), 0.4);
}

.action-bar-error {
    color: var(--danger);
    font-size: 0.8rem;
    margin: 8px 0 0;
    text-align: center;
}

.checkout-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.4;
}

.payment-method-group {
    margin-bottom: 12px;
}

.payment-method-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.payment-method-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-dark);
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.payment-method-option:has(input:checked) {
    border-color: var(--brand-color);
    background: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
}

.payment-method-option:has(input:focus-visible) {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

.payment-method-option input {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    opacity: 0;
}

/* Variante "fila" (ícono circular + etiqueta + radio) para métodos de pago
   y tipo de entrega — el chip original se conserva para grupos cortos
   (ej. propina). */
.payment-method-options--rows {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}

.payment-method-option--row {
    display: flex;
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    gap: 12px;
    font-size: 0.9rem;
    color: var(--text-main);
}

.payment-method-option--row:has(input:checked) {
    background: rgba(var(--brand-color-rgb), 0.1);
    color: var(--text-main);
}

.payment-method-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--brand-color-rgb), 0.12);
    color: var(--brand-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.payment-method-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.payment-method-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease;
}

.payment-method-option--row:has(input:checked) .payment-method-radio {
    border-color: var(--brand-color);
}

.payment-method-option--row:has(input:checked) .payment-method-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--brand-color);
}

/* Status page — el detalle vive en la sección "CUSTOMER BUYER FLOW — refresh" al final del archivo. */
.status-reassurance {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 16px 0 0;
}

.order-items-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.order-items-summary h3 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.order-items-summary ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.order-items-summary li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.order-items-summary li:last-child {
    border-bottom: none;
}

/* Código de retiro (cliente + cocina) */
.pickup-code-banner {
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    text-align: center;
}

.pickup-code-banner--highlight {
    border-color: var(--brand-color);
    background: rgba(var(--brand-color-rgb), 0.08);
    box-shadow: 0 0 0 1px rgba(var(--brand-color-rgb), 0.2);
}

.pickup-code-banner__label {
    margin: 0 0 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.pickup-code-banner__code {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.35em;
    font-family: ui-monospace, monospace;
    color: var(--brand-color);
}

.pickup-code-banner__hint {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pickup-code-inline {
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    margin: 8px 0 4px;
}

.pickup-code-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(36, 22, 8, 0.1);
}

.pickup-code-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.pickup-code-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(36, 22, 8, 0.18);
    border-radius: 10px;
    background: rgba(36, 22, 8, 0.07);
    color: var(--text-main);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-align: center;
    text-transform: uppercase;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}

.pickup-code-input::placeholder {
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.85;
}

.pickup-code-input:hover {
    border-color: rgba(36, 22, 8, 0.28);
    background: rgba(36, 22, 8, 0.1);
}

.pickup-code-input:focus {
    outline: none;
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.ready-card .pickup-code-input:focus {
    border-color: var(--success);
}

.pickup-code-error {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: #b42318;
    text-align: center;
}

/* Pago Wompi */
.payment-checkout-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
    min-height: 100vh;
}

.payment-checkout-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    text-align: center;
}

.payment-checkout-total {
    font-size: 1.1rem;
    margin: 12px 0;
}

.payment-checkout-hint {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.wompi-pay-btn {
    width: 100%;
}

.payment-back-link {
    display: block;
    margin-top: 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.payment-return-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 2rem;
    font-weight: 800;
}

.payment-return-icon--ok {
    background: rgba(34, 197, 94, 0.2);
    color: #12805c;
}

.payment-return-icon--pending {
    background: rgba(var(--brand-color-rgb), 0.15);
    color: var(--brand-color);
}

.checkout-hint--warn {
    color: #a85d06;
}

.payment-pending-icon {
    font-size: 3rem;
    margin-bottom: 8px;
}

/* Feedback visual mientras una acción de Livewire está en curso (cocina,
   estado del pedido) — evita clics dobles sin loading por botón. */
.wire-busy {
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* Fase M: aviso de "sin conexión, prueba la red local" — ver resources/js/lan-fallback.js */
.lan-fallback-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #78350f;
    color: #fef3c7;
    font-size: 0.85rem;
    text-align: center;
}

.lan-fallback-link {
    color: #fef3c7;
    font-weight: 700;
    text-decoration: underline;
}

/* Fase O: tablet fija y compartida en la mesa — objetivos táctiles más
   grandes, pensado para convivir con el modo guiado/kiosko del propio
   sistema operativo, no lo reemplaza. */
.kiosk-mode .menu-item-card {
    min-height: 96px;
}

.kiosk-mode .btn-checkout,
.kiosk-mode .choice-option,
.kiosk-mode .qty-btn,
.kiosk-mode button {
    min-height: 56px;
    font-size: 1.05em;
}

.kiosk-mode .choice-text {
    font-size: 1.05rem;
}

.kiosk-confirm {
    text-align: center;
    padding: 48px 24px;
}

.kiosk-confirm-icon {
    color: var(--success);
    margin-bottom: 12px;
}

.kiosk-confirm-number {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 8px;
}

.kiosk-confirm-code {
    font-size: 1.1rem;
    margin-top: 8px;
}

.kiosk-confirm-hint {
    color: var(--text-muted);
    margin-top: 12px;
}

.kiosk-confirm-btn {
    display: inline-block;
    margin-top: 28px;
    text-decoration: none;
    min-height: 56px;
    line-height: 56px;
    padding: 0 32px;
}

/* ==================================================== */
/* CUSTOMER BUYER FLOW — refresh                         */
/* menú → carrito → checkout → pago → estado → rating    */
/* ==================================================== */

/* --- Menú: tope de stock alcanzado --- */
.item-stock-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.store-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    z-index: 220;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 18px;
    border-radius: 14px;
    background: #2a1a0c;
    border: 1px solid #2a1a0c;
    color: #fff9f1;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* --- Cajón: controles por línea + estado vacío --- */
.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-qty--solid {
    background: var(--brand-color);
    border-color: transparent;
    color: var(--brand-contrast, #1a0b04);
}

.btn-qty--solid:hover {
    filter: brightness(1.08);
    color: #fff;
}

.btn-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 2px;
}

.empty-cart-state {
    text-align: center;
    padding: 48px 8px 24px;
    color: var(--text-muted);
}

.empty-cart-state svg {
    opacity: 0.35;
    margin-bottom: 12px;
}

.empty-cart-state p {
    font-size: 0.95rem;
    font-weight: 600;
}

/* --- Checkout: secciones y jerarquía --- */
.form-section {
    padding-top: 20px;
    margin-top: 4px;
    border-top: 1px solid var(--border-color);
}

.form-section:first-of-type {
    padding-top: 0;
    border-top: none;
}

.form-section .form-title {
    margin-bottom: 14px;
}

.form-section .form-group + .form-group {
    margin-top: 12px;
}

.label-optional {
    color: var(--text-muted);
    font-weight: 500;
}

.form-group input:focus,
.variant-select:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), 0.15);
}

/* --- Opciones de entrega / pago (fila con ícono + radio) --- */
.choice-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.choice-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-dark);
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice-option:has(input:checked) {
    border-color: var(--brand-color);
    background: rgba(var(--brand-color-rgb), 0.1);
}

.choice-option--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.choice-option:has(input:focus-visible) {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

.choice-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--brand-color-rgb), 0.12);
    color: var(--brand-color);
    flex-shrink: 0;
}

.choice-text {
    flex: 1;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.choice-note {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-muted);
}

.choice-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease;
}

.choice-option:has(input:checked) .choice-radio {
    border-color: var(--brand-color);
}

.choice-option:has(input:checked) .choice-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--brand-color);
}

/* --- Propina: chips compactos, distintos de las filas de pago --- */
.tip-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tip-option {
    position: relative;
    cursor: pointer;
}

.tip-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tip-option span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.tip-option input:checked + span {
    border-color: var(--brand-color);
    background: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
}

.tip-option input:focus-visible + span {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

/* Input con símbolo $ (propina personalizada) */
.input-affix {
    display: flex;
    align-items: center;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-dark);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-affix:focus-within {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), 0.15);
}

.input-affix-symbol {
    padding: 0 12px;
    color: var(--text-muted);
    font-weight: 700;
}

.input-affix input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    padding: 12px 12px 12px 0;
    outline: none;
}

/* --- Código promocional: input + Aplicar --- */
.promo-row {
    display: flex;
    gap: 8px;
}

.promo-row input {
    flex: 1;
    min-width: 0;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.promo-row input:focus {
    outline: none;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), 0.15);
}

.btn-inline {
    flex-shrink: 0;
    padding: 0 18px;
    border: 1.5px solid var(--brand-color);
    border-radius: 12px;
    background: transparent;
    color: var(--brand-color);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-inline:hover {
    background: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
}

.promo-ok {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--success);
}

/* --- Totales --- */
.total-row--discount .total-amount {
    color: var(--success);
    font-size: 1rem;
}

.total-row--grand {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.total-row--grand span:first-child {
    color: var(--text-main);
    font-weight: 800;
}

.error-msg--center {
    text-align: center;
    display: block;
}

/* ==================================================== */
/* ORDER STATUS — rediseño                               */
/* ==================================================== */

.status-header {
    padding: 22px 20px 18px;
}

/* Stepper honesto (Pago · Fila · Cocina · Listo · Entregado) */
.order-stepper {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 18px 12px 4px;
    max-width: 600px;
    margin-inline: auto;
}

.order-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    text-align: center;
}

.order-step::before {
    content: '';
    position: absolute;
    top: 13px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--border-color);
}

.order-step:first-child::before {
    display: none;
}

.order-step.is-done::before,
.order-step.is-current::before {
    background: var(--brand-color);
}

.order-step-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.order-step.is-done .order-step-dot {
    background: var(--brand-color);
    border-color: var(--brand-color);
    color: var(--brand-contrast, #1a0b04);
}

.order-step.is-current .order-step-dot {
    border-color: var(--brand-color);
    color: var(--brand-color);
    box-shadow: 0 0 0 4px rgba(var(--brand-color-rgb), 0.18);
}

.order-step-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.order-step.is-current .order-step-label,
.order-step.is-done .order-step-label {
    color: var(--text-main);
}

/* Layout: tarjeta principal + columna lateral */
.status-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 20px 40px;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .status-layout {
        grid-template-columns: 1.15fr 0.85fr;
        max-width: 960px;
        align-items: start;
    }
}

.status-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--shadow-premium);
}

.status-card.is-ready {
    border-color: var(--success);
    box-shadow: 0 0 0 1px rgba(var(--success-rgb), 0.35), var(--shadow-premium);
}

.status-card h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.status-card.is-ready h2 {
    color: var(--success);
}

.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(var(--brand-color-rgb), 0.12);
    color: var(--brand-color);
    margin-bottom: 14px;
}

.status-icon.is-ready {
    background: rgba(var(--success-rgb), 0.15);
    color: var(--success);
}

.status-icon.is-muted {
    background: rgba(36, 22, 8, 0.09);
    color: var(--text-muted);
}

.status-lead {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 34ch;
    margin: 0 auto;
}

.status-lead--sorry {
    color: var(--text-main);
}

.status-card-cta {
    margin-top: 18px;
}

/* Progreso en cola (barra = protagonista, sin grid de métricas) */
.status-progress {
    margin: 20px 0 14px;
}

.status-progress-track {
    height: 8px;
    background: var(--border-color);
    border-radius: 999px;
    overflow: hidden;
}

.status-progress-fill {
    height: 100%;
    width: 100%;
    transform-origin: left;
    background: var(--brand-color);
    border-radius: 999px;
    transition: transform 0.6s ease;
}

.status-progress-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.status-progress-legend .is-reached {
    color: var(--brand-color);
}

.status-eta {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}

.status-eta strong {
    color: var(--brand-color);
}

.status-meta {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pickup-code-inline {
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    margin: 6px 0 10px;
}

.pickup-code-inline strong {
    color: var(--brand-color);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Rastreo del domicilio (comensal) */
.delivery-tracker {
    margin-top: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    box-shadow: var(--shadow-premium);
}

.delivery-tracker.is-failed {
    border-color: var(--danger, #c0392b);
}

.delivery-tracker h3 {
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.delivery-steps {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.delivery-steps li {
    position: relative;
    padding-left: 26px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.delivery-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
}

.delivery-steps li.is-reached {
    color: var(--text-main);
    font-weight: 700;
}

.delivery-steps li.is-reached::before {
    border-color: var(--brand-color);
    background: var(--brand-color);
}

.choice-options--compact { gap: 6px; }
.choice-options--compact .choice-option { padding: 8px 10px; }
.checkbox-inline { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.88rem; }

.coverage-msg {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 600;
}

.coverage-msg--ok { color: var(--success, #1a6b45); }
.coverage-msg--bad { color: var(--danger, #c0392b); }

/* Pin del mapa en el checkout de domicilio */
.delivery-pin-map {
    height: 220px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #e8eef2;
    z-index: 0;
}
.pin-map-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }

.order-push-btn {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    color: var(--text-main);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.order-push-btn:disabled { opacity: 0.7; cursor: default; }

.delivery-map {
    height: 220px;
    margin-top: 12px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
}

.delivery-pin-banner {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed var(--brand-color);
    background: rgba(var(--brand-color-rgb), 0.08);
    text-align: center;
}

.delivery-pin-banner__label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}

.delivery-pin-banner__code {
    margin: 4px 0 2px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.35em;
    font-variant-numeric: tabular-nums;
    color: var(--brand-color);
}

.delivery-pin-banner__hint {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.8;
}

.delivery-courier {
    margin-top: 8px;
    font-size: 0.9rem;
}

.delivery-courier a {
    color: var(--brand-color);
    font-weight: 700;
    text-decoration: none;
}

/* Columna lateral */
.status-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.order-items-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-weight: 800;
    font-size: 0.9rem;
}

.order-items-total-amount {
    color: var(--brand-color);
}

.order-line-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.order-line-mods {
    flex-basis: 100%;
    font-size: 0.8rem;
    color: var(--brand-color);
    font-weight: 600;
}

.order-line-mods--note {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 500;
}

.order-line-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.order-line-prep {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Novedades (lista limpia, sin marco de teléfono) */
.notif-list {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
}

.notif-list h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.notif-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notif-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: baseline;
}

.notif-channel {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(var(--brand-color-rgb), 0.14);
    color: var(--brand-color);
    align-self: center;
}

.notif-row--whatsapp .notif-channel { background: rgba(37, 211, 102, 0.15); color: #25d366; }
.notif-row--email .notif-channel { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

.notif-text {
    font-size: 0.82rem;
    color: var(--text-main);
    line-height: 1.4;
}

.notif-when {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Calificación (momento pico-final) */
.rating-widget {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.rating-q {
    font-size: 0.95rem;
    font-weight: 700;
}

.rating-stars {
    display: inline-flex;
    gap: 6px;
}

.rating-star {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--border-color);
    transition: transform 0.1s ease, color 0.12s ease;
}

.rating-star:hover {
    transform: scale(1.12);
}

.rating-star.is-on {
    color: var(--brand-color);
}

.rating-star:focus-visible {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
    border-radius: 6px;
}

.rating-comment {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 60px;
}

.rating-comment:focus {
    outline: none;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), 0.15);
}

.rating-widget .btn-checkout {
    max-width: 260px;
}

/* ==================================================== */
/* RESERVA — quitar estilos inline                       */
/* ==================================================== */

.reservation-main {
    padding: 24px 20px;
}

.date-input-narrow {
    max-width: 180px;
}

.field-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ==================================================== */
/* FASE G — Cuentas de cliente (auth)                    */
/* ==================================================== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    background: var(--bg-dark, #0e0f13);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card, #16181f);
    border: 1px solid var(--border-color, #262a33);
    border-radius: 18px;
    padding: 28px 24px;
}

.auth-page--wide .auth-card { max-width: 640px; }

.auth-card h1 { margin: 0 0 4px; font-size: 1.4rem; }
.auth-lead { margin: 0 0 18px; color: var(--text-muted, #9aa0ab); font-size: 0.9rem; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form--inline { gap: 12px; }
.auth-form .btn-checkout { margin-top: 4px; }

.auth-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted, #9aa0ab); }

.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    font-size: 0.85rem;
}
.auth-links a { color: var(--brand-color, #fe5b22); text-decoration: none; }

.auth-note { padding: 10px 12px; border-radius: 10px; font-size: 0.85rem; margin-bottom: 14px; }
.auth-note--ok { background: rgba(46, 160, 90, 0.14); color: #46c07a; }

.auth-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }

.auth-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color, #262a33); }
.auth-section h2 { margin: 0 0 12px; font-size: 1.05rem; }
.auth-mt { margin-top: 14px; }

.auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #262a33);
    font-size: 0.9rem;
}
.auth-row:last-of-type { border-bottom: none; }
.auth-row--link { text-decoration: none; color: inherit; }
.auth-row--link:hover { opacity: 0.85; }
.auth-row-actions { display: flex; gap: 12px; white-space: nowrap; }
.auth-order-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.auth-order { flex-wrap: wrap; }
.auth-order__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex: 1 1 240px;
    text-decoration: none;
    color: inherit;
}
.auth-order__main:hover { opacity: 0.85; }
.auth-order__again { flex: 0 0 auto; padding: 4px 0; }

.auth-muted { color: var(--text-muted, #9aa0ab); }
.auth-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(36, 22, 8, 0.1);
    font-size: 0.72rem;
    color: var(--text-muted, #9aa0ab);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color, #262a33);
    color: var(--text-main, #f2f3f5);
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    cursor: pointer;
}
.btn-outline:hover { border-color: var(--brand-color, #fe5b22); }

.btn-link {
    background: none;
    border: none;
    color: var(--brand-color, #fe5b22);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
}
.btn-link--danger { color: #b42318; }

/* Barra "estás como X" en el checkout de la tienda */
.store-account-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(var(--brand-color-rgb, 254,91,34), 0.08);
    margin-bottom: 12px;
}
.store-account-bar a { color: var(--brand-color, #fe5b22); text-decoration: none; font-weight: 600; }

.store-account-bar__actions { display: flex; align-items: center; gap: 12px; }
.fav-toggle {
    background: none;
    border: none;
    color: var(--brand-color, #fe5b22);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.fav-toggle.is-on { color: #b42318; }

/* ==================================================== */
/* FASE H — Historias (feed del comensal)                */
/* ==================================================== */

.auth-stories-link {
    display: block;
    margin: 12px 0 4px;
    color: var(--brand-color, #fe5b22);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.story-rings { display: flex; gap: 16px; overflow-x: auto; padding: 12px 2px; }
.story-ring {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 76px;
}
.story-ring__img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: var(--border-color, #2a2f3a);
    display: grid;
    place-items: center;
}
.story-ring.is-unseen .story-ring__img {
    background: linear-gradient(45deg, #fe5b22, #ffb347);
}
.story-ring__img img,
.story-ring__ph {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-card-hover);
}
.story-ring__ph { display: grid; place-items: center; font-weight: 800; color: var(--text-main, #f2f3f5); }
.story-ring__name { font-size: 0.72rem; color: var(--text-muted, #9aa0ab); text-align: center; }

.story-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    flex-direction: column;
}
.story-viewer__bars { display: flex; gap: 4px; padding: 10px 12px 4px; }
.story-viewer__bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
}
.story-viewer__bar.is-done { background: #fff; }
.story-viewer__bar.is-active { background: rgba(255, 255, 255, 0.75); }
.story-viewer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    color: #fff;
}
.story-viewer__close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}
.story-viewer__stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.story-viewer__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-viewer__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    text-align: center;
    color: #fff;
    padding: 10px 20px;
    font-size: 0.95rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.story-viewer__nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: none;
    border: none;
    cursor: pointer;
}
.story-viewer__nav--prev { left: 0; }
.story-viewer__nav--next { right: 0; }

/* ==================================================== */
/* FASE I — App del comensal (PWA): shell + bottom-nav   */
/* ==================================================== */

.customer-body { margin: 0; background: var(--bg-dark, #0e0f13); }

.customer-shell {
    min-height: 100vh;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}
.customer-shell .auth-page { min-height: auto; padding-top: 24px; }

.customer-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    background: var(--bg-card, #16181f);
    border-top: 1px solid var(--border-color, #262a33);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.customer-nav a,
.customer-nav__logout {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 4px;
    color: var(--text-muted, #9aa0ab);
    text-decoration: none;
    font-size: 0.68rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.customer-nav__form { flex: 1; display: flex; }
.customer-nav a.is-active { color: var(--brand-color, #fe5b22); }
.customer-nav a.is-active svg { stroke: var(--brand-color, #fe5b22); }

.customer-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #262a33);
    background: transparent;
    color: var(--text-main, #f2f3f5);
    font-size: 0.82rem;
    cursor: pointer;
}

.story-rings-title { font-size: 0.95rem; margin: 16px 0 4px; }
.story-rings-title:first-of-type { margin-top: 4px; }

.auth-note--warn { background: rgba(217, 119, 6, 0.16); color: #9a5b06; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.auth-verify-form { margin: 0; }

/* R-4 — chat rápido comensal↔repartidor */
.delivery-chat { margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg-card, #16181f); font-size: 0.85rem; }
.delivery-chat__line { margin: 3px 0; }
.delivery-chat__line span { font-weight: 700; }
.delivery-chat__line--courier { color: var(--brand-color, #fe5b22); }
.delivery-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.delivery-quick__btn {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #262a33);
    background: transparent;
    color: var(--text-main, #f2f3f5);
    font-size: 0.8rem;
    cursor: pointer;
}

.delivery-incident-note {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(224, 87, 79, 0.14);
    color: #b42318;
    font-size: 0.85rem;
}

/* D-8 — calificar al repartidor + propina post-entrega */
.courier-feedback {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color, #262a33);
    text-align: center;
}
.courier-feedback__q { margin: 8px 0 6px; font-weight: 600; font-size: 0.95rem; }
.courier-feedback__done { margin: 8px 0; color: var(--text-muted, #9aa0ab); font-size: 0.88rem; }
.courier-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0; }
.courier-tag {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #262a33);
    background: transparent;
    color: var(--text-main, #f2f3f5);
    font-size: 0.8rem;
    cursor: pointer;
}
.courier-tag.is-on {
    border-color: var(--brand-color, #fe5b22);
    background: rgba(var(--brand-color-rgb, 254,91,34), 0.12);
    color: var(--brand-color, #fe5b22);
}

/* Aviso al reordenar / programar en la tienda */
.store-flash {
    margin: 12px 16px 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(var(--brand-color-rgb, 254,91,34), 0.12);
    color: var(--brand-color, #fe5b22);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Pedido programado — banner en el seguimiento */
.scheduled-banner {
    display: inline-block;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(var(--brand-color-rgb, 254,91,34), 0.14);
    color: var(--brand-color, #fe5b22);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Mensaje libre cliente -> repartidor (chat sin teléfonos) */
.delivery-chat-compose { display: flex; gap: 6px; margin-top: 8px; }
.delivery-chat-compose input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 0.9rem; }

/* Canje de tarjeta de regalo / saldo a favor */
.auth-inline, .form-inline-group { display: flex; gap: 8px; align-items: center; }
.auth-inline input, .form-inline-group input { flex: 1; min-width: 0; }

/* ============================================================
   Fase P3 — recorrido de domicilio del comensal
   ============================================================ */
.journey { display: flex; flex-direction: column; gap: 14px; }

.journey-map-wrap { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-card); }
.journey-map { height: clamp(260px, 42vh, 420px); background: var(--bg-card); }
.journey-map-stale { position: absolute; left: 12px; bottom: 12px; z-index: 500; margin: 0; padding: 6px 10px; border-radius: 999px; font-size: 0.78rem; background: rgba(15, 23, 42, 0.85); color: var(--text-muted); }

.journey-pin-icon span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); color: #fff; }
.journey-pin-icon--local span { background: #475569; }
.journey-pin-icon--dest span { background: var(--success); }
.journey-pin-icon--courier span { background: var(--brand-color); width: 40px; height: 40px; margin: -2px; box-shadow: 0 0 0 6px rgba(var(--brand-color-rgb), 0.25), 0 4px 12px rgba(0, 0, 0, 0.35); }

.journey-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 20px; box-shadow: var(--shadow-premium); }
.journey-eta h2 { font-size: 1.35rem; font-weight: 800; line-height: 1.2; margin: 0 0 6px; text-wrap: balance; }
.journey-eta-clock { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.journey-eta-clock strong { color: var(--text-main); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.journey-meta { margin: 4px 0 0; color: var(--text-muted); font-size: 0.82rem; }

.journey-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 18px 0 0; padding: 0; }
.journey-steps li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.journey-step-bar { height: 4px; border-radius: 999px; background: var(--border-color); overflow: hidden; position: relative; }
.journey-steps li.is-done .journey-step-bar { background: var(--brand-color); }
.journey-steps li.is-current .journey-step-bar::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: var(--brand-color); animation: journey-progress 1.6s ease-in-out infinite; }
.journey-step-label { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-steps li.is-done .journey-step-label, .journey-steps li.is-current .journey-step-label { color: var(--text-main); }
.journey-steps li.is-current .journey-step-label { font-weight: 700; }
@keyframes journey-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .journey-steps li.is-current .journey-step-bar::after { animation: none; width: 50%; } }

.journey-alert { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(239, 68, 68, 0.12); color: #9f1d15; font-size: 0.9rem; }
.journey-note { margin: 14px 0 0; color: var(--success); font-size: 0.88rem; }
.journey.is-failed .journey-steps li.is-current .journey-step-bar::after { background: var(--danger); animation: none; width: 100%; }

.journey-pin { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(var(--brand-color-rgb), 0.6); background: rgba(var(--brand-color-rgb), 0.08); }
.journey-pin-label { margin: 0; font-weight: 700; font-size: 0.9rem; }
.journey-pin-hint { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-muted); }
.journey-pin-code { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; color: var(--brand-color); }

.journey-courier { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 14px 16px; }
.journey-courier-avatar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--brand-color-rgb), 0.15); color: var(--brand-color); font-weight: 800; font-size: 1.15rem; }
.journey-courier-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.journey-courier-info span { color: var(--text-muted); font-size: 0.85rem; }
.journey-courier-call { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand-color); color: var(--brand-contrast, #1a0b04); }
.journey-courier-call:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.journey-chat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 14px 16px; }
.journey-chat .delivery-quick { margin-top: 0; }

.journey-done .rating-widget, .journey-done .courier-feedback { margin-top: 0; }
.journey-done .courier-feedback { margin-top: 16px; }

.journey-address { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 0 4px; color: var(--text-muted); font-size: 0.85rem; }
.journey-address svg { flex: none; margin-top: 2px; }

/* Fase P3 — modalidad elegida al entrar al menú */
.store-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 600px; margin: 14px auto 6px; padding: 0 20px; }
.store-mode-option { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--border-color); background: var(--bg-card); color: var(--text-main); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; min-width: 0; }
.store-mode-option:hover:not(:disabled) { border-color: rgba(var(--brand-color-rgb), 0.5); }
.store-mode-option:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 2px; }
.store-mode-option.is-on { border-color: var(--brand-color); background: rgba(var(--brand-color-rgb), 0.1); }
.store-mode-option:disabled { opacity: 0.55; cursor: not-allowed; }
.store-mode-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.98rem; }
.store-mode-option.is-on .store-mode-title svg { color: var(--brand-color); }
.store-mode-meta { color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.store-mode-note { max-width: 600px; margin: 8px auto 0; padding: 0 20px; color: var(--warning); font-size: 0.82rem; }

/* ============================================================
   Fase P3.4 — "Pide a domicilio" (/restaurantes)
   ============================================================ */
.market { --brand-color: #fe5b22; --brand-color-rgb: 254, 91, 34; --brand-contrast: #1a0b04; max-width: 720px; margin: 0 auto; padding: 0 16px 24px; }
.market .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.market-hero { padding: 28px 0 18px; }
.market-brand { margin: 0; font-weight: 800; color: var(--brand-color); letter-spacing: -0.01em; }
.market-hero h1 { margin: 6px 0 6px; font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.market-lead { margin: 0 0 18px; color: var(--text-muted); max-width: 46ch; }

.market-where { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 14px; }
.market-where-label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 8px; }
.market-where-row { display: flex; align-items: center; gap: 8px; background: var(--bg-dark); border: 1.5px solid var(--border-color); border-radius: 14px; padding: 4px 4px 4px 12px; }
.market-where-row:focus-within { border-color: var(--brand-color); }
.market-where-icon { flex: none; color: var(--brand-color); }
.market-where-row input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-main); font: inherit; padding: 10px 0; outline: none; }
.market-where-go { flex: none; border: 0; border-radius: 10px; background: var(--brand-color); color: var(--brand-contrast, #1a0b04); font: inherit; font-weight: 700; padding: 10px 16px; cursor: pointer; }
.market-where-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.market-where-extra { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.market-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.market-chip--ghost { background: transparent; color: var(--text-muted); }
.market-chip:hover { border-color: rgba(var(--brand-color-rgb), 0.6); }
.market-chip.is-on { border-color: var(--brand-color); background: rgba(var(--brand-color-rgb), 0.14); color: var(--text-main); }
.market-chip:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 2px; }

.market-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.market-search { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); font: inherit; }
.market-search:focus { outline: none; border-color: var(--brand-color); }
.market-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.market-cats::-webkit-scrollbar { display: none; }

.market-count { margin: 16px 0 10px; color: var(--text-muted); font-size: 0.85rem; }
.market-count strong { color: var(--text-main); }

.market-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.market-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.market-card:hover { border-color: var(--card-accent, var(--brand-color)); }
.market-card:active { transform: scale(0.99); }
.market-card:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 2px; }
.market-card.is-closed { opacity: 0.6; }
.market-logo { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; overflow: hidden; background: var(--card-accent, var(--brand-color)); color: var(--card-contrast, #1a0b04); font-weight: 800; font-size: 1.4rem; }
.market-logo img { width: 100%; height: 100%; object-fit: cover; }
.market-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.market-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.market-card-title strong { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-rating { flex: none; font-size: 0.8rem; color: #a85d06; font-weight: 700; }
.market-card-sub { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.market-badge { padding: 2px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.15); color: var(--text-muted); font-size: 0.72rem; font-weight: 600; }
.market-badge--off { background: rgba(239, 68, 68, 0.14); color: #a3241b; }
.market-badge--warn { background: rgba(245, 158, 11, 0.15); color: #8a5208; }
.market-empty { display: flex; flex-direction: column; gap: 4px; padding: 28px 16px; text-align: center; border: 1px dashed var(--border-color); border-radius: 18px; color: var(--text-muted); }
.market-empty strong { color: var(--text-main); }
@media (prefers-reduced-motion: reduce) { .market-card { transition: none; } .market-card:active { transform: none; } }

/* Fase P5 — horario de atención en el menú */
.store-hours-chip { display: inline-block; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.store-hours-chip.is-open { background: rgba(var(--success-rgb), 0.14); color: var(--success); }
.store-hours-chip.is-closed { background: rgba(239, 68, 68, 0.14); color: #a3241b; }
.store-closed { display: flex; flex-direction: column; gap: 2px; max-width: 600px; margin: 14px auto 0; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); font-size: 0.88rem; }
.store-closed span { color: var(--text-muted); }
@media (max-width: 640px) { .store-closed { margin-inline: 20px; } }

/* Ley 1581 — autorización de datos en el checkout */
.privacy-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; cursor: pointer; }
.privacy-consent input { margin-top: 3px; accent-color: var(--brand-color); flex: none; }
.privacy-consent a { color: var(--brand-color); }
.order-push-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.total-row--pending { color: var(--text-muted); font-style: italic; }

/* Tienda demo */
.store-demo { display: flex; flex-direction: column; gap: 2px; max-width: 600px; margin: 14px auto 0; padding: 12px 16px; border-radius: 14px; border: 1px dashed rgba(var(--brand-color-rgb), 0.6); background: rgba(var(--brand-color-rgb), 0.08); font-size: 0.86rem; }
.store-demo span { color: var(--text-muted); }
@media (max-width: 640px) { .store-demo { margin-inline: 20px; } }
.store-tax-note { max-width: 600px; margin: 8px auto 0; padding: 0 20px; color: var(--text-muted); font-size: 0.8rem; }

/* ---------------------------------------------------- */
/* MUNDO CREMA — tipografía de carta (2026-10-15)       */
/* Fraunces para lo que se titula, Manrope para leer.   */
/* ---------------------------------------------------- */
::selection { background: var(--brand-color, #fe5b22); color: #fff; }

.brand-info h1,
.status-card h2,
.journey-eta h2,
.market-hero h1,
.auth-card h1,
.ready-card h2,
.drawer-header h3,
.delivery-tracker h3,
.kitchen-header h1,
.section-title,
.menu-category-title,
.category-title,
.column-header h2 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    font-optical-sizing: auto;
}

.menu-item-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
}

.brand-logo {
    background-color: var(--bg-card);
    box-shadow: 0 14px 30px -18px rgba(66, 36, 10, 0.45);
}

.menu-item-card,
.order-card,
.kanban-column,
.status-card {
    box-shadow: 0 10px 26px -22px rgba(66, 36, 10, 0.4);
}

/* ---------------------------------------------------- */
/* CONTROLES — casillas alineadas y peso de texto suave  */
/* ---------------------------------------------------- */
/* ".form-group input { width: 100% }" estiraba las casillas (No tocar el timbre) */
.form-group input[type="checkbox"],
.form-group input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--brand-color, #fe5b22);
}

.form-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    flex: none;
}

.checkbox-inline,
.form-group label.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
}

.form-group select,
.form-group textarea {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    width: 100%;
}

.form-group input:not([type="checkbox"]):not([type="radio"]) { background-color: #fff; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #9b8875; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px rgba(var(--brand-color-rgb), 0.16);
}

/* Donde el cliente escoge: texto más liviano, el precio y el botón mandan */
.menu-item-card h3 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0;
    color: #3b2716;
}

.category-title { font-weight: 500; color: #3b2716; }

.total-row .total-amount { font-weight: 700; font-size: 1.2rem; }
.total-row--grand .total-amount { font-size: 1.35rem; }
.total-row--pending .total-amount { font-size: 1rem; font-weight: 600; font-style: normal; }
.total-row--pending { font-style: normal; }