/* ============================================================
   PWA FRUTOS SECOS — Estilos v0.2
   Paleta cálida: naranjo, ámbar, crema tostada
   ============================================================ */

:root {
  --naranjo:      #EA580C;
  --ambar:        #F59E0B;
  --crema:        #FFF4E0;
  --cascara:      #7C3F12;
  --blanco:       #FFFFFF;
  --verde-ok:     #16A34A;
  --rojo-alerta:  #DC2626;
  --sombra:       0 4px 14px rgba(124, 63, 18, 0.15);
  --radio:        18px;
}

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

body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--crema);
  color: var(--cascara);
  min-height: 100dvh;
}

/* ===== SISTEMA DE PANTALLAS ===== */
.pantalla { display: none; min-height: 100dvh; flex-direction: column; }
.pantalla.activa { display: flex; }
.oculto { display: none !important; }

/* ===== CABECERA INICIO ===== */
.topbar {
  background: linear-gradient(135deg, var(--naranjo), var(--ambar));
  padding: 20px 16px 26px;
  border-radius: 0 0 28px 28px;
  color: var(--blanco);
  box-shadow: var(--sombra);
}
.topbar-inner {
  display: flex; align-items: center; gap: 12px;
  max-width: 480px; margin: 0 auto;
}
.logo { font-size: 2.4rem; }
.topbar h1 { font-size: 1.4rem; font-weight: 800; }
.fecha { font-size: 0.85rem; opacity: 0.9; text-transform: capitalize; }

/* ===== BARRA DE MÓDULO ===== */
.barra-modulo {
  background: linear-gradient(135deg, var(--naranjo), var(--ambar));
  color: var(--blanco);
  padding: 14px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  box-shadow: var(--sombra);
  position: sticky; top: 0; z-index: 10;
}
.barra-modulo h2 { font-size: 1.05rem; font-weight: 800; }
.btn-volver {
  background: rgba(255,255,255,0.25); border: none; color: var(--blanco);
  font-size: 1.3rem; width: 40px; height: 40px; border-radius: 12px;
  cursor: pointer; font-family: inherit;
}
.btn-accion {
  background: var(--blanco); color: var(--naranjo); border: none;
  font-weight: 800; padding: 9px 14px; border-radius: 12px;
  cursor: pointer; font-family: inherit; font-size: 0.85rem;
}

/* ===== RESUMEN ===== */
.resumen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 480px; margin: -14px auto 0; padding: 0 16px;
}
.resumen-caja { margin: 14px auto 0; }
.resumen-card {
  background: var(--blanco); border-radius: var(--radio);
  padding: 12px 8px; text-align: center; box-shadow: var(--sombra);
}
.resumen-num { display: block; font-size: 1.6rem; font-weight: 800; }
.resumen-num.chico { font-size: 1.05rem; }
.resumen-label { font-size: 0.72rem; font-weight: 700; opacity: 0.75; }
.resumen-card.alerta .resumen-num { color: var(--rojo-alerta); }

/* ===== MENÚ INICIO ===== */
.menu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 480px; margin: 22px auto; padding: 0 16px; width: 100%;
}
.modulo {
  background: var(--blanco); border: none; border-radius: var(--radio);
  padding: 22px 14px; text-align: center; cursor: pointer;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px;
  font-family: inherit; color: var(--cascara); transition: transform 0.1s ease;
}
.modulo:active { transform: scale(0.96); }
.modulo:focus-visible, button:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.modulo-icono { font-size: 2.2rem; }
.modulo-titulo { font-size: 1rem; font-weight: 800; }
.modulo-desc { font-size: 0.78rem; opacity: 0.7; }

.pie { margin-top: auto; text-align: center; padding: 14px; font-size: 0.75rem; opacity: 0.55; }
.pie-link { color: inherit; text-decoration: none; font-weight: 700; }
.pie-link:active, .pie-link:hover { text-decoration: underline; color: var(--naranjo); }

/* ===== CONTENIDO DE MÓDULOS ===== */
.contenido {
  max-width: 480px; margin: 0 auto; width: 100%;
  padding: 16px 16px 40px;
  display: flex; flex-direction: column; gap: 12px;
}
.cargando { text-align: center; opacity: 0.6; padding: 20px; }

/* ===== TARJETAS Y FORMULARIOS ===== */
.tarjeta {
  background: var(--blanco); border-radius: var(--radio);
  padding: 14px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 8px;
}
.tarjeta h3 { font-size: 0.95rem; }
.etiqueta { font-size: 0.78rem; font-weight: 700; opacity: 0.75; }
.campo {
  width: 100%; padding: 12px; border: 2px solid #F3D9B8;
  border-radius: 12px; font-family: inherit; font-size: 1rem;
  color: var(--cascara); background: #FFFDF8;
}
.campo:focus { outline: none; border-color: var(--ambar); }
.check-linea { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; }
.check-linea input { width: 20px; height: 20px; accent-color: var(--naranjo); }

