/* ============================================================
   CH STORE — Programa de vendedores (vender, panel y admin)

   El mismo lenguaje de la web: letra SF Pro Rounded, fondo #f2f2f7, tarjetas
   blancas de radio 18, botones negros que se invierten en el tema oscuro, la
   portada negra y la barra en píldora. Nada de colores nuevos: el verde es el
   del precio, el azul el de "en vuelo", el naranja el de "pocas unidades".
   ============================================================ */
:root {
    --text-main: #111113; --text-muted: #8e8e93; --text-soft: #636366;
    --bg-main: #f2f2f7; --bg-card: #ffffff; --bg-nav: rgba(255,255,255,0.85); --bg-sub: #f7f7fa;
    --btn-bg: #111113; --btn-text: #ffffff; --btn-sec: #e5e5ea;
    --border-color: #e5e5ea; --accent: #007aff; --danger-red: #ff3b30; --success-green: #1f9d57;
    --orange: #ff9f0a; --wa: #25D366; --radius-ios: 18px; --shadow-color: rgba(0,0,0,0.05);
    --hero: #111113;
}
[data-theme="dark"] {
    --text-main: #ffffff; --text-muted: #a1a1a6; --text-soft: #c7c7cc;
    --bg-main: #000000; --bg-card: #1c1c1e; --bg-nav: rgba(28,28,30,0.85); --bg-sub: #242426;
    --btn-bg: #ffffff; --btn-text: #000000; --btn-sec: #2c2c2e;
    --border-color: #2c2c2e; --success-green: #30d158; --shadow-color: rgba(0,0,0,0.4);
    --hero: #0b0b0c;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Text", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg-main); -webkit-text-size-adjust: 100%; }
body { background: var(--bg-main); color: var(--text-main); min-height: 100vh; padding-bottom: calc(40px + env(safe-area-inset-bottom)); transition: background-color .4s ease, color .4s ease; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; touch-action: manipulation; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
.oculto { display: none !important; }

/* ---------- La barra de arriba (la píldora de la web) ---------- */
.vd-nav { position: sticky; top: 10px; z-index: 100; margin: 12px 12px 0; padding: 9px 10px 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--bg-nav); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--border-color); border-radius: 24px; box-shadow: 0 12px 30px rgba(0,0,0,0.16); }
.vd-volver { width: 38px; height: 38px; border-radius: 50%; background: var(--btn-sec); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vd-volver:active { transform: scale(.92); }
.vd-volver svg { width: 19px; height: 19px; }
.vd-logo { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 19px; text-transform: uppercase; letter-spacing: 1px; }
.vd-logo span { background: var(--btn-bg); color: var(--btn-text); padding: 3px 8px; border-radius: 6px; }
.vd-nav-der { display: flex; gap: 6px; align-items: center; min-width: 38px; justify-content: flex-end; }
.vd-nav-btn { height: 38px; padding: 0 14px; border-radius: 19px; background: var(--btn-sec); font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vd-nav-btn.negro { background: var(--btn-bg); color: var(--btn-text); }
.vd-nav-btn svg { width: 16px; height: 16px; }
@media (min-width: 1024px) { .vd-nav { width: calc(100% - 24px); max-width: 1170px; margin-left: auto; margin-right: auto; } }

.vd-env { max-width: 1170px; margin: 0 auto; padding: 0 12px; }
@media (min-width: 640px) { .vd-env { padding: 0 18px; } }

/* ---------- Botones ---------- */
.vd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 15px;
    background: var(--btn-bg); color: var(--btn-text); font-size: 15.5px; font-weight: 800; letter-spacing: -.1px; transition: transform .15s ease, opacity .2s ease, background .2s ease; }
.vd-btn:active { transform: scale(.97); }
.vd-btn svg { width: 18px; height: 18px; }
.vd-btn.ancho { width: 100%; }
.vd-btn.sec { background: var(--btn-sec); color: var(--text-main); }
.vd-btn.blanco { background: #fff; color: #111113; }
.vd-btn.vidrio { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.vd-btn.verde { background: var(--success-green); color: #fff; }
.vd-btn.rojo { background: rgba(255,59,48,.1); color: var(--danger-red); }
.vd-btn.chico { min-height: 40px; padding: 0 15px; font-size: 13.5px; border-radius: 12px; }
.vd-btn[disabled], .vd-btn.apagado { opacity: .42; pointer-events: none; }
.vd-btn .spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: vdGira .7s linear infinite; }
@keyframes vdGira { to { transform: rotate(360deg); } }

/* ---------- Tarjetas y textos ---------- */
.vd-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-ios); padding: 18px; box-shadow: 0 4px 14px var(--shadow-color); }
.vd-card + .vd-card { margin-top: 12px; }
/* En las rejillas el espacio lo pone el gap: sin esto la segunda tarjeta de
   cada fila quedaba 12 px más abajo que la primera. */
:is(.stats, .lista, .rt-res, .pasos, .reglas, .activar, .ventas, .fotos, .vend-saldo, .cuentas) > .vd-card { margin-top: 0; }
.vd-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }
.vd-h2 { font-size: 24px; font-weight: 850; letter-spacing: -.6px; line-height: 1.15; }
@media (min-width: 768px) { .vd-h2 { font-size: 30px; } }
.vd-lead { font-size: 15px; color: var(--text-muted); line-height: 1.55; font-weight: 500; }
.vd-sec { margin-top: 34px; }
.vd-sec-cab { margin-bottom: 16px; }
.vd-sec-cab .vd-h2 { margin-top: 6px; }
.vd-sec-cab .vd-lead { margin-top: 6px; max-width: 560px; }
.vd-sec-cab.centro { text-align: center; }
.vd-sec-cab.centro .vd-lead { margin-left: auto; margin-right: auto; }

