/* ============================================================
   WTF PUBLICIDAD — Panel Interno
   remisiones.css — Estilos del modulo de Remisiones (Liverpool)
   Todo con prefijo .rem- para no chocar con los <style> de otros
   bloques, que quedan globales al cargarse. Usa los tokens de
   shell.css (--c1, --br, --g, ...), asi respeta tema claro/oscuro.
   ============================================================ */

.rem{max-width:1000px;margin:0 auto;}
/* [hidden] siempre oculta, aunque la clase ponga display (p. ej. .rem-aviso es flex) */
.rem [hidden]{display:none !important;}
.rem *,.rem *::before,.rem *::after{box-sizing:border-box;}
.rem .num{font-variant-numeric:tabular-nums;}

/* ── Menu lateral: isotipo de Liverpool junto a "Remisiones" ── */
.rem-nav-lvp{width:15px !important;height:auto !important;max-width:15px;flex:none;margin-left:.15rem;}
.sidebar.collapsed .rem-nav-lvp{display:none;}

/* ── Encabezado ── */
.rem-bc{display:flex;align-items:center;gap:.35rem;font-size:11px;color:var(--ts);margin-bottom:.7rem;}
.rem-bc a{color:var(--ts);cursor:pointer;} .rem-bc a:hover{color:var(--t);}
.rem-bc b{color:var(--t);font-weight:500;}
.rem-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem;}
.rem-tit{font-size:18px;font-weight:700;color:var(--t);display:flex;align-items:center;gap:.5rem;}
.rem-tit img{width:20px;height:auto;}
.rem-sub{font-size:12px;color:var(--ts);margin-top:.2rem;max-width:62ch;}
.rem-acc{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;}

