:root{--bg: #f4f5f9;--surface: #ffffff;--surface-2: #f1f2f7;--border: #e4e6ef;--text: #171923;--muted: #6c7089;--brand: #7c3aed;--brand-ink: #ffffff;--danger: #dc2626;--ok: #15803d;--warn: #b45309;--shadow-sm: 0 1px 2px rgba(20, 20, 45, .05);--shadow: 0 2px 4px rgba(20, 20, 45, .04), 0 12px 28px rgba(20, 20, 45, .07);--r: 14px;--data: #2a78d6;--data-soft: #cde2fb;--status-good: #0ca30c;--status-warn: #fab219;--wa-bg: #efeae2;--wa-out: #d9fdd3;--wa-header: #f0f2f5;--wa-text: #111b21;--wa-meta: #667781}@media(prefers-color-scheme:dark){:root{--bg: #0e0f16;--surface: #181a24;--surface-2: #20222e;--border: #2b2e3d;--text: #e9eaf2;--muted: #9498b0;--brand: #a78bfa;--brand-ink: #1a1030;--danger: #f87171;--ok: #4ade80;--warn: #fbbf24;--shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .4);--wa-bg: #0b141a;--wa-out: #005c4b;--wa-header: #202c33;--wa-text: #e9edef;--wa-meta: #8696a0;--data: #3987e5;--data-soft: #1c5cab}}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}h1,h2{margin:0}.app{min-height:100%;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border)}.topbar .brand{font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}.topbar .brand .dot{width:12px;height:12px;border-radius:4px;background:var(--brand)}.spacer{flex:1}.content{width:100%;max-width:1240px;margin:0 auto;padding:20px}label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}input[type=text],input[type=password],textarea{width:100%;padding:11px 13px;border-radius:10px;border:1px solid transparent;background:var(--surface-2);color:var(--text);font:inherit}input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}textarea{resize:vertical;min-height:190px;line-height:1.55}input:focus,textarea:focus{outline:2px solid var(--brand);background:var(--surface)}.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;white-space:nowrap;padding:9px 15px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600}.btn:hover{border-color:var(--muted)}.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:transparent}.btn.primary:hover{filter:brightness(1.08)}.btn.danger{color:var(--danger);border-color:transparent;background:transparent}.btn.danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}.btn.small{padding:6px 11px;font-size:13px}.btn:disabled{opacity:.45;cursor:not-allowed}.icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;line-height:1}.icon:hover{border-color:var(--muted)}.icon:disabled{opacity:.35;cursor:not-allowed}.icon.danger{color:var(--danger)}.chip{font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}.chip.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}.chip.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}.hint{color:var(--muted);font-size:13px;margin:6px 0 12px;line-height:1.5}.muted{color:var(--muted)}.contador{color:var(--muted);font-size:12px;margin-top:6px}.error{color:var(--danger);font-size:14px;margin:8px 0}.error.banner{background:color-mix(in srgb,var(--danger) 10%,transparent);padding:10px 14px;border-radius:10px}.spinner{padding:60px;text-align:center;color:var(--muted)}.fila{display:flex;gap:14px;align-items:flex-start}.crece{flex:1;min-width:0}.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.tab{white-space:nowrap;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:600}.tab.active{background:var(--brand);color:var(--brand-ink);border-color:transparent}.tab small{opacity:.65;margin-left:6px;font-weight:500}.barra-lista{display:flex;gap:10px;margin:18px 0}.barra-lista input{max-width:420px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm)}.prod-card{display:flex;align-items:center;gap:12px;padding:14px;text-align:left;color:var(--text);transition:transform .08s ease,box-shadow .12s ease}.prod-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand)}.prod-emoji{width:44px;height:44px;flex:none;display:grid;place-items:center;font-size:22px;background:var(--surface-2);border-radius:12px}.prod-info{min-width:0;display:flex;flex-direction:column;gap:6px}.prod-info .name{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badges{display:flex;gap:6px;flex-wrap:wrap}.badge{font-size:12px;color:var(--muted);background:var(--surface-2);padding:3px 8px;border-radius:999px}.badge.off{color:var(--danger)}.editor-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;position:sticky;top:57px;z-index:20;background:var(--bg);padding:10px 0}.editor-bar h1{font-size:19px;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.editor-cols{display:grid;grid-template-columns:400px minmax(0,1fr);gap:24px;align-items:start}.col-preview{position:sticky;top:120px}.bloque{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:var(--shadow-sm)}.bloque h2{font-size:15px;letter-spacing:-.01em;margin-bottom:2px}.campo-emoji{width:86px;flex:none}.campo-emoji input{text-align:center;font-size:20px}.estado-producto .fila{align-items:center}.estado-producto .hint{margin:4px 0 0}.estado-producto.inactivo{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--surface))}.aviso{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);font-size:13px;line-height:1.45;padding:10px 12px;border-radius:10px;margin-bottom:14px;font-weight:600}.url-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}.url-row input{flex:1}.dropzone{display:flex;flex-direction:column;gap:2px;align-items:center;border:2px dashed var(--border);border-radius:12px;padding:20px;text-align:center;color:var(--muted);cursor:pointer;background:var(--surface-2)}.dropzone strong{color:var(--text);font-size:14px}.dropzone span{font-size:13px}.dropzone:hover,.dropzone.drag{border-color:var(--brand);color:var(--brand)}.recursos{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin-top:12px}.recurso{position:relative;border-radius:12px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);cursor:grab}.recurso.arrastrando{opacity:.4}.recurso.destino{outline:2px dashed var(--brand);outline-offset:2px}.recurso-num{position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:#0009;color:#fff;font-size:11px;font-weight:700}.recurso-estado{position:absolute;top:6px;right:6px;z-index:2;padding:2px 7px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-size:10px;font-weight:700}.recurso:has(.recurso-estado){outline:2px solid var(--brand);outline-offset:-2px}.thumb{aspect-ratio:1;position:relative;overflow:hidden;background:#00000010}.thumb img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.thumb .ph{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:28px}.thumb-play,.wa-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:999px;background:#0000008c;color:#fff;display:grid;place-items:center;font-size:13px;padding-left:2px}.recurso-tools{display:flex;gap:4px;padding:7px;justify-content:center;background:var(--surface)}.wa{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}.wa-header{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--wa-header)}.wa-avatar{width:38px;height:38px;border-radius:999px;background:#25d366;display:grid;place-items:center;font-size:19px}.wa-title{display:flex;flex-direction:column;line-height:1.25;min-width:0}.wa-title strong{color:var(--wa-text);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wa-title span{color:var(--wa-meta);font-size:12px}.wa-body{background-color:var(--wa-bg);background-image:radial-gradient(color-mix(in srgb,var(--wa-meta) 16%,transparent) 1px,transparent 1px);background-size:18px 18px;padding:14px 12px;display:flex;flex-direction:column;gap:8px;min-height:320px;max-height:calc(100vh - 240px);overflow-y:auto}.wa-empty{margin:auto;text-align:center;color:var(--wa-meta);font-size:13px;max-width:240px;line-height:1.5;background:color-mix(in srgb,var(--wa-bg) 60%,transparent);padding:10px;border-radius:10px}.wa-bubble{align-self:flex-end;max-width:85%;background:var(--wa-out);color:var(--wa-text);border-radius:8px 2px 8px 8px;padding:6px 8px 4px;box-shadow:0 1px 1px #0000001f;position:relative}.wa-text{font-size:14px;line-height:1.42;white-space:pre-wrap;word-break:break-word}.wa-meta{display:flex;justify-content:flex-end;align-items:center;gap:3px;font-size:11px;color:var(--wa-meta);margin-top:2px}.wa-check{color:#53bdeb;letter-spacing:-2px}.wa-media{padding:3px 3px 2px}.wa-thumb{position:relative;border-radius:6px;overflow:hidden;background:#00000015;min-height:130px}.wa-thumb img{display:block;width:100%;max-height:260px;object-fit:cover}.wa-noimg{height:150px;display:grid;place-items:center;font-size:34px}.wa-media .wa-meta{padding:0 4px 2px}.wa-foot{text-align:center;font-size:12px;color:var(--muted);padding:8px;background:var(--surface)}.login-wrap{min-height:100%;display:grid;place-items:center;padding:20px}.login-card{width:100%;max-width:380px;padding:24px}.login-card h1{margin:0 0 4px;font-size:22px}.login-card p.sub{margin:0 0 16px;color:var(--muted)}.login-card label{margin-top:12px}.navtabs{display:flex;gap:4px;margin-left:14px}.navtab{padding:6px 12px;border-radius:8px;border:none;background:transparent;color:var(--muted);font-weight:600;font-size:14px}.navtab:hover{color:var(--text);background:var(--surface-2)}.navtab.active{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}.rep-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.rep-head h1{font-size:22px;letter-spacing:-.02em}.periodo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.periodo input[type=date]{width:auto;padding:7px 9px;font-size:13px;border:1px solid var(--border);background:var(--surface)}.hero{border-radius:var(--r);padding:20px;margin-bottom:16px;border:1px solid var(--border);background:var(--surface)}.hero.alerta{border-color:var(--status-warn);background:color-mix(in srgb,var(--status-warn) 10%,var(--surface))}.hero.ok{border-color:var(--status-good);background:color-mix(in srgb,var(--status-good) 8%,var(--surface))}.hero-num{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.hero-ico{font-size:22px}.hero-num strong{font-size:44px;line-height:1;letter-spacing:-.03em}.hero-lbl{font-size:15px;font-weight:650}.hero-txt{margin:10px 0 0;color:var(--text);opacity:.8;font-size:14px;line-height:1.5;max-width:68ch}.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:16px}.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-sm)}.tile-lbl{display:block;font-size:13px;color:var(--muted);font-weight:600}.tile-val{display:block;font-size:30px;letter-spacing:-.02em;margin:4px 0 2px}.tile-delta{font-size:12px;font-weight:600}.tile-delta.sube{color:var(--status-good)}.tile-delta.baja{color:var(--warn)}.tabla-scroll{overflow-x:auto}.tabla{width:100%;border-collapse:collapse;font-size:13px}.tabla th{text-align:left;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:6px 10px;border-bottom:1px solid var(--border)}.tabla td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}.tabla tr:last-child td{border-bottom:none}.nowrap{white-space:nowrap;color:var(--muted)}.chart-cols{display:flex;align-items:flex-end;gap:2px;height:170px}.chart-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}.chart-col-track{flex:1;width:100%;display:flex;align-items:flex-end;min-height:0}.chart-col-fill{width:100%;background:var(--data);border-radius:4px 4px 0 0;transition:opacity .12s}.chart-col:hover .chart-col-fill{opacity:.75}.chart-col-fill.pico{background:var(--brand)}.chart-col-x{font-size:10px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:clip;max-width:100%}.chart-cols:has(.chart-col:nth-child(32)) .chart-col:not(:nth-child(3n+1)) .chart-col-x{visibility:hidden}.chart-rank{display:flex;flex-direction:column;gap:8px}.chart-rank-row{display:grid;grid-template-columns:minmax(90px,170px) 1fr auto;gap:10px;align-items:center}.chart-rank-lbl{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chart-rank-track{background:var(--surface-2);border-radius:4px;height:20px}.chart-rank-fill{height:100%;background:var(--data);border-radius:4px}.chart-rank-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.chart-rank-extra{grid-column:2 / -1;font-size:11px;color:var(--muted);margin-top:-4px}@media(max-width:980px){.editor-cols{grid-template-columns:1fr}.col-form{order:1}.col-preview{order:2;position:static}.wa-body{max-height:none}}@media(max-width:560px){.content{padding:12px}.editor-bar{top:53px;flex-wrap:wrap}.editor-bar h1{width:100%;order:3}.barra-lista{flex-direction:column}.barra-lista input{max-width:none}.recursos{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.topbar .brand{font-size:14px}.navtabs{margin-left:4px}.navtab{padding:6px 9px;font-size:13px}.hero-num strong{font-size:34px}.chart-cols{height:130px}.chart-rank-row{grid-template-columns:minmax(70px,110px) 1fr auto}}
