/* estilos.css — estilos generales (movidos tal cual desde el index.html grande) */

/* ===== VARIABLES GLOBALES ===== */
:root {
    --chocolate-oscuro: #3D1F00;
    --chocolate-claro: #5A3A1A;
    --dulce-de-leche: #C68642;
    --crema-americana: #FFF8F0;
    --vainilla: #F5E6D3;
    --verde-menta: #00C48C;
    --fucsia: #E9407A;
    --amarillo-sol: #FFD700;
    --naranja: #FF6B35;
    --texto-principal: #2D1A0A;
    --texto-secundario: #6B4F3A;
    --blanco: #FFFFFF;
    --gris-claro: #f0f0f0;
    --gris-borde: #ddd;
    --rojo: #dc3545;
    --azul-info: #17a2b8;
}

/* ========== RESET Y BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}
body {
    background: var(--crema-americana);
    padding: 15px;
    min-height: 100vh;
    display: block;
}
.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* ========== PANTALLAS ========== */
/* ========== PANTALLAS ========== */
.pantalla { display: none; }
.pantalla.activa { 
    display: block;
    min-height: 100vh;
    width: 100%;
}
.panel {
    background: var(--blanco);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--vainilla);
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
}
#pantallaAdmin,
#pantallaRepartidor,
#pantallaDespacho,
#pantallaPanelAliado {
    width: 100%;
    max-width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

/* ========== TIPOGRAFÍA ========== */
h2 {
    color: var(--chocolate-oscuro);
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}
h3, h4 {
    color: var(--chocolate-oscuro);
    margin: 15px 0 10px;
}
.titulo-seccion {
    color: var(--chocolate-oscuro);
    font-size: 20px;
    font-weight: 700;
    border-bottom: 3px solid var(--dulce-de-leche);
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.subtitulo-seccion {
    color: var(--chocolate-claro);
    font-size: 16px;
    font-weight: 600;
    margin: 15px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========== FORMULARIOS ========== */
input, select, textarea {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 2px solid var(--vainilla);
    border-radius: 8px;
    font-size: 16px;
    transition: 0.2s;
    background: var(--blanco);
    color: var(--texto-principal);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--dulce-de-leche);
    outline: none;
    box-shadow: 0 0 0 3px rgba(198, 134, 66, 0.15);
}
.form-control {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--gris-borde);
    border-radius: 4px;
    margin: 2px 0;
}

