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

body {
    font-family: 'Nunito', Arial, sans-serif;   /* sin internet cae a Arial */
    font-size: 17px;
    background: linear-gradient(135deg, #4f010b 0%, #4c0d15 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Estilos del header y navegación */
.header {
    background: linear-gradient(135deg, #840c06, #840c06);
    color: white;
    padding: 20px;
    text-align: center;
}

/* ... (otros estilos) ... */
.header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.nav-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 17px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.nav-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

.nav-btn.active {
    background: rgba(255,255,255,0.4);
    transform: scale(1.05);
}

.section {
    display: none;
    padding: 30px;
    animation: fadeIn 0.5s ease-in;
}

.section.active {
    display: block;
}

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

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

input, select, textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 17px;
    transition: border-color 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #F4A300;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.btn {
    background: linear-gradient(135deg, #F4A300, #F4A300);
    color: #2b1a00;   /* oscuro: el blanco sobre naranja casi no se lee */
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 17px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn-print {
    background: linear-gradient(135deg, #F4A300, #F4A300);
    margin-left: 10px;
}

.orders-grid {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

.order-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease;

}

.order-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

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

.order-id {
    font-weight: bold;
    color: #840c06;
    font-size: 1.2em;
}

.order-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-pendiente {
    background: #fff3cd;
    color: #856404;
}

.status-completado {
    background: #d4edda;
    color: #155724;
}

.order-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-icon {
    width: 28px;
    height: 28px;
    background: #f3d9d7;   /* bordó clarito: los emojis no se veían sobre el oscuro */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px; flex: none;
}



.success-message {
    background: #d4edda;
    color: #155724;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #c3e6cb;
}

.capacity-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.capacity-bar {
    width: 100%;
    height: 20px;
    background: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.capacity-fill {
    height: 100%;
    background: linear-gradient(90deg, #28a745, #ffc107 70%, #dc3545);
    transition: width 0.3s ease;
    border-radius: 10px;
}

.capacity-text {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}

.warning-text {
    color: #dc3545;
    font-weight: bold;
    margin-top: 10px;
}
/* Estilos responsivos */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .nav {
        flex-direction: column;
        gap: 10px;
    }
    
    .order-details {
        grid-template-columns: 1fr;
    }
}

/* Login */
.login-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
}

.login-box {
    background: white;
    padding: 30px;
    border-radius: 15px;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.login-box h1 {
    font-size: 1.6em;
    color: #840c06;
}

.login-error {
    color: #dc3545;
    font-weight: bold;
    min-height: 20px;
}



.logout-btn {
    background: rgba(0, 0, 0, 0.65);
    border: none;
    color: white;
    padding: 6px 14px;
    border-radius: 15px;
    cursor: pointer;
    margin-left: 5px;
}

.logout-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Carrito */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.remove-btn {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 17px;
}

.btn-danger, .btn-secondary, .btn-whatsapp, .btn-pagado { color: #fff; }
.btn-danger {
    background: #dc3545;
}

.btn-secondary {
    background: #6c757d;
}

/* Celular */
@media (max-width: 768px) {
    body {
        padding: 8px;
    }

    .header h1 {
        font-size: 1.8em;
    }

    .section {
        padding: 15px;
    }

    .nav {
        gap: 8px;
    }

    .nav-btn {
        width: 100%;
        padding: 14px;
    }

    .product-item {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .btn-print {
        margin-left: 0;
    }

    .order-card .btn {
        width: auto;
    }

    .ticket {
        max-width: 100%;
    }
}


/* Caja y administración */
.cart-precio { margin-top: 10px; font-size: 19px; text-align: right; }
.promo-line { font-size: 15px; color: #155724; margin-top: 4px; }

.caja-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.caja-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;

    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.caja-card span { font-size: 14px; color: #666; }
.caja-card strong { font-size: 22px; }
.caja-card small { color: #666; }
.caja-listas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.caja-listas ul { list-style: none; padding-left: 0; }
.caja-listas li { padding: 4px 0; border-bottom: 1px solid #eee; }
.caja-box { background: #fff8e6; border: 1px solid #F4A300; border-radius: 10px; padding: 20px; margin-top: 20px; }
.caja-diferencia { font-size: 19px; margin: 15px 0; }
.caja-estado { font-weight: bold; margin-bottom: 15px; }
.tabla-precios { width: 100%; border-collapse: collapse; }
.tabla-precios th, .tabla-precios td { padding: 8px; border-bottom: 1px solid #eee; text-align: left; }

@media (max-width: 768px) {
    .caja-listas { grid-template-columns: 1fr; }
    .tabla-precios { display: block; overflow-x: auto; }
}

/* Pedidos */
.titulo-bloque { margin: 25px 0 10px; color: #840c06; }
.vacio { text-align: center; color: #666; font-size: 19px; padding: 15px; }
.order-entregado { opacity: 0.85; border-color: #b7dfc1; }
.nota-item {
    color: #840c06;
    font-weight: bold;
}
.caja-oculta {
    background: #f8f9fa; border: 1px dashed #aaa; border-radius: 10px;
    padding: 25px; text-align: center; color: #555; margin: 20px 0;
}

/* Avisos */
#toasts {
    position: fixed; top: 16px; right: 16px; z-index: 10000;
    display: flex; flex-direction: column; gap: 10px;
    max-width: calc(100vw - 32px); pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 10px;
    background: #fff; color: #333; font-weight: bold;
    border: 1px solid #cfe9ee; border-radius: 10px;
    padding: 14px 18px; min-width: 260px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    opacity: 0; transform: translateX(30px); transition: all 0.3s ease;
}
.toast.visible { opacity: 1; transform: none; }
.toast-success { border-color: #b7dfc1; }
.toast-error { border-color: #f1b0b7; }
.toast-warning { border-color: #f5d27a; }
.toast-icono { font-size: 22px; }

/* Ventanas de confirmación */
.modal-overlay {
    position: fixed; inset: 0; z-index: 10001; padding: 20px;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease-in;
}
.modal-box {
    background: #fff; border-radius: 16px; width: 100%; max-width: 400px;
    padding: 26px 22px 22px; text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.35);
}



.modal-icono { font-size: 45px; margin-bottom: 8px; }
.modal-titulo { color: #840c06; margin-bottom: 8px; }
.modal-mensaje { white-space: pre-line; color: #333; font-size: 17px; margin-bottom: 20px; }
.modal-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.modal-botones .btn { flex: 1; width: auto; margin-bottom: 0; padding: 12px 18px; font-size: 15px; }

@media (max-width: 768px) {
    #toasts { left: 16px; }
    .toast { min-width: 0; }
}

/* Edición de pedidos */
.edicion-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: #fff3cd; border: 1px solid #F4A300;
    border-radius: 10px; padding: 12px 16px; margin-bottom: 20px;
    font-weight: bold; color: #856404;
}
.btn-cancelar-edicion {
    background: #fff; border: 2px solid #856404; color: #856404;
    border-radius: 8px; padding: 8px 14px; font-weight: bold; cursor: pointer;
}

/* Buscador y pedidos */
.buscador { margin: 15px 0 5px; }
.detail-productos { grid-column: 1 / -1; font-size: 18px; line-height: 1.4; align-items: flex-start; }
.detail-productos .detail-icon { flex-shrink: 0; }

/* Egresos */
.ayuda { color: #666; font-size: 15px; margin: 6px 0 12px; }
.egresos-box {
    background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 10px;
    padding: 20px; margin-top: 20px;
}
.egreso-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.egreso-form input[type="text"] { flex: 2; min-width: 160px; }
.egreso-form input[type="number"] { flex: 1; min-width: 110px; }
.egreso-form .btn { padding: 12px 22px; }
.egreso-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #eee;
}
.egreso-item > div { flex: 1; display: flex; flex-direction: column; }
.egreso-item small { color: #666; }
.egreso-total { text-align: right; margin-top: 10px; font-size: 18px; }
.lista-egresos { list-style: none; padding-left: 0; margin-bottom: 15px; }
.lista-egresos li { padding: 4px 0; border-bottom: 1px solid #eee; }

@media (max-width: 768px) {
    .egreso-form { flex-direction: column; }
    .egreso-form .btn { width: 100%; }
    .btn-cancelar-edicion { width: 100%; }
}

/* Tickets */
.tickets-controles { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 15px 0; }
.tickets-controles select { flex: 1; min-width: 220px; width: auto; }
.tickets-controles .btn { margin-left: 0; }
.ticket-acciones {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed #aaa;
}
.ticket-check { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: normal; cursor: pointer; }
.ticket-sel { width: auto; }
.ticket-imprimir { padding: 8px 14px; font-size: 14px; }

@media (max-width: 768px) {
    .tickets-controles select, .tickets-controles .btn { width: 100%; }
}

/* Panes */
.panes-ind {
    background: rgba(255,255,255,0.2); border-radius: 12px;
    padding: 4px 10px; margin-right: 10px; font-weight: bold;
}
.panes-ind.bajo { background: #F4A300; color: #000; }
.panes-ind.critico { background: #dc3545; color: #fff; }

/* Comandas en pantalla */
#tickets-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.2cm), 1fr));
    gap: 20px;
}
#tickets-container .vacio { grid-column: 1 / -1; }
.ticket-wrap { display: flex; flex-direction: column; gap: 8px; }
.ticket-wrap .ticket-acciones { width: 8.6cm; max-width: 100%; }

.user-bar {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 10px;
    margin-top: 15px;
    font-size: 15px;
}

.user-bar .panes-ind {
    margin-right: 0;
}

.user-bar #user-email {
    flex-basis: 100%;
    text-align: center;
    word-break: break-all;
}

.user-bar .logout-btn {
    margin-left: 0;
}

@media (max-width: 600px) {
    .user-bar #user-email {
        flex-basis: 100%;
        text-align: center;
        word-break: break-all;
    }
}

/* Resumen final de la jornada */
.resumen-final {
    background: #fff8e6; border: 2px solid #F4A300; border-radius: 12px;
    padding: 20px; margin: 20px 0;
}
.resumen-final-total {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dashed #F4A300;
}
.resumen-final-total span { font-size: 16px; color: #666; }
.resumen-final-total strong { font-size: 2em; color: #840c06; }
.resumen-final h4 { margin-bottom: 8px; }
.resumen-final-lista { list-style: none; padding-left: 0; }
.resumen-final-lista li {
    display: flex; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid #f0e0b8; font-size: 18px;
}

/* Línea de producto */
.add-btn { margin-top: 12px; }
.nota-fila { display: flex; gap: 10px; align-items: stretch; }
.nota-fila input { flex: 1; }
.nota-fila .btn { white-space: nowrap; padding: 10px 16px; }
.extra-info { min-height: 22px; margin-top: 6px; font-weight: bold; color: #840c06; }
.link-btn { background: none; border: none; color: #840c06; text-decoration: underline; cursor: pointer; margin-left: 8px; font-size: 15px; }
.check-doble { display: flex; align-items: center; gap: 8px; font-weight: bold; cursor: pointer; }
.check-doble input { width: auto; }

@media (min-width: 769px) {
    .product-item { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 10px; }
}

/* Pedido sin retirar */
.order-demorado { border-color: #f1b0b7; background: #fff0f0; }
.alerta-demora { color: #dc3545; font-weight: bold; margin-bottom: 10px; }

/* Comandas en pantalla (80 mm) */
.ticket-wrap .ticket-acciones { width: 72mm; max-width: 100%; }

.egreso-form select { flex: 1; min-width: 170px; width: auto; }

/* Pestañas de pedidos */
.tabs-pedidos { display: flex; gap: 10px; margin: 15px 0; }
.tab-btn {
    flex: 1; padding: 14px; border: 2px solid #840c06; background: #fff; color: #840c06;
    border-radius: 10px; font-size: 17px; font-weight: bold; cursor: pointer;
}
.tab-btn.active { background: #840c06; color: #fff; }

/* Elegir cadete */
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.chip {
    background: #fff3cd; border: 2px solid #F4A300; color: #856404;
    border-radius: 20px; padding: 8px 16px; font-weight: bold; cursor: pointer; font-size: 16px;
}
.modal-input { margin-bottom: 18px; }
.modal-input-error { border-color: #dc3545; }

.chips-grandes { margin-bottom: 18px; }
.chips-grandes .chip { font-size: 18px; padding: 12px 20px; }
.chip-sel { background: #F4A300; color: #000; }

@media (max-width: 768px) {
    .nota-fila {
        flex-direction: column;
        gap: 8px;
    }
    .nota-fila input,
    .nota-fila .btn {
        width: 100%;
    }
    .nota-fila .btn {
        padding: 12px 16px;
    }
}

/* Botones rápidos */
.rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.btn-rapido {
    flex: 1; min-width: 90px; padding: 14px 10px; font-size: 18px; font-weight: bold;
    background: #fff3cd; border: 2px solid #F4A300; color: #840c06;
    border-radius: 10px; cursor: pointer;
}
.btn-rapido:active { background: #F4A300; }

/* Stock */
.stock-bajo { border-color: #f1b0b7; background: #fff0f0; }
.stock-aviso {
    background: #fff3cd; border: 1px solid #F4A300; border-radius: 8px;
    padding: 12px 16px; margin-bottom: 15px; font-weight: bold; color: #856404;
}
.conteo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 10px; }

/* Subir precios */
.subir-precios { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0 5px; }
.subir-precios .btn { padding: 10px 18px; }


/* Configuración y productos */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 10px; }
.dias { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 15px; }
.cat-card { border: 1px solid #dee2e6; border-radius: 10px; background: #f8f9fa; margin-bottom: 12px; }
.cat-card summary { padding: 14px 16px; font-weight: bold; font-size: 18px; cursor: pointer; }
.cat-cuerpo { padding: 0 16px 16px; }
.cat-cuerpo h5 { margin: 14px 0 6px; color: #840c06; }
.var-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.var-desc { flex-basis: 100%; font-size: 15px; }
.var-fila input { flex: 1; }
.cat-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cat-acciones .btn { padding: 8px 14px; font-size: 14px; }

/* Administración */
.admin-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 15px 0 25px; }
.admin-tab {
    padding: 16px 10px; font-size: 18px; font-weight: bold; cursor: pointer;
    border: 2px solid #840c06; background: #fff; color: #840c06; border-radius: 12px;
}
.admin-tab.active { background: #840c06; color: #fff; }
.cfg-card { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.cfg-card h4 { margin-bottom: 10px; color: #840c06; }

/* Botones rápidos (editor) */
.rap-fila { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.rap-fila select, .rap-fila input[type="text"] { flex: 1; min-width: 130px; width: auto; }
.mini-btn {
    background: #fff; border: 2px solid #ccc; border-radius: 6px;
    padding: 8px 12px; font-size: 17px; cursor: pointer;
}

/* Comida del personal y bajas, alineadas */
.caja-box .form-group > label { display: block; font-size: 18px; margin-bottom: 6px; text-align: left; }
.caja-box .ayuda { text-align: left; }
.personal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 12px; margin: 10px 0 14px; align-items: end; }
.personal-grid .form-group { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.personal-grid .form-group label { margin: 0 0 6px; font-size: 15px; line-height: 1.2; min-height: 2.4em; display: flex; align-items: flex-end; text-align: left; }
.personal-grid input { text-align: center; font-size: 19px; padding: 10px; }
.baja-form { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: 10px; }
.baja-form .btn { grid-column: 1 / -1; width: 100%; }
.var-carnes { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 14px; font-weight: normal; white-space: nowrap; }
.var-carnes input { width: 60px; flex: none; padding: 8px; }
@media (max-width: 768px) {
    .personal-grid { grid-template-columns: 1fr 1fr; }
    .baja-form { grid-template-columns: 1fr; }
}

/* Aviso sin internet y envíos */
.offline-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 10002; background: #dc3545; color: #fff; text-align: center; padding: 10px; font-weight: bold; }
.order-envio { border-color: #9fd8e2; background: #f1fafc; }
.order-demorado { border-color: #f1b0b7; }

.dev-form { text-align: left; max-width: 440px; max-height: 92vh; overflow-y: auto; }
.dev-form .modal-icono, .dev-form .modal-titulo, .dev-form .modal-mensaje { text-align: center; }
.dev-form label { margin-top: 10px; font-size: 15px; }
.dev-form .modal-botones { margin-top: 18px; }

.zona-peligro { border: 2px solid #dc3545; background: #fff0f0; }

.alerta-caja-box { background: #fff0f0; border: 2px solid #dc3545; border-radius: 10px; padding: 14px 16px; margin: 15px 0; }
.alerta-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f5c2c7; }
.log-precio { border-bottom: 1px solid #eee; padding: 8px 0; }

.filtro-fechas { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filtro-fechas .form-group { margin-bottom: 0; }
.rangos-rapidos { margin: 12px 0; justify-content: flex-start; }

.btn-whatsapp { background: #128C7E; display: inline-flex; align-items: center; gap: 6px;text-align: center; }
.btn-whatsapp:hover { background: #0e6f64; }
/* el de WhatsApp es inline-flex y quedaba más arriba */
.order-card .btn, #pedido-form > .btn { vertical-align: middle; }
.btn-whatsapp { justify-content: center; }   /* al ocupar todo el ancho en el celular */

/* Tildes con forma de botón fuera de promos */
.pago-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pago-fila select { flex: 1; min-width: 140px; }
.pchip.pchip-pago span, .pchip.pchip-cadete span { padding: 10px 18px; font-size: 16px; }
.pchip.pchip-pago input:checked + span { background: #28a745; border-color: #28a745; color: #fff; }
.pchip.pchip-cadete input:checked + span { background: #17a2b8; border-color: #17a2b8; color: #fff; }

/* Conteo semanal: los inputs quedan alineados aunque el nombre ocupe dos renglones */
.conteo-grid .form-group { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 0; }
.order-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px; }
.order-acciones .btn { margin: 0; }
/* Acciones poco usadas en un menú, lejos de Entregado para no tocarlas sin querer */
.mas-menu { position: relative; margin-left: auto; }
.mas-menu summary { list-style: none; cursor: pointer; padding: 8px 16px; border: 2px solid #ced4da; border-radius: 8px; background: #fff; font-weight: bold; font-size: 15px; color: #444; }
.mas-menu summary::-webkit-details-marker { display: none; }
.mas-menu[open] summary { border-color: #840c06; color: #840c06; }
.mas-lista { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 220px; display: flex; flex-direction: column; background: #fff; border: 1px solid #dee2e6; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; }
.mas-lista button { padding: 12px 16px; border: 0; border-bottom: 1px solid #f0f0f0; background: #fff; text-align: left; font-size: 16px; font-weight: bold; color: #333; cursor: pointer; }
.mas-lista button:hover, .mas-lista button:focus-visible { background: #fdf1f0; }
.mas-lista .mas-peligro { color: #dc3545; border-bottom: 0; }
.badge-falta { background: #fff3cd; color: #856404; border-radius: 12px; padding: 2px 10px; font-weight: bold; font-size: 15px; }
.btn-pagado { background: #28a745; }
.btn-pagado:hover { background: #218838; }
.badge-pagado { background: #d4edda; color: #155724; border-radius: 12px; padding: 2px 10px; font-weight: bold; font-size: 15px; }   /* el de WhatsApp es inline-flex y quedaba más arriba */

/* Caja: bloques separados */
.caja-bloque h3 { margin-bottom: 10px; }
.bloque-personal { background: #eefaf0; border-color: #28a745; }
.bloque-panes { background: #fff1e6; border-color: #fd7e14; }
.bloque-cierre { background: #fff8e6; border-color: #F4A300; }
.bloque-cierre .btn { margin-right: 6px; }

/* Carrito en recuadro de color */
.cart-container { background: #eaf4ff; border: 2px solid #2f80ed; border-radius: 12px; padding: 14px 16px; }
.cart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #174ea6; }
.cart-header h3 { margin: 0; }
.cart-container .cart-item { border-bottom: 1px solid #c9defa; }
.cart-container .cart-total { font-weight: bold; color: #174ea6; margin-top: 8px; }
.cart-container .cart-precio { border-top: 2px solid #2f80ed; margin-top: 10px; padding-top: 8px; }

/* Varios pedidos abiertos (pestañas pegadas abajo) */
.container { overflow: clip; }   /* sin esto la barra de abajo no queda pegada a la pantalla */
.borradores-tabs {
    position: sticky; bottom: 0; z-index: 50;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    background: #fff; border-top: 3px solid #840c06;
    padding: 10px 4px; margin-top: 20px; box-shadow: 0 -6px 14px rgba(0,0,0,0.10);
}
.borrador-tab {
    display: inline-flex; align-items: center; gap: 8px; max-width: 220px;
    padding: 10px 14px; border: 2px solid #840c06; border-radius: 10px;
    background: #fff; color: #840c06; font-weight: bold; cursor: pointer;
}
.borrador-tab.activa { background: #840c06; color: #fff; }
.borrador-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.borrador-cant { background: #F4A300; color: #000; border-radius: 10px; padding: 0 8px; font-size: 14px; }
.borrador-x { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 16px; padding: 0 2px; }
.borrador-nuevo {
    padding: 10px 14px; border: 2px dashed #840c06; border-radius: 10px;
    background: #fff8e6; color: #840c06; font-weight: bold; cursor: pointer;
}

/* Pagos por transferencia y QR */
.bloque-pagos { background: #f0f4ff; border-color: #2f80ed; }
.pago-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #dde6fb; }
.pago-info { display: flex; flex-direction: column; min-width: 140px; }
.pago-info small { color: #666; }
.pago-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.pago-op { padding: 8px 12px; border: 2px solid #2f80ed; background: #fff; color: #174ea6; border-radius: 8px; font-weight: bold; cursor: pointer; }
.pago-op.activo { background: #2f80ed; color: #fff; }
.pago-op:disabled { opacity: 0.5; cursor: not-allowed; }
.chip-pago { background: #fff3cd; border: 2px solid #F4A300; color: #856404; border-radius: 16px; padding: 2px 10px; font-weight: bold; cursor: pointer; font-size: 15px; }
.filtro-modalidad { justify-content: flex-start; margin: 10px 0; }

/* Apertura de jornada */
.apertura-box { text-align: left; max-width: 460px; max-height: 92vh; overflow-y: auto; }
.apertura-box .modal-icono, .apertura-box .modal-titulo, .apertura-box .modal-mensaje { text-align: center; }
.apertura-bloque { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.apertura-bloque h4 { margin-bottom: 6px; color: #840c06; }
.apertura-bloque label { margin-top: 8px; font-size: 15px; }
.ap-error { color: #dc3545; font-weight: bold; min-height: 20px; margin: 4px 0 10px; }

/* Cierre paso a paso */
.pasos-box { background: #fff; border: 2px solid #840c06; border-radius: 12px; padding: 14px 16px; margin: 15px 0; }
.pasos-box.completo { border-color: #28a745; background: #f0fbf2; }
.pasos-box h3 { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; color: #840c06; }
.pasos-prog { background: #840c06; color: #fff; border-radius: 12px; padding: 2px 12px; font-size: 15px; }
.pasos-box.completo .pasos-prog { background: #28a745; }
.pasos-ok { color: #155724; font-weight: bold; margin-bottom: 8px; }
.pasos-lista { list-style: none; padding: 0; margin: 0; }
.paso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid #eee; }
.paso-ico { font-size: 24px; }
.paso-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.paso-txt small { color: #856404; }
.paso.ok .paso-txt strong { color: #155724; }
.paso-acc { display: flex; gap: 6px; flex-wrap: wrap; }
.paso-btn { padding: 8px 12px; border: 2px solid #840c06; background: #fff; color: #840c06; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; }
.paso-btn.paso-manual { border-color: #6c757d; color: #495057; }
.paso-btn.paso-deshacer { border-color: #adb5bd; color: #6c757d; font-weight: normal; }

/* Contador en la pestaña Ver Pedidos */
.nav-badge { display: inline-block; margin-left: 8px; min-width: 22px; padding: 1px 8px; border-radius: 12px; background: #F4A300; color: #000; font-size: 14px; font-weight: bold; text-align: center; }
.nav-badge.demorado { background: #dc3545; color: #fff; animation: pulso 1.4s infinite; }
@keyframes pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* Campos que faltan */
.campo-error { border-color: #dc3545 !important; background: #fff5f5 !important; box-shadow: 0 0 0 3px rgba(220,53,69,0.2) !important; }
.campo-msg { color: #dc3545; font-weight: bold; font-size: 15px; margin-top: 4px; flex-basis: 100%; grid-column: 1 / -1; }
.nota-fila { flex-wrap: wrap; }
.cart-container.campo-error { border-color: #dc3545; background: #fff5f5; }

/* Ayuda */
.ayuda-box { text-align: left; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.ayuda-titulo { color: #840c06; margin-bottom: 10px; text-align: center; }
.ayuda-pasos { padding-left: 22px; margin-bottom: 12px; }
.ayuda-pasos li { margin-bottom: 8px; line-height: 1.35; }
.ayuda-ojo { background: #fff3cd; border: 1px solid #F4A300; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.ayuda-ojo ul { padding-left: 20px; margin-top: 6px; }
.ayuda-ojo li { margin-bottom: 5px; }
.ayuda-faq { margin-bottom: 12px; }
.ayuda-faq > summary { cursor: pointer; font-weight: bold; color: #840c06; padding: 6px 0; }
.ayuda-faq details { border-top: 1px solid #eee; padding: 6px 0; }
.ayuda-faq details summary { cursor: pointer; font-weight: bold; }
.ayuda-faq details p { margin: 6px 0 0 14px; }
.ayuda-otras { justify-content: flex-start; align-items: center; margin-bottom: 12px; }
.ayuda-otras span { font-size: 15px; color: #666; }

.promos-recuadro { background:#fff8e1; border:2px solid #f5b800; border-radius:10px; padding:10px 12px; margin:10px 0; }
.promos-recuadro h4 { margin:0 0 6px; font-size: 16px; }
.promo-opcion { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed #e0c36a; flex-wrap:wrap; }
.promo-opcion:first-of-type { border-top:0; }
.promo-opcion label { flex:1; font-weight:600; cursor:pointer; min-width:160px; }
.promo-opcion input[type=checkbox] { width:22px; height:22px; }
.promo-opcion .promo-veces { display:flex; align-items:center; gap:6px; }
.promo-opcion .promo-veces button { width:34px; height:34px; font-size: 19px; }
/* Editor de promos */
.promo-card { background: #fff; border: 1px solid #e6dcdc; border-radius: 14px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden; }
.promo-card.apagada { background: #fafafa; }
.promo-card.apagada .promo-titulo strong, .promo-card.apagada .promo-precio { color: #868e96; }
.promo-card summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.promo-card summary::-webkit-details-marker { display: none; }
.promo-card summary::after { content: '▾'; font-size: 22px; color: #840c06; transition: transform .2s; }
.promo-card[open] summary::after { transform: rotate(180deg); }
.promo-card[open] summary { border-bottom: 1px solid #f0e6e6; background: #fdf8f3; }
.promo-titulo { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.promo-titulo strong { font-size: 19px; color: #840c06; }
.promo-titulo small { color: #666; font-size: 14px; }
.promo-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.promo-precio { font-size: 22px; font-weight: bold; color: #222; white-space: nowrap; }
.promo-estado { font-size: 13px; font-weight: bold; padding: 3px 10px; border-radius: 12px; background: #e9ecef; color: #6c757d; }
.promo-estado.on { background: #d4edda; color: #155724; }
.promo-cuerpo { padding: 16px; }
.promo-paso { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #e6dcdc; }
.promo-paso h5 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; color: #840c06; }
.promo-paso h5 span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #840c06; color: #fff; font-size: 14px; }
.promo-paso label small { font-weight: normal; color: #888; }
.promo-precio-input { font-size: 19px; font-weight: bold; }

/* Interruptor activa / apagada */
.promo-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: bold; }
.promo-switch small { font-weight: normal; color: #888; }
.promo-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { position: relative; flex: none; width: 50px; height: 28px; border-radius: 14px; background: #ced4da; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.promo-switch input:checked + .switch { background: #28a745; }
.promo-switch input:checked + .switch::after { transform: translateX(22px); }
.promo-switch input:focus-visible + .switch { outline: 3px solid #F4A300; outline-offset: 2px; }

/* Cantidad con − y + */
.promo-fila { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.promo-cant { display: flex; align-items: center; gap: 6px; }
.promo-cant input { width: 64px; text-align: center; font-size: 19px; font-weight: bold; }
.promo-mas { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #F4A300; background: #fff3cd; color: #856404; font-size: 24px; font-weight: bold; cursor: pointer; }
.promo-mas:active { background: #F4A300; color: #000; }

/* Opciones tipo botón (productos y días) */
.promo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.pchip { position: relative; cursor: pointer; }
.pchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pchip span { display: inline-block; padding: 8px 16px; border: 2px solid #dee2e6; border-radius: 20px; background: #fff; color: #555; font-weight: bold; user-select: none; }
.pchip input:checked + span { background: #F4A300; border-color: #F4A300; color: #000; }
.pchip input:checked + span::before { content: '✓ '; }
.pchip input:focus-visible + span { outline: 3px solid #840c06; outline-offset: 2px; }
.pchip-dia span { min-width: 58px; text-align: center; }
.promo-todos { padding: 8px 14px; border: 2px dashed #ced4da; border-radius: 20px; background: transparent; color: #666; font-weight: bold; cursor: pointer; }

/* Cómo se aplica */
.promo-modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.promo-modo { position: relative; cursor: pointer; }
.promo-modo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.promo-modo > span { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 14px; border: 2px solid #dee2e6; border-radius: 12px; background: #fff; }
.promo-modo small { color: #666; font-weight: normal; }
.promo-modo input:checked + span { border-color: #840c06; background: #fdf1f0; box-shadow: inset 0 0 0 1px #840c06; }
.promo-modo input:focus-visible + span { outline: 3px solid #F4A300; outline-offset: 2px; }

.promo-borrar { margin-top: 20px; padding: 8px 14px; border: 1px solid #dc3545; border-radius: 8px; background: #fff; color: #dc3545; font-weight: bold; cursor: pointer; }
.promo-borrar:hover { background: #dc3545; color: #fff; }

@media (max-width: 600px) {
    .promo-card summary { flex-wrap: wrap; }
    .promo-lado { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; order: 3; }
}

/* Botones y campos usan la misma letra que la página */
button, input, select, textarea { font-family: inherit; }

/* Página pública de pedidos (pedir.html) */
.web-pagina { max-width: 760px; }
.web-pagina .header p { opacity: .9; }
.web-pagina h2 { margin: 26px 0 12px; color: #840c06; font-size: 22px; }
.web-pagina h2:first-child { margin-top: 0; }
/* Menú web: una tarjeta por producto, la foto con el bordó de la marca subiendo desde abajo. Espaciado en múltiplos de 4 */
.web-cat { margin-bottom: 16px; border: 2px solid transparent; border-radius: 16px; background: #fff; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12); transition: border-color .2s, box-shadow .2s; }
.web-cat[open] { border-color: #840c06; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.web-cat summary { position: relative; display: block; height: 128px; list-style: none; cursor: pointer; background: #840c06; color: #fff;
    transition: height .45s cubic-bezier(.16, 1, .3, 1); }
/* cerrada es una franja baja para leer la lista; al abrirla la foto se agranda */
.web-cat[open] summary { height: 240px; }
.web-cat summary::-webkit-details-marker { display: none; }
.web-cat summary:focus-visible { outline: 4px solid #F4A300; outline-offset: -4px; }
.web-cat-sin-foto summary, .web-cat-sin-foto[open] summary { height: auto; min-height: 96px; }
.web-cat-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.web-cat summary:hover .web-cat-foto { transform: scale(1.04); }
/* el bordó sube desde abajo, suave; la sombra del texto lo mantiene legible donde la foto se ve más */
.web-cat summary::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(132, 12, 6, .82) 0%, rgba(132, 12, 6, .5) 45%, rgba(132, 12, 6, 0) 85%); }
.web-cat[open] summary::after { background: linear-gradient(to top, rgba(132, 12, 6, .82) 0%, rgba(132, 12, 6, .45) 28%, rgba(132, 12, 6, 0) 55%); }
.web-cat-sin-foto summary::after { content: none; }
.web-cat-titulo { text-shadow: 0 1px 6px rgba(0, 0, 0, .45); position: absolute; z-index: 1; left: 20px; right: 72px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; }
.web-cat-nombre { font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.web-cat-desde { font-size: 16px; font-weight: 700; color: #fdf8f3; font-variant-numeric: tabular-nums; }
.web-cat-flecha { position: absolute; z-index: 1; right: 20px; bottom: 20px; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #840c06; font-size: 20px; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.web-cat[open] .web-cat-flecha { transform: rotate(180deg); }
.web-cat-ilustrativa { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 4px 8px; border-radius: 8px;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 700; }
.web-cat-cuerpo { padding: 8px 0; }
.web-aderezos { display: flex; gap: 8px; padding: 8px 20px; }
/* cada variedad: texto a la izquierda (nombre, precio, botón) y su foto a la derecha */
.web-item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #f0e6e6; }
.web-item:last-child { border-bottom: 0; }
.web-item-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.web-item-nombre { font-size: 20px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.web-var { margin-bottom: 8px; font-size: 18px; font-weight: 800; }
.web-item-precio { margin-bottom: 8px; font-size: 18px; font-weight: 800; color: #840c06; white-space: nowrap; font-variant-numeric: tabular-nums; }
.web-item-foto { flex: none; width: 112px; height: 112px; border-radius: 12px; object-fit: cover; background: #fdf8f3; }
.web-agregar { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 16px; border: 2px solid #F4A300; border-radius: 24px;
    background: #fff3cd; color: #5c3d00; font-size: 16px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.web-agregar:hover { background: #ffe8a1; }
.web-agregar:active { background: #F4A300; }
.web-agregar:focus-visible { outline: 4px solid #840c06; outline-offset: 2px; }
@media (min-width: 600px) {
    .web-cat summary { height: 160px; }
    .web-cat[open] summary { height: 320px; }
    .web-cat-nombre { font-size: 40px; }
    .web-cat-titulo { left: 24px; bottom: 24px; }
    .web-cat-flecha { right: 24px; bottom: 24px; }
    .web-item { padding: 16px 24px; }
    .web-aderezos { padding: 8px 24px; }
}
@media (max-width: 420px) {
    /* nombre más chico para que entre en la franja bordó */
    .web-cat-nombre { font-size: 28px; }
    .web-cat-titulo { left: 16px; right: 64px; bottom: 16px; }
    .web-cat-flecha { right: 16px; bottom: 16px; }
    .web-item { gap: 12px; padding: 16px; }
    .web-item-nombre { font-size: 18px; }
    .web-item-foto { width: 104px; height: 104px; }
    .web-aderezos { padding: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .web-cat summary, .web-cat-foto, .web-cat-flecha { transition: none; }
    .web-cat summary:hover .web-cat-foto { transform: none; }
}
.web-col-pedido > h2:first-child { margin-top: 26px; }
/* PC: el menú a la izquierda y el pedido fijo a la derecha, para ver el carrito mientras se agrega */
@media (min-width: 1024px) {
    .web-pagina { max-width: 1240px; overflow: clip; }   /* clip y no hidden: con hidden no funciona el sticky */
    #web-pedido.active { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; padding: 32px; }
    .web-col-pedido { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 0 4px 4px 0; }
    .web-col-pedido > h2:first-child { margin-top: 0; }
    .web-cat-cuerpo { display: grid; grid-template-columns: 1fr 1fr; padding: 0; margin-bottom: -1px; }
    .web-aderezos { grid-column: 1 / -1; padding: 16px 24px 8px; }
    .web-item:last-child { border-bottom: 1px solid #f0e6e6; }
    .web-item:nth-child(odd of .web-item) { border-right: 1px solid #f0e6e6; }
}
.web-linea { display: block; padding: 12px 0; }
.web-linea .web-nota { width: 100%; }
.web-linea-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.web-nota { margin-top: 8px; padding: 8px 10px; font-size: 15px; border-width: 1px; background: #fff; }
.web-cant { min-width: 28px; text-align: center; font-weight: 800; font-size: 19px; }
.web-error { color: #dc3545; font-weight: 700; min-height: 22px; margin-bottom: 8px; }
.web-enviar { width: 100%; font-size: 19px; }
.web-enviar:disabled { opacity: .5; cursor: not-allowed; }
.web-ok { text-align: center; padding: 30px 10px; }
.web-ok-icono { font-size: 60px; }
.web-ok p { margin: 12px 0 22px; font-size: 18px; }

/* Bandeja de pedidos web en la app */
.web-bandeja { background: #eef6ff; border: 2px solid #2f80ed; border-radius: 12px; padding: 12px 16px; margin: 15px 0; }
.web-bandeja h3 { margin: 0 0 8px; color: #174ea6; }
.web-solicitud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #c9defa; }
.web-solicitud:first-of-type { border-top: 0; }
.web-solicitud > div { flex: 1; min-width: 220px; }
.web-solicitud small { display: block; color: #555; }
.web-solicitud .btn { padding: 8px 16px; font-size: 15px; margin: 0; }
.web-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Lomitos especiales (Stock) */
.esp-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.esp-fila { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eee; }
.esp-fila strong { flex: 1; }
.esp-fila.agotado strong { color: #999; text-decoration: line-through; }
.esp-fila .pchip span { padding: 6px 14px; font-size: 14px; }
.esp-quedan { width: 110px; flex: none; padding: 8px; font-size: 15px; }
.web-quedan { display: block; color: #b45309; font-weight: 700; font-size: 13px; }
.web-agotado { padding: 8px 14px; border-radius: 20px; background: #eee; color: #888; font-weight: 800; white-space: nowrap; }
.esp-box summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 19px; }
.esp-box summary::-webkit-details-marker { display: none; }
.esp-box summary::after { content: '▾'; margin-left: auto; font-size: 22px; color: #840c06; transition: transform .2s; }
.esp-box[open] summary { margin-bottom: 10px; }
.esp-box[open] summary::after { transform: rotate(180deg); }
.esp-resumen { font-size: 15px; font-weight: 700; color: #666; }

/* Íconos Lucide */
.ico, svg.lucide { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; stroke-width: 2.2; }
.nav-btn, .logout-btn, .btn, .mas-lista button, .dash-acceso, .web-agregar { gap: 6px; }
.nav-btn svg.lucide, .logout-btn svg.lucide { margin-right: 4px; }
.detail-icon svg.lucide { width: 16px; height: 16px; color: #840c06; }
h2 svg.lucide, h3 svg.lucide, h4 svg.lucide { color: #840c06; }
.esp-box summary svg.lucide { color: #F4A300; fill: #F4A300; }

/* /pedir: cocina cerrada y pie */
.web-cerrado { display: flex; align-items: center; gap: 14px; margin: 16px 20px 0; padding: 14px 18px; border-radius: 12px; background: #fff3cd; border: 2px solid #F4A300; color: #5c3d00; }
.web-cerrado[hidden] { display: none; }
.web-cerrado svg.lucide { width: 30px; height: 30px; color: #840c06; }
.web-cerrado strong { display: block; font-size: 20px; color: #840c06; }
.web-ok-icono, .web-ok svg.lucide.web-ok-icono { width: 64px; height: 64px; color: #28a745; }
.web-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding: 18px 20px 22px; border-top: 1px solid #f0e6e6; background: #fdf8f3; }
.web-pie a { display: inline-flex; align-items: center; gap: 6px; color: #840c06; font-weight: 700; text-decoration: none; }
.web-pie a:hover { text-decoration: underline; }

/* Panel del dueño */
.dash-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; font-weight: 700; color: #555; }
.dash-cabecera > span { display: inline-flex; align-items: center; gap: 6px; }
.dash-estado { padding: 4px 12px; border-radius: 14px; }
.dash-estado.abierta { background: #d4edda; color: #155724; }
.dash-estado.cerrada { background: #e9ecef; color: #495057; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dash-tile { background: #fff; border: 1px solid #ece4e4; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.dash-tile-tit { display: flex; align-items: center; gap: 6px; color: #666; font-size: 14px; font-weight: 700; }
.dash-tile-tit svg.lucide { color: #840c06; }
.dash-tile strong { font-size: 28px; color: #222; line-height: 1.1; }
.dash-tile small { color: #777; font-size: 13px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.dash-card { background: #fff; border: 1px solid #ece4e4; border-radius: 14px; padding: 14px 16px; }
.dash-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 17px; color: #333; }
.dash-card-ancha { grid-column: 1 / -1; }
.dash-barras { display: flex; flex-direction: column; gap: 8px; }
.dash-barra { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.dash-barra-et { color: #444; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-barra-pista { height: 12px; background: #f3eded; border-radius: 6px; overflow: hidden; }
.dash-barra-fill { display: block; height: 100%; background: #840c06; border-radius: 0 4px 4px 0; min-width: 2px; }
.dash-barra-fill.alerta { background: #dc3545; }
.dash-barra-val { color: #333; font-weight: 700; white-space: nowrap; }
.dash-barra:hover .dash-barra-fill { background: #a8160f; }
.dash-avisos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-avisos li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.dash-avisos li.aviso { background: #fff3cd; color: #5c3d00; }
.dash-avisos li.critico { background: #fdecea; color: #a01722; }
.dash-ok { display: flex; align-items: center; gap: 8px; color: #155724; font-weight: 700; }
.dash-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.dash-acceso { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 2px solid #ece4e4; border-radius: 12px; background: #fff; color: #840c06; font-weight: 800; font-size: 15px; cursor: pointer; }
.dash-acceso svg.lucide { width: 26px; height: 26px; }
.dash-acceso:hover, .dash-acceso:focus-visible { border-color: #840c06; background: #fdf1f0; }
@media (max-width: 768px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-tile strong { font-size: 24px; }
}

/* Cuenta del dueño: solo resumen (Caja hasta egresos, Panes resumen e historial) */
body.es-dueno .oculto-dueno { display: none !important; }

/* Íconos dentro de buscador, pasos del cierre, ventanas y avisos */
.buscador { position: relative; }
.buscador input { padding-left: 40px; }
.buscador .buscador-ico, .buscador svg.buscador-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #888; pointer-events: none; }
.paso-ico svg.lucide { width: 22px; height: 22px; color: #adb5bd; }
.paso-ico.ok svg.lucide { color: #28a745; }
.modal-icono svg.lucide { width: 44px; height: 44px; color: #840c06; }
.modal-success .modal-icono svg.lucide { color: #28a745; }
.modal-error .modal-icono svg.lucide { color: #dc3545; }
.modal-warning .modal-icono svg.lucide { color: #F4A300; }
.toast-icono svg.lucide { width: 20px; height: 20px; }
.toast-success .toast-icono { color: #28a745; }
.toast-error .toast-icono { color: #dc3545; }
.toast-warning .toast-icono { color: #F4A300; }
.toast-info .toast-icono { color: #17a2b8; }
.admin-tab svg.lucide { margin-right: 4px; }
.vacio svg.lucide { color: #F4A300; }

/* ---------- Página de pedidos: logo, promo, cantidades, avisos y barra del pedido ---------- */
.web-marca { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 8px; }
.web-marca h1 { margin: 0; }
.web-logo { width: 72px; height: 72px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }

.web-promo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 16px; border: 2px solid #F4A300; border-radius: 16px; background: #fff3cd; color: #5c3d00; }
.web-promo strong { display: block; font-size: 18px; line-height: 1.25; color: #840c06; }
.web-promo ul { margin: 4px 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; }
.web-promo b { color: #840c06; white-space: nowrap; }
.web-promo div > span { font-size: 14px; }
.web-promo-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #840c06; color: #fff; font-size: 22px; }

.web-item-desc { font-size: 15px; line-height: 1.4; color: #666; }
.web-item-dos { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: #155724; }
.web-item-accion { min-height: 44px; }
.web-paso { display: inline-flex; align-items: center; border: 2px solid #F4A300; border-radius: 24px; background: #fff3cd; color: #5c3d00; }
.web-paso button, .web-paso .web-agregar { display: grid; place-items: center; width: 44px; min-height: 40px; padding: 0; border: 0; border-radius: 24px; background: transparent; color: #5c3d00; font-size: 20px; cursor: pointer; }
.web-paso button:hover { background: #ffe8a1; }
.web-paso button:active { background: #F4A300; }
.web-paso button:focus-visible { outline: 4px solid #840c06; outline-offset: 2px; }
.web-paso-n { min-width: 32px; text-align: center; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.web-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.web-item-aviso { margin-top: 4px; color: #dc3545; font-size: 15px; font-weight: 700; }

.web-error-carrito:empty { min-height: 0; margin: 0; }
.web-error-carrito { margin-top: 8px; }
.web-horario-ayuda { margin-top: 8px; color: #5c3d00; font-size: 15px; font-weight: 700; }
.web-horario-ayuda:empty { display: none; }
.web-horario-ayuda a { color: #840c06; }
.web-olvidar { display: block; margin: 8px 0 0; padding: 8px 0; font-size: 14px; }
.web-olvidar[hidden] { display: none; }
#web-pedido-titulo { scroll-margin-top: 16px; }

.web-barra { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px 8px 8px; border-radius: 16px;
    background: #840c06; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
    animation: barra-sube .35s cubic-bezier(.16, 1, .3, 1); }
.web-barra[hidden] { display: none; }
.web-barra:focus-visible { outline: 4px solid #F4A300; outline-offset: 2px; }
.web-barra-n { padding: 8px 12px; border-radius: 12px; background: #F4A300; color: #5c3d00; font-size: 15px; font-weight: 800; white-space: nowrap; }
.web-barra-ver { flex: 1; font-size: 18px; font-weight: 800; }
.web-barra-total { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes barra-sube { from { transform: translateY(calc(100% + 24px)); } }

@media (max-width: 420px) {
    .web-marca { flex-direction: column; gap: 8px; }
    .web-logo { width: 56px; height: 56px; border-radius: 12px; }
    .web-barra-ver { font-size: 16px; }
}
@media (min-width: 1024px) {
    .web-barra { display: none; }   /* en PC el pedido ya está fijo a la derecha */
}
@media (prefers-reduced-motion: reduce) {
    .web-barra { animation: none; }
}

/* ---------- Páginas legales y aceptación en /pedir ---------- */
.web-acepto { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 12px; font-size: 16px; cursor: pointer; }
.web-acepto input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; accent-color: #840c06; }
.web-acepto a, .web-privacidad a { color: #840c06; font-weight: 700; }
.web-privacidad { font-size: 13px; }
.legal-links { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 14px; }
.legal-links a { font-weight: 600; }
.legal-links span { flex-basis: 100%; text-align: center; color: #666; font-size: 13px; }
.legal { background: #fff; border-radius: 14px; padding: 22px 20px; margin-bottom: 20px; line-height: 1.6; font-size: 17px; }
.legal h2 { font-size: 20px; margin: 26px 0 8px; }
.legal ul, .legal ol { padding-left: 22px; margin: 8px 0; }
.legal li { margin: 4px 0; }
.legal p { margin: 8px 0; }
.legal a:not(.btn) { color: #840c06; font-weight: 700; }
.legal-fecha { color: #666; font-size: 14px; }
.legal-aviso { font-size: 14px; color: #555; background: #fdf8f3; border-radius: 10px; padding: 10px 12px; }
.legal-btn { display: inline-block; text-decoration: none; margin: 6px 0; }
.legal-tabla { overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 8px; border-bottom: 1px solid #f0e6e6; }
.legal th { color: #840c06; }
.legal-pie { margin-top: 0; }
@media (max-width: 600px) {
    .legal table { min-width: 0; }
    .legal thead { display: none; }
    .legal tr, .legal td { display: block; }
    .legal tr { border-bottom: 1px solid #f0e6e6; padding: 8px 0; }
    .legal td { border: 0; padding: 3px 0; }
    .legal td::before { content: attr(data-l); display: block; color: #840c06; font-weight: 700; font-size: 13px; }
}

/* ---------- Inicio público (index.html) ---------- */
body.inicio { padding: 0; background: #fdf8f3; color: #2b0b07; }
.inicio ::selection { background: #F4A300; color: #2b0300; }
.inicio a:focus-visible { outline: 3px solid #F4A300; outline-offset: 3px; border-radius: 8px; }
.inicio h2 { color: #840c06; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }

.ini-hero { display: grid; grid-template-columns: 1fr; gap: 28px; padding: 28px 20px 0; background: #840c06; color: #fff; }
.ini-hero-texto { max-width: 560px; }
.ini-marca { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.ini-marca img { border-radius: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.ini-hero h1 { margin: 28px 0 18px; font-size: clamp(44px, 12vw, 84px); font-weight: 900; line-height: .95; letter-spacing: -0.035em; text-wrap: balance; }
.ini-estado { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, .22);
    font-weight: 700; font-size: 16px; }
.ini-punto { width: 10px; height: 10px; border-radius: 50%; background: #F4A300; }
.ini-estado.abierta .ini-punto { background: #5ee08a; }
.ini-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ini-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 14px;
    font-size: 19px; font-weight: 800; text-decoration: none; transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s; }
.ini-btn:active { transform: scale(.97); }
.ini-btn-pedir { background: #F4A300; color: #2b0300; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.ini-btn-pedir:hover { background: #ffb81f; }
.ini-btn-wa { color: #fff; border: 2px solid rgba(255, 255, 255, .7); }
.ini-btn-wa:hover { background: rgba(255, 255, 255, .12); }
.ini-modos { margin-top: 14px; color: #f7dcd9; font-size: 16px; }
/* la foto se monta sobre el borde del bloque bordó */
.ini-hero-foto { width: min(100%, 420px); height: auto; aspect-ratio: 1; justify-self: center; margin-bottom: -72px; border-radius: 24px;
    object-fit: cover; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); rotate: -2deg; animation: ini-asentar .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ini-asentar { from { rotate: -7deg; scale: 1.06; } }

.inicio main { padding: 104px 20px 8px; max-width: 1080px; margin: 0 auto; }
.inicio main > section { margin-bottom: 56px; }

.ini-promos { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 18px; background: #F4A300; color: #2b0300; }
.ini-promos[hidden] { display: none; }
.ini-promos > svg.lucide { width: 34px; height: 34px; color: #840c06; margin-top: 2px; }
.ini-promos h2 { font-size: 22px; }
.ini-promos ul { list-style: none; margin-top: 6px; font-size: 19px; font-weight: 700; }
.ini-promos b { font-variant-numeric: tabular-nums; }

.ini-carta-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ini-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #840c06; font-weight: 800; text-decoration: none; text-underline-offset: 4px; }
.ini-link:hover { text-decoration: underline; }
.ini-tira { display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 16px; list-style: none; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 4px 20px 18px; margin: 0 -20px; scrollbar-width: thin; scrollbar-color: #840c06 #f0e6e6; }
.ini-tira li { scroll-snap-align: start; }
.ini-lomo { display: flex; flex-direction: column; gap: 4px; height: 100%; color: inherit; text-decoration: none; }
.ini-lomo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; margin-bottom: 8px;
    box-shadow: 0 6px 16px rgba(60, 4, 2, .14); transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.ini-lomo:hover img { transform: translateY(-4px); }
.ini-lomo-nombre { font-size: 20px; font-weight: 800; color: #840c06; }
.ini-lomo-desc { font-size: 14px; color: #6b4a45; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ini-lomo-precio { margin-top: auto; padding-top: 4px; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.ini-tira-nota { color: #6b4a45; font-size: 16px; }

.ini-visita { display: grid; gap: 16px; }
.ini-bloque { padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 4px 14px rgba(60, 4, 2, .08); }
.ini-bloque h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.ini-dato { margin-top: 10px; font-size: 22px; font-weight: 800; }
.ini-sub { margin-top: 4px; color: #6b4a45; font-size: 16px; }
.ini-enlaces { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 12px; }
.ini-enlaces .ini-link { min-height: 44px; }
.ini-enlaces [hidden] { display: none; }

.ini-cierre { text-align: center; padding: 40px 20px; border-radius: 24px; background: #840c06; color: #f7dcd9; }
.ini-cierre h2 { color: #fff; font-size: 34px; margin-bottom: 20px; }
.ini-cierre p { margin-top: 14px; }

.inicio .web-pie { margin-top: 8px; }
.ini-equipo { font-weight: 600 !important; font-size: 14px; opacity: .75; }

@media (min-width: 760px) {
    .ini-hero { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; padding: 48px max(32px, calc((100vw - 1080px) / 2)) 56px; }
    .ini-hero-foto { margin-bottom: 0; width: 100%; max-width: 460px; }
    .inicio main { padding-top: 56px; }
    .ini-visita { grid-template-columns: 1fr 1fr; }
    .ini-tira { grid-auto-columns: 230px; }
}
@media (prefers-reduced-motion: reduce) {
    .ini-hero-foto { animation: none; }
    .ini-btn, .ini-lomo img { transition: none; }
}