/* ---------- Campos ---------- */
.vd-campo { display: block; margin-bottom: 14px; }
.vd-campo > span { display: block; font-size: 12.5px; font-weight: 750; color: var(--text-soft); margin: 0 0 6px 2px; }
.vd-campo small { display: block; font-size: 12px; color: var(--text-muted); margin: 6px 2px 0; line-height: 1.4; }
.vd-input { width: 100%; height: 50px; padding: 0 15px; border-radius: 14px; border: 1.5px solid var(--border-color); background: var(--bg-sub); color: var(--text-main);
    font-size: 16px; font-weight: 650; outline: none; transition: border-color .2s ease, background .2s ease; -webkit-appearance: none; appearance: none; }
.vd-input:focus { border-color: var(--text-main); background: var(--bg-card); }
.vd-input::placeholder { color: var(--text-muted); font-weight: 550; }
textarea.vd-input { height: auto; min-height: 84px; padding: 13px 15px; resize: vertical; line-height: 1.45; }
select.vd-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.vd-input.error { border-color: var(--danger-red); }
.vd-prefijo { display: flex; align-items: stretch; border-radius: 14px; border: 1.5px solid var(--border-color); background: var(--bg-sub); overflow: hidden; transition: border-color .2s ease; }
.vd-prefijo:focus-within { border-color: var(--text-main); background: var(--bg-card); }
.vd-prefijo b { display: flex; align-items: center; padding: 0 4px 0 15px; font-size: 16px; font-weight: 750; color: var(--text-muted); white-space: nowrap; }
.vd-prefijo .vd-input { border: none; background: transparent; padding-left: 6px; }
.vd-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-chip { padding: 10px 14px; border-radius: 20px; border: 1.5px solid var(--border-color); background: var(--bg-card); font-size: 13.5px; font-weight: 750; color: var(--text-main); transition: .2s ease; }
.vd-chip.on { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.vd-error { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 13px; background: rgba(255,59,48,.08); color: var(--danger-red); font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.vd-error.ver { display: block; }
.vd-check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--bg-sub); border: 1.5px solid var(--border-color); cursor: pointer; transition: border-color .2s ease; }
.vd-check + .vd-check { margin-top: 8px; }
.vd-check input { position: absolute; opacity: 0; pointer-events: none; }
.vd-check i { flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--border-color); background: var(--bg-card); display: flex; align-items: center; justify-content: center; transition: .2s ease; margin-top: -1px; }
.vd-check i svg { width: 14px; height: 14px; color: var(--btn-text); opacity: 0; transform: scale(.5); transition: .2s ease; }
.vd-check input:checked + i { background: var(--btn-bg); border-color: var(--btn-bg); }
.vd-check input:checked + i svg { opacity: 1; transform: none; }
.vd-check span { font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--text-main); }
.vd-check span a { color: var(--accent); font-weight: 750; }
.vd-check:has(input:checked) { border-color: var(--text-main); }

