/* ═══════════════════════════════════════════════════════════════════════════
   APP DEL VENDEDOR (vendedor-app.js)
   Pantalla completa con barra abajo. Todo vive bajo #vapp para no tocar el
   resto de la web. Una sola paleta, la de la marca: crema, tinta cálida y
   dorado de acento; verde/ámbar/rojo SOLO para el estado de cobro.
   ═══════════════════════════════════════════════════════════════════════════ */
#vapp {
  --va-bg: #F6F1E6;
  --va-card: #FFFFFF;
  --va-ink: #1C1A17;
  --va-muted: #776F63;
  --va-faint: #A39A8C;
  --va-line: #ECE3D0;
  --va-gold: #B8913F;
  --va-gold-deep: #8C6A26;
  --va-gold-soft: #F4EAD2;
  --va-dark: #1A1712;
  --va-dark-2: #2A251C;
  --va-green: #2F7D4F;
  --va-green-soft: #E5F2EA;
  --va-amber: #A86A12;
  --va-amber-soft: #FBF0DC;
  --va-red: #B3412E;
  --va-red-soft: #FBE7E2;
  --va-wa: #1FAF54;
  --va-radius: 16px;
  --va-serif: 'Playfair Display', Georgia, serif;
  --va-sans: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  position: fixed; inset: 0; z-index: 10050;
  display: none;
  background: #0f0d0a;
  color: var(--va-ink);
  font-family: var(--va-sans);
  -webkit-font-smoothing: antialiased;
}
#vapp.abierta { display: flex; justify-content: center; }
#vapp *, #vapp *::before, #vapp *::after { box-sizing: border-box; }
#vapp button { font-family: inherit; cursor: pointer; }
#vapp :focus-visible { outline: 2px solid var(--va-gold); outline-offset: 2px; border-radius: 8px; }
html.vapp-abierta, html.vapp-abierta body { overflow: hidden !important; }

/* El marco: en el celular ocupa todo; en la computadora, un teléfono centrado. */
.va-marco {
  position: relative; width: 100%; max-width: 520px; height: 100%;
  background: var(--va-bg);
  display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 640px) {
  #vapp.abierta { align-items: center; }
  .va-marco { height: min(100%, 940px); border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
}

/* ── Encabezado ── */
.va-cab {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 18px 12px;
  background: var(--va-bg);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.va-cab.con-borde { border-bottom-color: var(--va-line); }
.va-cab-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--va-dark); display: grid; place-items: center; flex: none; overflow: hidden; }
.va-cab-logo img { width: 26px; height: 26px; object-fit: contain; }
.va-cab-txt { flex: 1; min-width: 0; }
.va-cab-titulo { font-family: var(--va-serif); font-size: 1.22rem; font-weight: 700; line-height: 1.15; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-cab-sub { font-size: .74rem; color: var(--va-muted); margin-top: 1px; letter-spacing: .02em; }
.va-icono-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--va-line); background: var(--va-card);
  color: var(--va-ink); display: grid; place-items: center; font-size: 1rem; flex: none;
}
.va-icono-btn:active { transform: scale(.96); }

/* ── Contenido que se desliza ── */
.va-cuerpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(96px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.va-vista { display: none; animation: va-entra .22s ease; }
.va-vista.activa { display: block; }
@keyframes va-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .va-vista, .va-hoja, .va-fondo { animation: none !important; transition: none !important; } }

/* ── Barra de abajo ── */
.va-barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--va-line);
}
.va-barra button {
  border: none; background: none; color: var(--va-faint); padding: 6px 0 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  border-radius: 12px; position: relative;
}
.va-barra button i { font-size: 1.15rem; }
.va-barra button.activo { color: var(--va-ink); }
.va-barra button.activo::before { content: ''; position: absolute; top: -9px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--va-gold); }
.va-barra .va-punto { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--va-red); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; }