/* ===== BOTONES ===== */
.btn-principal {
  background: linear-gradient(135deg, var(--naranjo), var(--ambar));
  color: var(--blanco); border: none; border-radius: 14px;
  padding: 15px; font-size: 1.05rem; font-weight: 800;
  font-family: inherit; cursor: pointer; box-shadow: var(--sombra);
}
.btn-principal:active { transform: scale(0.98); }
.btn-secundario {
  background: #FFF1DE; color: var(--naranjo); border: 2px dashed var(--ambar);
  border-radius: 12px; padding: 10px; font-weight: 800;
  font-family: inherit; cursor: pointer; font-size: 0.9rem;
}

/* ===== CATÁLOGO ===== */
.prod-card {
  background: var(--blanco); border-radius: var(--radio);
  padding: 12px 14px; box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 10px;
}
.prod-card.inactivo { opacity: 0.5; }
.prod-info { flex: 1; }
.prod-nombre { font-weight: 800; font-size: 0.98rem; }
.prod-datos { font-size: 0.8rem; opacity: 0.75; }
.badge { padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.badge.ok      { background: #DCFCE7; color: var(--verde-ok); }
.badge.critico { background: #FEF3C7; color: #B45309; }
.badge.agotado { background: #FEE2E2; color: var(--rojo-alerta); }
.btn-editar {
  background: #FFF1DE; border: none; border-radius: 10px;
  padding: 8px 10px; cursor: pointer; font-size: 1rem;
}

/* ===== FILAS DEL PEDIDO ===== */
.fila-pedido {
  display: grid; grid-template-columns: 1fr 74px 34px;
  gap: 6px; align-items: center; margin-bottom: 6px;
}
.fila-pedido .subtotal {
  grid-column: 1 / -1; text-align: right;
  font-size: 0.8rem; font-weight: 700; opacity: 0.75;
}
.btn-quitar {
  background: #FEE2E2; color: var(--rojo-alerta); border: none;
  border-radius: 10px; height: 40px; cursor: pointer; font-weight: 800;
}
.total-box {
  flex-direction: row; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 1.05rem;
}
.total-monto { color: var(--naranjo); font-size: 1.4rem; }

/* ===== RUTA ===== */
.entrega-card {
  background: var(--blanco); border-radius: var(--radio);
  padding: 14px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 8px;
}
.entrega-card.en_ruta { border-left: 6px solid var(--ambar); }
.entrega-card.pendiente { border-left: 6px solid #D4D4D4; }
.entrega-cliente { font-weight: 800; }
.entrega-dir { font-size: 0.85rem; opacity: 0.8; }
.entrega-total { font-weight: 800; color: var(--naranjo); }
.entrega-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.entrega-botones button, .entrega-botones a {
  flex: 1; min-width: 90px; text-align: center; text-decoration: none;
  border: none; border-radius: 12px; padding: 11px 8px;
  font-weight: 800; font-size: 0.85rem; font-family: inherit; cursor: pointer;
}
.btn-mapa      { background: #DBEAFE; color: #1D4ED8; }
.btn-enruta    { background: #FEF3C7; color: #B45309; }
.btn-entregado { background: #DCFCE7; color: var(--verde-ok); }

/* ===== CAJA ===== */
.venta-card {
  background: var(--blanco); border-radius: var(--radio);
  padding: 12px 14px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 8px;
}
.venta-linea { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.venta-cliente { font-weight: 800; font-size: 0.95rem; }
.venta-monto { font-weight: 800; color: var(--naranjo); }
.venta-controles { display: flex; gap: 8px; align-items: center; }
.venta-controles select { flex: 1; }
.btn-pago {
  border: none; border-radius: 12px; padding: 10px 12px;
  font-weight: 800; font-family: inherit; cursor: pointer; font-size: 0.8rem;
  white-space: nowrap;
}
.btn-pago.pendiente { background: #FEE2E2; color: var(--rojo-alerta); }
.btn-pago.pagado    { background: #DCFCE7; color: var(--verde-ok); }
.desglose-linea {
  display: flex; justify-content: space-between;
  font-size: 0.88rem; font-weight: 700;
}

/* ===== MODAL ===== */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(60, 30, 5, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 50;
}
.modal {
  background: var(--blanco); border-radius: var(--radio);
  padding: 18px; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 90dvh; overflow-y: auto;
}
.modal-botones { display: flex; gap: 10px; margin-top: 6px; }
.modal-botones button { flex: 1; }

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--cascara); color: var(--blanco);
  padding: 12px 20px; border-radius: 999px; font-weight: 700;
  font-size: 0.9rem; box-shadow: var(--sombra); z-index: 99;
  max-width: 90vw; text-align: center;
}