/* ---------- Pastillas de estado ---------- */
.vd-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
.vd-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vd-pill.verde { background: rgba(31,157,87,.12); color: var(--success-green); }
.vd-pill.naranja { background: rgba(255,159,10,.14); color: #c77700; }
[data-theme="dark"] .vd-pill.naranja { color: #ffb340; }
.vd-pill.azul { background: rgba(0,122,255,.12); color: var(--accent); }
.vd-pill.gris { background: var(--btn-sec); color: var(--text-muted); }
.vd-pill.rojo { background: rgba(255,59,48,.1); color: var(--danger-red); }
.vd-pill.negro { background: var(--btn-bg); color: var(--btn-text); }

/* ---------- Pestañas (control segmentado) ---------- */
.vd-seg { display: flex; gap: 4px; padding: 4px; border-radius: 15px; background: var(--btn-sec); overflow-x: auto; scrollbar-width: none; }
.vd-seg::-webkit-scrollbar { display: none; }
.vd-seg button { flex: 1 0 auto; padding: 10px 14px; border-radius: 11px; font-size: 13.5px; font-weight: 800; color: var(--text-muted); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: .2s ease; }
.vd-seg button.on { background: var(--bg-card); color: var(--text-main); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.vd-seg button b { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--btn-bg); color: var(--btn-text); font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Hoja que sube desde abajo ---------- */
.vd-velo { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.vd-velo.ver { opacity: 1; visibility: visible; }
.vd-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-card); border-radius: 26px 26px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform .42s cubic-bezier(.22,1,.36,1); box-shadow: 0 -20px 60px rgba(0,0,0,.25); }
.vd-hoja.ver { transform: none; }
.vd-hoja::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--btn-sec); margin: 0 auto 14px; }
.vd-hoja-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.vd-hoja-cab h3 { font-size: 20px; font-weight: 850; letter-spacing: -.4px; line-height: 1.2; }
.vd-hoja-cab p { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.vd-x { width: 32px; height: 32px; border-radius: 50%; background: var(--btn-sec); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vd-x svg { width: 15px; height: 15px; }
@media (min-width: 720px) {
    .vd-hoja { left: 50%; right: auto; bottom: auto; top: 50%; width: 520px; max-height: 88vh; border-radius: 26px; padding: 22px 24px 24px;
        transform: translate(-50%, -46%) scale(.96); opacity: 0; visibility: hidden; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease, visibility .25s ease; }
    .vd-hoja.ver { transform: translate(-50%, -50%); opacity: 1; visibility: visible; }
    .vd-hoja::before { display: none; }
    .vd-hoja.ancha { width: 640px; }
}

/* ---------- Aviso flotante ---------- */
.vd-toast { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top)); z-index: 3000; transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
    background: #111113; color: #fff; padding: 13px 18px; border-radius: 16px; font-size: 14px; font-weight: 750; display: flex; align-items: center; gap: 9px;
    box-shadow: 0 12px 30px rgba(0,0,0,.3); transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease; max-width: calc(100% - 32px); }
[data-theme="dark"] .vd-toast { background: #fff; color: #111113; }
.vd-toast.ver { transform: translate(-50%, 0); opacity: 1; }
.vd-toast svg { width: 18px; height: 18px; color: var(--success-green); }

/* ---------- Deslizar para confirmar ---------- */
.vd-slide { position: relative; height: 64px; border-radius: 32px; background: var(--btn-bg); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.vd-slide-relleno { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; border-radius: 32px; background: var(--success-green); }
.vd-slide-texto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 52px; font-size: 15px; font-weight: 800; color: var(--btn-text); letter-spacing: -.1px; pointer-events: none; }
.vd-slide-texto span { background: linear-gradient(90deg, currentColor 0%, currentColor 40%, rgba(150,150,150,.9) 50%, currentColor 60%, currentColor 100%); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: vdBrillo 2.2s linear infinite; }
@keyframes vdBrillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.vd-slide-pomo { position: absolute; left: 5px; top: 5px; width: 54px; height: 54px; border-radius: 50%; background: var(--btn-text); color: var(--btn-bg); display: flex; align-items: center; justify-content: center; cursor: grab;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 2; }
.vd-slide-pomo svg { width: 22px; height: 22px; transition: transform .3s ease; }
.vd-slide.listo .vd-slide-pomo { background: #fff; color: var(--success-green); }
.vd-slide.listo .vd-slide-texto span { animation: none; }
.vd-slide.vuelve .vd-slide-pomo, .vd-slide.vuelve .vd-slide-relleno { transition: transform .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) { .vd-slide-texto span { animation: none; } }

/* ---------- Vacío y esqueletos ---------- */
.vd-vacio { text-align: center; padding: 36px 18px; }
.vd-vacio .ic { width: 62px; height: 62px; border-radius: 20px; margin: 0 auto 14px; background: var(--btn-sec); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.vd-vacio .ic svg { width: 28px; height: 28px; }
.vd-vacio h4 { font-size: 17px; font-weight: 800; margin-bottom: 5px; }
.vd-vacio p { font-size: 14px; color: var(--text-muted); line-height: 1.5; max-width: 340px; margin: 0 auto; }
.vd-sk { border-radius: 14px; background: linear-gradient(100deg, var(--btn-sec) 30%, var(--bg-sub) 50%, var(--btn-sec) 70%); background-size: 220% 100%; animation: vdSk 1.3s linear infinite; }
@keyframes vdSk { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---------- Avisos dentro de una tarjeta ---------- */
.vd-nota { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; background: var(--bg-sub); border: 1px solid var(--border-color); font-size: 13.5px; line-height: 1.5; color: var(--text-soft); }
.vd-nota svg { width: 18px; height: 18px; margin-top: 1px; color: var(--text-muted); }
.vd-nota b { color: var(--text-main); }
.vd-nota.azul { background: rgba(0,122,255,.07); border-color: rgba(0,122,255,.22); }
.vd-nota.azul svg { color: var(--accent); }
.vd-nota.naranja { background: rgba(255,159,10,.08); border-color: rgba(255,159,10,.3); }
.vd-nota.naranja svg { color: var(--orange); }
.vd-nota.verde { background: rgba(31,157,87,.08); border-color: rgba(31,157,87,.28); }
.vd-nota.verde svg { color: var(--success-green); }

/* ---------- Pie ---------- */
.vd-pie { text-align: center; margin-top: 44px; padding: 0 20px; font-size: 12.5px; color: var(--text-muted); line-height: 1.7; font-weight: 600; }
.vd-pie a { color: var(--text-main); font-weight: 750; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }