/* Añadidos de SkyDock sobre el diseño del prototipo */
body.booting .app, body.booting .login{visibility:hidden}

/* Acceso */
.login{position:fixed;inset:0;display:grid;place-items:center;background:var(--side);padding:16px;z-index:50}
.login[hidden]{display:none}
.lbox{background:var(--surface);color:var(--fg);width:min(400px,100%);padding:32px 30px;box-shadow:var(--shadow)}
.lbrand{margin-bottom:24px}
.lbrand .wm{font:500 34px/1 var(--display);text-transform:uppercase;color:var(--primary)}
.lbrand .sub{font:600 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin-top:6px}
.lbox .fld{display:grid;gap:6px;margin-bottom:14px}
.lbox input{border:1.5px solid var(--line-2);background:var(--surface);padding:11px 12px;border-radius:0}
.lbox input:focus{border-color:var(--primary);outline:none}
.lerr{color:var(--err-ink);font-weight:600;min-height:1.5em;margin:12px 0 0}

/* Ocho bandejas (se añade «Retenido») */
.trays{grid-template-columns:repeat(8,minmax(0,1fr))}
@media (max-width:1560px){.trays{grid-template-columns:repeat(4,minmax(0,1fr))}.tray{border-bottom:1px solid var(--line)}.tray:nth-child(4n){border-right:0}}
@media (max-width:640px){.trays{grid-template-columns:repeat(2,minmax(0,1fr))}.tray:nth-child(2n){border-right:0}}
.frow[hidden]{display:none}
.tray.crit .num{color:var(--err)}
.tray.crit{box-shadow:inset 0 4px 0 var(--err)}

/* Aviso de pedidos nuevos (como en Shopify) */

/* Alertas críticas (fraude) */
.alert.crit{border-color:var(--err);background:var(--err-tint);color:var(--err-ink)}
.alert.crit .ic{background:var(--err)}

/* Retenido */
.st.retenido{background:var(--err-tint);color:var(--err-ink)}
.holdbox{border:1.5px solid var(--err);background:var(--err-tint);color:var(--err-ink);padding:16px 18px;margin-bottom:14px}
.holdbox.soft{border-color:var(--orange);background:var(--orange-3);color:var(--orange-ink)}
.holdbox h3{font-size:18px;margin-bottom:6px}
.holdbox p{margin:6px 0}
.holdbox ul{margin:6px 0 0;padding-left:18px}
.holdbox textarea{width:100%;min-height:70px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--fg);padding:8px 10px;margin:8px 0}
.holdbox .acts{display:flex;gap:10px;flex-wrap:wrap}
.flag.risk{background:var(--orange-3);color:var(--orange-ink)}

/* Búsqueda en todo el histórico */
.searchall{margin-top:10px;font-size:13px}
.searchall[hidden]{display:none}

/* Monitor */
.mon{display:grid;gap:16px}
.mon table{width:100%;border-collapse:collapse;background:var(--surface)}
.mon th,.mon td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top}
.mon th{font:600 11px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-2)}
.okdot,.kodot{display:inline-block;width:9px;height:9px;margin-right:6px}
.okdot{background:var(--green)}.kodot{background:var(--err)}
.s-retenido{--stc:var(--err)}

