:root{--fondo:#f4f6fb;--tarjeta:#fff;--texto:#0f172a;--suave:#64748b;--linea:#e2e8f0;--primario:#0f172a;--acento:#2563eb;
  --verde:#16a34a;--amarillo:#f59e0b;--rojo:#dc2626;--gris:#94a3b8;--radio:16px;--sombra:0 1px 2px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.18)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}[hidden]{display:none!important}
body{margin:0;background:var(--fondo);color:var(--texto);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100dvh;display:flex;flex-direction:column}
.cabecera{padding:calc(16px + env(safe-area-inset-top)) 20px 8px;max-width:560px;width:100%;margin:0 auto}
.marca{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:26px;color:var(--texto);text-decoration:none;letter-spacing:-.03em}
.marca img{width:42px;height:42px;border-radius:12px;box-shadow:0 3px 8px rgba(79,70,229,.35)}
.marca b{font-weight:900;color:#4f46e5}
.claim{margin:6px 0 0;color:var(--suave);font-size:15px}.claim em{font-style:normal;font-weight:700;color:var(--texto)}
main{flex:1;max-width:560px;width:100%;margin:0 auto;padding:8px 16px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.tarjeta{background:var(--tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);padding:18px}
.tarjeta h3{margin:0 0 10px;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave)}
.centrado{text-align:center}
.zona-drop{display:block;border:2px dashed #cbd5e1;border-radius:14px;padding:6px;text-align:center;cursor:pointer;background:#f8fafc;transition:border-color .15s,background .15s;min-height:180px;display:grid;place-items:center;overflow:hidden}
.zona-drop:hover,.zona-drop.sobre{border-color:var(--acento);background:#eff6ff}
#zona-vacia{display:grid;gap:4px;justify-items:center;padding:24px 12px;color:var(--suave)}#zona-vacia strong{color:var(--texto);font-size:17px}#zona-vacia svg{width:44px;height:44px;fill:var(--acento);margin-bottom:6px}
#previa{max-height:60vh;max-width:100%;border-radius:10px;object-fit:contain}
.campo{display:grid;gap:6px;margin:14px 0}.campo span{font-size:13px;font-weight:600;color:var(--suave)}
.campo input{font:inherit;padding:12px 14px;border:1px solid var(--linea);border-radius:12px;background:#fff;color:var(--texto);width:100%}
.campo input:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:transparent}
.boton{display:inline-flex;justify-content:center;align-items:center;width:100%;padding:14px 18px;border:0;border-radius:14px;background:var(--primario);color:#fff;font:inherit;font-weight:700;font-size:17px;cursor:pointer;text-decoration:none;transition:opacity .15s,transform .05s}
.boton:active{transform:scale(.99)}.boton:disabled{opacity:.45;cursor:not-allowed}
.boton.secundario{background:#fff;color:var(--texto);border:1px solid var(--linea)}
.boton.pegar{margin-top:12px;gap:10px;font-size:16px}.boton.pegar svg{width:22px;height:22px;fill:currentColor}
.zona-drop:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.aviso-pegado{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#eff6ff;color:#1e40af;font-size:14px}
.error{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#fef2f2;color:#991b1b;font-size:15px}
.nota{color:var(--suave);font-size:13px;margin:14px 0 0;line-height:1.45}.suave{color:var(--suave)}
.lupa{width:64px;height:64px;margin:6px auto 14px;border-radius:50%;border:5px solid var(--linea);border-top-color:var(--acento);animation:giro 1s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.pasos{list-style:none;margin:18px auto;padding:0;text-align:left;display:grid;gap:8px;max-width:320px}
.pasos li{position:relative;padding-left:30px;color:var(--suave)}.pasos li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;border:2px solid var(--linea);background:#fff}
.pasos li.hecho{color:var(--texto)}.pasos li.hecho::before{background:var(--verde);border-color:var(--verde);box-shadow:inset 0 0 0 3px #fff}
.pasos li.activo{color:var(--texto);font-weight:600}.pasos li.activo::before{border-color:var(--acento);border-top-color:transparent;animation:giro 1s linear infinite}
.aviso-cache{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:#eef2ff;color:#3730a3;font-size:14px}
.enlace-boton{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#4f46e5;text-decoration:underline;cursor:pointer}
.ficha{position:relative;overflow:hidden}.ficha::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--color-sem,var(--gris))}
.semaforo{display:flex;align-items:center;gap:16px;margin:6px 0 14px}
.disco{width:72px;height:72px;border-radius:50%;background:var(--color-sem,var(--gris));box-shadow:0 0 0 8px color-mix(in srgb,var(--color-sem,var(--gris)) 18%,transparent),inset 0 -6px 12px rgba(0,0,0,.18);flex:none}
.etiqueta{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--suave)}
#sem-texto{margin:0;font-size:28px;letter-spacing:-.02em;color:var(--color-sem,var(--gris))}
.producto{margin:0;font-size:22px;line-height:1.25;letter-spacing:-.01em}
.meta{margin:4px 0 10px;color:var(--suave);font-size:14px;display:flex;gap:8px;flex-wrap:wrap}.meta span:empty{display:none}
.chip{display:inline-block;padding:6px 10px;border-radius:999px;font-size:13px;font-weight:600;margin:0 0 10px}.chip-aviso{background:#fff7ed;color:#9a3412}
.motivo{margin:0;font-size:16px}

.vendedores{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vendedor{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--linea);border-radius:14px;text-decoration:none;color:var(--texto);background:#fafbff}
.vendedor:hover{border-color:var(--acento)}
.v-logo{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--linea);display:grid;place-items:center;font-weight:800;font-size:20px;color:#334155;overflow:hidden}
.v-logo img{width:30px;height:30px;object-fit:contain}
.v-info{display:grid;gap:2px;min-width:0}
.v-cab{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.v-nombre{font-weight:700;line-height:1.25}
.v-reco{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#166534;background:#dcfce7;padding:2px 7px;border-radius:999px}
.v-nota{font-size:13px;color:var(--texto);opacity:.8;line-height:1.3}
.v-tipo{font-size:12px;color:var(--suave)}
.v-afil{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);border:1px solid var(--linea);padding:1px 6px;border-radius:999px}
.vendedor.busqueda{border-style:dashed;background:transparent}
.aviso-afiliados{margin:12px 0 0;font-size:12px;color:var(--suave);line-height:1.4}
.v-url{font-size:12px;color:var(--acento);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-precio{display:grid;gap:1px;justify-items:center;font-weight:800;font-size:18px;color:#166534;background:#dcfce7;padding:8px 10px;border-radius:12px;text-align:center;line-height:1.15;max-width:30vw;justify-self:end}
.v-precio b{font-weight:800;white-space:nowrap}.v-precio small{font-size:11px;font-weight:600;line-height:1.2;opacity:.85}
.v-precio.sin{background:transparent;color:var(--suave);font-weight:600;font-size:13px;border:1px solid var(--linea)}
.datos-int{display:grid;gap:10px;margin:14px 0 0}.datos-int div{display:grid;gap:3px}.datos-int dt{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave)}.datos-int dd{margin:0;font-size:15px;line-height:1.45}
.avisos-int{margin:12px 0 0;padding:0 0 0 22px;color:#9a3412;display:grid;gap:6px}
.guia{margin:14px 0 0;border-top:1px solid var(--linea);padding-top:10px}.guia summary{cursor:pointer;font-weight:700;font-size:14px;color:#4f46e5}.guia ul{margin:10px 0 0;padding-left:20px;display:grid;gap:8px;font-size:14px;color:var(--texto)}
.v-envio{font-size:11px;font-weight:700;color:#0f766e;background:#ccfbf1;padding:2px 7px;border-radius:999px}
.riesgos{margin:0;padding:0 0 0 22px;color:#7f1d1d;display:grid;gap:6px}
.recomendacion{background:#0f172a;color:#fff}.recomendacion h3{color:#94a3b8}.recomendacion p{margin:0;font-size:17px;font-weight:600;line-height:1.45}
.acciones{display:grid;gap:10px}
.pie{text-align:center;color:var(--suave);font-size:12px;padding:8px 16px calc(12px + env(safe-area-inset-bottom))}
@media (prefers-color-scheme:dark){:root{--fondo:#0b1220;--tarjeta:#111a2e;--texto:#e5e9f2;--suave:#94a3b8;--linea:#243049;--primario:#2563eb}
  .zona-drop{background:#0f172a;border-color:#334155}.campo input{background:#0f172a;border-color:#334155}.boton.secundario{background:#111a2e;color:#e5e9f2}
  .vendedor{background:#0f172a}.v-logo{background:#1e293b;border-color:#334155;color:#e2e8f0}.v-reco{background:#14532d;color:#bbf7d0}.v-precio{background:#14532d;color:#bbf7d0}.v-precio.sin{background:transparent;color:var(--suave)}.error{background:#3b0f0f;color:#fecaca}.chip-aviso{background:#3b1d0f;color:#fdba74}.riesgos{color:#fca5a5}.avisos-int{color:#fdba74}.v-envio{background:#134e4a;color:#99f6e4}.pasos li::before{background:#111a2e}}