:root {
  /* Marca Web Ideas Factory */
  --azul: #087cf8;
  --azul-claro: #8fc3fc;
  --cyan: #13cbea;
  --navy: #050b24;
  --navy-suave: #0c1e42;
  --gradiente-marca: linear-gradient(135deg, var(--azul), var(--cyan));

  --verde: #16a34a;
  --rojo: #dc2626;
  --naranja: #c2410c;
  --fondo: #f4f5f7;
  --borde: #e3e5ea;
  --texto: #1b1f27;
  --texto-suave: #6b7280;
  --blanco: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

#app { max-width: 720px; margin: 0 auto; padding-bottom: 90px; min-height: 100vh; background: var(--fondo); }

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  padding: 14px 20px;
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca-logo { height: 32px; width: auto; display: block; }
header.topbar h1 { font-size: 1.1em; margin: 0; color: var(--blanco); font-weight: 700; }
.usuario-chip { display: flex; align-items: center; gap: 6px; color: #b8c4d6; font-size: 0.9em; }
.punto { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #b8c4d6; display: inline-block; }
.punto.activo { background: var(--cyan); border-color: var(--cyan); }

main { padding: 16px 20px; }

.toast {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: #e8f8ee; color: #166534; text-align: center;
  padding: 10px; font-weight: 600; font-size: 0.95em;
  animation: desvanecer 2.2s forwards;
}
@keyframes desvanecer { 0%,70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

.card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.card h2 { font-size: 0.8em; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 10px; }
.card-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.card-row + .card-row { border-top: 1px solid var(--borde); }
.card-row .label { color: var(--texto); }
.card-row .valor { font-weight: 700; font-size: 1.1em; }
.card .nota { font-size: 0.78em; color: var(--texto-suave); margin-top: 6px; }

input[type=text], input[type=number], input[type=tel], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  font-size: 1em;
  background: var(--blanco);
  color: var(--texto);
  font-family: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }
label.campo { display: block; font-size: 0.85em; color: var(--texto-suave); margin-bottom: 6px; margin-top: 12px; }
label.campo:first-child { margin-top: 0; }

.fila-busqueda { display: flex; gap: 10px; margin-bottom: 12px; }
.fila-busqueda input { flex: 1; }
.btn-icono {
  width: 48px; flex-shrink: 0; border: 1px solid var(--borde); background: var(--blanco);
  border-radius: 10px; font-size: 1.1em; cursor: pointer;
}

button { font-family: inherit; cursor: pointer; }
.btn {
  display: block; width: 100%; padding: 14px; border-radius: 10px; border: 1px solid var(--borde);
  background: var(--blanco); color: var(--texto); font-size: 1em; font-weight: 600; text-align: center;
}
.btn:active { transform: scale(.99); }
.btn.primario { background: var(--gradiente-marca); border-color: var(--azul); color: #fff; }
.btn.primario:disabled { background: var(--azul-claro); border-color: var(--azul-claro); cursor: not-allowed; }
.btn.suave { background: var(--blanco); color: var(--azul); border-color: var(--borde); }
.btn.peligro { color: var(--rojo); }
.fila-botones { display: flex; gap: 10px; }
.fila-botones .btn { flex: 1; }

.lista-item {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
}

/* Lista de productos ya agregados dentro de un modal (Cargar compra, Contar la góndola):
   altura fija con scroll propio, para que crezca sin empujar el resto del modal fuera de
   vista ni perder de vista los productos ya cargados al seguir agregando más. Margen propio
   arriba y abajo (separado de lo que esté antes o después, como las sugerencias de búsqueda).
   Cada línea (.carrito-linea) ya tiene su propio recuadro con borde, así que acá no hace
   falta nada más para que no se confunda un clic con el del producto de arriba. */
.lista-scroll {
  max-height: 230px;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 8px;
  margin: 14px 0;
}
.lista-item .nombre { font-weight: 600; }
.lista-item .detalle { font-size: 0.82em; color: var(--texto-suave); margin-top: 2px; }
.lista-item .detalle.alerta { color: var(--naranja); }
.lista-item .detalle.negativo { color: var(--rojo); }
.lista-item .precio { font-weight: 700; white-space: nowrap; }

.vacio { text-align: center; color: var(--texto-suave); padding: 30px 10px; font-size: 0.95em; }

.carrito {
  position: fixed; bottom: 60px; left: 0; right: 0;
  max-width: 720px; margin: 0 auto;
  background: var(--blanco); border-top: 1px solid var(--borde);
  padding: 14px 20px; max-height: 45vh; overflow-y: auto;
}
.carrito-linea {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
}
.carrito-linea:last-child { margin-bottom: 0; }
.carrito-linea .info { flex: 1; min-width: 0; }
.carrito-linea .info .n { font-weight: 600; }
.carrito-linea .info .p { color: var(--texto-suave); font-size: 0.85em; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--borde); background: var(--blanco); font-size: 1.1em;
}
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper .cant { width: 30px; text-align: center; font-weight: 600; }
.carrito-linea .subtotal { width: 80px; text-align: right; font-weight: 700; }
.carrito-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 4px; font-size: 1.05em; }
.carrito-total .n { font-weight: 800; font-size: 1.25em; }
.aviso-stock { font-size: 0.78em; color: var(--naranja); margin-top: -4px; margin-bottom: 6px; }

nav.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; max-width: 720px; margin: 0 auto;
  display: flex; background: var(--navy);
  z-index: 50;
}
nav.tabs button {
  flex: 1; background: none; border: none; padding: 8px 4px 10px; text-align: center; color: #7c8aa8;
  font-size: 0.78em; border-top: 2px solid transparent;
}
nav.tabs button .ic { display: block; font-size: 1.3em; margin-bottom: 2px; }
nav.tabs button.activo { color: var(--cyan); border-top-color: var(--cyan); font-weight: 600; }

.overlay {
  position: fixed; inset: 0; background: rgba(15,18,25,.45);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: var(--blanco); border-radius: 16px; padding: 22px; width: 100%; max-width: 440px;
  max-height: 88vh; overflow-y: auto;
}
.modal h2 { margin: 0 0 14px; font-size: 1.15em; }
.modal .cerrar-x { float: right; background: none; border: none; font-size: 1.3em; color: var(--texto-suave); }

.login-overlay {
  position: fixed; inset: 0; background: var(--fondo); display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-card { background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px; padding: 26px; max-width: 420px; width: 100%; }
.login-logo { height: 52px; width: auto; display: block; margin: 0 auto 16px; }
.login-card h2 { margin: 0 0 6px; }
.login-card p { color: var(--texto-suave); font-size: 0.9em; margin: 0 0 16px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  padding: 9px 14px; border-radius: 20px; border: 1px solid var(--borde); background: var(--blanco);
  font-size: 0.92em; color: var(--texto);
}
.chip.activo { background: var(--azul); border-color: var(--azul); color: #fff; }

.ganancia-pill { color: var(--verde); font-weight: 700; }
.pill-pct { color: var(--texto-suave); font-weight: 500; font-size: 0.85em; }

.checkbox-row { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; }
.checkbox-row input { width: auto; margin-top: 3px; }
.checkbox-row .txt b { display: block; }
.checkbox-row .txt span { font-size: 0.82em; color: var(--texto-suave); }

.dos-col { display: flex; gap: 10px; }
.dos-col > div { flex: 1; }

@media (max-width: 480px) {
  header.topbar, main { padding-left: 14px; padding-right: 14px; }
  .carrito { padding-left: 14px; padding-right: 14px; }
}