/* Configuración */
.cfg { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.cfg > .box { width: 100%; box-sizing: border-box; }
.cfg .box { background: var(--card, #fff); border: 1px solid var(--line, #e3e0ea); padding: 18px 20px; }
.cfg .box h3 { margin: 0 0 6px; }
.cfg table { width: 100%; max-width: 520px; }
.cfg .cfgform { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; margin: 12px 0; }
.cfg .cfgform label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cfg .cfgform label.chk, .cfg label.chk { flex-direction: row; align-items: center; gap: 6px; }
.cfg input[type=text], .cfg input[type=number], .cfg input[type=date], .cfg textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--line, #d6d6d6); border-radius: 6px; background: var(--bg, #fff); color: inherit; width: 100%; box-sizing: border-box; }
.cfg textarea { margin: 8px 0; }
.cfg .chips { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cfg .box > div:last-child .btn { margin-top: 6px; }

/* ===== Tabla de pedidos · estética tipo Shopify Admin =====
   Tarjeta redondeada, cabecera gris suave en minúscula, filas limpias y estados en pastillas. */
:root {
  --t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-card: #ffffff; --t-head: #f7f7f7; --t-line: #ebebeb; --t-ink: #303030; --t-ink-2: #616161;
  --t-hover: #f7f7f7; --t-sel: #f1f1f1; --t-cb: #8a8a8a;
  --p-grey-bg: #e3e3e3; --p-grey: #303030;
  --p-yel-bg: #ffeb78; --p-yel: #4f4700;
  --p-ora-bg: #ffd6a4; --p-ora: #5e4200;
  --p-blu-bg: #e0f0ff; --p-blu: #00527c;
  --p-grn-bg: #affebf; --p-grn: #014b40;
  --p-red-bg: #fed1d7; --p-red: #8e0b21;
  --p-pur-bg: #f0e6f6; --p-pur: #4a1270;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --t-card: #1f1724; --t-head: #271d2e; --t-line: #352a3d; --t-ink: #ece6f1; --t-ink-2: #aea2b8;
  --t-hover: #271d2e; --t-sel: #30253a; --t-cb: #8f849a;
  --p-grey-bg: #3a3140; --p-grey: #e6e0eb;
  --p-yel-bg: #4a4214; --p-yel: #ffe97a;
  --p-ora-bg: #4d3415; --p-ora: #ffcf8f;
  --p-blu-bg: #12324a; --p-blu: #9fd3ff;
  --p-grn-bg: #123d2c; --p-grn: #94f0b4;
  --p-red-bg: #4a1a22; --p-red: #ffb1bc;
  --p-pur-bg: #36244a; --p-pur: #dcc2f0; } }
:root[data-theme="dark"] {
  --t-card: #1f1724; --t-head: #271d2e; --t-line: #352a3d; --t-ink: #ece6f1; --t-ink-2: #aea2b8;
  --t-hover: #271d2e; --t-sel: #30253a; --t-cb: #8f849a;
  --p-grey-bg: #3a3140; --p-grey: #e6e0eb;
  --p-yel-bg: #4a4214; --p-yel: #ffe97a;
  --p-ora-bg: #4d3415; --p-ora: #ffcf8f;
  --p-blu-bg: #12324a; --p-blu: #9fd3ff;
  --p-grn-bg: #123d2c; --p-grn: #94f0b4;
  --p-red-bg: #4a1a22; --p-red: #ffb1bc;
  --p-pur-bg: #36244a; --p-pur: #dcc2f0; }

#v-pedidos .tablewrap {
  margin-top: 12px; background: var(--t-card); border: 0; border-radius: 12px; overflow: auto;
  box-shadow: 0 0 0 1px var(--t-line), 0 1px 0 rgb(0 0 0 / .06), 0 2px 6px rgb(0 0 0 / .04);
  font-family: var(--t-font); color: var(--t-ink);
}
#v-pedidos .tbar { background: var(--t-card); border-bottom: 1px solid var(--t-line); padding: 8px 12px; }
#v-pedidos .tbar .legend2 { display: none; }
#v-pedidos .tbar #rcount { margin-right: auto; font-family: var(--t-font); color: var(--t-ink-2); font-size: 13px; }
#v-pedidos .tbar .sel { font-family: var(--t-font); border-radius: 8px; border: 1px solid var(--t-line); min-height: 30px; }

#v-pedidos table.orders { font-family: var(--t-font); font-size: 13px; }
#v-pedidos .orders th {
  background: var(--t-head); color: var(--t-ink-2); font: 550 12.5px/1.3 var(--t-font);
  text-transform: none; letter-spacing: 0; padding: 9px 5px; border-bottom: 1px solid var(--t-line); white-space: nowrap;
}
#v-pedidos .orders th .c-dest { font-weight: 450; }
#v-pedidos .orders td {
  padding: 8px 5px; font-size: 13px; line-height: 1.35; color: var(--t-ink);
  border-bottom: 1px solid var(--t-line); background: var(--t-card); background-image: none; box-shadow: none; white-space: nowrap;
}
body.comfy #v-pedidos .orders td { padding: 12px 12px; font-size: 13.5px; }
#v-pedidos .orders tr:last-child td { border-bottom: 0; }
#v-pedidos .orders .ck { width: 30px; padding-right: 0; }
#v-pedidos .orders .c-av { white-space: normal; min-width: 70px; }

/* Filas: sin colores por estado; gris al pasar y al seleccionar */
#v-pedidos .orders tr.r td,
#v-pedidos .orders tr.r.s-preparar td { background: var(--t-card); }
#v-pedidos .orders tr.r td:first-child { box-shadow: none; }
#v-pedidos .orders tr.r:hover td { background: var(--t-hover); background-image: none; }
#v-pedidos .orders tr.r.selected td { background: var(--t-sel); background-image: none; }
#v-pedidos .orders tr.r.selected, #v-pedidos .orders tr.r.cur { outline: 0; }
#v-pedidos .orders tr.r.cur td:first-child { box-shadow: inset 3px 0 0 var(--t-ink); }
#v-pedidos .orders tr.r.s-cancelado td { color: var(--t-ink-2); }

/* Casilla de selección */
#v-pedidos .orders .cb {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px;
  border: 1.5px solid var(--t-cb); background: var(--t-card); display: inline-grid; place-items: center; cursor: pointer; vertical-align: middle;
}
#v-pedidos .orders .cb:checked, #v-pedidos .orders .cb:indeterminate, #v-pedidos .orders .cb.pgfull { background: var(--t-ink); border-color: var(--t-ink); }
#v-pedidos .orders .cb:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--t-card); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
#v-pedidos .orders .cb:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--t-card); border-radius: 1px; }
#v-pedidos .orders .cb:focus-visible { outline: 2px solid var(--p-blu); outline-offset: 2px; }

/* Textos */
#v-pedidos .orders .oid { font-weight: 650; font-size: 13px; letter-spacing: 0; }
#v-pedidos .orders .cust { font-weight: 450; }
#v-pedidos .orders .small, #v-pedidos .orders .c-dest { color: var(--t-ink-2); font-size: 13px; }
#v-pedidos .orders .c-recv { color: var(--t-ink); }
#v-pedidos .orders .c-uds b { font-weight: 450; }
#v-pedidos .orders .c-imp { font-variant-numeric: tabular-nums; }
#v-pedidos .orders .cd { font-weight: 550; font-size: 13px; }
#v-pedidos .orders .cd.mut { font-weight: 450; color: var(--t-ink-2); }

/* Pastillas: estado, canal, transportista, avisos, prioridad */
#v-pedidos .orders .pill, #v-pedidos .orders .ch, #v-pedidos .orders .car, #v-pedidos .orders .flag, #v-pedidos .orders .prime {
  display: inline-flex; align-items: center; gap: 5px; font: 550 12px/1 var(--t-font); text-transform: none; letter-spacing: 0;
  padding: 4px 8px; border-radius: 8px; border: 0; box-shadow: none; white-space: nowrap; margin: 0 4px 0 0; vertical-align: middle;
}
#v-pedidos .orders .pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; flex: none; }
#v-pedidos .orders .st-aceptar { background: var(--p-blu-bg); color: var(--p-blu); }
#v-pedidos .orders .st-preparar { background: var(--p-yel-bg); color: var(--p-yel); }
#v-pedidos .orders .st-preparacion { background: var(--p-ora-bg); color: var(--p-ora); }
#v-pedidos .orders .st-preparacion::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
#v-pedidos .orders .st-enviado { background: var(--p-grey-bg); color: var(--p-grey); }
#v-pedidos .orders .st-enviado::before { background: currentColor; }
#v-pedidos .orders .st-incidencia, #v-pedidos .orders .st-retenido { background: var(--p-red-bg); color: var(--p-red); }
#v-pedidos .orders .st-incidencia::before, #v-pedidos .orders .st-retenido::before { border-radius: 2px; background: currentColor; transform: rotate(45deg) scale(.8); }
#v-pedidos .orders .st-cancelado { background: var(--p-grey-bg); color: var(--t-ink-2); text-decoration: line-through; }

#v-pedidos .orders .ch { background: var(--p-grey-bg); color: var(--p-grey); }

#v-pedidos .orders .car { background: transparent; color: var(--t-ink); padding-inline: 0; font-weight: 450; }

#v-pedidos .orders .flag { background: var(--p-grey-bg); color: var(--p-grey); }
#v-pedidos .orders .flag.red { background: var(--p-red-bg); color: var(--p-red); }
#v-pedidos .orders .flag.or, #v-pedidos .orders .flag.risk { background: var(--p-ora-bg); color: var(--p-ora); }
#v-pedidos .orders .flag.ok { background: var(--p-grn-bg); color: var(--p-grn); }
#v-pedidos .orders .flag.bl { background: var(--p-blu-bg); color: var(--p-blu); }
#v-pedidos .orders .prime { background: var(--p-blu-bg); color: var(--p-blu); font-size: 11px; padding: 3px 6px; margin-left: 6px; }

#v-pedidos .orders .prio b { width: auto; height: auto; padding: 3px 7px; border-radius: 6px; font: 600 11.5px/1 var(--t-font); }
#v-pedidos .orders .p1 b { background: var(--p-pur-bg); color: var(--p-pur); }
#v-pedidos .orders .p2 b, #v-pedidos .orders .p3 b { background: var(--p-grey-bg); color: var(--t-ink-2); }

#v-pedidos .orders tr.more td { text-align: center; padding: 12px; }
#v-pedidos .orders .empty { font-family: var(--t-font); color: var(--t-ink-2); }
#v-pedidos .orders td.one { max-width: 116px; overflow: hidden; text-overflow: ellipsis; }
#v-pedidos .orders td.c-plazo { white-space: normal; min-width: 76px; max-width: 100px; }
#v-pedidos .orders td.c-recv { white-space: nowrap; }
#v-pedidos .orders td.c-av .flag { margin: 2px 4px 2px 0; }
#v-pedidos .orders td.c-av .flag { white-space: normal; line-height: 1.2; }

/* Distintivo Amazon Prime */
.primebadge { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; height: 16px; }
.primebadge img { height: 16px; width: auto; display: block; }
.primebadge .primetxt { display: none; font: italic 700 12px/1 var(--t-font, sans-serif); color: #1399ff; letter-spacing: -.01em; }
.primebadge.noimg img { display: none; }
.primebadge.noimg .primetxt { display: inline; }
.dmeta .primebadge { margin-left: 0; }
.cfg .primeprev { margin-top: 8px; padding: 10px; border: 1px dashed var(--line); display: inline-flex; }
.cfg .primeprev .primebadge { height: 22px; margin: 0; }
.cfg .primeprev .primebadge img { height: 22px; }

/* Cierre del día */
.ctiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .ctiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ctile { background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ctile b { font: 500 34px/1 var(--display); }
.ctile span { font-size: 12px; color: var(--fg-2); }
.ctile.warn b { color: var(--err); }

/* No enviar / unir envíos */
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.reason { font: 600 14px/1.3 var(--sans); padding: 16px 12px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--fg); cursor: pointer; text-align: center; }
.reason:hover { border-color: var(--primary); }
.reason.on { border-color: var(--primary); background: var(--lilac-surface); box-shadow: inset 0 0 0 1px var(--primary); }
#mergeBox input[type=search], #noteBox input { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--line-2); margin: 4px 0 8px; }
.cands { max-height: 280px; overflow: auto; border: 1px solid var(--line); }
.cand { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.cand:hover, .cand.on { background: var(--lilac-surface); }
/* Barra de selección: caben todas las acciones en una línea */
.bulk { gap: 8px; }
.bulk { flex-wrap: nowrap; }
.bulk .btn.big { padding: 11px 12px; font-size: 11.5px; letter-spacing: .04em; white-space: nowrap; }
.bulk .btn.big .n { margin-left: 6px; }
.dfoot { align-items: center; }
.dfoot { flex-wrap: nowrap; }
.dfoot .btn.big { padding: 12px 16px; }
.dfoot .btn.quiet { background: transparent; color: var(--fg-2); border-color: var(--line-2); margin-left: auto; padding: 9px 14px; font-size: 12px; }
.dfoot .btn.quiet:hover { color: var(--fg); border-color: var(--fg-2); }


/* ===== Botones algo redondeados (todas las pantallas) ===== */
.btn, .sel, .xbtn, .chip, .tray, .alert, .fld input, .fld select, .fld textarea, .inl, .lbox input, .cand, .reasons > *, .bulk .btn, .flag { border-radius: 5px; }
.btn .n { border-radius: 4px; }

/* ===== Avisos flotantes (pedidos nuevos y mensajes): píldora de cristal abajo, con desenfoque ===== */
.newbar, .toast { all: unset; box-sizing: border-box; position: fixed; left: 50%; bottom: 22px; z-index: 80;
  display: flex; align-items: center; gap: 12px; border-radius: 999px; max-width: calc(100% - 32px);
  background: linear-gradient(135deg, rgb(255 255 255 / .36), rgb(240 232 255 / .2));
  -webkit-backdrop-filter: blur(14px) saturate(1.9); backdrop-filter: blur(14px) saturate(1.9);
  border: 1px solid rgb(255 255 255 / .7);
  box-shadow: 0 10px 34px rgb(40 0 70 / .20), 0 1px 3px rgb(0 0 0 / .10), inset 0 1px 0 rgb(255 255 255 / .8);
  color: #1f1f1f; font: 550 13px/1.25 var(--t-font, var(--sans)); }
.newbar { cursor: pointer; padding: 9px 9px 9px 18px; white-space: nowrap; transform: translateX(-50%); z-index: 40; animation: nbIn .25s ease-out; }
.newbar[hidden] { display: none; }
.newbar::before, .toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }
.newbar .go { background: #1f1f1f; color: #fff; padding: 7px 14px; border-radius: 999px; font-weight: 600; }
.newbar:hover .go { background: #000; }
.toast { padding: 11px 20px 11px 16px; pointer-events: none; opacity: 0; transform: translate(-50%, 14px); transition: opacity .2s ease-out, transform .2s ease-out; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
body:has(#newBar:not([hidden])) .toast { bottom: 80px; }
/* Banda desenfocada bajo el aviso de nuevos: la lista se ve «tapada» hasta que se actualiza */
body:has(#newBar:not([hidden])):has(#v-pedidos:not([hidden]))::after { content: ""; position: fixed; left: var(--sw, 236px); right: 0; bottom: 0; height: 120px; z-index: 39; pointer-events: none;
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(250 248 253 / .4) 55%, rgb(250 248 253 / .65));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%);
  animation: bandIn .3s ease-out; }
@media (max-width: 900px) { body:has(#newBar:not([hidden])):has(#v-pedidos:not([hidden]))::after { left: 0; } }
body:has(.bulk:not([hidden])):has(#newBar:not([hidden]))::after { bottom: 74px; }
@keyframes bandIn { from { opacity: 0; } to { opacity: 1; } }
body:has(.bulk:not([hidden])) .newbar { bottom: 96px; }
body:has(.bulk:not([hidden])) .toast { bottom: 96px; }
body:has(.bulk:not([hidden])):has(#newBar:not([hidden])) .toast { bottom: 154px; }
@media (min-width: 1000px) { .newbar, .toast { left: calc(50% + var(--sw, 236px) / 2); } }
@keyframes nbIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .newbar, :root:not([data-theme="light"]) .toast { background: linear-gradient(135deg, rgb(40 40 44 / .55), rgb(30 20 40 / .40)); color: #f1f1f1; border-color: rgb(255 255 255 / .14); box-shadow: 0 10px 34px rgb(0 0 0 / .45); } :root:not([data-theme="light"]) .newbar .go { background: #fff; color: #111; } }

/* ===== Bandejas: 4 principales grandes, el resto discretas ===== */
#trays { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
@media (max-width: 640px) { #trays { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trays2 { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tray2 { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font: 500 12px/1.3 var(--t-font, var(--sans)); color: var(--t-ink-2, #616161); border: 1px solid transparent; transition: background .15s, border-color .15s; }
.tray2 .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.tray2 b { font-weight: 600; color: var(--t-ink-2, #616161); font-variant-numeric: tabular-nums; }
.tray2.has b { color: var(--t-ink, #1f1f1f); }
.tray2:hover { background: rgb(0 0 0 / .05); }
.tray2[aria-pressed="true"] { background: var(--surface); border-color: var(--line-2); color: var(--t-ink, #1f1f1f); }
.tray2.crit { color: var(--err-ink); background: var(--err-tint); }
.tray2.crit b { color: var(--err-ink); }

/* ===== Copiar nº de pedido (discreto) ===== */
#v-pedidos .orders td.c-id { white-space: nowrap; }
.cpy { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 3px 0 -4px; border-radius: 4px; color: var(--t-mut, #8a8a8a); opacity: 0; vertical-align: middle; transition: opacity .15s, background .15s, color .15s; }
.cpy svg { width: 12px; height: 12px; }
tr.r:hover .cpy, .cpy:focus-visible { opacity: .75; }
.cpy:hover { opacity: 1 !important; background: rgb(0 0 0 / .06); color: #1f1f1f; }
.cpy.done { opacity: 1 !important; color: #0a7d3c; }

/* ===== Estado de entrega estandarizado ===== */
.dlv { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 8px; font: 550 12px/1.2 var(--t-font, var(--sans)); white-space: nowrap; background: #ebebeb; color: #4a4a4a; }
.dlv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; flex: none; }
.d-label { background: #ececec; color: #616161; }
.d-in_transit { background: #e3effd; color: #0b5cad; }
.d-out_for_delivery { background: #fff1d6; color: #8a5300; }
.d-pickup_point { background: #efe6fb; color: #6a2bb8; }
.d-delivered { background: #dff3e5; color: #0a7d3c; }
.d-incident { background: #fde4e1; color: #b42318; }
.d-returned { background: #f6e3ea; color: #8e1f4b; }
.d-unknown, .d-none { background: #f3f3f3; color: #8a8a8a; }
.d-wait { background: #e3effd; color: #0b5cad; }
.trk { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--t-mut, #8a8a8a); }
.trk svg { width: 12px; height: 12px; flex: none; opacity: .6; transition: opacity .15s; }
.trk:hover svg { opacity: 1; color: #1f1f1f; }
.trk:hover .dlv { filter: brightness(.96); }
#v-pedidos .orders td.c-ent { white-space: nowrap; }

/* ===== Líneas del pedido con foto ===== */
table.lines th.limg, table.lines td.limg { width: 46px; padding-right: 4px; }
table.lines td.limg img, table.lines td.limg .noimg { display: block; width: 42px; height: 42px; object-fit: contain; border-radius: 6px; background: #f4f4f4; border: 1px solid var(--line, #e3e3e3); }


/* ===== Cabecera de Pedidos compacta al hacer scroll =====
   La cabecera normal se queda en su sitio; al pasarla, una versión compacta se fija arriba
   (position: fixed + hueco reservado), así la página no cambia de altura y el scroll no salta. */
@media (min-width: 901px) {
  #v-pedidos .tablewrap { overflow: clip; }
  #v-pedidos .orders thead th { position: sticky; top: var(--ptop-h, 0px); z-index: 5; }
  #v-pedidos .orders thead th::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--t-line); }
  #v-pedidos.compact .ptop { position: fixed; top: 0; left: var(--sw, 236px); right: 0; z-index: 26; background: var(--bg);
    padding: 10px 32px 8px; box-shadow: 0 6px 16px -10px rgb(30 0 50 / .25); animation: ptopIn .16s ease-out; }
  #v-pedidos.compact .ptop > .vhead, #v-pedidos.compact .ptop > .trow2, #v-pedidos.compact #moreRow { display: none; }
  #v-pedidos.compact .trays { margin-bottom: 8px; }
  #v-pedidos.compact .tray { min-height: 0 !important; padding: 5px 12px !important; }
  #v-pedidos.compact .tray .num { font-size: 20px !important; }
  #v-pedidos.compact .tray[aria-pressed="true"]::after { height: 3px; }
  #v-pedidos.compact .filters { padding: 6px 10px; }
  #v-pedidos.compact .filters .search, #v-pedidos.compact .filters .sel { min-height: 32px !important; }
  #v-pedidos.compact .filters .search input { padding-top: 6px; padding-bottom: 6px; }
}
@keyframes ptopIn { from { transform: translateY(-100%); } to { transform: none; } }
th.sortable { cursor: pointer; user-select: none; }
th.sortable .ar { font-size: 11px; opacity: .35; }
th.sortable:hover .ar, th.sortable.sorted .ar { opacity: 1; }
th.sortable.sorted { color: var(--t-ink, #1f1f1f) !important; }

/* Enlace a la plataforma, copiar en la ficha y etiquetas plegadas */
.plat { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 2px; border-radius: 4px; color: var(--t-mut, #8a8a8a); opacity: .55; vertical-align: middle; text-decoration: none; transition: opacity .15s, background .15s; }
.plat svg { width: 13px; height: 13px; }
.plat:hover { opacity: 1; background: rgb(0 0 0 / .06); color: #1f1f1f; }
.plat.txt { display: inline-flex; width: auto; height: auto; gap: 6px; padding: 4px 10px; margin: 0 0 0 10px; vertical-align: 6px; opacity: .85; border: 1px solid var(--line-2); border-radius: 6px; font: 600 12px/1.2 var(--sans); color: var(--fg-2); }
.dhead h2 .cpy, .kv .cpy { opacity: .55; margin: 0 0 0 6px; }
.dhead h2 .cpy svg { width: 15px; height: 15px; }
.dhead h2 .cpy { width: 24px; height: 24px; }
details.tags summary { cursor: pointer; font-size: 12.5px; color: var(--fg-2); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.tags summary::-webkit-details-marker { display: none; }
details.tags summary::before { content: "▸"; font-size: 10px; transition: transform .15s; }
details.tags[open] summary::before { transform: rotate(90deg); }
details.tags > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
details.tags .tag { background: var(--lilac-surface, #f1ebf7); padding: 2px 7px; border-radius: 4px; }
#v-pedidos .orders td.c-plazo .cd { white-space: normal; display: inline-block; line-height: 1.25; }

/* Ojo «ver en la plataforma» a la izquierda del canal: siempre en la misma posición */
#v-pedidos .orders td.c-canal { white-space: nowrap; }
#v-pedidos .orders td.c-canal .plat, .plat-ph { margin: 0 4px 0 0; }
.plat-ph { display: inline-block; width: 18px; vertical-align: middle; }
#v-pedidos { overflow-anchor: none; }

/* ===== Configuración por pestañas ===== */
.ctabs { display: flex; gap: 4px; flex-wrap: wrap; margin: -6px 0 16px; border-bottom: 1px solid var(--line); }
.ctabs button { all: unset; cursor: pointer; padding: 9px 14px; font: 600 13px/1.2 var(--sans); color: var(--fg-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.ctabs button:hover { color: var(--fg); }
.ctabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--orange); }
.cfg[data-showtab] > .box[data-ctab] { display: none; }
.cfg[data-showtab="general"] > .box[data-ctab="general"], .cfg[data-showtab="canales"] > .box[data-ctab="canales"],
.cfg[data-showtab="transp"] > .box[data-ctab="transp"], .cfg[data-showtab="users"] > .box[data-ctab="users"] { display: block; }
.cfg[data-showtab="conn"] > .box[data-ctab="conn"] { display: block; }
.cfg .lines .sel { min-height: 34px; padding: 5px 8px; }

/* Deshacer cambios (ficha) */
details.undobox { margin: 14px 0 0; border: 1px dashed var(--line-2); border-radius: 6px; padding: 8px 12px; background: var(--surface); }
details.undobox summary { cursor: pointer; font: 600 12.5px/1.3 var(--sans); color: var(--fg-2); }
details.undobox .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ===== Vistas guardadas y columnas ===== */
.orders.h-est .c-est, .orders.h-ent .c-ent { display: none; }
#v-pedidos .tbar .tbtn { font: 550 12.5px/1.2 var(--t-font, var(--sans)); text-transform: none; letter-spacing: 0; padding: 6px 12px; border: 1px solid var(--t-line, var(--line-2)); color: var(--t-ink, var(--fg)); margin-right: 6px; }
.pop { position: fixed; z-index: 90; min-width: 240px; max-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; box-shadow: 0 12px 32px rgb(30 0 50 / .18); font-family: var(--t-font, var(--sans)); }
.pop .ptitle { font: 600 12px/1.3 var(--sans); color: var(--fg-2); text-transform: uppercase; letter-spacing: .05em; margin: 2px 4px 8px; }
.pop .prow { display: flex; align-items: center; gap: 6px; padding: 2px 4px; }
.pop label.prow { padding: 5px 4px; cursor: pointer; font-size: 13px; }
.pop .pitem { all: unset; flex: 1; cursor: pointer; padding: 7px 8px; border-radius: 6px; font-size: 13px; }
.pop .pitem:hover { background: var(--lilac-surface); }
.pop .xbtn { font-size: 12px; }
.pop .psave { display: flex; gap: 6px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.pop .psave input { flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; background: var(--bg); color: inherit; }

/* ===== Filtros avanzados ===== */
.fchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fchip { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font: 500 12.5px/1.2 var(--t-font, var(--sans)); overflow: hidden; }
.fchip button { all: unset; cursor: pointer; padding: 5px 10px; }
.fchip .fchip-edit b { font-weight: 600; }
.fchip .fchip-edit:hover { background: var(--lilac-surface); }
.fchip .fchip-x { padding: 5px 9px 5px 6px; color: var(--fg-2); }
.fchip .fchip-x:hover { color: var(--err-ink); background: var(--err-tint); }
.pop.wide { min-width: 300px; max-width: 360px; max-height: 70vh; overflow: auto; }
.pop .pgroup { font: 600 11px/1.3 var(--sans); color: var(--fg-2); text-transform: uppercase; letter-spacing: .05em; margin: 10px 4px 2px; }
.pop .pitem { display: block; width: calc(100% - 16px); }
.pop .pdot { color: var(--orange); font-size: 10px; margin-left: 4px; }
.pop .popts { max-height: 300px; overflow: auto; }
.pop .popts .small { margin-left: auto; }
.pop .prange { display: flex; align-items: center; gap: 8px; margin: 6px 4px; }
.pop .prange input, .pop .ptext { flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 8px; font: inherit; font-size: 13px; background: var(--bg); color: inherit; }
.pop .ptext { display: block; width: calc(100% - 8px); margin: 6px 4px; box-sizing: border-box; }
.pop .ppresets { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 4px 8px; }
.pop .pfoot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
#v-pedidos .tbar #fSort { margin-right: 6px; }

/* ===== Búsqueda con filtros dentro (estilo Shopify) ===== */
.filters { position: relative; }
.sbox { flex: 1 1 100%; flex-wrap: wrap; gap: 4px 0; padding-right: 0; border-radius: 8px; min-height: 44px; align-items: center; cursor: text; }
.sbox > svg { align-self: center; }
.sbox .schips { display: contents; }
.sbox input { flex: 1 1 200px; padding-left: 2px; }
.sbox .schip:first-child { margin-left: 0; }
.schip { display: inline-flex; align-items: center; gap: 4px; margin: 4px 6px 4px 0; padding: 3px 4px 3px 9px; border-radius: 6px; background: var(--lilac-surface, #f1ebf7); color: var(--fg); font: 500 12.5px/1.25 var(--t-font, var(--sans)); cursor: pointer; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.schip b { font-weight: 600; }
.schip:hover { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }
.schip-x { all: unset; cursor: pointer; width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 4px; font-size: 11px; color: var(--fg-2); }
.schip-x:hover { background: rgb(0 0 0 / .08); color: var(--err-ink); }
.sfilter { all: unset; cursor: pointer; align-self: stretch; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; margin-left: auto; border-left: 1px solid var(--line-2); font: 600 13px/1 var(--t-font, var(--sans)); color: var(--fg); border-radius: 0 7px 7px 0; }
.sfilter svg { width: 16px; height: 16px; margin: 0; color: currentColor; }
.sfilter:hover, .sfilter[aria-expanded="true"] { background: var(--lilac-surface); }
.sfilter .n:not(:empty) { background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: 2px 7px; font-size: 11px; }
.fpanel { position: absolute; z-index: 60; top: 64px; left: 16px; width: min(540px, calc(100% - 32px)); height: min(420px, 62vh); display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgb(30 0 50 / .18); overflow: hidden; font-family: var(--t-font, var(--sans)); }
.fpanel[hidden] { display: none; }
.fnav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); padding: 8px; background: color-mix(in srgb, var(--surface) 92%, var(--lilac-surface)); }
.fgrp { font: 700 11.5px/1.3 var(--sans); color: var(--fg); text-transform: uppercase; letter-spacing: .07em; margin: 14px 6px 4px; padding: 0 4px 6px; border-bottom: 1px solid var(--line-2); }
.fgrp:first-child { margin-top: 4px; }
.fcat { color: var(--fg-2); }
.fcat:hover, .fcat.on { color: var(--fg); }
.fcat { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: calc(100% - 20px); padding: 7px 10px; border-radius: 6px; font-size: 13px; }
.fcat:hover { background: rgb(0 0 0 / .05); }
.fcat.on { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 600; }
.fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.fedit { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fhead { display: flex; align-items: baseline; gap: 6px; padding: 14px 16px 8px; border-bottom: 1px solid var(--line); }
.fhead .linkbtn { margin-left: auto; font-size: 12.5px; }
.fbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px; }
.fopt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.fopt:hover { background: rgb(0 0 0 / .04); }
.fopt input { width: 16px; height: 16px; accent-color: var(--primary); margin: 0; }
.fopt .fn { margin-left: auto; color: var(--fg-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.fopt.zero span { opacity: .55; }
.frange { display: flex; gap: 10px; padding: 6px; }
.frange label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--fg-2); }
.frange input, .ftext { border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 9px; font: inherit; font-size: 13.5px; background: var(--bg); color: var(--fg); min-width: 0; }
.ftext { display: block; width: calc(100% - 12px); margin: 6px; box-sizing: border-box; }
.fpre { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; }
.fpre-b { all: unset; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; }
.fpre-b:hover, .fpre-b.on { border-color: var(--primary); background: var(--lilac-surface); }
.ffoot { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .fpanel { grid-template-columns: 1fr; height: 70vh; } .fnav { max-height: 140px; border-right: 0; border-bottom: 1px solid var(--line); } }

/* Interruptor (switch) */
.sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; user-select: none; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw i { width: 36px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; flex: none; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
.sw input:checked + i { background: #1f9d55; }
.sw input:checked + i::after { transform: translateX(16px); }
.sw input:focus-visible + i { outline: 2px solid var(--primary); outline-offset: 2px; }
.sw input:disabled + i { opacity: .5; }
.synct .subrow td { background: color-mix(in srgb, var(--surface) 90%, var(--lilac-surface)); padding-top: 10px; padding-bottom: 12px; }
.eciacc { padding-left: 16px; border-left: 3px solid var(--line-2); }
.eciacc p { margin: 6px 0 0; max-width: 760px; }

.fcat { font-size: 13px; width: calc(100% - 20px); }

/* Rango numérico compacto */
.frange2 { display: flex; align-items: center; gap: 8px; padding: 8px; }
.frange2 input { width: 110px; border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 9px; font: inherit; font-size: 13.5px; background: var(--bg); color: var(--fg); }
.frange2 span { color: var(--fg-2); }
/* Calendario de rango */
.cal { padding: 4px 8px 0; max-width: 300px; }
.calh { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 8px; font-size: 13.5px; }
.calnav { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; font-size: 18px; color: var(--fg-2); }
.calnav:hover { background: rgb(0 0 0 / .06); color: var(--fg); }
.calg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.calg i { font-style: normal; text-align: center; font-size: 11px; color: var(--fg-2); padding-bottom: 4px; }
.cday { all: unset; cursor: pointer; text-align: center; height: 32px; line-height: 32px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cday:hover { background: rgb(0 0 0 / .06); border-radius: 6px; }
.cday.in { background: var(--lilac-surface); }
.cday.edge { background: var(--primary); color: var(--on-primary); border-radius: 6px; font-weight: 600; }
.cday.today:not(.edge) { box-shadow: inset 0 0 0 1px var(--primary); border-radius: 6px; }
.cday.fut { color: var(--fg-2); opacity: .55; }
.calsel { margin: 8px 0 4px; }
/* La barra de acciones de la selección queda por encima de la franja desenfocada del aviso de nuevos */
.bulk { z-index: 45 !important; }

/* ===== Etiquetas de canal: el color de cada canal en tono suave, sin cuadradito ===== */
:root { --ch-ses-bg: #f1e9f8; --ch-ses: #5a2d82; --ch-seu-bg: #d9c5ee; --ch-seu: #4a1d73;
  --ch-amz-bg: #ffe8c6; --ch-amz: #8a5300; --ch-amzie-bg: #ffd699; --ch-amzie: #7a4400;
  --ch-eci-bg: #d0ebdb; --ch-eci: #00692f; --ch-ecipt-bg: #b8e0c7; --ch-ecipt: #005a28; }
.ch, #v-pedidos .orders .ch { box-shadow: none; border-radius: 6px; }
.ch.SES, #v-pedidos .orders .ch.SES { background: var(--ch-ses-bg); color: var(--ch-ses); }
.ch.SEU, #v-pedidos .orders .ch.SEU { background: var(--ch-seu-bg); color: var(--ch-seu); }
.ch.AMZ, #v-pedidos .orders .ch.AMZ { background: var(--ch-amz-bg); color: var(--ch-amz); }
.ch.AMZ.mkt-IE, #v-pedidos .orders .ch.AMZ.mkt-IE { background: var(--ch-amzie-bg); color: var(--ch-amzie); }
.ch.ECI, #v-pedidos .orders .ch.ECI { background: var(--ch-eci-bg); color: var(--ch-eci); }
/* Filtro de canal arriba: mismos colores, más presentes al estar elegido */
.chip.chc { border-color: transparent; }
.chip.chc.SES { background: var(--ch-ses-bg); color: var(--ch-ses); }
.chip.chc.SEU { background: var(--ch-seu-bg); color: var(--ch-seu); }
.chip.chc.AMZ { background: var(--ch-amz-bg); color: var(--ch-amz); }
.chip.chc.ECI { background: var(--ch-eci-bg); color: var(--ch-eci); }
.chip.chc[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.chip.chc[aria-pressed="false"]:hover { filter: brightness(.97); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ch-ses-bg: #3a2a4d; --ch-ses: #e3cff5; --ch-seu-bg: #4a2f66; --ch-seu: #efe2fb;
  --ch-amz-bg: #4a3417; --ch-amz: #ffcf8a; --ch-amzie-bg: #5c3c10; --ch-amzie: #ffd9a3;
  --ch-eci-bg: #173b27; --ch-eci: #9fe0b8; } }
.selhint { margin-right: auto; margin-left: 12px; }
.selhint:empty { display: none; }
#v-pedidos .tbar #rcount:has(+ .selhint:not(:empty)) { margin-right: 0; }
.ch.ECI.mkt-PT, #v-pedidos .orders .ch.ECI.mkt-PT { background: var(--ch-ecipt-bg); color: var(--ch-ecipt); }
/* En la lista, todas las etiquetas de canal del mismo ancho y con el texto centrado */
#v-pedidos .orders .ch { width: 100px; box-sizing: border-box; justify-content: center; text-align: center; padding-left: 2px; padding-right: 2px; font-size: 11px; letter-spacing: -.01em; }
#v-pedidos .orders td.c-av { max-width: 104px; }
#v-pedidos .orders td.c-plazo { min-width: 84px; }
#v-pedidos .orders .dlv { padding: 3px 7px; font-size: 11.5px; gap: 4px; }
#v-pedidos .orders .pill { font-size: 12px; padding: 4px 7px; }

/* Enlace a la ficha del producto en la web del canal */
table.lines a.plink { color: inherit; text-decoration: none; }
table.lines a.plink:hover { text-decoration: underline; text-underline-offset: 2px; }
table.lines td.limg a.plink { display: block; }

/* Cabecera de Pedidos más compacta: la tabla empieza antes */
#v-pedidos .vhead { margin-bottom: 12px; gap: 14px; }
#v-pedidos .vhead h1 { font-size: 30px; }
#v-pedidos .vhead .hand { font-size: 23px; margin-bottom: 2px; }
#v-pedidos .tray { padding: 11px 16px 9px; }
#v-pedidos .tray .num { font-size: 30px; }
#v-pedidos .trays { margin-bottom: 8px; }
.trow2 { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 10px; }
.trow2 .trays2, .trow2 .alerts { margin: 0; }
.trow2 .alerts { margin-left: auto; gap: 6px; }
.trow2 .alerts:empty { display: none; }
.trow2 .alert { padding: 4px 10px; font-size: 12px; gap: 7px; border-width: 1px; }
#v-pedidos .filters { padding: 10px 14px; gap: 8px; }
#v-pedidos .filters .chip { padding: 5px 10px; font-size: 11px; min-height: 0; gap: 6px; }
#v-pedidos .filters .frow > .sel { min-height: 32px; padding: 5px 10px; font-size: 13px; }
#v-pedidos .filters .frow { gap: 8px; }

/* Desplegable del pedido: datos con aire, notas debajo en lugar de amontonadas */
.drawer .kv, #drawer .kv { grid-template-columns: minmax(78px, max-content) minmax(0, 1fr); gap: 9px 16px; }
.kv dd .sub { display: block; font-weight: 400; font-size: 12px; line-height: 1.35; color: var(--fg-2); margin-top: 2px; overflow-wrap: normal; }
.kv dd.nowrap { overflow-wrap: normal; }
.kv dd.nowrap > a { white-space: nowrap; }
.kv dd .dlv + .sub, .kv dd .pill + .sub { margin-top: 4px; }
#v-pedidos .sbox { min-height: 38px; }
#v-pedidos .sbox input { padding-top: 8px; padding-bottom: 8px; }

/* Conexiones */
.conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
.conn { background: var(--surface); border: 1.5px solid var(--line); border-radius: 8px; padding: 16px 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.conn.soon { opacity: .6; }
.conn .top { display: flex; align-items: center; gap: 10px; }
.conn .top b { font-size: 15px; }
.conn .kv { font-size: 12.5px; }
.conn .acts { display: flex; gap: 8px; margin-top: 2px; }
.sema { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; margin-left: auto; padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.sema i { width: 8px; height: 8px; border-radius: 50%; }
.sema.ok { background: #e3f4ea; color: #13653a; } .sema.ok i { background: #1f9d55; }
.sema.warn { background: #fff0d9; color: #8a5300; } .sema.warn i { background: var(--orange, #f39200); }
.sema.off { background: var(--err-tint); color: var(--err-ink); } .sema.off i { background: var(--err); }
.sema.idle { background: rgb(0 0 0 / .05); color: var(--fg-2); } .sema.idle i { background: var(--fg-2); opacity: .5; }
.conn .key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; font-size: 12px; }
.connerr { background: var(--err-tint); color: var(--err-ink); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; overflow-wrap: anywhere; }

/* Claves: campo de texto con los caracteres ocultos (no tipo contraseña, para que el navegador no lo autorrellene) */
input.secretin { -webkit-text-security: disc; text-security: disc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Configuración: menú lateral numerado */
.cfgwrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.cfgwrap .cfg { max-width: 1040px; }
.cfgnav { background: var(--surface); border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; position: sticky; top: 16px; }
.cfgnav button { all: unset; cursor: pointer; padding: 12px 16px; font: 600 13.5px/1.3 var(--sans); border-left: 4px solid transparent; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; color: var(--fg); }
.cfgnav button:last-child { border-bottom: 0; }
.cfgnav button:hover { background: var(--lilac-surface); }
.cfgnav button[aria-selected="true"] { border-left-color: var(--orange); background: var(--lilac-surface); }
.cfgnav button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cfgnav .i { font: 600 10.5px/1 var(--sans); color: var(--fg-2); width: 18px; font-variant-numeric: tabular-nums; }
.cfgnav .sem { width: 9px; height: 9px; border-radius: 50%; margin-left: auto; flex: none; }
@media (max-width: 900px) { .cfgwrap { grid-template-columns: 1fr; } .cfgnav { position: static; } }

.conn a.furl { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.conn a.furl:hover { text-decoration: underline; }
.conn .warnTxt { color: var(--err-ink); }
.conn .kv dd .sub { overflow-wrap: anywhere; }

/* Conexiones v2: tarjetas ordenadas, botones siempre abajo */
.conns { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; }
.conn { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.conn .top { min-height: 24px; }
.conn .top b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn .what { font-size: 12.5px; line-height: 1.45; color: var(--fg-2); min-height: 36px; }
.conn .cmeta { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-2); padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.conn .cmeta b { color: var(--fg); font-weight: 600; }
.conn .crows { display: grid; gap: 12px; }
.conn .crow { display: grid; gap: 3px; min-width: 0; }
.conn .crow .cl { font: 600 10.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--fg-2); }
.conn .crow .cv { font-size: 13px; font-weight: 600; min-width: 0; }
.conn .crow .cs { font-size: 11.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn .key { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; background: var(--lilac-surface); padding: 2px 7px; border-radius: 4px; }
.conn .acts { margin-top: auto; padding-top: 4px; display: flex; gap: 8px; }
.conn .connerr { font-size: 12px; line-height: 1.45; }
.connsoon { margin: 22px 0 0; font: 600 11px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); }
.conns.soon { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.conn.soon { padding: 12px 16px; gap: 4px; opacity: .65; }
.conn.soon .what { min-height: 0; }

/* ===== Solo modo claro ===== */
:root { color-scheme: light; }

/* ===== Tabla de pedidos: refresco ===== */
:root { --t-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --t-line: #eeeef1; --t-head: #fafafb; --t-hover: #f8f7fb; --t-sel: #f3effa; }
#v-pedidos .tablewrap { border-radius: 14px; box-shadow: 0 0 0 1px var(--t-line), 0 1px 2px rgb(16 24 40 / .04), 0 4px 14px rgb(16 24 40 / .04); }
#v-pedidos table.orders { font-feature-settings: "tnum" 1, "cv11" 1; }
#v-pedidos .orders th { background: var(--t-head); color: #6b6b76; font: 500 11.5px/1.3 var(--t-font); letter-spacing: .01em; padding: 9px 5px; }
#v-pedidos .orders td { padding: 9px 5px; font-size: 13px; }
#v-pedidos .orders .oid { font: 600 13px/1.2 var(--t-font); letter-spacing: .005em; color: #1f1f24; font-feature-settings: "tnum" 1, "zero" 0; }
#v-pedidos .orders .pill, #v-pedidos .orders .flag, #v-pedidos .orders .prime { border-radius: 999px; padding: 4px 9px; font-weight: 500; }
#v-pedidos .orders .prio b { border-radius: 6px; font-weight: 600; }
#v-pedidos .orders .ch { border-radius: 6px; }
#v-pedidos .orders tr.r td { transition: background .12s ease-out; }
/* Modo de envío */
#v-pedidos .orders td.c-mode { white-space: nowrap; max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
#v-pedidos .orders .mode { color: var(--t-ink-2); font-size: 12.5px; }
/* Albarán y etiqueta hechos, junto al estado */
#v-pedidos .orders .dmk { display: inline-flex; align-items: center; gap: 1px; color: #1f9d55; margin-left: 2px; vertical-align: middle; }
#v-pedidos .orders .dmk svg { width: 14px; height: 14px; }
#v-pedidos .orders .dmk b { font: 600 10px/1 var(--t-font); }
.orders.h-mode .c-mode { display: none; }
/* Barra superior de la tabla: más baja */
#v-pedidos .tbar { padding: 5px 10px; gap: 8px; min-height: 0; }
#v-pedidos .tbar #rcount { font-size: 12.5px; }
#v-pedidos .tbar .tbtn { padding: 4px 10px; font-size: 12px; border-radius: 7px; min-height: 0; }
#v-pedidos .tbar .sel { min-height: 26px !important; height: 28px; padding: 2px 8px; font-size: 12px; border-radius: 7px; }
#v-pedidos .orders th, #v-pedidos .orders td { padding-left: 4px; padding-right: 4px; }
#v-pedidos .orders td.c-mode { max-width: 86px; }
#v-pedidos .orders .dlv { border-radius: 999px; padding: 3px 8px; }
#v-pedidos .orders .ch { width: 90px !important; }
#v-pedidos .orders td.c-av { max-width: 96px; }
#v-pedidos .orders td.one { max-width: 102px; }
#v-pedidos .orders .trk { gap: 2px; }
#v-pedidos .orders td.c-mode { max-width: 80px; }

/* ===== Configuración: misma armonía en todas las secciones ===== */
.cfgwrap .cfg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; max-width: 1080px; }
.cfgwrap .cfg > .box { display: none; }
.cfgwrap .cfg > .box.wide { grid-column: 1 / -1; }
.cfg .box { background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 20px 22px; flex-direction: column; gap: 10px; min-width: 0; }
.cfg[data-showtab="general"] > .box[data-ctab="general"], .cfg[data-showtab="canales"] > .box[data-ctab="canales"], .cfg[data-showtab="transp"] > .box[data-ctab="transp"],
.cfg[data-showtab="users"] > .box[data-ctab="users"], .cfg[data-showtab="conn"] > .box[data-ctab="conn"] { display: flex; }
.cfg .box h3 { font-size: 18px; margin: 0; }
.cfg .box h3 + p.small, .cfg .box > p.small { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-2); }
.cfg .box h4 { font: 600 11px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-2); margin: 12px 0 0; }
.cfg .box .acts { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; }
.cfg .box .acts .btn { min-width: 0; }
.cfg table, .cfg table.lines { width: 100%; max-width: none; }
.cfg table th { white-space: nowrap; font: 600 10.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--fg-2); padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.cfg table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 13px; }
.cfg table td[colspan] { white-space: normal; }
.cfg td .pill, .cfg td .flag, .cfg td .tag { white-space: nowrap; }
#usersBox td:last-child { white-space: normal; }
#usersBox table td, #usersBox table th { padding-left: 8px; padding-right: 8px; }
.cfg .ch { border: 0 !important; box-shadow: none !important; }
.cfg table tr:last-child td { border-bottom: 0; }
.cfg .cfgform { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 4px 0; }
.cfg .cfgform label { font-size: 12px; color: var(--fg-2); font-weight: 500; }
.cfg input[type=text], .cfg input[type=number], .cfg input[type=date], .cfg input[type=email], .cfg textarea, .cfg .sel, .cfg select {
  min-height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; font: 500 13px/1.3 var(--sans); color: var(--fg); padding: 7px 10px; box-sizing: border-box; }
.cfg input[type=checkbox] { accent-color: #4A0B6B; width: 16px; height: 16px; }
.cfg label.chk { font-size: 13px; color: var(--fg); font-weight: 500; }
.cfg code.key { display: inline-block; white-space: nowrap; font-size: 11.5px; padding: 2px 7px; border-radius: 4px; }
.cfg .auto { font: 600 9.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); background: rgb(0 0 0 / .05); padding: 3px 5px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
/* Etiquetas homogéneas de canal y transportista */
.cfg .ch { display: inline-flex; justify-content: center; align-items: center; width: 104px; box-sizing: border-box; padding: 4px 6px; border-radius: 6px; font: 600 11px/1.2 var(--sans); white-space: nowrap; }
.cartag { display: inline-flex; justify-content: center; align-items: center; width: 60px; box-sizing: border-box; padding: 4px 6px; border-radius: 6px; font: 600 11px/1.2 var(--sans); letter-spacing: .03em; background: #eef0f4; color: #33384a; white-space: nowrap; }
.cfg table td:has(> .sw) { white-space: nowrap; }
.cfg td b, .cfg td strong { white-space: nowrap; }
@media (max-width: 1100px) { .cfgwrap .cfg { grid-template-columns: 1fr; } }

/* Conexiones: tarjetas de la misma altura; el contenido largo se recoge con un degradado */
.conn .cbody { display: flex; flex-direction: column; gap: 12px; position: relative; }
.conns:not(.open) .conn .cbody { max-height: 252px; overflow: hidden; }
.conn .more[hidden] { display: none !important; }
.conns:not(.open) .conn .cbody.clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgb(255 255 255 / 0), var(--surface, #fff)); pointer-events: none; }
.conn .more { align-self: flex-start; margin-top: -4px; font-size: 12px; }
.conns.open .conn .more .lbl-more, .conns:not(.open) .conn .more .lbl-less { display: none; }
#usersBox table td { white-space: normal; } #usersBox table td:first-child b { white-space: nowrap; }
#usersBox table th, #usersBox table td { padding-left: 6px; padding-right: 6px; }
#v-pedidos .orders .flag.mode { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#v-pedidos .orders .flag.mode:not(.or):not(.bl) { background: #eeeef1; color: #4a4a55; }

/* Modo envío: textos cortos (Estándar Int., Estándar PT…) y enteros, sin cortar; cabeceras Pedido y Canal alineadas con el número y la etiqueta */
#v-pedidos .orders td.c-mode { max-width: none; overflow: visible; }
#v-pedidos .orders .flag.mode { max-width: none; overflow: visible; text-overflow: clip; font-size: 11.5px; padding-left: 7px; padding-right: 7px; letter-spacing: 0; }
#v-pedidos .orders td.one { max-width: 90px; }
#v-pedidos .orders thead th.c-id { padding-left: 21px; }
#v-pedidos .orders thead th.c-canal { padding-left: 26px; }

/* Imprimir albaranes con desplegable (Hoja de picking como segunda opción) */
.bulk .split { position: relative; display: inline-flex; }
.bulk .split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bulk .split .caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 9px; margin-left: 1px; display: inline-grid; place-items: center; }
.bulk .split .caret svg { width: 14px; height: 14px; transition: transform .15s; }
.bulk .split .caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.bulk .smenu { position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; min-width: 100%; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgb(30 0 50 / .28); padding: 4px; z-index: 60; }
.bulk .smenu[hidden] { display: none; }
.bulk .smenu button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border-radius: 6px; color: #2e0047; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bulk .smenu button:hover, .bulk .smenu button:focus-visible { background: #f3eef8; }
.bulk .smenu .n { margin-left: 12px; font-weight: 500; color: #6b6b76; }
#v-pedidos .tbar .tbtn.autoh::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; margin-left: 6px; vertical-align: middle; }
#v-pedidos table.orders { min-width: 760px; } /* las columnas sobrantes se ocultan solas (fitCols); por debajo de esto, scroll */

/* Vista Almacén */
.cfgform .wroles { display: flex; flex-direction: column; gap: 6px; }
.cfgform .wrole { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 10px; font-size: 13px; }
.cfgform .wrole .sel { width: 100%; }
#v-config .box .chk { white-space: normal; align-items: flex-start; line-height: 1.4; }
#v-config .box .chk input { margin-top: 2px; flex: none; }
#v-config .box .chk { white-space: normal; align-items: flex-start; line-height: 1.4; }
#v-config .box .chk input { margin-top: 2px; flex: none; }
#whBtn[aria-pressed="true"] { background: rgb(255 255 255 / .12); }
#whBtn[aria-pressed="true"] .t { font-weight: 700; }

/* Interruptor Estándar / Almacén (sin color de encendido: solo cambia la posición y la palabra marcada) */
#v-pedidos .frow .whsw { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--t-font, var(--sans)); color: #8a8a96; user-select: none; }
.whsw .wl { cursor: pointer; transition: color .15s; }
.whsw .wl.on { color: #1d1d1f; font-weight: 700; }
.whsw .tog { all: unset; cursor: pointer; position: relative; width: 40px; height: 24px; border-radius: 999px; background: #e3e3e8; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.whsw .tog i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .18s ease; }
.whsw .tog[aria-checked="true"] i { transform: translateX(16px); }
.whsw .tog:focus-visible { outline: 2px solid #2e0047; outline-offset: 2px; }
/* Marca de la Vista Almacén: franja de color arriba, etiqueta junto al título y cabecera de la tabla teñida */
:root { --wh: #0e7c86; --wh-tint: #e6f4f5; }
.whbadge { display: inline-flex; align-items: center; margin-left: 14px; padding: 4px 10px; border-radius: 999px; background: var(--wh); color: #fff; font: 600 11px/1 var(--t-font, var(--sans)); letter-spacing: .06em; text-transform: uppercase; align-self: center; }
.whbadge[hidden] { display: none; }
body.whview #v-pedidos .orders thead th { background: var(--wh-tint); }
body.whview #v-pedidos .tablewrap { box-shadow: 0 0 0 2px var(--wh); }
body.whview #v-pedidos .orders thead th { color: #0b5d64; }

/* Deshacer en bloque */
.bulk .btn.big.undo { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .45); }
.bulk .btn.big.undo:hover { border-color: #fff; background: rgb(255 255 255 / .08); }
.bulk .btn.big.undo .n { background: rgb(255 255 255 / .18); color: #fff; }
.undoopt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2, #e3e3e8); border-radius: 8px; margin-bottom: 8px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.undoopt:hover { border-color: #b9b0c6; }
.undoopt input { margin-top: 2px; flex: none; }
.undoopt .t { font: 600 14px/1.3 var(--sans); color: var(--fg, #1d1d1f); }
.undoopt .t .n { font-weight: 450; font-size: 12.5px; color: #6b6b76; margin-left: 6px; }
.undoopt .d { font: 400 12.5px/1.45 var(--sans); color: #6b6b76; margin-top: 3px; white-space: normal; }
.undoopt.off { opacity: .5; cursor: default; }
input.buNote { display: block; width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line-2, #d9d9de); border-radius: 6px; font: 400 13.5px/1.3 var(--sans); }
.undoopt + .lbl { margin-top: 14px; }
/* Prime: distintivo algo mayor y modo de envío «Prime» */
.primebadge, .primebadge img { height: 18px; }
#v-pedidos .orders td.c-id .primebadge { margin-left: 4px; }
.primebadge .primetxt { font-size: 13.5px; }
#v-pedidos .orders .flag.mode.pr { background: #e3f1ff; color: #0b63b6; }