/* ========== BOTONES - ESTILO UNIFICADO ========== */
button {
    background: var(--chocolate-claro);
    color: var(--blanco);
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    border: none;
    padding: 12px;
    margin: 8px 0;
    border-radius: 8px;
    font-size: 16px;
    width: auto;
}
button:hover:not(:disabled) {
    background: var(--chocolate-oscuro);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
button:active:not(:disabled) {
    transform: translateY(0);
}
button:disabled,
button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* VARIANTES DE BOTONES - SOLO CAMBIA EL COLOR DE FONDO */
.btn-secondary {
    background: #6c757d;
}
.btn-secondary:hover:not(:disabled) {
    background: #5a6268;
}
.btn-success {
    background: var(--verde-menta);
    color: var(--blanco);
}
.btn-success:hover:not(:disabled) {
    background: #00a87a;
}
.btn-aliado {
    background: var(--fucsia);
    color: var(--blanco);
}
.btn-aliado:hover:not(:disabled) {
    background: #d1306a;
}
.btn-peligro {
    background: var(--rojo);
    color: var(--blanco);
}
.btn-peligro:hover:not(:disabled) {
    background: #bd2130;
}
.btn-info {
    background: var(--azul-info);
    color: var(--blanco);
}
.btn-info:hover:not(:disabled) {
    background: #117a8b;
}
.btn-warning {
    background: var(--amarillo-sol);
    color: var(--chocolate-oscuro);
}
.btn-warning:hover:not(:disabled) {
    background: #e6c200;
}
/* ========== BOTÓN DE ACCIÓN DEL SISTEMA (ancho automático) ========== */
.btn-accion-sistema {
    width: auto !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px;
    transition: 0.2s;
}
.btn-accion-sistema:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-accion-sistema:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* BOTONES UNIFICADOS - PARA USO ESPECÍFICO */
.btn-unificado {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
}
.btn-unificado:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-unificado.naranja { background: var(--naranja); color: var(--blanco); }
.btn-unificado.naranja:hover:not(:disabled) { background: #e85a2a; }
.btn-unificado.verde { background: var(--verde-menta); color: var(--blanco); }
.btn-unificado.verde:hover:not(:disabled) { background: #00a87a; }
.btn-unificado.fucsia { background: var(--fucsia); color: var(--blanco); }
.btn-unificado.fucsia:hover:not(:disabled) { background: #d1306a; }
.btn-unificado.amarillo { background: var(--amarillo-sol); color: var(--chocolate-oscuro); }
.btn-unificado.amarillo:hover:not(:disabled) { background: #e6c200; }
.btn-unificado.chocolate { background: var(--chocolate-claro); color: var(--blanco); }
.btn-unificado.chocolate:hover:not(:disabled) { background: #4a2f14; }
.btn-unificado.dulce { background: var(--dulce-de-leche); color: var(--blanco); }
.btn-unificado.dulce:hover:not(:disabled) { background: #b5733a; }
.btn-unificado.ghost {
    background: transparent;
    color: var(--chocolate-claro);
    border: 2px solid var(--chocolate-claro);
}
.btn-unificado.ghost:hover:not(:disabled) {
    background: var(--chocolate-claro);
    color: var(--blanco);
}

/* BOTONES DE ACCIÓN PEQUEÑOS - PARA TABLAS Y LISTAS */
.btn-accion {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-size:14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    width: auto;
    margin: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-accion:hover:not(:disabled) {
    transform: scale(1.02);
    opacity: 0.9;
}
.btn-accion.verde { background: var(--verde-menta); color: var(--blanco); }
.btn-accion.azul { background: var(--azul-info); color: var(--blanco); }
.btn-accion.rojo { background: var(--rojo); color: var(--blanco); }
.btn-accion.gris { background: #6c757d; color: var(--blanco); }

/* ========== MAPA ========== */
#mapa {
    height: 400px;
    border-radius: 8px;
    border: 3px solid var(--chocolate-claro);
    margin: 15px 0;
}
#mapaEntregas {
    height: 500px;
    border: 2px solid var(--chocolate-claro);
    border-radius: 8px;
}

/* ========== ZONAS ========== */
.resultado-zona {
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}
.zona-oficial {
    background: #d4edda;
    border: 2px solid var(--verde-menta);
    color: #155724;
}
.zona-extra-activa {
    background: #fff3cd;
    border: 2px solid var(--amarillo-sol);
    color: #856404;
}
.fuera-zona {
    background: #e2e3e5;
    border: 2px solid #6c757d;
    color: #383d41;
}

/* ========== INFO BOX ========== */
.info-box {
    background: var(--vainilla);
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    font-size: 16px;
    border-left: 4px solid var(--dulce-de-leche);
}

/* ========== UTILIDADES ========== */
.oculto { display: none; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--texto-secundario); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { align-items: center; }
.flex-between { justify-content: space-between; }
.flex-end { justify-content: flex-end; }
.flex-grow { flex: 1; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.separador {
    border: none;
    border-top: 2px solid var(--vainilla);
    margin: 16px 0;
}
.separador-punteado {
    border: none;
    border-top: 2px dashed var(--vainilla);
    margin: 16px 0;
}

/* ========== GRIDS ========== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ========== PANEL UNIFICADO ========== */
.panel-unificado {
    background: var(--blanco);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    border: 1px solid var(--vainilla);
}

/* ========== TABLAS ========== */
.tabla-unificada {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border-radius: 10px;
    overflow: hidden;
}
.tabla-unificada thead th {
    background: var(--chocolate-claro);
    color: var(--blanco);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
}
.tabla-unificada tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--vainilla);
}
.tabla-unificada tbody tr:hover {
    background: #fdf6f0;
}
.tabla-unificada tbody tr:nth-child(even) {
    background: #fcf9f6;
}

/* ========== BADGES ========== */
.badge-unificado {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 20px;
    font-size:14px;
    font-weight: 600;
}
.badge-unificado.verde { background: #d4edda; color: #155724; }
.badge-unificado.rojo { background: #f8d7da; color: #721c24; }
.badge-unificado.amarillo { background: #fff3cd; color: #856404; }
.badge-unificado.azul { background: #cce5ff; color: #004085; }
.badge-unificado.gris { background: #e2e3e5; color: #383d41; }

/* ========== TARJETAS ========== */
.card-producto {
    background: var(--blanco);
    border: 2px solid var(--vainilla);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    transition: 0.2s;
}
.card-producto:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--dulce-de-leche);
}
.card-producto .card-header {
    background: #fdf6f0;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
}
.card-producto .card-header:hover {
    background: #f5ede4;
}
.card-producto .card-body {
    padding: 16px;
    border-top: 2px solid var(--vainilla);
}
.card-producto .card-body.oculto { display: none; }

/* ========== CARRITO ========== */
.bolsa {
    background: #f9f5f0;
    border: 2px solid var(--chocolate-claro);
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}
.bolsa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--vainilla);
}

/* ========== CARTAS ========== */
.cartas-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0;
}
.carta {
    width: 70px;
    height: 100px;
    background: var(--blanco);
    border: 3px solid var(--chocolate-claro);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.carta:hover:not(.deshabilitada) {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
.carta.volteada {
    background: var(--gris-claro);
    border-color: var(--dulce-de-leche);
    font-size: 14px;
    text-align: center;
    padding: 5px;
}
.carta.deshabilitada {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== PREMIOS ========== */
.premios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 12px;
    margin: 20px 0;
}
.premio-card {
    background: var(--blanco);
    border: 2px solid var(--vainilla);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: 0.2s;
}
.premio-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.premio-imagen { font-size: 40px; margin-bottom: 10px; }
.premio-nombre { font-weight: bold; margin: 5px 0; }
.premio-costo { color: var(--chocolate-claro); font-weight: bold; margin: 5px 0; }
.premio-stock { font-size:14px; color: #666; }
.premio-stock.agotado { color: var(--rojo); }
.puntos-faltantes { font-size:14px; color: #ff6f00; }
.btn-canje {
    background: var(--verde-menta);
    margin-top: 10px;
    color: var(--blanco);
}
.btn-canje.disabled {
    background: #6c757d;
    opacity: 0.6;
}

/* ========== PUNTOS Y NIVEL ========== */
.puntos-header {
    background: linear-gradient(135deg, var(--chocolate-claro), var(--dulce-de-leche));
    color: var(--blanco);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
}
.puntos-destacados {
    font-size: 32px;
    font-weight: bold;
    display: block;
}
.nivel-card {
    background: linear-gradient(135deg, var(--chocolate-claro), var(--dulce-de-leche));
    color: var(--blanco);
    padding: 20px;
    border-radius: 15px;
    margin: 15px 0;
}
.nivel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.nivel-icono { font-size: 40px; }
.nivel-beneficio { font-size: 16px; margin-bottom: 15px; }
.progreso-nivel {
    background: rgba(255,255,255,0.3);
    border-radius: 10px;
    padding: 10px;
}
.barra-progreso {
    height: 10px;
    background: rgba(255,255,255,0.3);
    border-radius: 5px;
    margin-bottom: 5px;
}
.progreso-lleno {
    height: 10px;
    background: var(--amarillo-sol);
    border-radius: 5px;
}

/* ========== COMERCIOS ========== */
.comercios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: 10px;
    margin: 15px 0;
}
.comercio-card {
    background: var(--blanco);
    border: 2px solid var(--fucsia);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
}
.comercio-logo { font-size: 40px; margin-bottom: 10px; }
.comercio-card h4 { margin: 5px 0; color: var(--fucsia); }
.comercio-card .beneficio {
    font-size:14px;
    color: var(--verde-menta);
    margin: 8px 0;
}

/* ========== CALENDARIO ========== */
.calendario-container {
    background: var(--blanco);
    border-radius: 20px;
    padding: 15px;
    margin: 15px 0;
}
.calendario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.calendario-mes {
    font-size: 18px;
    font-weight: bold;
    color: var(--chocolate-claro);
}
.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.calendario-dia {
    text-align: center;
    padding: 8px;
    border: 1px solid var(--gris-borde);
    border-radius: 5px;
    cursor: pointer;
}
.calendario-dia:hover { background: var(--vainilla); }
.calendario-dia.con-evento { background: #fff3cd; }
.evento-card {
    background: var(--blanco);
    border-left: 5px solid;
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.evento-oferta {
    background: #fff3cd;
    padding: 8px;
    border-radius: 5px;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

/* ========== MODALES ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal-card {
    background: var(--blanco);
    border-radius: 20px;
    padding: 20px;
    max-width: 90%;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.confirmacion-card {
    background: var(--blanco);
    border-radius: 20px;
    padding: 25px;
    max-width: 90%;
    width: 400px;
    text-align: center;
}
.confirmacion-card .mapa-mini {
    height: 200px;
    width: 100%;
    margin: 10px 0;
    border-radius: 10px;
    border: 2px solid var(--chocolate-claro);
}

/* ========== ADMIN ========== */
.admin-link {
    text-align: center;
    margin-top: 15px;
    color: var(--chocolate-claro);
    cursor: pointer;
    font-size: 14px;
}
.admin-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.admin-tab {
    flex: 1;
    padding: 10px;
    color: #3D1F00;
    background: var(--gris-claro);
    border: 1px solid var(--gris-borde);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    min-width: 80px;
}
.admin-tab.activo {
    background: var(--chocolate-claro);
    color: var(--blanco);
    border-color: var(--chocolate-claro);
}
.admin-item {
    background: #f9f9f9;
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
}
.admin-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.admin-item-header h4 { margin: 0; }
.admin-item-detalle {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--gris-borde);
}
.admin-item-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0;
}
.admin-item-campo {
    display: flex;
    flex-direction: column;
}
.admin-item-campo label {
    font-size:14px;
    color: #666;
    font-weight: bold;
    margin-bottom: 3px;
}

/* ========== DOMICILIOS ========== */
.domicilio-item {
    background: #fff9f0;
    border: 2px solid var(--vainilla);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: 0.2s;
}
.domicilio-item:hover {
    background: #f5ede4;
    transform: scale(1.02);
}
.domicilio-item strong {
    display: block;
    font-size: 16px;
    color: var(--chocolate-claro);
}
.domicilio-item .distancia {
    color: var(--dulce-de-leche);
    font-size:14px;
    display: block;
    margin: 5px 0;
}

/* ========== KANBAN ========== */
.kanban-board {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 0;
}
.kanban-col {
    min-width: 280px;
    background: #f4f4f4;
    border-radius: 12px;
    padding: 10px;
}
.kanban-col h4 {
    background: var(--chocolate-claro);
    color: var(--blanco);
    margin: -10px -10px 10px -10px;
    padding: 10px;
    border-radius: 12px 12px 0 0;
    text-align: center;
}
.kanban-card {
    background: var(--blanco);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: 0.2s;
}
.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.kanban-card .pedido-id {
    font-weight: bold;
    color: var(--chocolate-claro);
}

/* ========== SABORES ========== */
.sabores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin: 10px 0;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--vainilla);
    border-radius: 8px;
}
.sabor-btn {
    padding: 8px 4px;
    border: none;
    border-radius: 16px;
    color: var(--blanco);
    font-weight: bold;
    font-size:14px;
    cursor: pointer;
    text-align: center;
    transition: 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sabor-btn.seleccionado {
    box-shadow: 0 0 0 3px var(--amarillo-sol), 0 4px 8px rgba(0,0,0,0.3);
    transform: scale(1.02);
    border: 2px solid var(--blanco);
}

/* ========== STOCK ========== */
.stock-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 15px;
    margin-top: 20px;
}
.stock-card {
    background: var(--blanco);
    border: 2px solid var(--vainilla);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: 0.2s;
}
.stock-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.stock-card h4 {
    margin: 0 0 8px 0;
    color: var(--chocolate-claro);
    font-size: 18px;
}
.stock-critico { color: var(--rojo); font-weight: bold; }
.stock-normal { color: var(--verde-menta); }

/* ========== RESPONSIVE ========== */
@media screen and (max-width: 768px) {
    .kanban-board { flex-direction: column; }
    .kanban-col { min-width: auto; }
    .pedidos-table,
    .pedidos-table thead,
    .pedidos-table tbody,
    .pedidos-table tr,
    .pedidos-table th,
    .pedidos-table td {
        display: block;
    }
    .pedidos-table thead { display: none; }
    .pedidos-table tr {
        margin-bottom: 15px;
        border: 2px solid var(--chocolate-claro);
        border-radius: 10px;
        background: var(--blanco);
    }
    .pedidos-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
    }
    .pedidos-table td:last-child { border-bottom: none; }
    .pedidos-table td::before {
        content: attr(data-label);
        font-weight: bold;
        width: 40%;
        color: var(--chocolate-claro);
    }
}

/* ========== CELULAR: CAMPOS DENTRO DEL MARCO ========== */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { max-width: 100%; box-sizing: border-box; }
table.pedidos-table { display: block; max-width: 100%; overflow-x: auto; }
@media screen and (max-width: 480px) {
    .pantalla div[style*="grid-template-columns: 1fr 1fr"], .pantalla div[style*="grid-template-columns:1fr 1fr"], .pantalla div[style*="grid-template-columns: repeat(2"], .pantalla div[style*="grid-template-columns:repeat(2"] { grid-template-columns: 1fr !important; }
}

/* ========== CELULAR: MIS PEDIDOS ========== */
@media screen and (max-width: 480px) {
    #pantallaMisPedidos { padding: 8px !important; }
    #pantallaMisPedidos > div { padding: 12px !important; }
    #listaPedidosCliente { padding: 6px !important; border-width: 2px !important; }
    #listaPedidosCliente > div { overflow: visible !important; }
    #listaPedidosCliente table, #listaPedidosCliente tbody { display: block !important; width: 100% !important; min-width: 0 !important; }
    #listaPedidosCliente thead { display: none !important; }
    #listaPedidosCliente tr { display: grid !important; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 10px 8px; border-bottom: 1px solid #eee; }
    #listaPedidosCliente td { display: block !important; border: none !important; padding: 2px !important; text-align: left !important; }
    #listaPedidosCliente td:nth-child(2), #listaPedidosCliente td:nth-child(4) { text-align: right !important; }
    #listaPedidosCliente td:last-child { grid-column: 1 / -1; text-align: right !important; }
    #listaPedidosCliente td span { white-space: normal !important; }
    #listaPedidosCliente td:nth-child(5):not(:last-child)::before { content: '⭐ '; }
}

/* ========== PEDIDOS TABLE HEADER ========== */
.pedidos-table thead {
    display: table-header-group !important;
    background-color: var(--chocolate-claro) !important;
    color: var(--blanco) !important;
}
.pedidos-table th {
    padding: 10px !important;
    border: 1px solid var(--gris-borde) !important;
}

/* ========== CLIENTES ADMIN TABLE ========== */
#clientesContainer table {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanco);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    table-layout: fixed;
}
#clientesContainer th {
    background: var(--chocolate-claro);
    color: var(--blanco);
    padding: 10px;
    text-align: left;
    font-weight: bold;
    border-right: 1px solid #a0522d;
}
#clientesContainer th:last-child { border-right: none; }
#clientesContainer td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #f0f0f0;
    vertical-align: middle;
    word-break: break-word;
}
#clientesContainer td:last-child { border-right: none; }
#clientesContainer tr:hover { background: #f5f5f5; }
#clientesContainer th:nth-child(1) { width: 15%; }
#clientesContainer th:nth-child(2) { width: 12%; }
#clientesContainer th:nth-child(3) { width: 8%; }
#clientesContainer th:nth-child(4) { width: 8%; }
#clientesContainer th:nth-child(5) { width: 8%; }
#clientesContainer th:nth-child(6) { width: 8%; }
#clientesContainer th:nth-child(7) { width: 20%; }
#clientesContainer th:nth-child(8) { width: 21%; }

/* ========== ALIADOS ADMIN ========== */
#listaAliadosAdmin {
    min-height: auto;
    border: none;
    background: transparent;
    padding: 0;
}
#listaAliadosAdmin .mensaje-carga {
    border: none !important;
    background: transparent !important;
    color: #666;
    padding: 20px;
    text-align: center;
}
.contenedor-aliados {
    display: grid;
    gap: 15px;
    margin-top: 15px;
}
#adminAliados .contenedor-aliados > div {
    border: 2px solid var(--fucsia) !important;
    background: var(--blanco) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* ========== ADMIN TABS CONTENIDO ========== */
.admin-tab-contenido {
    display: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
.admin-tab-contenido[style*="display: block"] { display: block !important; }

/* ========== INSUMOS ========== */
.categoria-header { color: var(--blanco) !important; }
.categoria-header button,
.categoria-header .btn-nuevo-insumo,
.categoria-header .btn-editar {
    background: var(--amarillo-sol) !important;
    color: black !important;
    border: none !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}
.categoria-header button:hover { background: #e0a800 !important; }
.tabla-insumos th {
    background: var(--gris-claro) !important;
    color: #333 !important;
}
.btn-ajuste,
.btn-historial,
.btn-editar {
    background: var(--verde-menta) !important;
    color: var(--blanco) !important;
}
.btn-historial { background: var(--azul-info) !important; }

/* ========== PRODUCTOS ========== */
.btn-producto {
    min-width: 150px !important;
    max-width: 220px !important;
    width: auto !important;
    padding: 12px 8px !important;
    margin: 8px !important;
    font-size: 16px !important;
    border-radius: 32px !important;
    border: none !important;
    color: var(--blanco) !important;
    font-weight: bold !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}
.btn-producto:hover { transform: scale(1.02); opacity: 0.9; }
.btn-pote { background: #e67e22 !important; }
.btn-extra { background: #3498db !important; }
.btn-toppin { background: #f1c40f !important; color: #333 !important; }
.btn-exclusivo { background: #e74c3c !important; }
.btn-mostrador { background: #95a5a6 !important; }

/* ========== GANANCIAS ========== */
#gananciasContainer table {
    width: 100%;
    font-size:14px;
    border-collapse: collapse;
}
#gananciasContainer th,
#gananciasContainer td {
    padding: 6px 4px;
    vertical-align: middle;
}
#gananciasContainer th {
    background-color: var(--chocolate-claro);
    color: var(--blanco);
    text-align: center;
    font-size:14px;
}
#gananciasContainer td:first-child,
#gananciasContainer td:nth-child(2) { text-align: left; }
#gananciasContainer td:nth-child(3),
#gananciasContainer td:nth-child(4),
#gananciasContainer td:nth-child(5),
#gananciasContainer td:nth-child(6),
#gananciasContainer td:nth-child(7),
#gananciasContainer td:nth-child(8) { text-align: right; }
@media screen and (max-width: 800px) {
    #gananciasContainer { overflow-x: auto; }
    #gananciasContainer table { min-width: 700px; }
}

/* ========== ADMIN MAIN TABS ========== */
.admin-main-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.admin-main-tab {
    padding: 10px 20px;
    background: var(--gris-claro);
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    transition: 0.2s;
}
.admin-main-tab.activo {
    background: var(--chocolate-claro);
    color: var(--blanco);
    border-color: var(--chocolate-claro);
}
.admin-sub-tabs { margin-bottom: 20px; }
.admin-sub-tab-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.admin-sub-tab {
    padding: 6px 14px;
    background: #e9ecef;
    border: 1px solid #ccc;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}
.admin-sub-tab.activo {
    background: var(--chocolate-claro);
    color: var(--blanco);
    border-color: var(--chocolate-claro);
}
.admin-sub-tab:hover { background: #d0d0d0; }

/* ========== ESTADO BOTON ========== */
.estado-boton {
    padding: 4px 8px;
    margin: 2px;
    border: none;
    border-radius: 12px;
    font-size:14px;
    font-weight: bold;
    cursor: pointer;
    background: var(--gris-claro);
    color: #333;
}
.estado-boton.activo {
    background: var(--verde-menta);
    color: var(--blanco);
}
.estado-boton.cancelar {
    background: var(--rojo);
    color: var(--blanco);
}

/* ========== VARIOS ========== */
.deuda-info {
    color: var(--rojo);
    font-weight: bold;
    background: #ffe6e6;
    padding: 2px 6px;
    border-radius: 12px;
    font-size:14px;
    margin-left: 5px;
}
.resultado-busqueda {
    background: #f9f9f9;
    border: 1px solid var(--gris-borde);
    border-radius: 5px;
    padding: 8px;
    margin: 5px 0;
    cursor: pointer;
}
.resultado-busqueda:hover { background: #e0e0e0; }
.btn-reservar {
    width: auto;
    padding: 5px 10px;
    font-size:14px;
    margin: 0;
}
.sin-eventos {
    text-align: center;
    color: #999;
    padding: 20px;
}
.repartidor-selector {
    width: 100%;
    padding: 4px;
    border: 1px solid var(--chocolate-claro);
    border-radius: 4px;
}
.pagado-check,
.rendido-check {
    transform: scale(1.2);
    margin-right: 5px;
}
input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
.pedido-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--blanco) !important;
    font-weight: bold !important;
    font-size:14px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}
.producto-extra {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 4px 8px;
    margin: 4px 0;
    font-weight: bold;
    list-style: none;
}
.vuelto-destacado {
    background-color: #d4edda;
    border: 2px solid #28a745;
    border-radius: 8px;
    padding: 6px 12px;
    margin: 8px 0;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    color: #155724;
}
.btn-flecha {
    background-color: #6c757d;
    color: var(--blanco);
    border: none;
    border-radius: 5px;
    font-size: 14px;
    padding: 2px 8px;
    width: auto;
    cursor: pointer;
    transition: 0.2s;
}
.btn-flecha:hover:not(:disabled) { background-color: #5a6268; }
.btn-flecha:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.tiempo-control {
    border-top: 1px dashed #ccc;
    padding-top: 5px;
    margin-top: 5px;
}
#temporizador {
    font-size: 40px;
    font-weight: bold;
    color: #3D1F00;
    background: #FFF8F0;
    border: 3px solid #C68642;
    border-radius: 12px;
    padding: 20px;
    margin: 20px auto;
    text-align: center;
    letter-spacing: 3px;
    max-width: 220px;
    font-family: 'Courier New', monospace;
    box-shadow: 0 4px 12px rgba(198,134,66,0.2);
}.etiqueta-pote {
    background-color: var(--azul-info);
    color: var(--blanco);
    padding: 2px 6px;
    border-radius: 12px;
    font-size:14px;
    margin-left: 5px;
}
/* ===== ACCESIBILIDAD: SUBIR TAMAÑO DE FUENTE GENERAL ===== */
/* Los usuarios tienen 40+ años con presbicia. Tamaño base más grande. */

/* ===== SUBIR TAMAÑO EN TABLAS (Sabores, Productos, Insumos) ===== */
.tabla-sabores,
.tabla-productos,
.tabla-insumos {
    font-size: 17px;
}
.tabla-sabores th,
.tabla-productos th,
.tabla-insumos th {
    font-size: 17px;
    padding: 10px 8px;
}
.tabla-sabores td,
.tabla-productos td,
.tabla-insumos td {
    font-size: 17px;
    padding: 10px 8px;
}
.tabla-sabores .foto-mini,
.tabla-productos .foto-mini {
    width: 44px;
    height: 44px;
}

/* ===== SUBIR TAMAÑO DE INPUTS EN TABLAS ===== */
.tabla-sabores input,
.tabla-productos input,
.tabla-insumos input,
.tabla-sabores select,
.tabla-productos select,
.tabla-insumos select {
    font-size: 16px;
}
.tabla-sabores input.ajuste-latas {
    font-size: 16px;
    width: 90px;
}
.tabla-sabores select.motivo {
    font-size: 15px;
    width: 150px;
}

/* ===== BOTONES DE ACCIÓN EN TABLAS MÁS GRANDES ===== */
.tabla-sabores .btn-accion-tabla,
.tabla-productos .btn-accion-tabla,
.tabla-insumos .btn-accion-tabla {
    width: 38px;
    height: 38px;
    font-size: 18px;
}

/* ===== SUBIR TAMAÑO GENERAL EN EL RESTO DEL SISTEMA ===== */
/* Aplica a etiquetas genéricas que hoy están en 13 o 14px y se ven chicas */
.admin-item-campo label,
.admin-item-campo input,
.admin-item-campo select {
    font-size: 15px;
}
.admin-item-campo label {
    font-size:14px;
}

/* Formularios generales */
.form-control {
    font-size: 16px;
    padding: 10px;
}

/* Textos secundarios que se ven muy chicos */
.info-box {
    font-size: 16px;
}

/* Subtítulos */
.subtitulo-seccion {
    font-size: 17px;
}

/* En el celular, subir aún más el tamaño */
@media (max-width: 600px) {
    body {
        font-size: 17px;
    }
    .tabla-sabores,
    .tabla-productos,
    .tabla-insumos,
    .tabla-sabores th,
    .tabla-productos th,
    .tabla-insumos th,
    .tabla-sabores td,
    .tabla-productos td,
    .tabla-insumos td {
        font-size: 18px;
    }
    .tabla-sabores .btn-accion-tabla,
    .tabla-productos .btn-accion-tabla,
    .tabla-insumos .btn-accion-tabla {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
}

/* ══════════════════════════════════════════════════════════════
   TAMAÑOS: ningún botón ocupa el ancho de la columna y cada campo mide según lo que lleva.
   width: fit-content evita además que los contenedores flex/grid estiren al elemento.
   (Las reglas con [style*=...] pisan los width:100% / flex:1 escritos a mano en cada pantalla.)
   ══════════════════════════════════════════════════════════════ */
button, input[type="button"], input[type="submit"], a[class*="btn"] { width: fit-content; max-width: 100%; }
button[style*="width:100%"], button[style*="width: 100%"], button[style*="width:100% "],
input[type="button"][style*="width:100%"], input[type="button"][style*="width: 100%"],
input[type="submit"][style*="width:100%"], input[type="submit"][style*="width: 100%"],
a[class*="btn"][style*="width:100%"], a[class*="btn"][style*="width: 100%"] { width: fit-content !important; }
button[style*="flex:"], button[style*="flex: "], button[style*="flex-grow"], button[style*="flex-basis"] { flex: 0 0 auto !important; }

/* ══════════════════════════════════════════════════════════════
   BOTONES PAREJOS (criterio de diseño)
   • Ningún botón ocupa el ancho de la columna.
   • Todos los botones de acción usan la misma letra, el mismo alto y el mismo relleno.
   • Los botones de un mismo grupo tienen además el mismo ancho (lo ajusta botonesParejos()).
   • En tablas, una versión más chica pero igual entre sí.
   ══════════════════════════════════════════════════════════════ */
.btn-success, .btn-secondary, .btn-info, .btn-peligro, .btn-warning, .btn-danger, .btn-primary, .btn-accion-sistema {
    font-size: 15px !important; padding: 10px 18px !important; min-height: 42px; line-height: 1.25 !important;
    font-weight: bold !important; border-radius: 8px !important; box-sizing: border-box; text-align: center !important; justify-content: center !important;
}
td .btn-success, td .btn-secondary, td .btn-info, td .btn-peligro, td .btn-warning, td .btn-danger, td .btn-primary, td .btn-accion-sistema {
    font-size: 13px !important; padding: 6px 10px !important; min-height: 32px;
}
/* Pestañas principales del panel: todas del mismo ancho */
.admin-main-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.admin-main-tab { display: flex; align-items: center; justify-content: center; padding: 10px 8px; min-height: 44px; }
/* Menú del cliente: botones del mismo tamaño; COMPRAR ocupa el ancho de dos */
.menu-cliente { --mc-gap: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mc-gap);
    width: 100%; max-width: 332px; margin: 0 auto; }
.menu-cliente .mc-btn { width: calc((100% - var(--mc-gap)) / 2) !important; height: 104px; padding: 10px; border: none; border-radius: 14px; color: #fff;
    font-size: 16px; font-weight: bold; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform .2s, box-shadow .2s; }
.menu-cliente .mc-btn .mc-ico { font-size: 34px; line-height: 1; }
.menu-cliente .mc-comprar { width: 100% !important; flex-direction: row; gap: 14px; background: #00C48C;
    font-size: 24px; box-shadow: 0 4px 14px rgba(0,196,140,0.35); }
.menu-cliente .mc-comprar .mc-ico { font-size: 40px; }
.menu-cliente .mc-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
@media screen and (max-width: 380px) { .menu-cliente { --mc-gap: 10px; } .menu-cliente .mc-btn { font-size: 14px; } }

/* Sub-pestañas de Marketing: mismo aspecto que las demás sub-pestañas del panel */
#adminMarketing .admin-tab { flex: 0 0 auto; min-width: 0; padding: 6px 14px; border-radius: 20px; font-size: 14px; background: #e9ecef; border: 1px solid #ccc; color: #3D1F00; }
#adminMarketing .admin-tab.activo { background: var(--chocolate-claro); color: var(--blanco); border-color: var(--chocolate-claro); }
#adminNotificaciones .admin-tab { flex: 0 0 auto; min-width: 0; padding: 6px 14px; border-radius: 20px; font-size: 14px; background: #e9ecef; border: 1px solid #ccc; color: #3D1F00; }
#adminNotificaciones .admin-tab.activo { background: var(--chocolate-claro); color: var(--blanco); border-color: var(--chocolate-claro); }
/* Campos: tamaño según el tipo de dato */
input, select, textarea, .form-control { max-width: 100%; box-sizing: border-box; }
input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="url"] { width: 30ch; }
input[type="number"] { width: 11ch; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { width: auto; }
input[type="checkbox"], input[type="radio"] { width: auto; }
select { width: auto; }
textarea, .campo-texto-largo { width: 60ch; }
textarea.campo-texto-largo { padding: 10px; border: 2px solid #d4c5b5; border-radius: 8px; font-size: 16px; }
/* Los width:100% escritos a mano en campos se reemplazan por el tamaño del tipo */
input[style*="width:100%"], input[style*="width: 100%"], .form-control[style*="width:100%"], .form-control[style*="width: 100%"] { width: 30ch !important; }
input[type="number"][style*="width:100%"], input[type="number"][style*="width: 100%"] { width: 11ch !important; }
input[type="date"][style*="width:100%"], input[type="date"][style*="width: 100%"], input[type="time"][style*="width:100%"], input[type="time"][style*="width: 100%"], input[type="datetime-local"][style*="width:100%"], input[type="datetime-local"][style*="width: 100%"] { width: auto !important; }
select[style*="width:100%"], select[style*="width: 100%"] { width: auto !important; }
textarea[style*="width:100%"], textarea[style*="width: 100%"] { width: 60ch !important; }
input[style*="flex:1"], input[style*="flex: 1"], select[style*="flex:1"], select[style*="flex: 1"] { flex: 0 1 auto !important; }

/* Celular: pestañas del administrador en grilla compacta de 3 columnas */
@media screen and (max-width: 600px) {
    .admin-main-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .admin-main-tab { padding: 8px 4px; font-size: 13px; line-height: 1.2; display: flex; align-items: center; justify-content: center; min-height: 44px; }
    .admin-sub-tab { padding: 6px 10px; font-size: 13px; }
}

body.mod-off-preguntasClientes .admin-sub-tab[data-tab="preguntas"] { display: none !important; }
/* ===== Módulos apagados: ocultar lo que depende de cada uno ===== */
body.mod-off-despacho button[onclick*="elegirRolEquipo('despacho')"], body.mod-off-despacho option[value="despacho"],
body.mod-off-reparto button[onclick*="elegirRolEquipo('repartidor')"], body.mod-off-reparto option[value="repartidor"],
body.mod-off-reparto .admin-sub-tab[data-tab="repartidores"], body.mod-off-reparto #adminTabTandasBtn,
body.mod-off-aliados button[onclick="mostrarLoginAliado()"], body.mod-off-aliados .admin-sub-tab[data-tab="aliados"],
body.mod-off-comunidad .admin-sub-tab[data-tab="comercios"],
body.mod-off-tareasEquipo .modulo-tareas-equipo, body.mod-off-tareasEquipo #tabMisTareas, body.mod-off-tareasEquipo #contenidoMisTareas,
body.mod-off-notificaciones button[onclick="mostrarEnviarNotificacion()"], body.mod-off-notificaciones #btnReenviarNotificacion,
body.mod-off-marketing .admin-main-tab[data-main="marketing"],
body.mod-off-promociones #subTabCampañas, body.mod-off-analisis #subTabAnalisis,
body.mod-off-puntos #subTabPuntos, body.mod-off-juegos #subTabJuegos { display: none !important; }

/* Excepción: botones que son CELDAS de una grilla (días del calendario, sabores, tarjetas de rol) llenan su casillero */
button.in-dia, button[class*="sabor-btn"], button.admin-sabor-btn-grande, button[onclick^="elegirRolEquipo"], .tu-tiles > button { width: auto !important; }