/* ── Botones ── */
.rem-btn{display:inline-flex;align-items:center;gap:.35rem;padding:7px 14px;border-radius:var(--r2);font-size:11px;font-weight:700;font-family:var(--font);cursor:pointer;border:1px solid var(--br);background:var(--c1);color:var(--t);white-space:nowrap;}
.rem-btn:hover{border-color:var(--brh);}
.rem-btn.prim{background:var(--g);border-color:var(--g);color:#000;}
.rem-btn.prim:hover{background:var(--gd);border-color:var(--gd);}
.rem-btn.peligro{color:#E24B4A;}
.rem-btn.peligro:hover{background:var(--red-bg);border-color:var(--red-br);}
.rem-btn:disabled{opacity:.45;cursor:not-allowed;}
.rem-btn i{font-size:13px;}
.rem-ico{width:27px;height:27px;border-radius:var(--r);border:1px solid var(--br);background:transparent;color:var(--ts);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;}
.rem-ico:hover{background:var(--c2);color:var(--t);}
.rem-link{background:none;border:none;padding:0;color:var(--go);font-weight:700;font-size:11px;cursor:pointer;font-family:var(--font);}
[data-theme="dark"] .rem-link{color:var(--g);}

/* ── KPIs ── */
.rem-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin-bottom:.75rem;}
.rem-kpi{background:var(--c1);border:1px solid var(--br);border-radius:var(--r2);padding:.75rem .9rem;box-shadow:var(--shadow-card);}
.rem-kpi.ok{background:var(--green-bg);border-color:var(--green-br);}
.rem-kpi.warn{background:var(--yellow-bg);border-color:var(--yellow-br);}
.rem-kpi-l{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ts);margin-bottom:.2rem;}
.rem-kpi-v{font-size:21px;font-weight:700;color:var(--t);line-height:1.15;letter-spacing:-.5px;font-variant-numeric:tabular-nums;}
.rem-kpi.ok .rem-kpi-v{color:var(--go);}
[data-theme="dark"] .rem-kpi.ok .rem-kpi-v{color:var(--g);}
.rem-kpi.warn .rem-kpi-v{color:#BA7517;}
[data-theme="dark"] .rem-kpi.warn .rem-kpi-v{color:#EF9F27;}
.rem-kpi-v.gris{color:var(--ts);font-size:16px;padding:3px 0;}
.rem-kpi-s{font-size:10.5px;color:var(--ts);margin-top:.2rem;}
/* Con «Efectivo por entregar» arriba son cinco tarjetas; sin él, cuatro. */
.rem-kpis.cinco{grid-template-columns:repeat(5,minmax(0,1fr));}
/* Tarjeta de KPI que lleva a su lista. Va como <button> para que el teclado
   la alcance sola; de ahí el reinicio de estilos del botón. */
button.rem-kpi{display:block;width:100%;text-align:left;font:inherit;font-family:var(--font);cursor:pointer;}
button.rem-kpi:hover{border-color:var(--brh);}
button.rem-kpi:focus-visible{outline:2px solid var(--g);outline-offset:2px;}
.rem-kpi-ir{display:inline-flex;align-items:center;gap:.15rem;color:var(--go);font-weight:700;}
[data-theme="dark"] .rem-kpi-ir{color:var(--g);}
/* Desglose por tienda dentro de la tarjeta: solo sale con más de una tienda. */
.rem-kpi-tiendas{margin-top:.4rem;padding-top:.35rem;border-top:1px solid var(--br);display:flex;flex-direction:column;gap:.15rem;}
/* flex-wrap: con un nombre de tienda largo el monto se va al renglón de
   abajo en vez de recortarse. Nunca se esconde una cifra. */
.rem-kpi-tienda{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 .5rem;font-size:10.5px;color:var(--ts);}
.rem-kpi-tienda b{color:var(--t);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.rem-kpi-tienda span{min-width:0;}

/* ── Tarjetas y tablas ── */
.rem-card{background:var(--c1);border:1px solid var(--br);border-radius:var(--r2);box-shadow:var(--shadow-card);}
.rem-card + .rem-card{margin-top:.6rem;}
/* La tarjeta a la que lleva un KPI parpadea una vez al llegar, para que se
   vea cuál es sin tener que buscarla. */
@keyframes rem-resalta{from{box-shadow:0 0 0 3px var(--yellow-br);}to{box-shadow:var(--shadow-card);}}
.rem-card.resalta{animation:rem-resalta 1.6s ease-out;}
@media (prefers-reduced-motion:reduce){.rem-card.resalta{animation:none;}}
.rem-card-hdr{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--br);font-size:12px;font-weight:600;color:var(--t);}
.rem-card-hdr small{font-weight:500;color:var(--ts);font-size:11px;}
.rem-dos{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:.6rem;align-items:start;}
.rem-dos > .rem-card + .rem-card{margin-top:0;}
.rem-tabla-caja{overflow-x:auto;}
.rem-tabla{width:100%;border-collapse:collapse;min-width:540px;}
.rem-tabla th{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tm);padding:.5rem .7rem;border-bottom:1px solid var(--br);text-align:left;white-space:nowrap;}
.rem-tabla td{padding:.55rem .7rem;border-bottom:1px solid var(--sep);font-size:12px;color:var(--t);vertical-align:middle;}
.rem-tabla tr:last-child td{border-bottom:none;}
.rem-tabla .der{text-align:right;}
.rem-tabla tr.clic{cursor:pointer;}
.rem-tabla tr.clic:hover td{background:var(--c2);}
.rem-tabla tr.sel td{background:var(--nav-active-bg);}
.rem-tabla .tenue{color:var(--ts);}
.rem-concepto{max-width:320px;}
.rem-concepto small{display:block;color:var(--ts);font-size:10.5px;}
.rem-vacio{padding:2rem 1rem;text-align:center;color:var(--ts);font-size:12px;}
.rem-lista{padding:.2rem .9rem .6rem;}
.rem-li{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid var(--sep);font-size:12px;}
.rem-li:last-child{border-bottom:none;}
.rem-li small{display:block;color:var(--ts);font-size:10.5px;}
/* Encabezado de tienda dentro de una lista: solo se usa cuando hay más de
   una tienda, para no meterle ruido a la lista de siempre. */
.rem-li-grupo{padding:.5rem 0 .25rem;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tm);border-bottom:1px solid var(--sep);}
.rem-li-grupo:first-child{padding-top:.2rem;}
.rem-li .der{text-align:right;flex-shrink:0;}

