:root{
  --bg:#f4f6fa; --card:#fff; --borde:#e6eaf1; --txt:#18212f; --tenue:#6b7487;
  --side:#0d1828; --side-txt:#c9d2e0; --naranja:#f7861e; --naranja2:#f59a2f;
  --azul:#1f6feb; --azul-s:#e8f0fe; --verde:#16a34a; --verde-s:#e7f6ec; --rojo:#e5484d; --rojo-s:#fdecec;
  --amarillo:#f2a20c; --amarillo-s:#fff4dd; --morado:#7c4dff; --morado-s:#f0ebff;
  --r:14px; --sombra:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--txt);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
.ic{width:20px;height:20px;flex:none}
.ic.grande{width:30px;height:30px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tenue{color:var(--tenue)}
code.clave{font:600 1.15rem ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;border:1px dashed var(--verde);padding:.35rem .7rem;border-radius:8px;letter-spacing:.04em;user-select:all}

/* Sidebar */
.side{position:fixed;inset:0 auto 0 0;width:248px;background:var(--side);color:var(--side-txt);display:flex;flex-direction:column;padding:22px 14px 14px;z-index:30;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;padding:0 8px 22px}
.logo-b{width:52px;height:56px;border-radius:10px;background:linear-gradient(160deg,var(--naranja2),var(--naranja));color:#fff;font:900 2.4rem/56px Inter,sans-serif;text-align:center;flex:none}
.logo-txt{display:flex;flex-direction:column;line-height:1.05;color:#fff}
.logo-txt strong{font-size:1.45rem;font-weight:800;letter-spacing:.04em}
.logo-txt span{font-size:.95rem;font-weight:600;letter-spacing:.3em}
.logo-txt em{font-style:normal;font-size:.95rem;font-weight:700;letter-spacing:.08em;display:flex;align-items:center;gap:6px;margin-top:3px}
.flag{width:22px;height:15px;border-radius:2px}
.side nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-i{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:11px;text-decoration:none;font-weight:500;color:var(--side-txt);transition:background .15s}
.nav-i:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-i.on{background:linear-gradient(90deg,var(--naranja),var(--naranja2));color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(247,134,30,.35)}
.nav-i span{flex:1;white-space:nowrap}
.pronto{font-size:.64rem;font-weight:600;padding:2px 6px;border-radius:99px;background:rgba(255,255,255,.08);color:#9fb0c8}
.nav-i.on .pronto{background:rgba(255,255,255,.22);color:#fff}
.nav-sec{margin:18px 10px 6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8090a8}
.side-user{display:flex;align-items:center;gap:6px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;margin-top:12px}
.who{flex:1;display:flex;align-items:center;gap:10px;text-decoration:none;padding:8px;border-radius:10px;min-width:0}
.who:hover,.who.on{background:rgba(255,255,255,.06)}
.who strong{display:block;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{color:#8a97ad}
.salir{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--side-txt)}
.salir:hover{background:rgba(255,255,255,.08);color:#fff}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(160deg,#ffc845,#f5a623);color:#5a3a00;font-weight:700;display:grid;place-items:center;flex:none}
.avatar.chico{width:34px;height:34px;font-size:.9rem}

/* Main */
.main{margin-left:248px;padding:22px 28px 40px;min-height:100vh;display:flex;flex-direction:column;gap:18px}
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top-t{display:flex;align-items:center;gap:14px;flex:1;min-width:220px}
.top-ic{width:48px;height:48px;border-radius:12px;background:#fff3e6;color:var(--naranja);display:grid;place-items:center;flex:none}
.top-ic .ic{width:24px;height:24px}
.top h1{margin:0;font-size:1.6rem;font-weight:700;letter-spacing:-.01em}
.top p{margin:2px 0 0;color:var(--tenue)}
.top-acc{display:flex;gap:10px;flex-wrap:wrap}
.btn-menu{display:none}

.card{background:var(--card);border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra);padding:20px}
.card-t{margin:0 0 14px;font-size:1.05rem;font-weight:700}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:10px;border:1px solid transparent;font:600 .95rem Inter,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn .ic{width:18px;height:18px}
label.btn{flex-direction:row;margin:0;font-size:.95rem}
.btn.prim{background:var(--azul);color:#fff}
.btn.prim:hover{background:#1a5fd0}
.btn.sec{background:#fff;border-color:var(--borde);color:var(--txt)}
.btn.sec:hover{background:#f7f9fc}
.btn.chico{min-height:34px;padding:0 12px;font-size:.88rem}
.btn.ancho{width:100%}
.btn:focus-visible,.nav-i:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid rgba(31,111,235,.45);outline-offset:2px}

/* KPIs */
.kpis{display:grid;gap:14px}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpi{display:flex;align-items:center;gap:14px;padding:18px}
.kpi small{display:block;font-size:.74rem;font-weight:600;letter-spacing:.05em;color:#3b4456}
.kpi b{display:block;font-size:1.75rem;font-weight:700;line-height:1.2}
.kpi em{font-style:normal;font-size:.85rem;color:var(--tenue)}
.kpi-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none}
.kpi-ic.azul{background:var(--azul-s);color:var(--azul)}
.kpi-ic.verde{background:var(--verde-s);color:var(--verde)}
.kpi-ic.naranja{background:#fff3e6;color:var(--naranja)}

/* Tabla */
.tabla-card{padding:0;overflow:hidden}
.tabla-scroll{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th{text-align:left;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#3b4456;padding:12px 12px;background:#fafbfd;border-bottom:1px solid var(--borde);line-height:1.3}
.tabla td{padding:12px 12px;border-bottom:1px solid #eef1f6;vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tr.apagado td{opacity:.55}
.tabla td.acc{text-align:right}
.permisos{max-width:340px}
.persona{display:flex;align-items:center;gap:10px}
.persona strong{display:block}
.persona small{color:var(--tenue)}
.chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.8rem;font-weight:600;background:#eef1f6;color:#3b4456;margin:2px 4px 2px 0;white-space:nowrap}
.chip.naranja{background:#fff3e6;color:#c25e00}
.chip.suave{background:var(--azul-s);color:#1a4fae;font-weight:500}
.estado{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:.82rem;font-weight:600}
.estado::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.estado.ok{background:var(--verde-s);color:var(--verde)}
.estado.mal{background:var(--rojo-s);color:var(--rojo)}

.bitacora{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bitacora li{padding:9px 0;border-bottom:1px solid #eef1f6;font-size:.92rem}
.bitacora li:last-child{border-bottom:0}
.bitacora time{display:inline-block;min-width:150px;color:var(--tenue);font-variant-numeric:tabular-nums}

/* Alertas */
.alerta{padding:13px 16px;border-radius:11px;font-weight:500}
.alerta.ok{background:var(--verde-s);color:#0f5d2a;border:1px solid #bfe6cb}
.alerta.mal{background:var(--rojo-s);color:#9b1c1f;border:1px solid #f6c5c6}
.clave-box{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.clave-box p{margin:2px 0 0;font-weight:400}

/* Formularios */
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem;margin-bottom:14px}
input[type=text],input:not([type]),input[type=password],input[type=tel]{font:500 .98rem Inter,sans-serif;min-height:44px;padding:0 13px;border:1px solid #d5dbe5;border-radius:10px;background:#fff;color:var(--txt)}
input:focus{border-color:var(--azul)}
.grid-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;align-items:start}
.form-pie{grid-column:1/-1;display:flex;justify-content:flex-end}
.ancho-total{grid-column:1/-1}
.form-chico{max-width:460px}
.campo-fijo{margin:0 0 14px}
.nota{margin:-6px 0 12px;font-size:.88rem}
fieldset.opciones{border:0;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
fieldset.opciones legend{font-weight:600;font-size:.9rem;margin-bottom:6px;padding:0}
.op{flex-direction:row;align-items:flex-start;gap:10px;border:1px solid var(--borde);border-radius:11px;padding:12px;margin:0;cursor:pointer;font-weight:400}
.op:has(input:checked){border-color:var(--naranja);background:#fffaf4}
.op strong{display:block;font-weight:600}
.op small,.switch small{display:block;color:var(--tenue);font-weight:400}
.switch{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;cursor:pointer}
.switch input,.op input{width:18px;height:18px;margin-top:2px;accent-color:var(--naranja);flex:none}
.permisos-grid{display:flex;flex-direction:column;border:1px solid var(--borde);border-radius:11px;overflow:hidden;margin-bottom:16px}
.pg-h,.pg-f{display:grid;grid-template-columns:1fr 60px 60px 104px;align-items:center}
.pg-h{background:#fafbfd;font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#3b4456}
.pg-h span,.pg-f>span{padding:10px 14px}
.pg-h span:not(:first-child){padding:10px 4px}
.pg-h span:not(:first-child){text-align:center}
.pg-f{border-top:1px solid #eef1f6}
.pg-f label{margin:0;align-items:center;justify-content:center;min-height:44px;cursor:pointer}
.pg-f input{width:19px;height:19px;accent-color:var(--naranja)}
.fila-accion{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fila-accion p{margin:2px 0 0}

/* Vacío */
.vacio{text-align:center;padding:56px 20px}
.vacio-ic{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:16px;background:#fff3e6;color:var(--naranja)}
.vacio h2{margin:14px 0 6px;font-size:1.2rem}
.vacio p{margin:0 auto;max-width:460px;color:var(--tenue)}

/* Login */
.login-body{display:grid;place-items:center;min-height:100vh;background:var(--side);padding:16px}
.login{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:20px}
.login-logo .logo{padding:0}
.login-card{width:100%}
.login-card h1{margin:0 0 16px;font-size:1.3rem}
.login-card .alerta{margin-bottom:14px}

.nav-toggle,.nav-velo{display:none}

/* ── Fase 2: productos y biblioteca ── */
.kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi-ic.amarillo{background:var(--amarillo-s);color:#b97800}
.kpi-ic.rojo{background:var(--rojo-s);color:var(--rojo)}
.kpi-ic.morado{background:var(--morado-s);color:var(--morado)}
.chip.c-azul{background:var(--azul-s);color:#1a4fae}
.chip.c-verde{background:var(--verde-s);color:#127a3a}
.chip.c-naranja{background:#fff3e6;color:#b35400}
.chip.c-morado{background:var(--morado-s);color:#5b2fd6}
.chip.c-rojo{background:var(--rojo-s);color:#b4232a}
.chip.c-amarillo{background:var(--amarillo-s);color:#8a5a00}
.estado.e-activo{background:var(--verde-s);color:var(--verde)}
.estado.e-stock_bajo{background:var(--amarillo-s);color:#b46a00}
.estado.e-agotado{background:var(--rojo-s);color:var(--rojo)}
.estado.e-inactivo{background:#eef1f6;color:#5b6577}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla th.num{text-align:right;white-space:normal;max-width:110px}
.stock{font-weight:700}
.stock.s-activo{color:var(--verde)} .stock.s-stock_bajo{color:#d48300} .stock.s-agotado{color:var(--rojo)} .stock.s-inactivo{color:var(--tenue)}
.fecha{white-space:nowrap}
.fecha small{display:block;color:var(--tenue)}
.prod{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:200px}
.prod img,.bib-p img,.bib-h img{width:52px;height:52px;object-fit:contain;border-radius:10px;background:#f4f6fa;border:1px solid var(--borde);flex:none}
.prod strong{display:block}
.prod small{color:var(--tenue)}
.prod:hover strong{color:var(--azul)}
.prod-sin{width:52px;height:52px;border-radius:10px;background:#f1f3f8;color:#a5aec0;display:grid;place-items:center;flex:none}
.prod-sin.grande{width:56px;height:56px}
.acc{white-space:nowrap}
.ib{display:inline-grid;place-items:center;width:34px;height:38px;border-radius:9px;border:0;background:none;color:#3b4456;cursor:pointer;vertical-align:middle}
.ib:hover{background:#f1f4f9;color:var(--azul)}
form.inline{display:inline}
.tabs-barra{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 20px 0;border-bottom:1px solid var(--borde)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs-barra .tabs{flex:1 1 0;min-width:240px}
.tab{padding:13px 12px;text-decoration:none;font-weight:600;color:#4b5567;border-bottom:3px solid transparent;white-space:nowrap}
.tab.on{color:var(--txt);border-color:var(--azul)}
.tab:hover{color:var(--txt)}
.tab-n{font-size:.78rem;background:#eef1f6;border-radius:99px;padding:1px 7px;margin-left:3px;color:#4b5567}
.tabs-acc{display:flex;gap:10px;padding-bottom:10px}
.filtros{display:flex;gap:10px;padding:14px 20px;flex-wrap:wrap;border-bottom:1px solid var(--borde)}
.filtros label{margin:0}
select{font:500 .95rem Inter,sans-serif;min-height:44px;padding:0 34px 0 12px;border:1px solid #d5dbe5;border-radius:10px;background:#fff;color:var(--txt)}
.buscar{position:relative;flex:1;min-width:240px;margin:0;display:block}
.buscar .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8a93a6;width:18px;height:18px}
.buscar input,.buscar input[type=search]{width:100%;padding-left:40px}
input[type=search],textarea{font:500 .98rem Inter,sans-serif;min-height:44px;padding:0 13px;border:1px solid #d5dbe5;border-radius:10px;background:#fff;color:var(--txt)}
textarea{padding:11px 13px;resize:vertical;line-height:1.5}
.tabla-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--borde)}
.pager{display:flex;gap:6px;align-items:center}
.pg{min-width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--borde);border-radius:9px;text-decoration:none;font-weight:600;padding:0 8px}
.pg.on{background:var(--azul);border-color:var(--azul);color:#fff}
.pg-sep{color:var(--tenue)}
.por-pag label{margin:0}
.btn.peligro{background:#fff;border-color:#f3c2c4;color:var(--rojo)}
.btn.peligro:hover{background:var(--rojo-s)}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
fieldset.sin-borde{border:0;padding:0;margin:0;min-width:0;display:contents}
fieldset.sin-borde:disabled input,fieldset.sin-borde:disabled select,fieldset.sin-borde:disabled textarea{background:#f7f8fb;color:#3b4456}
.t-der{float:right}
.sub-t{font-size:.95rem;margin:18px 0 10px}
.margen{margin:-4px 0 14px;font-weight:600;font-size:.9rem}
.margen.ok{color:var(--verde)} .margen.mal{color:var(--rojo)}
.fotos-elegir{display:flex;flex-wrap:wrap;gap:10px}
.foto-op{margin:0;position:relative;cursor:pointer}
.foto-op input{position:absolute;opacity:0}
.foto-op img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:2px solid var(--borde);display:block}
.foto-op input:checked+img{border-color:var(--naranja);box-shadow:0 0 0 3px #ffe2c4}
.foto-op input:focus-visible+img{outline:3px solid rgba(31,111,235,.45)}
.peligro p{margin:2px 0 0}

/* Biblioteca */
.kpi-alm{display:block}
.kpi-alm em{display:flex;justify-content:space-between;margin-top:6px}
.kpi-alm .pct{font-size:.85rem;font-weight:600;color:var(--txt);display:inline}
progress.barra{width:100%;height:8px;margin-top:12px;appearance:none;border:0;border-radius:99px;background:#e8edf5;overflow:hidden}
progress.barra::-webkit-progress-bar{background:#e8edf5;border-radius:99px}
progress.barra::-webkit-progress-value{background:var(--azul);border-radius:99px}
progress.barra::-moz-progress-bar{background:var(--azul);border-radius:99px}
.bib{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:start}
.bib-lista{padding:16px;display:flex;flex-direction:column;gap:12px}
.bib-lista .card-t{margin:4px 0 0}
.bib-lista nav{display:flex;flex-direction:column;gap:4px}
.bib-p{display:flex;align-items:center;gap:12px;padding:9px;border-radius:11px;text-decoration:none}
.bib-p img,.bib-p .prod-sin{width:48px;height:48px}
.bib-p strong{display:block;font-weight:600;font-size:.93rem}
.bib-p small{color:var(--tenue)}
.bib-p:hover{background:#f5f7fb}
.bib-p.on{background:var(--azul-s)}
.bib-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.bib-h h2{margin:0;font-size:1.15rem}
.bib-h p{margin:2px 0 0}
.bib-h>div{flex:1;min-width:180px}
.bib-n{font-weight:600}
.bib-det .tabs{border-bottom:1px solid var(--borde);margin-bottom:16px}
.subida{border:2px dashed #cdd6e4;border-radius:12px;padding:14px 16px;margin-bottom:16px;background:#fafbfd;font-size:.92rem}
.subida p{margin:0}
.subida.encima{border-color:var(--azul);background:var(--azul-s)}
.subida-cola{list-style:none;margin:0;padding:0}
.subida-cola li{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid #eef1f6;font-size:.9rem}
.subida-cola li:first-child{margin-top:10px}
.subida-cola li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subida-cola li.ok small{color:var(--verde);font-weight:600}
.subida-cola li.mal small{color:var(--rojo);font-weight:600}
.subida-cola progress{width:100%}
.subida-fin{margin-top:8px!important}
.galeria{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.g-item{border:1px solid var(--borde);border-radius:12px;overflow:visible;background:#fff;display:flex;flex-direction:column}
.g-vista{position:relative;display:block;aspect-ratio:1;background:#f1f4f9;border-radius:11px 11px 0 0;overflow:hidden}
.g-vista img,.g-vista video{width:100%;height:100%;object-fit:cover;display:block}
.g-tipo{position:absolute;top:8px;left:8px;background:var(--azul);color:#fff;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:6px}
.g-prin{position:absolute;bottom:8px;left:8px;background:var(--naranja);color:#fff;font-size:.72rem;font-weight:600;padding:2px 8px 2px 4px;border-radius:6px;display:flex;align-items:center;gap:3px}
.g-prin .ic{width:13px;height:13px}
.g-play{position:absolute;inset:0;margin:auto;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#18212f}
.g-play .ic{width:20px;height:20px;margin-left:3px}
.g-dur{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.7);color:#fff;font-size:.74rem;padding:1px 6px;border-radius:5px}
.g-doc{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--rojo);gap:4px}
.g-pie{display:flex;align-items:flex-start;gap:4px;padding:9px 6px 9px 11px}
.g-txt{flex:1;min-width:0}
.g-txt strong{display:block;font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-txt small{color:var(--tenue);font-size:.8rem}
details.menu{position:relative}
details.menu summary{list-style:none;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;font-weight:700;color:#4b5567}
details.menu summary::-webkit-details-marker{display:none}
details.menu summary:hover{background:#f1f4f9}
.menu-l{position:absolute;right:0;top:34px;z-index:10;background:#fff;border:1px solid var(--borde);border-radius:11px;box-shadow:0 10px 30px rgba(16,24,40,.14);padding:6px;min-width:190px}
.menu-l a,.menu-l button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:0;background:none;border-radius:8px;font:500 .9rem Inter,sans-serif;text-decoration:none;color:var(--txt);cursor:pointer;text-align:left}
.menu-l .ic{width:16px;height:16px}
.menu-l a:hover,.menu-l button:hover{background:#f4f6fa}
.menu-l .rojo{color:var(--rojo)}
.vacio.chico{padding:30px 10px}

/* Fase 3: landings y ajustes */
.kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))}
.lp-prev{width:96px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--borde);display:block}
.prod-n{text-decoration:none;display:block}
.prod-n:hover strong{color:var(--azul)}
.td-prod small{display:block;margin:2px 0 4px}
.td-url{max-width:260px}
.url-t{font-size:.86rem;color:var(--azul);word-break:break-all}
.url-grande{margin:4px 0 0;display:flex;align-items:center;gap:4px}
.ib.copiado{color:var(--verde);background:var(--verde-s)}
.toggle{width:44px;height:26px;border-radius:99px;border:0;background:#cfd6e2;position:relative;cursor:pointer;vertical-align:middle;margin-right:6px;padding:0}
.toggle span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .15s}
.toggle.on{background:var(--verde)}
.toggle.on span{left:21px}
.conv{background:var(--verde-s);color:#127a3a;font-weight:700;padding:3px 9px;border-radius:99px}
.nueva-lp{margin-left:auto}
.nueva-lp summary.btn{list-style:none}
.nueva-lp summary.btn::-webkit-details-marker{display:none}
.menu-ancho{min-width:280px;max-height:60vh;overflow:auto}
.menu-t{margin:6px 10px;font-size:.85rem}
.menu-l hr{border:0;border-top:1px solid var(--borde);margin:6px 0}
.foto-op.chk input{opacity:0}
.mt{margin-top:16px}
.solo-movil{display:none}

@media (max-width:1400px){
  .tabla th,.tabla td{padding-left:8px;padding-right:8px}
  .prod{min-width:150px}
  .ib{width:30px}
  .tabla th.num{max-width:84px}
}
@media (max-width:1279px){
  /* Tablas -> tarjetas: en el celular nada de deslizar de lado dentro de la tabla. */
  .tabla-cards thead{display:none}
  .tabla-cards,.tabla-cards tbody,.tabla-cards tr,.tabla-cards td{display:block;width:100%}
  .tabla-cards tr{padding:12px 14px;border-bottom:1px solid var(--borde);display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 14px}
  .tabla-cards td{padding:0;border:0;text-align:left}
  .tabla-cards td.td-prod,.tabla-cards td.acc{grid-column:1/-1}
  .tabla-cards td[data-l]::before{content:attr(data-l);display:block;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tenue)}
  .tabla-cards td.num{text-align:left}
  .tabla-cards td.acc{text-align:left;border-top:1px solid #eef1f6;padding-top:6px}
}
@media (max-width:1300px){
  .kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpis.k5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .grid-form{grid-template-columns:1fr}
  .bib{grid-template-columns:minmax(0,1fr)}
  .solo-escritorio{display:none!important}
  .solo-movil{display:block}
  .solo-movil select{width:100%;max-width:100%}
  .solo-movil label{margin:0}
}
@media (max-width:900px){
  .side{transform:translateX(-100%);transition:transform .2s}
  .nav-toggle:checked ~ .side{transform:none}
  .nav-toggle:checked ~ .nav-velo{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:20}
  .main{margin-left:0;padding:14px 16px 32px}
  .btn-menu{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--borde);background:#fff;cursor:pointer;margin:0}
  .kpis.k3,.kpis.k5,.kpis.k6{grid-template-columns:1fr 1fr}
  .nueva-lp{margin-left:0;width:100%}
  .nueva-lp summary.btn{width:100%}
  .kpis .kpi{padding:14px;gap:10px}
  .kpi b{font-size:1.4rem}
  .kpi-ic{width:38px;height:38px}
  .fila2{grid-template-columns:1fr}
  .tabs-barra{padding:4px 12px 0}
  .tabs{flex-wrap:wrap;gap:0 2px}
  .tab{padding:11px 8px}
  .tabs-acc{width:100%}
  .tabs-acc .btn{flex:1}
  .filtros{padding:12px}
  .filtros label:not(.buscar),.filtros select{flex:1}
  .tabla-pie{padding:12px}
  .galeria{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .subida-cola li{grid-template-columns:minmax(0,1fr) 80px}
  .subida-cola li small{grid-column:1/-1}
  .top h1{font-size:1.3rem}
  .top-ic{display:none}
  fieldset.opciones{grid-template-columns:1fr}
  .pg-h,.pg-f{grid-template-columns:1fr 44px 44px 90px}
  .bitacora time{display:block;min-width:0}
}

/* Fase 4: pedidos */
.nav-n{font-size:.72rem;font-weight:700;min-width:22px;padding:1px 7px;border-radius:99px;background:var(--rojo);color:#fff;text-align:center}
.nav-i.on .nav-n{background:#fff;color:var(--naranja)}
.periodo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.periodo label{margin:0;position:relative;display:block}
.periodo .ic-sel{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#4b5567;pointer-events:none}
.periodo select{padding-left:38px}
input[type=date]{font:500 .95rem Inter,sans-serif;min-height:44px;padding:0 10px;border:1px solid #d5dbe5;border-radius:10px;background:#fff;color:var(--txt)}
.aviso-pend{background:var(--amarillo-s);color:#7a4d00;border:1px solid #f5d79a}
.aviso-pend a{font-weight:700;margin-left:6px}
.kpi-ped{position:relative;align-items:flex-start;padding-bottom:34px}
.kpi-ped em{display:block}
.kpi-ic.gris{background:#eef1f6;color:#5b6577}
.var.sube{color:var(--verde);font-weight:600}
.var.baja{color:var(--rojo);font-weight:600}
.spark{position:absolute;right:14px;bottom:10px;left:74px;height:24px;display:flex;align-items:flex-end;justify-content:flex-end;gap:2px}
.spark i{display:block;flex:0 1 5px;min-width:2px;border-radius:2px 2px 0 0;background:currentColor;opacity:.75}
.spark i.b0{height:2px;opacity:.3} .spark i.b1{height:10%} .spark i.b2{height:20%} .spark i.b3{height:30%}
.spark i.b4{height:40%} .spark i.b5{height:50%} .spark i.b6{height:60%} .spark i.b7{height:70%}
.spark i.b8{height:80%} .spark i.b9{height:90%} .spark i.b10{height:100%}
.spark.s-azul{color:var(--azul)} .spark.s-verde{color:var(--verde)} .spark.s-morado{color:var(--morado)}
.spark.s-rojo{color:var(--rojo)} .spark.s-gris{color:#9aa4b5}
.estado.p-por_confirmar{background:#fff3e6;color:#c25e00}
.estado.p-confirmado{background:var(--verde-s);color:var(--verde)}
.estado.p-en_transito{background:var(--azul-s);color:var(--azul)}
.estado.p-entregado{background:#dcf5e6;color:#0f6b33}
.estado.p-devuelto{background:var(--rojo-s);color:var(--rojo)}
.estado.p-cancelado{background:#eef1f6;color:#5b6577}
.estado.p-entregado::before{background:#0f6b33}
.origen{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ic-o{width:18px;height:18px}
.ped-lay{display:flex;flex-direction:column;gap:18px}
.cliente strong{display:block;font-weight:600}
.cliente small{color:var(--tenue);white-space:nowrap}
.prod-chico{min-width:180px;gap:10px}
.prod-chico img,.prod-chico .prod-sin{width:44px;height:44px}
.xcant{color:var(--naranja);font-weight:700}
.td-num a{text-decoration:none;white-space:nowrap}
.td-num a:hover strong{color:var(--azul)}
.tabla th.chk,.tabla td.chk{width:36px;padding-right:0}
.chk label{margin:0}
.chk input{width:18px;height:18px;accent-color:var(--azul)}
.tabla tr.sel td{background:#f3f7ff}
.ib-wa{color:#16a34a}
.masivo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 20px;border-bottom:1px solid var(--borde);background:#fafbfd}
.masivo label{margin:0}
.btn.wa{background:#16a34a;color:#fff}
.btn.wa:hover{background:#13883e}
.btn.verde{background:#0f9f4f;color:#fff}
.btn.verde:hover{background:#0b8641}
.det{padding:18px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:14px;container-type:inline-size}
.det-cuerpo,.det-col{display:flex;flex-direction:column;gap:14px;min-width:0}
@container (min-width:760px){
  .det-cuerpo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(220px,.8fr);gap:28px;align-items:start}
  .det-cuerpo>.det-col>.det-sec:first-child{border-top:0;padding-top:0}
  .det-cuerpo>.det-acc{position:sticky;top:14px}
}
.det-h{display:flex;align-items:center;gap:10px}
.det-h h2{margin:0;font-size:1.2rem}
.det-x{margin-left:auto}
.det-tabs{border-bottom:1px solid var(--borde);margin:0 -18px;padding:0 10px}
.det-prod{display:flex;align-items:center;gap:12px}
.det-prod img{width:72px;height:72px;object-fit:contain;border-radius:10px;border:1px solid var(--borde);background:#f4f6fa;flex:none}
.det-prod div{flex:1;min-width:0}
.det-prod strong,.det-prod small,.det-prod b{display:block}
.det-prod small{color:var(--tenue)}
.det-cant{font-weight:700}
.det-sec{border-top:1px solid #eef1f6;padding-top:12px}
.det-sec h3{margin:0 0 8px;font-size:.95rem}
.det-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.det-sec-h h3{margin:0}
.det-datos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.det-datos li{display:flex;gap:10px;align-items:flex-start}
.det-datos .ic{width:18px;height:18px;color:var(--tenue);margin-top:2px}
.det-datos small{display:block;color:var(--tenue)}
.det-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:.92rem}
.det-dl dt{color:var(--tenue)}
.det-dl dd{margin:0;text-align:right;overflow-wrap:anywhere}
.det-tot{border-top:1px dashed var(--borde);padding-top:10px;margin-top:10px}
.det-tot dt,.det-tot dd{color:var(--txt)}
.det-acc{display:flex;flex-direction:column;gap:8px}
.det-acc form{margin:0}
.det-editar{margin-top:10px}
.det-editar summary,.det-motivo summary{list-style:none;cursor:pointer}
.det-editar summary{display:inline-flex;align-items:center;gap:6px;color:var(--azul);font-weight:600;font-size:.9rem}
.det-editar summary .ic{width:16px;height:16px}
.det-editar summary::-webkit-details-marker,.det-motivo summary::-webkit-details-marker{display:none}
.det-editar form{margin-top:12px}
.det-motivo[open] summary{display:none}
.det-motivo form{border:1px solid #f3c2c4;border-radius:11px;padding:12px;background:#fffafa}
.det-pre{white-space:pre-wrap;background:#f7f9fc;border:1px solid var(--borde);border-radius:10px;padding:12px;font:500 .86rem/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0;overflow-wrap:anywhere}
.historial{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.historial li{padding:10px 0 10px 16px;border-left:2px solid var(--borde);position:relative;font-size:.9rem}
.historial li::before{content:"";position:absolute;left:-6px;top:15px;width:10px;height:10px;border-radius:50%;background:#cfd6e2}
.historial li.h-estado::before{background:var(--azul)}
.historial li.h-whatsapp::before{background:var(--verde)}
.historial time{display:block;color:var(--tenue);font-size:.82rem}
.alerta.chica{padding:9px 12px;font-size:.88rem;margin:0}
@media (max-width:1500px){
  .kpi-ped .kpi-ic{display:none}
  .kpi-ped .spark{left:14px}
}
@media (min-width:1800px){
  .ped-lay.con-det{display:grid;grid-template-columns:minmax(0,1fr) 380px;align-items:start}
  .ped-lay.con-det .det{order:2}
  .ped-lay.con-det .tabla th,.ped-lay.con-det .tabla td{padding-left:7px;padding-right:7px}
}
@media (max-width:1279px){
  /* Tarjeta de pedido compacta: numero y estado arriba, cliente, producto, total y acciones. */
  .tabla-ped tr{grid-template-columns:28px auto minmax(0,1fr) auto;grid-template-areas:"chk num ori est" "cli cli cli fec" "prod prod prod prod" "tot tot tot acc";gap:6px 10px;align-items:center}
  .tabla-ped td[data-l]::before{display:none}
  .tabla-ped td.chk{grid-area:chk;width:auto;padding:0}
  .tabla-ped td.td-num{grid-area:num}
  .tabla-ped td.td-est{grid-area:est;text-align:right}
  .tabla-ped td.cliente{grid-area:cli}
  .tabla-ped td.fecha{grid-area:fec;text-align:right}
  .tabla-ped td.td-prod{grid-area:prod}
  .tabla-ped td.td-tot{grid-area:tot}
  .tabla-ped td.td-ori{grid-area:ori;font-size:.85rem;color:var(--tenue)}
  .tabla-ped td.acc{grid-area:acc;grid-column:auto;border:0;padding:0;text-align:right}
  .tabla-ped .prod-chico{min-width:0}
}
@media (max-width:900px){
  .periodo{width:100%}
  .periodo label{flex:1}
  .periodo select{width:100%}
  .det-tabs{margin:0 -18px}
  .masivo{padding:10px 12px}
  .masivo label{flex:1}
  .masivo select{width:100%}
  .kpi-ped{flex-wrap:wrap;padding-bottom:12px}
  .kpi-ped .spark{position:static;flex:1 0 100%;height:18px;justify-content:flex-start}
}

/* Fase 5: campanas */
.estado.cm-verde{background:var(--verde-s);color:var(--verde)}
.estado.cm-amarillo{background:var(--amarillo-s);color:#a86a00}
.estado.cm-azul{background:var(--azul-s);color:var(--azul)}
.estado.cm-rojo{background:var(--rojo-s);color:var(--rojo)}
.estado.cm-gris{background:#eef1f6;color:#5b6577}
.tabla-camp td.num small{display:block;font-size:.72rem}
.fila-form{display:flex;gap:10px;flex-wrap:wrap}
.fila-form select{min-width:min(320px,100%)}
.camp-form{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.camp-form select,.fila-form select{max-width:100%}
.camp-form:has(input[name=modo][value=cbo]:checked) .solo-abo{display:none}
.camp-form:has(input[name=modo][value=abo]:checked) .solo-cbo{display:none}
.crs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin-top:8px;align-items:start}
.cr{border:1px solid var(--borde);border-radius:12px;padding:12px;min-width:0}
.cr:has(.cr-sel:checked){border-color:var(--naranja);background:#fffaf4}
.cr-cab{display:flex;flex-direction:row;align-items:center;gap:10px;cursor:pointer;margin:0;font-weight:400}
.cr-cab .cr-sel{width:18px;height:18px;accent-color:var(--naranja);flex:none}
.cr-cab img,.anuncio img{border-radius:8px;object-fit:cover;flex:none}
.cr-cab span{min-width:0}
.cr-cab small{display:block;color:var(--tenue);overflow-wrap:anywhere}
.cr-campos{margin-top:12px;display:grid;gap:10px}
.cr:not(:has(.cr-sel:checked)) .cr-campos{display:none}
.modo{border:0;padding:0;margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modo legend{font-weight:600;margin-bottom:8px;padding:0}
.fila-campos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sets{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;align-items:start}
.set{border:1px solid var(--borde);border-radius:12px;padding:14px;display:grid;gap:10px;align-content:start;min-width:0}
.set:has(> .switch input:checked){border-color:var(--naranja)}
.int-res{list-style:none;margin:0;padding:4px;border:1px solid var(--borde);border-radius:10px}
.int-res li{padding:0}
.int-res button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;font:inherit;color:inherit}
.int-res button:hover,.int-res button:focus-visible{background:#f5f7fb}
.int-res small{display:block;color:var(--tenue);font-size:.76rem}
.int-sel{display:flex;flex-wrap:wrap;gap:6px}
.int-sel .chip{display:inline-flex;align-items:center}
.chip-x{border:0;background:none;cursor:pointer;margin-left:4px;padding:0 2px;font-size:1.05rem;line-height:1;color:inherit}
.auds{display:grid;gap:8px}
.regiones{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.camp-cab{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.camp-cab small{display:block}
.resumen{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.resumen li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px}
.resumen span{color:var(--tenue)}
.resumen strong{font-weight:600;overflow-wrap:anywhere}
.sub-t{font-size:.95rem;margin:20px 0 10px}
.anuncios{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.anuncio{display:flex;gap:12px;border:1px solid var(--borde);border-radius:12px;padding:12px;min-width:0}
.anuncio div{display:grid;gap:4px;align-content:start;min-width:0}
.anuncio-txt{white-space:pre-line;margin:2px 0;overflow-wrap:anywhere}
.anuncio .chip{justify-self:start}
.crudo summary{cursor:pointer;color:var(--azul);margin-top:16px}
.crudo pre{background:#0d1828;color:#dce3ee;padding:14px;border-radius:10px;overflow:auto;font-size:.76rem;max-height:440px}
.acciones-fila{gap:10px;flex-wrap:wrap;margin-top:18px}
.acciones-fila form{margin:0}
.activar-form{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;width:100%}
.card-t-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-t-fila .card-t{margin:0;display:flex;align-items:center;gap:8px}
.numeros{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.numeros li{background:#f7f9fc;border-radius:10px;padding:12px 14px}
.numeros small{display:block;color:var(--tenue)}
.numeros strong{font-size:1.25rem}
.pres-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:0}
.pres-form input{max-width:150px}
@media (max-width:700px){
  .fila-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modo{grid-template-columns:1fr}
  .resumen li{grid-template-columns:1fr;gap:2px}
  .crs,.anuncios{grid-template-columns:1fr}
}
.kpi b.plata{white-space:nowrap;font-size:clamp(1.15rem,1.6vw,1.6rem)}
.fila-campos input,.fila-campos select{width:100%;min-width:0}