@font-face{font-family:"Sora";font-weight:100 800;font-display:swap;src:url("/static/fonts/sora.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url("/static/fonts/instrumentsans.woff2") format("woff2")}
:root{
  --bg:#f4f5f8; --card:#fff; --borde:#e6e8ee; --txt:#181a20; --tenue:#646b7a;
  --side:#0e0e10; --side-txt:#c6c6cd; --naranja:#d39b00; --naranja2:#f7b500;
  --azul:#2767dc; --azul-s:#e9f0fd; --verde:#167d4c; --verde-s:#e5f6ec; --rojo:#d51e24; --rojo-s:#fdebec;
  --amarillo:#9c6308; --amarillo-s:#fdf2df; --morado:#7554d4; --morado-s:#f0ebfb;
  --acento:#f7b500; --acento-tinta:#151310; --acento-s:#fdf6df; --acento-txt:#8a6200;
  --r:12px; --sombra:0 1px 2px rgba(20,22,30,.05);
  --f-titulo:"Sora","Instrument Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:"Instrument Sans",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:12px;text-decoration:none;padding:2px 0 18px}
/* Marca: B azul + texto naranja del logo real, en horizontal, y la bandera al lado. --h = alto del logo.
   Sobre el carbon la B va en placa blanca (sin ella queda a 3:1 de contraste). */
.marca{--h:40px;display:inline-flex;align-items:center;gap:10px}
.marca-b{display:grid;place-items:center;flex:none}
.marca.con-placa .marca-b{width:calc(var(--h) + 14px);height:calc(var(--h) + 14px);border-radius:13px;background:#f7b500;box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* Sobre el lateral oscuro la B va como el icono de la pestana: placa del acento y la B en carbon (el PNG es la B azul
   del logo con fondo transparente; el filtro la deja negra sin otro archivo). */
.marca.con-placa .marca-b img{filter:brightness(0);opacity:.92}
.marca-b img{height:var(--h);width:auto;display:block}
.marca-txt{height:var(--h);width:auto;display:block}
.marca-flag{width:30px;height:20px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.en-logo .marca{--h:46px;gap:14px}
.en-logo .marca-flag{width:36px;height:24px}
.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:44px;padding:0 18px;border-radius:10px;border:1px solid transparent;font:600 .95rem "Instrument Sans",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,minmax(0,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.amarillo{background:#fff6d6;color:#7a5600}
.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],input[type=email]{font:500 .98rem "Instrument Sans",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}
.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}
label .ayuda{font-weight:400;font-size:.82rem;color:var(--tenue)}
fieldset.opciones{border:0;padding:0;margin:0 0 14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,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:minmax(0,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)}
.vacio p .btn{margin-top:16px}

/* Login */

.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 "Instrument Sans",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 "Instrument Sans",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)}
/* Nota al pie de una tabla: es un parrafo (texto con enlaces), no una fila flexible que separa sus partes. */
.tabla-nota{margin:0;padding:12px 20px 14px;border-top:1px solid var(--borde);color:var(--tenue);font-size:.84rem;line-height:1.5;max-width:110ch}
.tabla-nota a{color:var(--txt);font-weight:600}
.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:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
fieldset.sin-borde{border:0;padding:0;margin:0;min-width:0;display:contents}
.col-pila{display:flex;flex-direction:column;gap:18px;min-width:0;align-self:stretch}
.col-pila>.card:last-child{flex:1;display:flex;flex-direction:column}
.col-pila>.card:last-child label{flex:1}
.col-pila>.card:last-child textarea{flex:1;min-height:9em;resize:vertical}
@media (min-width:1101px){.grid-form>.pegajosa,fieldset.sin-borde>.pegajosa{position:sticky;top:80px}}
.card-pie{display:flex;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--borde)}
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}
/* label trae margen inferior global: dentro de una fila flex desalinea el boton del texto de estado. */
.lp-subir{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.lp-subir label.btn{margin:0}
.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 "Instrument Sans",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{white-space:nowrap}
.url-t{font:600 .84rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--txt);margin-right:4px}
.td-url .ib{vertical-align:middle}
.td-est{white-space:nowrap}
.est-txt{font-size:.84rem;font-weight:600;color:var(--tenue);vertical-align:middle}
.est-txt.on{color:var(--verde)}
.tabla th{white-space:nowrap}
.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:1279px){
  /* Landing como tarjeta: portada al lado del nombre, despues direccion y estado, despues las cifras. */
  .tabla-lp tr{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tabla-lp td.td-prev{grid-column:span 2}
  .tabla-lp td.td-prod{grid-column:span 4}
  .tabla-lp td.td-url,.tabla-lp td.td-est{grid-column:span 3}
  .tabla-lp td.num{grid-column:span 2}
  .tabla-lp td.fecha{display:none}
  .tabla-lp .lp-prev{width:100%;max-width:120px;height:auto;aspect-ratio:8/5}
}
@media (max-width:900px){
  /* Producto en el celular: precio, stock y estado a la vista; proveedor, categoria y fecha quedan en su ficha. */
  .tabla-prod tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tabla-prod td.td-cat,.tabla-prod td.td-prov,.tabla-prod td.fecha{display:none}
}
@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:minmax(0,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:minmax(0,1fr) minmax(0,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:minmax(0,1fr)}
  .tabs-barra{padding:4px 12px 0}
  .seg.etapas{margin:8px 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:minmax(0,1fr)}
  .pg-h,.pg-f{grid-template-columns:minmax(0,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 "Instrument Sans",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-motivo summary{list-style:none;cursor:pointer}
.det-motivo summary::-webkit-details-marker{display:none}
.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 (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}
/* Crear campana: dos pasos (anuncios / publico y presupuesto) y un resumen fijo al costado. */
.pasos-camp{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.pasos-camp li{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--card);border:1px solid var(--borde);color:var(--tenue);font-weight:600;font-size:.88rem}
.pasos-camp li[data-ir-paso]{cursor:pointer}
.pasos-camp .paso-n{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;background:#eceef3;font:700 .82rem var(--f-titulo)}
.pasos-camp li.actual{border-color:var(--acento);color:var(--txt)}
.pasos-camp li.actual .paso-n{background:var(--acento);color:var(--acento-tinta)}
.pasos-camp li.hecho .paso-n{background:var(--verde-s);color:var(--verde)}
.camp-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.camp-main{display:grid;gap:18px;min-width:0}
.camp-res{position:sticky;top:84px;display:grid;gap:12px}
.res-dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;font-size:.9rem}
.res-dl dt{color:var(--tenue)}
.res-dl dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.res-dl dd small{display:block;font-weight:400;color:var(--tenue);font-size:.78rem}
.res-plata{font:700 1.15rem var(--f-titulo)}
.res-plata.mal{color:var(--rojo)}
.res-mini{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.res-mini img,.res-mini span{width:26px;height:32px;border-radius:5px;object-fit:cover;background:#11131a;color:#fff;display:grid;place-items:center;font-size:.6rem}
.res-pausa{display:flex;gap:8px;align-items:center;margin:0;padding:10px 12px;border-radius:10px;background:var(--acento-s);color:var(--acento-txt);font-size:.85rem;font-weight:600}
.camp-pie{gap:10px;flex-wrap:wrap}
.crs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:8px;align-items:start}
.cr{border:1px solid var(--borde);border-radius:12px;min-width:0;overflow:hidden;background:var(--card)}
.cr-cab{display:block;cursor:pointer;margin:0;font-weight:400}
.cr-vista{position:relative;display:block;aspect-ratio:4/5;background:#11131a}
.cr-vista img,.cr-vista video{display:block;width:100%;height:100%;object-fit:cover}
.cr-vista .cr-sel{position:absolute;top:10px;right:10px;width:22px;height:22px;margin:0;accent-color:var(--acento)}
.cr-tipo{position:absolute;left:10px;top:10px;background:rgba(14,14,16,.78);color:#fff;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:99px}
.cr-cab>small{display:block;padding:8px 12px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anuncio img{border-radius:8px;object-fit:cover;flex:none}
.cr-campos{padding:0 12px 12px;display:grid;gap:10px}
.cr:not(:has(.cr-sel:checked)) .cr-campos{display:none}
@media (max-width:1180px){.camp-wrap{grid-template-columns:minmax(0,1fr)}.camp-res{position:static}}
@media (max-width:600px){
  .crs{grid-template-columns:minmax(0,1fr);gap:10px}
  .cr-cab{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center}
  .cr-cab>small{white-space:normal;overflow-wrap:anywhere}
  .cr-campos{padding:12px}
}
.modo{border:0;padding:0;margin:0 0 12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,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}
.sets>.nota{grid-column:1/-1;margin:0}
.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(5,minmax(0,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:minmax(0,1fr)}
  .resumen li{grid-template-columns:minmax(0,1fr);gap:2px}
  .crs,.anuncios{grid-template-columns:minmax(0,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}

/* Mi perfil y usuarios: correo y celular */
.perfil-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),460px));gap:18px}
.perfil-grid .form-chico{max-width:none}
.contacto span,.contacto small{display:block}
.contacto span{overflow-wrap:anywhere}
.sol-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sol-lista li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid #f0d98a;background:#fffaf0;border-radius:12px}
.sol-lista small{overflow-wrap:anywhere}
.sol-acc{display:flex;gap:8px}

/* ===== Entrada: login, registro y recuperar clave. Linea de Baron Local (carbon y un solo acento
   amarillo) con la tipografia de la Biblioteca. Las fuentes se sirven desde la app (CSP font-src). */
.entrada{--en-carbon:#0E0E10;--en-amarillo:#F7B500;--en-tinta:#151310;--en-fondo:#F4F5F8;--en-txt:#181A20;
  --en-tenue:#5E6573;--en-linea:#DCDFE6;margin:0;min-height:100vh;background:var(--en-fondo);color:var(--en-txt);
  font:15px/1.5 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.en{display:grid;grid-template-columns:minmax(360px,44%) minmax(0,1fr);min-height:100vh}
.en-marca{position:relative;background:var(--en-carbon);color:#fff;display:flex;flex-direction:column;padding:40px 48px 64px;overflow:hidden}
.en-logo{display:flex;align-items:center;gap:12px}
.en-panel{margin:auto 0;max-width:30rem;padding:48px 0}
.en-titular{margin:0;font:700 clamp(2.2rem,3.6vw,3.4rem)/1.05 "Sora",sans-serif;letter-spacing:-.02em}
.en-bajada{margin:18px 0 0;font-size:1.1rem;color:#C9C9D1;max-width:24rem}
/* Franja de advertencia como la de los empaques de herramientas: el unico adorno de la pantalla. */
.en-franja{position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(-45deg,var(--en-amarillo) 0 14px,var(--en-carbon) 14px 28px)}
.en-form{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.en-caja{width:100%;max-width:400px}
.en-h1{margin:0 0 8px;font:700 1.75rem/1.15 "Sora",sans-serif;letter-spacing:-.015em}
.en-intro{margin:0;color:var(--en-tenue)}
.en-caja .alerta{margin:16px 0 0}
.en-caja .alerta.en-aviso{background:#FDF3D0;color:#5C4200;border:1px solid #F1D88A}
.en-campos{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.entrada .campo{display:flex;flex-direction:column;gap:6px;margin:0;font-weight:600;font-size:.92rem}
.entrada .campo input{font:500 1rem "Instrument Sans",sans-serif;min-height:48px;padding:0 14px;border:1px solid var(--en-linea);border-radius:10px;background:#fff;color:var(--en-txt);width:100%}
.entrada .campo input:focus{outline:none;border-color:var(--en-carbon);box-shadow:0 0 0 3px rgba(247,181,0,.5)}
.campo-ayuda{font-weight:400;font-size:.84rem;color:var(--en-tenue)}
.entrada .clave-campo{position:relative;display:block}
.entrada .clave-campo input{padding-right:52px}
.entrada .ver-clave{position:absolute;top:0;right:0;width:48px;height:48px;display:grid;place-items:center;border:0;background:none;color:var(--en-tenue);cursor:pointer;border-radius:0 10px 10px 0}
.entrada .ver-clave:hover,.entrada .ver-clave[aria-pressed=true]{color:var(--en-txt)}
.entrada .ver-clave:focus-visible{outline:3px solid var(--en-amarillo);outline-offset:-3px}
.entrada .ver-clave .ic{width:20px;height:20px}
.en-btn{width:100%;min-height:50px;border:0;border-radius:10px;background:var(--en-amarillo);color:var(--en-tinta);font:700 1rem "Sora",sans-serif;cursor:pointer;margin-top:4px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.en-btn:hover{background:#FFC21F}
.en-btn:focus-visible{outline:3px solid var(--en-carbon);outline-offset:2px}
.en-btn.sec{background:#fff;border:1px solid var(--en-linea);color:var(--en-txt)}
.en-btn.sec:hover{background:#EEF0F4}
.en-link,.en-otra a{color:var(--en-txt);font-weight:600;text-decoration:underline;text-decoration-color:var(--en-amarillo);text-decoration-thickness:2px;text-underline-offset:3px}
.en-olvide{align-self:flex-end;font-size:.9rem;margin-top:-6px}
.en-otra{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--en-linea);color:var(--en-tenue);text-align:center}
.en-estado{display:flex;flex-direction:column;gap:12px}
.en-estado p{margin:0}
.en-estado .en-btn{margin-top:12px}
.en-estado .en-otra{margin-top:16px}
.en-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#FDF3D0;color:#8A6200;margin-bottom:4px}
.en-ic.ok{background:#E5F6EC;color:#167D4C}
.en-ic.mal{background:#FDEBEC;color:#B4161B}
.en-ic .ic{width:26px;height:26px}
/* Pasos del registro: es una secuencia real, por eso van numerados. */
.pasos{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.pasos li{display:flex;align-items:center;gap:14px;color:#A2A2AC;font-size:1.02rem}
.paso-n{width:34px;height:34px;border-radius:99px;border:2px solid #3A3A42;display:grid;place-items:center;font:700 .95rem "Sora",sans-serif;flex:none}
.pasos li.actual{color:#fff;font-weight:600}
.pasos li.actual .paso-n{background:var(--en-amarillo);border-color:var(--en-amarillo);color:var(--en-tinta)}
.pasos li.hecho{color:#D4D4DA}
.pasos li.hecho .paso-n{border-color:var(--en-amarillo);color:var(--en-amarillo)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:900px){
  .en{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .en-marca{padding:20px 16px 30px}
  .en-panel{margin:0;padding:20px 0 0;max-width:none}
  .en-titular{font-size:1.65rem}
  .en-bajada{font-size:1rem;margin-top:8px}
  .en-franja{height:10px}
  .en-form{align-items:flex-start;padding:28px 16px 40px}
  .pasos{flex-direction:row;gap:12px;margin-top:16px}
  .pasos li{flex:1;flex-direction:column;align-items:flex-start;gap:6px;font-size:.82rem;line-height:1.25}
  .paso-n{width:28px;height:28px;font-size:.85rem}
}
@media (prefers-reduced-motion:no-preference){.en-caja{animation:en-entra .3s ease-out both}}
@keyframes en-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== Marco del panel: linea de Baron Local (lateral carbon, un solo acento amarillo con letra
   oscura, barra superior blanca) y tipografia de la Biblioteca (Sora en titulos y cifras). ===== */
body.panel{font-size:14.5px}
.panel h1,.panel h2,.card-t,.kpi b,.vacio p strong{font-family:var(--f-titulo);letter-spacing:-.01em}
.side{width:236px;padding:18px 12px 0}
.nav-sec{margin:16px 12px 6px;padding-top:0;border-top:0;font-size:.72rem;letter-spacing:.06em;color:#8b8b93}
.side nav{gap:2px}
.nav-i{padding:9px 12px;border-radius:9px;font-size:.92rem}
.nav-i:hover{background:#232327;color:#fff}
.nav-i.on{background:var(--acento);color:var(--acento-tinta);font-weight:700;box-shadow:none}
.nav-i.on .pronto{background:rgba(21,19,16,.12);color:var(--acento-tinta)}
.nav-n{background:var(--acento);color:var(--acento-tinta);font-family:var(--f-titulo)}
.nav-i.on .nav-n{background:var(--acento-tinta);color:var(--acento)}
.side-pie{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:12px}
.tienda-card{background:#17171a;border:1px solid #232327;border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.tienda-card strong{color:#fff;font-size:.82rem}
.tienda-url{font-size:.78rem;color:#9a9aa3;overflow-wrap:anywhere}
.tienda-ok,.tienda-falta{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;margin-top:4px}
.tienda-ok{color:#41ce96}.tienda-falta{color:#f5c451}
.tienda-ok::before,.tienda-falta::before{content:"";width:7px;height:7px;border-radius:99px;background:currentColor}
.side-user{border-top:0;margin-top:0;padding-top:0}
/* La franja del login, mas fina: el lateral es el mismo panel carbon de la entrada. */
.side-franja{flex:none;height:8px;margin:12px -12px 0;background:repeating-linear-gradient(-45deg,var(--acento) 0 10px,var(--side) 10px 20px)}
.side .avatar{background:var(--acento);color:var(--acento-tinta)}
.main{margin-left:236px;padding:0 28px 40px;gap:18px}
.top{position:sticky;top:0;z-index:20;margin:0 -28px;padding:10px 28px;min-height:62px;background:#fff;border-bottom:1px solid var(--borde);flex-wrap:nowrap;gap:14px}
.top-t{display:block;flex:1;min-width:0}
.top h1{font-size:1.2rem;line-height:1.2}
.top p{margin:2px 0 0;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-ic{display:none}
.top-acc{flex:none;align-items:center}
.campana{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:#3a3f4b;flex:none;text-decoration:none}
.campana:hover{background:#f2f4f8}
.campana-n{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--rojo);color:#fff;font:700 .68rem/18px var(--f-titulo);text-align:center}
.top-av{width:34px;height:34px;border-radius:99px;background:var(--acento);color:var(--acento-tinta);display:grid;place-items:center;font:700 .85rem var(--f-titulo);text-decoration:none;flex:none}
.btn{border-radius:9px;font-weight:600}
.btn.prim{background:var(--acento);color:var(--acento-tinta);font-weight:700}
.btn.prim:hover{background:#ffc21f}
.btn:focus-visible,.nav-i:focus-visible,input:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--acento-txt);outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:var(--txt);box-shadow:0 0 0 3px rgba(247,181,0,.35);outline:none}
/* Campo de plata que no se entiende (app.js campoPlata / lanzar.js fmtMiles): borde rojo y el motivo debajo. */
input[aria-invalid=true],input[aria-invalid=true]:focus{border-color:var(--rojo)}
.plata-aviso{color:var(--rojo);font-weight:600;font-size:.82rem;line-height:1.3}
.card{border-radius:12px;box-shadow:var(--sombra)}
.kpi-ic{display:none}
.kpi{padding:14px 16px}
.kpi b{font-size:1.5rem}
.kpi small{letter-spacing:.02em;color:var(--tenue)}
.tab.on{border-color:var(--acento)}
.pg.on{background:var(--txt);border-color:var(--txt);color:#fff}
.xcant{color:var(--acento-txt)}
.g-tipo{background:rgba(14,14,16,.78)}
.g-prin{background:var(--acento);color:var(--acento-tinta)}
.vacio-ic{background:var(--acento-s);color:var(--acento-txt)}
.op:has(input:checked){border-color:var(--acento);background:var(--acento-s)}
.cr:has(.cr-sel:checked){border-color:var(--acento);background:var(--acento-s)}
.foto-op input:checked+img{border-color:var(--acento);box-shadow:0 0 0 3px #fbe3a0}
.barra-cel{display:none}
@media (max-width:900px){
  .main{margin-left:0;padding:0 16px 96px}
  .top{position:static;margin:0 -16px;padding:8px 16px;min-height:56px;flex-wrap:wrap;row-gap:8px}
  .top-t{order:1;flex:1 1 0}
  .campana{order:2}
  .top-av{order:3}
  .top-acc{order:4;flex:1 1 100%;justify-content:flex-start}
  .top-acc:empty{display:none}
  .top h1{font-size:1.08rem}
  .top-acc .btn{min-height:38px;padding:0 12px}
  .barra-cel{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;height:64px;background:#fff;border-top:1px solid var(--borde);
    align-items:center;justify-content:space-around;padding:0 4px env(safe-area-inset-bottom)}
  .barra-cel a,.barra-cel label{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font:600 .68rem var(--f-titulo);color:var(--tenue);text-decoration:none;cursor:pointer;min-height:48px;justify-content:center}
  .barra-cel .ic{width:21px;height:21px}
  .barra-cel a.on{color:var(--txt)}
  .barra-cel a.on .ic{color:var(--acento-txt)}
  .bc-n{position:absolute;top:2px;left:calc(50% + 4px);font:700 .62rem var(--f-titulo);background:var(--acento);color:var(--acento-tinta);border-radius:99px;padding:0 5px}
  .bc-subir .bc-circulo{width:48px;height:48px;margin-top:-24px;border-radius:99px;background:var(--acento);color:var(--acento-tinta);display:grid;place-items:center;box-shadow:0 6px 16px rgba(247,181,0,.45)}
}
.spark{left:16px}
.kpi-ped{padding-bottom:40px}
.fila2>*{min-width:0}
.fila2 input,.fila2 select{width:100%}

/* ===== Pedidos (rediseño): periodo en pastillas, aviso de lo urgente, 4 indicadores que se tocan,
   tabla densa y el pedido en un panel lateral con las acciones fijas abajo. ===== */
.seg{display:flex;gap:2px;background:#eef0f4;border:1px solid var(--borde);border-radius:10px;padding:3px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg a{font-weight:600;font-size:.82rem;color:var(--tenue);padding:6px 10px;border-radius:7px;white-space:nowrap;text-decoration:none}
.seg a:hover{color:var(--txt)}
.seg a.on{background:#fff;color:var(--txt);box-shadow:0 1px 2px rgba(20,22,30,.08)}
.rango{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:12px 16px}
.rango label{margin:0}
.aviso-acc{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid;font-size:.92rem}
.aviso-acc>.ic{width:20px;height:20px;flex:none}
.aviso-acc>div{flex:1;min-width:0}
/* En el cajon del pedido no hay ancho para texto y boton lado a lado: el boton baja, alineado con el texto. */
.det-dir-aviso{flex-wrap:wrap}
.det-dir-aviso>div{flex-basis:calc(100% - 32px)}
.det-dir-aviso>form{margin-left:32px}
.aviso-acc .btn{flex:none}
.aviso-acc.warn{background:#fdf2df;border-color:#f0d39a;color:#6e4700}
.aviso-acc.mal{background:var(--rojo-s);border-color:#f3c2c4;color:#9b1c1f}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:13px 16px;display:flex;flex-direction:column;box-shadow:var(--sombra);text-decoration:none;color:inherit;min-width:0}
a.stat:hover{border-color:#d4d8e1;box-shadow:0 6px 18px rgba(20,22,30,.08)}
.stat-l{font-size:.8rem;color:var(--tenue);font-weight:500}
.stat-n{font:700 1.45rem/1.25 var(--f-titulo);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-s{font-size:.78rem;color:var(--tenue);margin-top:auto;padding-top:4px}
.stat.warn .stat-n{color:#9c6308}
.stat.mal .stat-n{color:var(--rojo)}
.tab.urg .tab-n{background:#fdf2df;color:#9c6308}
.tab.on .tab-n{background:var(--acento);color:var(--acento-tinta)}
/* Etapas de Dropi dentro de «Despachados»: un segmentado bajo las pestañas (se desliza solo, sin mover la página). */
.seg.etapas{margin:10px 20px 0;width:fit-content}
.seg.etapas a.on .tab-n{background:var(--acento);color:var(--acento-tinta)}
.tabs-barra .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tabs-barra .tabs::-webkit-scrollbar{display:none}
.tabla-ped td{padding:9px 12px}
.tabla-ped .td-num a{font:600 .85rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--txt);text-decoration:none}
.tabla-ped .fecha span,.tabla-ped .cliente strong{display:block;white-space:nowrap}
.tabla-ped .fecha small,.tabla-ped .cliente small{display:block;color:var(--tenue);font-size:.8rem}
.tabla-ped .cliente a{color:inherit;text-decoration:none}
.tabla-ped .td-tot{font-weight:700;font-variant-numeric:tabular-nums}
.tabla-ped .prod-chico img,.tabla-ped .prod-chico .prod-sin{width:36px;height:36px;border-radius:8px}
.tabla-ped .prod-chico>span:last-child{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabla-ped tr.sel td{background:var(--acento-s)}
.wa-marca{display:flex;align-items:center;gap:4px;font-size:.74rem;color:#167d4c;margin-top:4px;white-space:nowrap}
.wa-marca .ic{width:13px;height:13px}
.m-only{display:none}
.chico-t{font-size:.82rem}
.btn.grande{min-height:48px;font-size:1rem}
.btn-link{border:0;background:none;padding:6px 4px;color:var(--tenue);font:600 .85rem "Instrument Sans",sans-serif;text-decoration:underline;cursor:pointer}
.ic-wa{color:#16a34a}
/* panel lateral del pedido: es el mismo <aside> de siempre, puesto encima de la lista */
.cajon{position:fixed;inset:0;z-index:60}
.cajon-velo{position:absolute;inset:0;background:rgba(14,14,16,.36)}
.cajon .det{position:absolute;top:0;right:0;bottom:0;width:min(480px,100vw);background:#fff;box-shadow:-16px 0 48px rgba(14,14,16,.22);display:flex;flex-direction:column;padding:0;gap:0;border-radius:0}
.det-h{display:flex;align-items:center;gap:10px;padding:0 14px 0 20px;min-height:60px;border-bottom:1px solid var(--borde);flex:none}
.det-h h2{margin:0;font:700 1.15rem var(--f-titulo)}
.det-tabs{margin:0;padding:0 12px;border-bottom:1px solid var(--borde);flex:none}
.det-cuerpo{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.det-sec{border:1px solid var(--borde);border-radius:12px;padding:12px 14px}
.det-sec h3,.det-sec-h h3{margin:0 0 8px;font:600 .74rem var(--f-titulo);letter-spacing:.05em;text-transform:uppercase;color:var(--tenue)}
.det-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.det-nombre{margin:0;font-weight:700;font-size:1.02rem}
.det-tel{display:inline-block;margin-top:2px;color:var(--azul);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.det-dir{margin:6px 0 0;font-size:.92rem}
.det-dir small{display:block;color:var(--tenue)}
.det-prod img{width:56px;height:56px}
.det-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;padding-top:10px;border-top:1px dashed #d9dce4}
.det-total span{color:var(--tenue);font-size:.88rem}
.det-total b{font:700 1.2rem var(--f-titulo);font-variant-numeric:tabular-nums}
.dropi-campos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dropi-campos li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #f0f2f6}
.dropi-campos li:last-child{border-bottom:0}
.dropi-campos small{display:block;color:var(--tenue);font-size:.74rem}
.dropi-campos span{min-width:0;overflow-wrap:anywhere}
.det-pie{flex:none;border-top:1px solid var(--borde);padding:12px 20px 14px;display:flex;flex-direction:column;gap:8px;background:#fff}
.det-prim{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.det-prim:has(button + button){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.det-otras{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px}
.det-otras .det-motivo{width:100%}
.det-otras .det-motivo summary{list-style:none;display:flex;justify-content:center;width:100%;border-color:transparent}
.det-otras .det-motivo summary::-webkit-details-marker{display:none}
.det-otras .det-motivo[open] form{display:flex;flex-direction:column;gap:8px;margin-top:6px}
/* Editar pedido: el boton va primero en la pestana Pedido; el formulario reemplaza la vista y el pie guarda. */
.det-editar-btn{flex:none}
.det-no-edit{background:#f7f9fc;border-color:var(--borde);color:var(--tenue);margin:0}
.det-no-edit>.ic{width:18px;height:18px}
.det-edit{display:flex;flex-direction:column;gap:12px}
.det-edit .det-sec>label:last-child{margin-bottom:0}
.det-edit .switch{margin-bottom:0}
.det-edit-extra{margin-top:12px;padding-top:12px;border-top:1px dashed #d9dce4}
.det-edit-extra-t{margin:0 0 8px}
.det-edit-extra-t strong,.det-edit-extra-t small{display:block}
.det-edit-extra-t small{color:var(--tenue)}
/* Cantidad y precio (y cantidad del extra y quitarlo) son cortos: van de a dos tambien en el celular. */
.det-edit .ed-dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.det-edit .fila2 .switch{align-self:end;min-height:44px;align-items:center;margin-bottom:14px}
.det-edit .fila2 .switch input{width:18px;margin-top:0}
.det-edit input[readonly]{background:#f4f6fa;color:var(--txt)}
@media (max-width:1180px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .top .seg{max-width:100%}
  .aviso-acc{align-items:center;gap:10px;padding:10px 12px;font-size:.88rem}
  .aviso-acc .btn{min-height:34px;padding:0 12px;font-size:.84rem}
  .stats>.stat:last-child:nth-child(odd){grid-column:1/-1}
  .stat{padding:10px 12px}
  .stat-n{font-size:1.2rem}
  .filtros{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .filtros .buscar{grid-column:1/-1}
  .filtros select{width:100%}
  .m-only{display:inline}
  .tabla-ped thead{display:none}
  .tabla-ped,.tabla-ped tbody{display:block}
  .tabla-ped tr{display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"chk num tot" "chk cli est" "chk prod prod";gap:4px 10px;padding:12px 14px;border-bottom:1px solid var(--borde);align-items:center}
  .tabla-ped td{padding:0;border:0}
  .tabla-ped td.chk{grid-area:chk;align-self:start;padding-top:2px}
  .tabla-ped td.td-num{grid-area:num}
  .tabla-ped td.fecha,.tabla-ped td.td-ori,.tabla-ped td.acc{display:none}
  .tabla-ped td.cliente{grid-area:cli;min-width:0}
  .tabla-ped td.cliente strong,.tabla-ped td.cliente small{display:inline}
  .tabla-ped td.cliente small::before{content:" · "}
  .tabla-ped td.td-prod{grid-area:prod;min-width:0}
  .tabla-ped td.td-tot{grid-area:tot;text-align:right;font:700 1rem var(--f-titulo)}
  .tabla-ped td.td-est{grid-area:est;text-align:right}
  /* La columna del estado es `auto`: sin tope, una etapa larga con su crudo de Dropi dejaba al cliente en una letra por renglon. */
  .tabla-ped td.td-est{max-width:46vw}
  .tabla-ped td.td-est .estado{white-space:normal;text-align:left}
  .tabla-ped .prod-chico{min-width:0}
  .tabla-ped .prod-chico img,.tabla-ped .prod-chico .prod-sin{width:28px;height:28px}
  .tabla-ped .wa-marca{justify-content:flex-end}
  .cajon .det{width:100vw}
  .det-cuerpo{padding:14px 16px}
  .det-pie{padding:10px 16px 14px}
}
.toast{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;gap:10px;background:#0e0e10;color:#fff;padding:12px 14px 12px 16px;border-radius:12px;box-shadow:0 12px 32px rgba(14,14,16,.3);font-weight:600}
.toast a{color:var(--acento);font-weight:700}
.toast-x{border:0;background:none;color:#c6c6cd;font-size:1.2rem;cursor:pointer;width:32px;height:32px}
@media (max-width:900px){.toast{left:16px;right:16px;bottom:78px}}
.top-acc{min-width:0}
.top-acc .seg{min-width:0;flex:0 1 auto}
.tabla-scroll{overflow-x:auto}
@media (max-width:1280px) and (min-width:901px){
  .tabla-ped .td-ori,.tabla-ped th:nth-last-child(2){display:none}
  .tabla-ped .prod-chico>span:last-child{max-width:170px}
  .tabla-ped td,.tabla-ped th{padding-left:8px;padding-right:8px}
}
.det-prim .btn{white-space:normal;line-height:1.15;padding:0 12px}
/* ===== Inicio ===== */
.inicio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin-bottom:12px}
.card-h .card-t{margin:0}
.card-h a{font-weight:600;color:var(--txt);text-decoration:underline;text-decoration-color:var(--acento);text-decoration-thickness:2px;text-underline-offset:3px}
.card-h a.btn{text-decoration:none}
.barras{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;height:150px;align-items:end}
.barra-dia{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;height:100%;position:relative}
.barra-dia>span{display:block;width:calc(50% - 1px);border-radius:3px 3px 0 0;position:absolute;bottom:18px}
.barra-dia .b-ped{left:0;background:var(--acento)}
.barra-dia .b-gas{right:0;background:#3a3f4b}
.barra-dia small{position:absolute;bottom:0;font-size:.7rem;color:var(--tenue)}
.barra-dia>span.b0{height:2px;opacity:.35}
.barra-dia>span.b1{height:12px}.barra-dia>span.b2{height:25px}.barra-dia>span.b3{height:38px}.barra-dia>span.b4{height:51px}
.barra-dia>span.b5{height:64px}.barra-dia>span.b6{height:77px}.barra-dia>span.b7{height:90px}.barra-dia>span.b8{height:103px}
.barra-dia>span.b9{height:116px}.barra-dia>span.b10{height:129px}
.leyenda{display:flex;align-items:center;gap:6px 14px;margin:10px 0 0;font-size:.8rem;color:var(--tenue)}
.leyenda span{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:-8px}
.ley-ped{background:var(--acento)}.ley-gas{background:#3a3f4b}
.lista-filas{list-style:none;margin:0;padding:0}
.lista-filas li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #f0f2f6}
.lista-filas li:last-child{border-bottom:0}
.lista-filas a{min-width:0;text-decoration:none;color:inherit}
.lista-filas a strong,.lista-filas a small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lista-filas a small{color:var(--tenue);font-size:.8rem}
.lf-dato{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-weight:700;font-variant-numeric:tabular-nums;flex:none;text-align:right}
.lf-dato small{font-weight:500;font-size:.76rem;color:var(--tenue)}
.lf-dato.mal{color:var(--rojo)}
.pasos-arr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* Numero, titulo y texto arriba; el boton debajo del texto, para que no lo aplaste en una columna angosta. */
.pasos-arr li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;align-content:start;border:1px solid var(--borde);border-radius:12px;padding:12px}
.pasos-arr li .btn{grid-column:2;justify-self:start;margin-top:8px}
.pasos-arr strong,.pasos-arr small{display:block}
.pasos-arr strong{line-height:28px}
.pasos-arr small{color:var(--tenue);font-size:.82rem}
.pasos-arr .paso-n{width:28px;height:28px;border-radius:99px;border:2px solid var(--borde);display:grid;place-items:center;font:700 .85rem var(--f-titulo)}
.pasos-arr .paso-n .ic{width:16px;height:16px}
.pasos-arr li.sigue{border-color:var(--acento);background:var(--acento-s)}
.pasos-arr li.sigue .paso-n{background:var(--acento);border-color:var(--acento);color:var(--acento-tinta)}
.pasos-arr li.hecho{background:#fafbfc}
.pasos-arr li.hecho .paso-n{background:var(--verde-s);border-color:var(--verde-s);color:var(--verde)}
.pasos-arr li.hecho strong{color:var(--tenue);font-weight:600}
@media (max-width:1100px){.inicio-grid{grid-template-columns:minmax(0,1fr)}.pasos-arr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){.pasos-arr{grid-template-columns:minmax(0,1fr)}.barra-dia small{font-size:.62rem}}
/* ===== Campanas ===== */
.pills-barra{padding:14px 16px 0}
.pills{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.84rem;padding:6px 12px;border-radius:99px;border:1px solid var(--borde);background:#fff;color:#3a3f4b;white-space:nowrap;text-decoration:none;flex:none}
.pill:hover{background:#f2f4f8}
.pill.on{background:var(--txt);border-color:var(--txt);color:#fff}
.pill .pc{font:700 .7rem var(--f-titulo);background:#eceef3;color:#5b6372;border-radius:99px;padding:1px 7px}
.pill.on .pc{background:rgba(255,255,255,.18);color:#fff}
.punto{width:7px;height:7px;border-radius:99px;flex:none}
.punto.verde{background:var(--verde)}.punto.rojo{background:var(--rojo)}.punto.amarillo{background:var(--acento)}
.tabla-camp td{padding:10px 12px}
.tabla-camp .camp{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:220px}
.tabla-camp .camp img,.tabla-camp .camp .prod-sin{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none}
.tabla-camp .camp strong{display:block}
.tabla-camp .camp small{display:block;color:var(--tenue);font-size:.78rem}
.tabla-camp .met b{font-weight:700}
.tabla-camp td.num small,.tabla-camp .met small{display:block;font-size:.76rem;color:var(--tenue);font-weight:500;white-space:nowrap}
.tabla-camp small.mal{color:var(--rojo);font-weight:700}
.presu{display:inline-flex;align-items:baseline;gap:5px;font-weight:600;white-space:nowrap}
.presu small{font:600 .68rem var(--f-titulo);color:var(--tenue)}
.tabla-camp tr.quema td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
.tabla-camp tr.apagada td{color:var(--tenue)}
.estado.cm-quema{background:var(--rojo);color:#fff;margin-left:4px}
.estado.cm-quema::before{background:#fff}
.sw{position:relative;display:inline-block;width:38px;height:22px;border-radius:99px;background:#d4d8e1;border:0;padding:0;cursor:pointer;vertical-align:middle;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:99px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.sw.on{background:var(--verde)}
.sw.on::after{left:19px}
.sw.des{opacity:.35;cursor:default}
.spark-linea{display:flex;align-items:flex-end;gap:2px;height:18px;margin-top:6px;color:var(--acento)}
.spark-linea i{flex:1;background:currentColor;border-radius:1px;opacity:.85;min-width:2px}
.spark-linea i.b0{height:2px;opacity:.3}.spark-linea i.b1{height:10%}.spark-linea i.b2{height:20%}.spark-linea i.b3{height:30%}
.spark-linea i.b4{height:40%}.spark-linea i.b5{height:50%}.spark-linea i.b6{height:60%}.spark-linea i.b7{height:70%}
.spark-linea i.b8{height:80%}.spark-linea i.b9{height:90%}.spark-linea i.b10{height:100%}
@media (max-width:900px){
  .tabla-camp thead{display:none}
  .tabla-camp,.tabla-camp tbody{display:block}
  .tabla-camp tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:14px;border-bottom:1px solid var(--borde)}
  .tabla-camp td{padding:0;border:0;text-align:left}
  .tabla-camp td.c-sw{display:none}
  .tabla-camp td.c-nom{grid-column:1/-1}
  .tabla-camp .camp{min-width:0}
  .tabla-camp td.acc{display:none}
  .tabla-camp td[data-l]::before{content:attr(data-l);display:block;font:600 .66rem var(--f-titulo);letter-spacing:.04em;text-transform:uppercase;color:var(--tenue);margin-bottom:2px}
  .tabla-camp td.num{text-align:left}
  .tabla-camp tr.quema{box-shadow:inset 3px 0 0 var(--rojo)}
}
/* Un texto solo para lectores de pantalla (.sr) es absoluto: sin un ancestro posicionado se escapa
   del recuadro que se desliza y estira la pagina hacia el costado. */
.tabla-scroll,.pills,.seg,.stats,.tabs,.tabla-card{position:relative}
/* ===== Biblioteca: tarjetas de anuncio como en la Biblioteca de Colombia ===== */
.galeria{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.g-vista{aspect-ratio:4/5;background:#11131a}
.g-vista img{background:#fff}
.g-item{border-radius:12px;box-shadow:var(--sombra)}
.g-tipo{background:rgba(14,14,16,.72)}
.g-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.chip-m{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:.72rem;padding:2px 7px;border-radius:99px;background:#eceef3;color:#5b6372;white-space:nowrap}
.chip-m.ok{background:var(--verde-s);color:var(--verde)}
.chip-m.ok i{width:6px;height:6px;border-radius:99px;background:currentColor}
.chip-m.tenue-c{background:none;border:1px dashed #d4d8e1}
.bib-acc{display:flex;gap:8px;flex-wrap:wrap}
.bib-det .aviso-acc{margin:4px 0 10px}
@media (max-width:900px){.galeria{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bib-acc{width:100%}.bib-acc .btn{flex:1}}
.g-vista img{object-fit:contain;background:#f4f5f8}
.bib-h .bib-acc{flex-direction:row}
.stats.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.nueva-lp summary{white-space:nowrap}
.nueva-lp summary .ic{flex:none}
/* El boton de nueva landing vive en un details.menu: sin esto hereda el cuadrado de 32px del menu de tres puntos. */
details.menu.nueva-lp summary.btn{width:auto;height:auto;min-height:44px;display:inline-flex;color:var(--acento-tinta);padding:0 16px}
@media (max-width:900px){details.menu.nueva-lp summary.btn{width:100%}}

/* Indicadores */
.stats+.stats{margin-top:12px}
.stats.cinco{grid-template-columns:repeat(5,minmax(0,1fr))}
.stats.siete{grid-template-columns:repeat(7,minmax(0,1fr))}
.stats.siete .stat-n{font-size:1.25rem}
@media (max-width:1380px){.stats.siete{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1180px){.stats.cinco{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ind-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.ind-grid .ind-ancha{grid-column:1/-1}
@media (min-width:1381px){.ind-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}.ind-grid .ind-ancha{grid-column:auto}}
.barras.libre{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px}
.barras-h{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.barras-h li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 10px;font-size:.88rem}
.barras-h .bh-b{grid-column:1/-1;order:9}
.barras-h b{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.barras-h small{color:var(--tenue);text-align:right;white-space:nowrap;min-width:34px}
.bh-b{height:8px;border-radius:99px;background:#eef1f6;overflow:hidden}
.bh-b i{display:block;height:100%;border-radius:99px;background:var(--acento)}
.bh-b i.w0{width:0%}.bh-b i.w1{width:5%}.bh-b i.w2{width:10%}.bh-b i.w3{width:15%}.bh-b i.w4{width:20%}.bh-b i.w5{width:25%}.bh-b i.w6{width:30%}.bh-b i.w7{width:35%}.bh-b i.w8{width:40%}.bh-b i.w9{width:45%}.bh-b i.w10{width:50%}.bh-b i.w11{width:55%}.bh-b i.w12{width:60%}.bh-b i.w13{width:65%}.bh-b i.w14{width:70%}.bh-b i.w15{width:75%}.bh-b i.w16{width:80%}.bh-b i.w17{width:85%}.bh-b i.w18{width:90%}.bh-b i.w19{width:95%}.bh-b i.w20{width:100%}
.bh-b i.e-por_confirmar{background:#f0a050}.bh-b i.e-confirmado{background:var(--verde)}.bh-b i.e-en_transito{background:var(--azul)}
.bh-b i.e-entregado{background:#0f6b33}.bh-b i.e-devuelto{background:var(--rojo)}.bh-b i.e-cancelado{background:#a5aec0}
.tabla-ind .camp{display:flex;align-items:center;gap:10px;min-width:200px}
.tabla-ind .camp img,.tabla-ind .camp .prod-sin{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none}
.tabla-ind td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabla-ind th.num{text-align:right}
.tabla-ind td.num small{display:block;font-size:.76rem;color:var(--tenue)}
.tabla-ind b.mal{color:var(--rojo)}
.tabla-ind tr.pierde td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
.tabla-card .card-h{padding:16px 18px 0}
.lista-filas li>span:first-child{min-width:0}
.lista-filas li>span:first-child strong,.lista-filas li>span:first-child small{display:block}
.lista-filas li>span:first-child small{color:var(--tenue);font-size:.8rem}
@media (max-width:900px){
  .ind-grid{grid-template-columns:minmax(0,1fr)}
  .tabla-ind thead{display:none}
  .tabla-ind,.tabla-ind tbody{display:block}
  .tabla-ind tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:14px;border-bottom:1px solid var(--borde)}
  .tabla-ind td{padding:0;border:0;text-align:left}
  .tabla-ind td:first-child{grid-column:1/-1}
  .tabla-ind .camp{min-width:0}
  .tabla-ind td.num{text-align:left}
  .tabla-ind tr.pierde{box-shadow:inset 3px 0 0 var(--rojo)}
  .tabla-ind tr.pierde td:first-child{box-shadow:none}
  .tabla-ind td[data-l]::before{content:attr(data-l);display:block;font:600 .66rem var(--f-titulo);letter-spacing:.04em;text-transform:uppercase;color:var(--tenue);margin-bottom:2px}
}
.salir-f{margin:0}
button.salir{background:none;border:0;padding:0;cursor:pointer;font:inherit}
/* Indicadores en el celular: 2 columnas, todo a la vista. Va al final porque .tres/.cinco/.siete se
   definen mas arriba con la misma especificidad y, si no, pisan esta regla. */
@media (max-width:900px){.stats,.stats.tres,.stats.cinco,.stats.siete{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* ===== Simetria (barrido pulir-pantalla). Va al FINAL: a igual especificidad gana el orden y las reglas
   de celular escritas antes perdian contra las de escritorio (.tabs-barra .tabs{nowrap} pisaba el wrap). ===== */
/* Pie del asistente de campana: los dos botones son un grupo, miden igual. */
.camp-pie>*{flex:1 1 0;max-width:220px}
.camp-pie .btn{width:100%}
/* Salir, a la altura del bloque del perfil que tiene al lado. */
button.salir{align-self:stretch;display:grid;place-items:center;width:40px}
/* Grupos de botones: miden igual (columnas 1fr en una grilla que se ajusta al contenido). */
.tabs-acc,.bib-acc,.tabla-lp td.acc,.top-acc:not(:has(.seg)){display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.tabs-acc .btn,.bib-acc .btn,.tabla-lp td.acc .btn,.top-acc:not(:has(.seg)) .btn{width:100%}
.tabla-lp td.acc{gap:6px}
.filtros .btn{min-height:44px}
.pasos-camp li{min-height:42px}
.bib-p{min-height:64px}
/* Nombre de archivo en una linea: con dos, los chips de abajo quedaban desfasados entre tarjetas. */
.g-txt small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-accion>div{min-width:0;flex:1 1 220px}
@media (max-width:1280px){
  /* Pestanas y pastillas envuelven como chips. Antes scrolleaban de lado y escondian hasta 534 px de
     opciones sin ninguna pista. Las del panel del pedido (3) siguen subrayadas: entran. */
  .tabs-barra .tabs,.tabs:not(.det-tabs),.pills{flex-wrap:wrap;overflow:visible;gap:6px;padding:8px 0 10px}
  .tabs:not(.det-tabs) .tab{padding:6px 10px;border:1px solid var(--borde);border-radius:99px;font-size:.84rem;line-height:1.3}
  .tabs:not(.det-tabs) .tab.on{background:var(--txt);border-color:var(--txt);color:#fff}
  .tabs:not(.det-tabs) .tab.on .tab-n{background:rgba(255,255,255,.18);color:#fff}
  .tabs-barra{align-items:center}
}
@media (max-width:1500px){
  /* Productos y landings: a 1280-1440 la tabla se pasaba de la tarjeta (3 a 21 px recortados). La fecha
     de creacion sobra en la lista: esta en la ficha. */
  .tabla-prod .fecha,.tabla-prod th:nth-last-child(2),.tabla-lp .fecha,.tabla-lp th:nth-last-child(2){display:none}
}
@media (max-width:1180px){
  /* Filtros: grilla de 2 columnas, el buscador y el boton a lo ancho (con flex quedaba media fila vacia). */
  .filtros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .filtros .buscar,.filtros>button,.filtros>.btn,.filtros>details{grid-column:1/-1}
  .filtros select,.filtros label{width:100%}
}
@media (max-width:1100px) and (min-width:901px){
  .tabla-ped .prod-chico>span:last-child{max-width:110px}
  .tabla-ped td,.tabla-ped th{padding-left:6px;padding-right:6px}
}
@media (max-width:900px){
  .regiones{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:480px){
  .tabla-pie{flex-direction:column;align-items:stretch}
  .tabla-pie .por-pag select{width:100%}
  .rango{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .rango .btn{grid-column:1/-1}
  .tabs-acc{grid-auto-flow:row;grid-auto-columns:auto}
  /* Las dos acciones del pedido una debajo de la otra: a lo ancho ninguna parte su texto. */
  .det-prim:has(button + button){grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  /* El periodo (hasta 7 opciones) envuelve en vez de cortarse. */
  .seg{flex-wrap:wrap;overflow:visible}
}

/* Tarjetas de un formulario a dos columnas: misma altura; si la tarjeta termina en un texto largo, ese campo
   crece y no queda aire muerto. La columna fija (pegajosa) no se estira: sticky necesita align-self:start. */
.grid-form>.card,.grid-form>fieldset>.card{display:flex;flex-direction:column}
.grid-form .card>label:has(>textarea){flex:1}
.grid-form .card>label>textarea{flex:1;min-height:7em;resize:vertical}
.grid-form>.pegajosa,.grid-form>fieldset>.pegajosa{align-self:start}
/* Grupos de acciones: iguales. */
.acciones-fila,.sol-acc{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.acciones-fila .btn,.sol-acc .btn{width:100%}
.fila-accion .btn{min-height:44px}
/* Resumen de la campana (5 cifras) y los 5 y 7 indicadores: filas que cierran el rectangulo en cada ancho. */
.numeros{grid-template-columns:repeat(5,minmax(0,1fr))}
.tabla-prod .td-prov,.tabla-usr .persona strong,.tabla-usr td[data-l="Última vez"]{white-space:nowrap}
@media (max-width:1380px) and (min-width:901px){
  .stats.siete{grid-template-columns:repeat(12,minmax(0,1fr))}
  .stats.siete>.stat{grid-column:span 3}
  .stats.siete>.stat:nth-child(n+5){grid-column:span 4}
}
@media (max-width:1180px) and (min-width:901px){
  .stats.cinco{grid-template-columns:repeat(6,minmax(0,1fr))}
  .stats.cinco>.stat{grid-column:span 2}
  .stats.cinco>.stat:nth-child(n+4){grid-column:span 3}
  .numeros{grid-template-columns:repeat(6,minmax(0,1fr))}
  .numeros>li{grid-column:span 2}
  .numeros>li:nth-child(n+4){grid-column:span 3}
}
@media (max-width:900px){
  .stat-s{min-height:2.9em}
  /* Por producto: 7 cifras en 3 columnas dejaban la ultima sola; la ganancia (la que importa) va a lo ancho. */
  .tabla-ind tr>td:nth-child(8):last-child{grid-column:1/-1}
}
@media (max-width:600px){
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .numeros>li{grid-column:auto}
  .numeros>li:last-child{grid-column:1/-1}
  .acciones-fila,.sol-acc{grid-auto-flow:row;grid-auto-columns:auto}
}
@media (max-width:480px){
  .tabla-camp tr{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Un select mide su opcion mas larga: en el asistente de campana ensanchaba la tarjeta 18 px a 360. */
select{max-width:100%;min-width:0}
.url-grande{flex-wrap:wrap}
.url-grande .url-t{white-space:normal;overflow-wrap:anywhere}
.salir-f{align-self:stretch;display:grid}
button.salir{height:100%}
.barras-h li{grid-template-columns:minmax(max-content,1fr) auto auto}
.tabla-lp th.num{max-width:none}
/* Pasos del asistente: en el celular el rotulo corto, para que los tres entren en una fila. */
.pasos-camp .corto{display:none}
@media (max-width:600px){
  .pasos-camp .largo{display:none}
  .pasos-camp .corto{display:inline}
  .pasos-camp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pasos-camp li{padding:6px 8px 6px 6px;justify-content:center}
}
@media (max-width:480px){
  .pg-h,.pg-f{grid-template-columns:minmax(0,1fr) 44px 44px 76px}
}

/* Pie del asistente de campana y acciones del borrador en el celular: a lo ancho, uno debajo del otro.
   El boton de copiar la direccion, en su propia linea bajo la URL. */
@media (max-width:600px){
  .camp-pie{display:grid;grid-auto-flow:row;grid-auto-columns:auto}
  .camp-pie>*{max-width:none}
  .acciones-fila form{display:contents}
  .acciones-fila form .btn,.acciones-fila>.btn{width:100%}
  .url-grande .ib{margin-left:auto}
}
/* La direccion de una landing puede ser larga: corta en cualquier punto en vez de empujar la tabla (y, en
   el celular, de pasar por debajo del interruptor). La columna tiene tope en escritorio para que el nombre
   conserve su ancho. */
.url-t{overflow-wrap:anywhere;white-space:normal}
.tabla-lp td.td-url{min-width:0}
@media (min-width:901px){.tabla-lp td.td-url{max-width:300px}}

/* Editor de la landing: los textos de la pagina por seccion (desplegables), la oferta y la pausa. */
.lpsec{border:1px solid var(--borde);border-radius:10px;padding:0 14px;margin:0 0 8px}
.lpsec summary{list-style:none;cursor:pointer;padding:12px 0;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lpsec summary::-webkit-details-marker{display:none}
.lpsec summary::before{content:"+";font-weight:700;color:var(--tenue);width:14px}
.lpsec[open] summary::before{content:"–"}
.lpsec[open]{padding-bottom:12px}
.lpsec label{margin-bottom:10px}
.lpsec .nota{margin:-4px 0 10px}
.col-pila>.card.textos-lp label{flex:none}
.col-pila>.card.textos-lp textarea{flex:none;min-height:0}
.acciones-lp{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=color]{min-height:44px;padding:4px;cursor:pointer}
/* Las dos acciones de la landing (pausar y desactivar) miden igual, como todo grupo de botones. */
.acciones-lp{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;max-width:420px}
.acciones-lp form{display:contents}
.acciones-lp .btn{width:100%}

/* Semaforo del cliente en Pedidos: lo que ya paso con ese celular antes de despachar. */
.cli-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:600;white-space:nowrap;background:#eef1f6;color:#5b6577;vertical-align:middle}
.cli-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.cli-tag.rojo{background:var(--rojo-s);color:#b4232a}
.cli-tag.verde{background:var(--verde-s);color:#127a3a}
.cli-tag.nuevo{background:var(--azul-s);color:#1a4fae}
.cli-tag.revisar{background:var(--amarillo-s);color:var(--amarillo)}
.tabla-ped td.cliente .cli-tag{display:inline-flex;margin-top:3px;max-width:100%;white-space:normal}
.det-cli{margin-top:8px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.det-cli .cli-tag{font-size:.8rem;white-space:normal}
.cli-hist{margin:0;padding-left:18px;font-size:.84rem;color:var(--tenue)}
.cli-hist li{margin:2px 0}
.det-prod.extra{margin-top:8px}
.novedad-marca{display:block;margin-top:3px;font-size:.72rem;font-weight:600;color:#b4232a;white-space:normal}
/* Estado crudo de Dropi debajo de la etapa cuando la etapa no lo dice ya («Dropi: ARRIBADO»). */
.etapa-crudo{display:block;margin-top:3px;font-size:.72rem;color:var(--tenue);white-space:normal}
/* La etapa puede ser larga («Con novedad: destinatario rechaza entrega»): en la lista se parte en dos renglones antes
   que ensanchar la tabla y obligarla a deslizarse de lado. */
.td-est .estado[data-etapa]{white-space:normal}
/* Con lugar de sobra, la etapa no se parte en dos renglones antes de tiempo (bajo 1280 la tabla ya se desliza). */
@media (min-width:1280px){.tabla-ped td.td-est{min-width:190px}}
/* Lo que Dropi pago o cobro por el pedido (wallet): debajo del estado en la lista y en el Envio del detalle. */
.plata-marca{display:block;margin-top:3px;font-size:.72rem;font-weight:600;color:var(--tenue);white-space:nowrap}
.plata-marca.ok,.plata-res.ok,.plata-movs b.ok{color:var(--verde)}
.plata-marca.mal,.plata-res.mal,.plata-movs b.mal{color:var(--rojo)}
.plata-res{margin:0 0 8px;font-weight:600}
.plata-movs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plata-movs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;font-size:.84rem;padding-bottom:8px;border-bottom:1px solid var(--borde)}
.plata-movs li:last-child{border-bottom:0;padding-bottom:0}
.plata-movs time{grid-column:1/-1;font-size:.74rem;color:var(--tenue)}
.plata-movs span{min-width:0;overflow-wrap:anywhere}
.plata-movs b{white-space:nowrap;font-family:var(--f-titulo)}

.clave-propia{margin:10px 0 0;max-width:320px}
/* La clave de una sola vez va en su propia linea, no metida en la frase */
.alerta.clave-box{flex-direction:column;align-items:stretch;gap:8px}
.alerta.clave-box code.clave{display:block;width:100%;text-align:center;box-sizing:border-box}

/* ── Simetría: clases de defecto medidas en todo el panel (barrido a 3 anchos sobre 147 pantallas) ── */
/* Un solo alto de control: boton (regla base), campo y selector miden 44 px; un boton junto a un campo quedaba 2 px
   corto. Los campos numericos y de fecha y hora no tenian el estilo de los demas. */
input[type=number],input[type=datetime-local]{font:500 .98rem "Instrument Sans",sans-serif;min-height:44px;padding:0 13px;border:1px solid #d5dbe5;border-radius:10px;background:#fff;color:var(--txt)}
/* Filas que mezclan campo y boton: el boton toma el alto del campo y la etiqueta pierde el margen de los formularios
   apilados (con align-items:end ese margen deja el campo 14 px mas arriba que su boton). */
:is(.masivo,.pres-form,.rango) .btn{min-height:44px}
:is(.masivo,.pres-form,.rango,.filtros)>label{margin-bottom:0}
/* El campo de presupuesto de la campana (etiqueta visible) ocupa el ancho de su etiqueta: con el tope de 150 px de los
   formularios de la tabla de conjuntos quedaba un hueco de 86 px entre el campo y «Cambiar». Los de la tabla siguen igual. */
.pres-form label:not(:has(.sr)) input{max-width:none;width:100%}
/* Barra superior en escritorio ancho (desde 1280 px): el titulo tiene piso y las acciones van a su lado. En el celular
   la barra ya envuelve con sus propias reglas; escritas sin media query, estas le ganaban por orden y apretaban el titulo. */
@media (min-width:1280px){
  .top-t{flex:1 1 300px;min-width:min(300px,45%)}
  .top-acc{flex:0 1 auto;min-width:0;justify-content:flex-end}
}
/* Entre 901 y 1279 px, con el lateral abierto, no entran en un renglon el titulo, las acciones, la campana y el avatar:
   la grilla de columnas iguales no envuelve, se aprieta, y los botones quedaban por debajo de su texto (los de WhatsApp a
   50 px con el texto afuera). Como en el celular: titulo, campana y avatar arriba, y las acciones en su propio renglon,
   cada boton del ancho de su texto (hasta 180 px, todos iguales si entran). */
@media (min-width:901px) and (max-width:1279px){
  .top{flex-wrap:wrap;row-gap:10px}
  .top-t{order:1;flex:1 1 0;min-width:0}
  .campana{order:2}
  .top-av{order:3}
  .top-acc{order:4;flex:1 1 100%;min-width:0}
  .top-acc:not(:has(.seg)){grid-auto-columns:minmax(max-content,180px);justify-content:start}
  .top-acc:empty{display:none}
}
/* Nombres largos: se parten en vez de ensanchar la tabla (Usuarios recortaba la columna de acciones) o salirse de la
   tarjeta en el celular (Pedidos). */
.tabla-ped .cliente strong,.tabla-usr .persona strong{white-space:normal;overflow-wrap:anywhere}
.persona>div{min-width:0}
/* Selectores cuyo ancho decide el dato (nombres de campana): no pasan del ancho de su fila. */
.filtros label{min-width:0;max-width:100%}
.filtros select{max-width:100%;min-width:0}
/* Boton de texto largo dentro de una nota: dos lineas antes que salirse. Montos de una nota: nunca partidos. */
.nota .btn{white-space:normal;height:auto;padding-top:8px;padding-bottom:8px;text-align:center;max-width:100%}
.nota b{white-space:nowrap}
/* Cancelar con motivo: al abrir, el boton se va y queda el formulario (la regla del detalle le ganaba por orden). */
.det-otras .det-motivo[open] summary{display:none}
/* Encabezados numericos cortos de tabla: en una linea. */
.tabla th.num{white-space:nowrap}

/* ── Novedades: el aviso de lo nuevo (<dialog>) y su historial ──
   Solo [open] fija el display: una regla de display sin el atributo pisa el display:none del navegador y deja el
   aviso cerrado pintado encima de la pantalla. */
.nov{width:min(600px,calc(100vw - 24px));max-width:none;max-height:min(760px,calc(100dvh - 24px));margin:auto;padding:0;border:1px solid var(--borde);border-radius:14px;background:var(--card);color:var(--txt);box-shadow:0 24px 64px rgba(14,14,16,.3)}
.nov[open]{display:flex;flex-direction:column}
.nov::backdrop{background:rgba(14,14,16,.55)}
.nov-h{display:flex;align-items:flex-start;gap:12px;padding:18px 14px 14px 22px;border-bottom:1px solid var(--borde)}
.nov-ht{flex:1;min-width:0}
.nov-v{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:var(--acento-txt)}
.nov-v .ic{width:16px;height:16px}
.nov-h h2{margin:6px 0 0;font-size:1.2rem;line-height:1.3}
.nov-x{flex:none;width:40px;height:40px}
.nov-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 22px 18px}
.nov-sec{margin:16px 0 10px;font:700 .86rem var(--f-titulo);color:var(--tenue)}
.nov-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nov-item{padding:12px 14px;border:1px solid var(--borde);border-radius:11px;background:var(--bg)}
.nov-item-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nov-item-h b{min-width:0;font-weight:700}
.nov-item-h .btn{flex:none}
.nov-item p{margin:4px 0 0;color:var(--tenue);line-height:1.5}
.nov-fix{margin:0;padding-left:20px;color:var(--tenue);line-height:1.5}
.nov-fix li+li{margin-top:6px}
.nov-ojo{margin-top:16px}
.nov-pie{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,170px));justify-content:end;gap:10px;padding:14px 22px 18px;border-top:1px solid var(--borde)}
.nov-pie .btn{width:100%}
/* Historial: en pantalla ancha las tarjetas de lo nuevo van de a dos (la linea de lectura queda corta) y, si son
   impares, la ultima toma el renglon entero en vez de dejar media fila vacia. */
.nov-card-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.nov-card-h .card-t{margin:0;flex:1 1 280px;min-width:0}
.nov-meta{display:inline-flex;align-items:baseline;gap:10px}
.nov-meta .chip{margin:0}
.nov-fecha{font-size:.88rem}
.nov-card .nov-fix{max-width:80ch}
@media (min-width:901px){
  .nov-card .nov-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nov-card .nov-items>li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:480px){
  .nov-h{padding:16px 8px 12px 16px}
  .nov-cuerpo{padding:2px 16px 16px}
  .nov-pie{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 16px 14px}
}
/* Un nombre largo en la tarjeta del usuario: sin min-width el texto no se encoge, pasa por debajo de «Salir» y se
   corta en el borde del lateral en vez de terminar en puntos suspensivos. */
.who>span:not(.avatar){min-width:0}
.side-nov .nav-v{font-size:.72rem;font-weight:600;color:#8b8b93}
/* Enlace a otra app: la flecha a la derecha, del mismo gris que la version de Novedades. */
.side-ext .nav-ext{width:15px;height:15px;margin-left:auto;color:#8b8b93;flex:none}
/* Los enlaces del pie van juntos, con el mismo paso que los del menu; el hueco del pie queda antes de la tienda. */
.side-links{display:flex;flex-direction:column}
.side-nov.on .nav-v{color:var(--acento-tinta)}
/* Landings en tabla (desde 1280 px): las dos acciones una sobre otra. En fila, la grilla de columnas iguales dejaba que
   la tabla apretara la celda hasta 24 px por boton y «Ver»/«Editar» se salian del boton; apiladas, la celda mide lo
   del boton mas ancho y la fila no crece (la portada ya es mas alta que dos botones chicos). */
@media (min-width:1280px){
  .tabla-lp td.acc{grid-auto-flow:row;grid-template-columns:minmax(max-content,1fr)}
}
/* Celular: un boton de la barra de arriba no queda mas angosto que su texto («Fotos y videos (16)» al lado de «Volver»
   se comia el relleno); el que necesita mas toma lo suyo y el resto se reparte. */
@media (max-width:900px){
  .top-acc:not(:has(.seg)){grid-auto-columns:minmax(max-content,1fr)}
}
/* Un boton a lo ancho con un texto largo («Crear la orden en Dropi y despachar» en el detalle angosto del pedido) parte
   el texto en dos renglones en vez de comerse el relleno. */
.btn.ancho{white-space:normal;text-align:center;height:auto;padding-top:8px;padding-bottom:8px}
/* Fila de acciones del borrador de campana: «Crear en Meta (en pausa)» no entraba en un tercio de la fila (768 a 1024
   px) y se comia el relleno. Cada boton toma al menos lo de su texto; hasta 700 px van uno debajo del otro. */
.acciones-fila{grid-auto-columns:minmax(max-content,1fr)}
@media (max-width:700px){.acciones-fila{grid-auto-flow:row;grid-auto-columns:auto}}

/* Integraciones: conectar Dropi (pasos, campo de la llave con su boton y el bloque de cambiar o desconectar). */
#dropi > .alerta{margin-bottom:14px}
.dropi-cuenta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;margin-top:6px}
.dropi-cuenta label{margin:0;min-width:0}
.dropi-cuenta .nota,.dropi-cuenta .btn{grid-column:1/-1}
.dropi-cuenta .btn{justify-self:start}
.dropi-cambiar{margin-top:16px;border-top:1px solid var(--borde);padding-top:14px}
.dropi-cambiar summary{cursor:pointer;font-weight:600}
.dropi-cambiar[open] summary{margin-bottom:12px}
.dropi-cambiar form + form{margin-top:12px}
@media (max-width:900px){.dropi-cuenta{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.dropi-cuenta .btn{justify-self:stretch}}
/* Pedido: cotizacion de Dropi antes de crear la orden (costo, flete, cobro y lo que queda). */
.dropi-cot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;margin:4px 0 10px;align-items:baseline}
.dropi-cot dt{min-width:0;overflow-wrap:anywhere;color:#4b5263}
.dropi-cot dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dropi-cot dd small{display:block;font-size:.72rem;color:var(--tenue)}
.dropi-cot dd.mal strong{color:var(--rojo)}