/* ── Estados ── */
.rem-pill{display:inline-block;font-size:10px;font-weight:700;padding:1px 8px;border-radius:20px;border:1px solid;white-space:nowrap;}
.rem-pill.ok{background:var(--green-bg);color:var(--go);border-color:var(--green-br);}
[data-theme="dark"] .rem-pill.ok{color:var(--g);}
.rem-pill.warn{background:var(--yellow-bg);color:#BA7517;border-color:var(--yellow-br);}
[data-theme="dark"] .rem-pill.warn{color:#EF9F27;}
.rem-pill.rojo{background:var(--red-bg);color:#E24B4A;border-color:var(--red-br);}
.rem-pill.azul{background:var(--blue-bg);color:#378ADD;border-color:var(--blue-br);}
.rem-pill.gris{background:var(--c2);color:var(--ts);border-color:var(--br);}
.rem-pill-nota{display:block;font-size:10px;color:var(--ts);margin-top:2px;white-space:normal;}
/* Varias etiquetas en una celda (estado de la remisión + factura) */
.rem-pills{display:flex;flex-wrap:wrap;gap:3px;align-items:center;}
/* Lista de flujos: la columna Efectivo solo si algún tipo se entrega en efectivo */
.rem.sin-efectivo .rf-col-efe{display:none;}
.rem-cubierto{display:inline-flex;align-items:center;gap:.25rem;font-size:11px;font-weight:700;color:var(--go);white-space:nowrap;}
[data-theme="dark"] .rem-cubierto{color:var(--g);}
.rem-cob{display:flex;flex-direction:column;gap:3px;min-width:120px;}
.rem-cob-t{font-size:10.5px;color:var(--ts);white-space:nowrap;font-variant-numeric:tabular-nums;}
.rem-cob-t b{color:#BA7517;}
[data-theme="dark"] .rem-cob-t b{color:#EF9F27;}
.rem-barra{height:6px;border-radius:6px;background:var(--c2);border:1px solid var(--br);overflow:hidden;min-width:60px;}
.rem-barra i{display:block;height:100%;background:var(--g);transition:width .3s ease;}
.rem-barra.parcial i{background:#EF9F27;}
.rem-barra.cobro i{background:#378ADD;}
.rem-docs{display:flex;gap:3px;}
.rem-doc{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:5px;border:1px solid var(--br);color:var(--tm);background:var(--c2);white-space:nowrap;}
.rem-doc.si{color:var(--go);border-color:var(--green-br);background:var(--green-bg);}
[data-theme="dark"] .rem-doc.si{color:var(--g);}

/* ── Filtros ── */
.rem-filtros{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-bottom:.6rem;}
.rem-buscar{flex:1;min-width:180px;display:flex;align-items:center;gap:.4rem;border:1px solid var(--br);border-radius:var(--r2);background:var(--c1);padding:0 .6rem;}
.rem-buscar i{color:var(--tm);font-size:14px;}
.rem-buscar input{border:none;background:transparent;outline:none;flex:1;padding:7px 0;font-size:12px;color:var(--t);font-family:var(--font);}
.rem-chip{font-size:11px;padding:4px 11px;border:1px solid var(--br);border-radius:20px;background:var(--c1);color:var(--ts);cursor:pointer;font-family:var(--font);}
.rem-chip.on{background:var(--t);color:var(--bg);border-color:var(--t);font-weight:600;}
.rem-sel{padding:5px 8px;border:1px solid var(--br);border-radius:var(--r2);background:var(--c1);color:var(--t);font-size:11px;font-family:var(--font);}

/* ── Formularios ── */
.rem-form{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:.7rem;align-items:start;}
.rem-form-card{padding:1rem;display:flex;flex-direction:column;gap:.75rem;}
.rem-sec{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tm);padding-top:.35rem;border-top:1px solid var(--sep);}
.rem-sec:first-child{border-top:none;padding-top:0;}
.rem-campo label,.rem-campo .rem-lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ts);margin-bottom:.3rem;}
.rem-in{width:100%;padding:7px 10px;border:1px solid var(--brh);border-radius:var(--r);background:var(--c1);color:var(--t);font-size:12px;font-family:var(--font);outline:none;min-height:32px;}
.rem-in:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(117,184,42,.12);}
textarea.rem-in{resize:vertical;min-height:62px;line-height:1.45;}
.rem-in.num{text-align:right;font-variant-numeric:tabular-nums;}
.rem-in[readonly],.rem-in.fijo{background:var(--c2);color:var(--ts);border-style:dashed;}
.rem-in.fijo{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.rem-ayuda{font-size:10.5px;color:var(--ts);margin-top:.25rem;}
.rem-g2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.rem-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;}
.rem-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--br);border-radius:var(--r);overflow:hidden;}
.rem-seg label{display:flex;flex-direction:column;gap:1px;padding:.55rem .7rem;cursor:pointer;border-right:1px solid var(--br);font-size:12px;font-weight:600;color:var(--t);margin:0;text-transform:none;letter-spacing:0;background:var(--c1);}
.rem-seg label:last-child{border-right:none;}
.rem-seg label small{font-weight:400;color:var(--ts);font-size:10.5px;}
.rem-seg input{position:absolute;opacity:0;pointer-events:none;}
.rem-seg label.on{background:var(--green-bg);box-shadow:inset 0 0 0 1.5px var(--g);}
.rem-resumen{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.45rem;}
.rem-rs{display:flex;justify-content:space-between;gap:1rem;font-size:12.5px;font-variant-numeric:tabular-nums;}
.rem-rs span{color:var(--ts);}
.rem-rs.total{border-top:1px solid var(--br);padding-top:.55rem;margin-top:.2rem;font-size:16px;font-weight:700;}
.rem-rs.total span{color:var(--t);}
.rem-rs.util b{color:var(--go);}
[data-theme="dark"] .rem-rs.util b{color:var(--g);}
.rem-pie{display:flex;justify-content:flex-end;gap:.4rem;padding:.75rem 1rem;border-top:1px solid var(--br);flex-wrap:wrap;}
.rem-costo{display:grid;grid-template-columns:1.1fr 1.3fr .9fr auto;gap:.4rem;align-items:center;}
.rem-aviso{display:flex;gap:.55rem;border-radius:var(--r);padding:.6rem .7rem;font-size:11.5px;color:var(--ts);border:1px solid;align-items:flex-start;}
.rem-aviso i{font-size:15px;margin-top:1px;}
.rem-aviso b{color:var(--t);}
.rem-aviso.ok{background:var(--green-bg);border-color:var(--green-br);} .rem-aviso.ok i{color:var(--g);}
.rem-aviso.warn{background:var(--yellow-bg);border-color:var(--yellow-br);} .rem-aviso.warn i{color:#EF9F27;}
.rem-aviso.err{background:var(--red-bg);border-color:var(--red-br);} .rem-aviso.err i{color:#E24B4A;}
.rem-aviso.info{background:var(--blue-bg);border-color:var(--blue-br);} .rem-aviso.info i{color:#378ADD;}
.rem-aviso.clic{cursor:pointer;align-items:center;}
.rem-aviso.clic:hover{border-color:var(--brh);}
.rem-aviso .rem-aviso-ir{margin-left:auto;font-weight:700;color:var(--t);white-space:nowrap;}

/* Cuadre del monto contra lo autorizado del flujo: lo autorizado, lo ya
   cubierto y lo que se esta por emitir, dentro de un .rem-aviso. */
.rem-cuadre{display:flex;flex-direction:column;gap:.18rem;margin-top:.45rem;font-variant-numeric:tabular-nums;}
.rem-cuadre>div{display:flex;justify-content:space-between;gap:1rem;}
.rem-cuadre b{color:var(--t);font-weight:600;}
.rem-cuadre>.tot{border-top:1px solid var(--br);margin-top:.18rem;padding-top:.28rem;}
.rem-cuadre>.tot b{font-weight:700;}

/* ── Detalle de flujo ── */
.rem-resflujo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--br);}
.rem-rf{padding:.75rem .9rem;border-right:1px solid var(--br);}
.rem-rf:last-child{border-right:none;}
.rem-rf-l{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ts);}
.rem-rf-v{font-size:15px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--t);}
.rem-rf-s{font-size:10.5px;color:var(--ts);}
.rem-avance{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;padding:.75rem .9rem;}
.rem-avance-l{display:flex;justify-content:space-between;font-size:11px;color:var(--ts);margin-bottom:.3rem;font-variant-numeric:tabular-nums;}
.rem-avance-l b{color:var(--t);}
.rem-estado{display:inline-flex;align-items:center;gap:.35rem;font-size:11px;font-weight:700;padding:5px 11px;border-radius:20px;border:1px solid;white-space:nowrap;}
.rem-estado.warn{background:var(--yellow-bg);color:#BA7517;border-color:var(--yellow-br);}
[data-theme="dark"] .rem-estado.warn{color:#EF9F27;}
.rem-estado.ok{background:var(--green-bg);color:var(--go);border-color:var(--green-br);}
[data-theme="dark"] .rem-estado.ok{color:var(--g);}
.rem-estado.gris{background:var(--c2);color:var(--ts);border-color:var(--br);}
.rem-sumapie{display:flex;justify-content:flex-end;gap:1.3rem;padding:.6rem .9rem;border-top:1px solid var(--br);font-size:12px;background:var(--c2);border-radius:0 0 var(--r2) var(--r2);flex-wrap:wrap;font-variant-numeric:tabular-nums;}
.rem-sumapie span{color:var(--ts);}
.rem-sumapie b.falta{color:#BA7517;}
.rem-hist{padding:.2rem .9rem .5rem;}
.rem-hist div{display:flex;justify-content:space-between;gap:.8rem;padding:.4rem 0;border-bottom:1px solid var(--sep);font-size:11.5px;}
.rem-hist div:last-child{border-bottom:none;}
.rem-hist small{color:var(--ts);white-space:nowrap;}

/* ── Panel lateral (editar, pagar, cerrar, costos) ── */
.rem-velo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:600;}
.rem-drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--c1);border-left:1px solid var(--br);z-index:601;display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(0,0,0,.2);}
.rem-drawer-hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;padding:.9rem 1rem;border-bottom:1px solid var(--br);}
.rem-drawer-hdr b{font-size:14px;color:var(--t);}
.rem-drawer-hdr small{display:block;color:var(--ts);font-size:11px;margin-top:2px;}
.rem-drawer-body{padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;flex:1;}
.rem-drawer .rem-pie{padding:.75rem 1rem;}