/* ── Piezas comunes ── */
.va-seccion { margin: 22px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.va-seccion h3 { font-family: var(--va-serif); font-size: 1.08rem; margin: 0; font-weight: 700; }
.va-seccion small { color: var(--va-muted); font-size: .74rem; }
.va-link { border: none; background: var(--va-gold-soft); color: var(--va-gold-deep); font-weight: 700; font-size: .76rem; padding: 0 12px; min-height: 34px; border-radius: 999px; }
.va-card { background: var(--va-card); border: 1px solid var(--va-line); border-radius: var(--va-radius); }
.va-num { font-variant-numeric: tabular-nums; }
.va-vacio { text-align: center; color: var(--va-muted); padding: 34px 18px; font-size: .88rem; line-height: 1.55; }
.va-vacio i { display: block; font-size: 1.8rem; color: var(--va-line); margin-bottom: 10px; }

/* Carga (esqueleto) */
.va-esq { background: linear-gradient(90deg, #EFE7D6 0%, #F7F2E7 50%, #EFE7D6 100%); background-size: 200% 100%; animation: va-brillo 1.3s infinite; border-radius: 12px; }
@keyframes va-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── INICIO ── */
.va-saludo { font-family: var(--va-serif); font-size: 1.55rem; font-weight: 700; margin: 8px 0 2px; line-height: 1.15; }
.va-fecha { color: var(--va-muted); font-size: .82rem; }
.va-fecha::first-letter { text-transform: uppercase; }
.va-heroe {
  margin-top: 16px; border-radius: 22px; padding: 20px 20px 18px; color: #F5EEDC;
  background: radial-gradient(120% 140% at 100% 0%, #3A3020 0%, var(--va-dark) 55%);
  position: relative; overflow: hidden;
}
.va-heroe::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid rgba(184,145,63,.25); }
.va-heroe-et { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #CDB27A; font-weight: 600; }
.va-heroe-num { font-family: var(--va-serif); font-size: 2.35rem; font-weight: 700; margin: 6px 0 4px; color: #F1D98F; line-height: 1.05; }
.va-heroe-sub { font-size: .82rem; color: #CFC3A8; }
.va-heroe-barra { margin-top: 14px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.va-heroe-barra span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #C9A24E, #F1D98F); }
.va-heroe-pie { display: flex; justify-content: space-between; font-size: .72rem; color: #B9AC91; margin-top: 7px; gap: 8px; }
.va-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.va-mini .va-card { padding: 12px 10px; text-align: left; color: inherit; font: inherit; position: relative; }
.va-mini .va-card::after { content: '›'; position: absolute; right: 9px; top: 8px; color: var(--va-faint); font-size: .95rem; }
.va-mini .va-card:active { background: #FBF8F1; }
.va-mini-et { font-size: .66rem; color: var(--va-muted); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.va-mini-num { font-weight: 700; font-size: 1.02rem; margin-top: 5px; }
.va-mini-sub { font-size: .68rem; color: var(--va-faint); margin-top: 2px; }
.va-mini-num.rojo { color: var(--va-red); } .va-mini-num.verde { color: var(--va-green); }

.va-lista { display: flex; flex-direction: column; gap: 8px; }
.va-fila {
  display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; width: 100%;
  background: var(--va-card); border: 1px solid var(--va-line); border-radius: 14px; color: inherit;
}
.va-fila:active { background: #FBF8F1; }
.va-avatar { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--va-gold-soft); color: var(--va-gold-deep); }
.va-fila-txt { flex: 1; min-width: 0; }
.va-fila-nom { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* El comercio debajo del nombre, como en el CRM: dorado, en mayúsculas, con el ícono de tienda. */
.va-tienda { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--va-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-tienda i { font-size: .66rem; flex-shrink: 0; }
.va-tienda + .va-fila-det { margin-top: 1px; }
/* En la tarjeta de Clientes el nombre puede ocupar dos renglones (como en el CRM) en vez de cortarse. */
.va-cliente .va-fila-nom { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.va-fila-det { font-size: .74rem; color: var(--va-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.va-fila-der { text-align: right; flex: none; }
.va-chev { color: var(--va-faint); font-size: .8rem; flex: none; }
.va-wa-mini { width: 38px; height: 38px; border-radius: 12px; border: none; background: #E7F7EC; color: var(--va-wa); font-size: 1.15rem; display: grid; place-items: center; flex: none; }

/* Estados de cobro */
.va-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.va-pill.al-dia { background: var(--va-green-soft); color: var(--va-green); }
.va-pill.debe { background: var(--va-amber-soft); color: var(--va-amber); }
.va-pill.vencido { background: var(--va-red-soft); color: var(--va-red); }
.va-pill.gris { background: #F1ECE2; color: var(--va-muted); }

/* ── CLIENTES / VENTAS: buscador y filtros ── */
.va-buscar { position: relative; margin: 8px 0 10px; }
.va-buscar i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--va-faint); }
.va-buscar input {
  width: 100%; height: 46px; border-radius: 14px; border: 1px solid var(--va-line); background: var(--va-card);
  padding: 0 14px 0 40px; font-size: 16px; font-family: inherit; color: var(--va-ink);
}
.va-buscar input:focus { outline: none; border-color: var(--va-gold); box-shadow: 0 0 0 3px rgba(184,145,63,.15); }
.va-chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.va-chips::-webkit-scrollbar { display: none; }
.va-chip {
  flex: none; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--va-line); background: var(--va-card);
  font-size: .78rem; font-weight: 600; color: var(--va-muted); display: inline-flex; align-items: center; gap: 6px;
}
.va-chip b { font-weight: 700; color: var(--va-faint); }
.va-chip.activo { background: var(--va-ink); border-color: var(--va-ink); color: #fff; }
.va-chip.activo b { color: #CDB27A; }

.va-cliente { padding: 14px; }
.va-cliente-top { display: flex; gap: 12px; align-items: center; }
.va-acciones { display: flex; gap: 8px; margin-top: 12px; }
.va-acc {
  flex: 1; height: 40px; border-radius: 11px; border: 1px solid var(--va-line); background: #FBF8F1; color: var(--va-ink);
  font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
.va-acc.wa { background: #E7F7EC; border-color: #CDEFD8; color: #157A3B; }
.va-acc[disabled], .va-acc.apagado { opacity: .4; pointer-events: none; }

/* Resumen del mes en Ventas */
.va-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 14px 6px; margin: 6px 0 12px; }
.va-resumen > div { text-align: center; padding: 0 6px; }
.va-resumen > div + div { border-left: 1px solid var(--va-line); }
.va-venta { padding: 14px; }
.va-venta-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.va-venta-cli { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.va-venta-meta { font-size: .74rem; color: var(--va-muted); margin-top: 3px; }
.va-venta-total { font-family: var(--va-serif); font-weight: 700; font-size: 1.12rem; white-space: nowrap; }
.va-mas { width: 100%; height: 46px; margin-top: 10px; border-radius: 14px; border: 1px dashed var(--va-line); background: transparent; color: var(--va-gold-deep); font-weight: 600; font-size: .84rem; }

/* ── MI MES ── */
.va-comp { padding: 16px; }
.va-comp-fila { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; margin-top: 10px; font-size: .8rem; }
.va-comp-fila:first-child { margin-top: 0; }
.va-comp-barra { height: 12px; border-radius: 6px; background: #F1ECE2; overflow: hidden; }
.va-comp-barra span { display: block; height: 100%; border-radius: 6px; }
.va-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.va-tile { padding: 14px; }
.va-tile-num { font-family: var(--va-serif); font-weight: 700; font-size: 1.45rem; margin-top: 6px; }
.va-tile-et { font-size: .7rem; color: var(--va-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.va-tile-sub { font-size: .72rem; color: var(--va-muted); margin-top: 3px; line-height: 1.35; }
.va-meses { display: flex; align-items: flex-end; gap: 6px; height: 132px; padding: 16px 12px 10px; }
.va-meses > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.va-meses .va-b { width: 70%; border-radius: 5px 5px 2px 2px; background: #E6DABF; min-height: 3px; }
.va-meses .va-b.actual { background: var(--va-gold); }
.va-meses small { font-size: .64rem; color: var(--va-muted); font-weight: 600; text-transform: capitalize; }
.va-meses em { font-style: normal; font-size: .6rem; color: var(--va-muted); font-variant-numeric: tabular-nums; }
.va-meta { padding: 16px; }
.va-meta-top { display: flex; justify-content: space-between; align-items: center; }
.va-meta-pct { font-family: var(--va-serif); font-weight: 700; font-size: 1.05rem; color: var(--va-gold-deep); }
.va-meta-num { margin-top: 6px; font-family: var(--va-serif); font-weight: 700; font-size: 1.7rem; line-height: 1.1; }
.va-meta-num small { font-family: var(--va-sans); font-weight: 600; font-size: .82rem; color: var(--va-muted); }
.va-meta-barra { position: relative; height: 12px; border-radius: 6px; background: #F1ECE2; margin: 12px 0 10px; overflow: visible; }
.va-meta-barra span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #C9A24E, #B8913F); max-width: 100%; }
.va-meta-barra i { position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--va-ink); transform: translateX(-1px); }
.va-meta-fila { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; padding: 4px 0; color: var(--va-muted); }
.va-meta-fila strong { color: var(--va-ink); }
.va-meta-fila.ok { color: var(--va-green); font-weight: 600; }
.va-meta-pie { font-size: .74rem; color: var(--va-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--va-line); line-height: 1.5; }
.va-promo { padding: 16px; background: linear-gradient(135deg, #FFFDF7, var(--va-gold-soft)); border-color: #E9D9AE; }

/* ── HOJAS (ficha del cliente, factura) ── */
.va-fondo { position: absolute; inset: 0; z-index: 20; background: rgba(20,16,10,.45); opacity: 0; transition: opacity .2s; }
.va-fondo.visible { opacity: 1; }
.va-hoja {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 94%;
  background: var(--va-bg); border-radius: 24px 24px 0 0; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -12px 40px rgba(0,0,0,.18);
}
.va-hoja.visible { transform: none; }
.va-hoja-asa { width: 40px; height: 4px; border-radius: 2px; background: #D9CFBB; margin: 9px auto 0; flex: none; }
.va-hoja-cab { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px 12px; flex: none; }
.va-hoja-cab h2 { font-family: var(--va-serif); font-size: 1.3rem; margin: 0; line-height: 1.2; }
.va-hoja-cab p { margin: 3px 0 0; color: var(--va-muted); font-size: .8rem; }
.va-hoja-cuerpo { overflow-y: auto; padding: 0 18px calc(22px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.va-hoja.alta { height: 94%; }

.va-ficha-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 6px; }
.va-ficha-stats .va-card { padding: 12px; }
.va-dato { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; padding: 4px 0; color: var(--va-ink); }
.va-dato i { color: var(--va-gold); width: 16px; text-align: center; margin-top: 3px; }
.va-fact { display: flex; align-items: center; gap: 10px; padding: 12px; }
.va-fact + .va-fact { border-top: 1px solid var(--va-line); }
.va-fact-txt { flex: 1; min-width: 0; }
.va-fact-n { font-weight: 600; font-size: .86rem; }
.va-fact-d { font-size: .72rem; color: var(--va-muted); margin-top: 2px; }
.va-fact-btn { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--va-line); background: #FBF8F1; color: var(--va-ink); font-size: .76rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.va-fact-btn.wa { background: #E7F7EC; border-color: #CDEFD8; color: #157A3B; }
.va-boton {
  width: 100%; height: 52px; border-radius: 15px; border: none; font-weight: 700; font-size: .92rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none;
}
.va-boton.wa { background: var(--va-wa); color: #fff; box-shadow: 0 8px 20px rgba(31,175,84,.25); }
.va-boton.oscuro { background: var(--va-ink); color: #fff; }
.va-boton.claro { background: var(--va-card); color: var(--va-ink); border: 1px solid var(--va-line); }
.va-boton[disabled] { opacity: .55; pointer-events: none; box-shadow: none; }
.va-prod { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .82rem; }
.va-prod-barra { flex: 1; height: 8px; border-radius: 4px; background: #F1ECE2; overflow: hidden; }
.va-prod-barra span { display: block; height: 100%; background: var(--va-gold); border-radius: 4px; }

/* Factura: vista previa y envío */
.va-doc { border-radius: 16px; overflow: hidden; border: 1px solid var(--va-line); background: #fff; position: relative; }
.va-doc-marco { width: 100%; height: 360px; overflow: hidden; position: relative; background: #f7f5f0; }
/* max-width:none — styles.css limita todo iframe al 100%, y la factura se armaba en 324px. */
.va-doc-marco iframe { border: 0; width: 820px; max-width: none !important; height: 1180px; transform-origin: 0 0; position: absolute; left: 0; top: 0; pointer-events: none; }
.va-doc-pdf { height: 180px; display: grid; place-items: center; text-align: center; color: var(--va-muted); font-size: .84rem; }
.va-doc-pdf i { font-size: 2.6rem; color: var(--va-red); display: block; margin-bottom: 8px; }
.va-doc-cargando { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(247,245,240,.9); color: var(--va-muted); font-size: .84rem; text-align: center; }
.va-msj { width: 100%; min-height: 104px; border-radius: 14px; border: 1px solid var(--va-line); background: var(--va-card); padding: 12px 14px; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--va-ink); resize: vertical; }
.va-msj:focus { outline: none; border-color: var(--va-gold); }
.va-para { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 12px 0 8px; }
.va-nota { font-size: .74rem; color: var(--va-muted); line-height: 1.5; margin-top: 8px; text-align: center; }
.va-tel { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--va-line); padding: 0 12px; font-size: 16px; font-family: inherit; background: #fff; }

/* Aviso que aparece y se va */
.va-aviso { position: absolute; left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; background: var(--va-ink); color: #fff; padding: 12px 16px; border-radius: 14px; font-size: .84rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); transform: translateY(20px); opacity: 0; transition: .22s; pointer-events: none; }
.va-aviso.visible { transform: none; opacity: 1; }