/* ── Documento (vista previa) ── */
.rem-papel{position:relative;aspect-ratio:210/297;background:#fff;color:#1a1a1a;border-radius:3px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.08);font-family:"DejaVu Sans",Verdana,Arial,sans-serif;container-type:inline-size;}
.rem-papel img.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rem-papel .caja{position:absolute;left:23.8%;right:23.8%;font-size:1.48cqw;line-height:1.49;}
.rem-papel .fecha{top:13.9%;text-align:right;}
.rem-papel .titulo{top:17%;text-align:center;}
.rem-papel .cuerpo{top:21.9%;}
.rem-papel .cuerpo .imp{margin-top:1.49em;}
.rem-papel .cuerpo .tot{margin-top:1.9em;font-size:1.35em;color:#333;}
.rem-papel .pie{top:92.9%;text-align:center;font-size:1.3cqw;border-top:1px solid #bbb;padding-top:.5cqw;}
.rem-papel .pie u{color:#555;}
.rem-papel-nota{font-size:10.5px;color:var(--ts);padding:0 .9rem .8rem;}

/* Cinco tarjetas solo caben en pantalla ancha; antes de apretarlas, tres. */
@media (max-width:1180px){
  .rem-kpis.cinco{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:860px){
  .rem-kpis,.rem-kpis.cinco{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* minmax(0,…): las tablas anchas se desplazan dentro de su tarjeta en vez de ensanchar la columna.
     !important: gana a las columnas en línea de Remisiones y Configuración. */
  .rem-dos,.rem-form{grid-template-columns:minmax(0,1fr) !important;}
  .rem-resflujo{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rem-rf:nth-child(2){border-right:none;}
  .rem-rf:nth-child(-n+2){border-bottom:1px solid var(--br);}
  .rem-avance{grid-template-columns:1fr;}
  .rem-g3{grid-template-columns:1fr 1fr;}
}