:root{
  --tinta:#1c1917; --gris:#6b7280; --linea:#e6e8ee; --fondo:#f5f6f9; --blanco:#fff;
  --azul:#e5484d; --azul-oscuro:#c53035; --ambar:#d97706; --verde:#059669; --rojo:#dc2626;
  --radio:12px; --sombra:0 1px 3px rgba(18,24,38,.08),0 1px 2px rgba(18,24,38,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--tinta);background:var(--fondo);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--azul);text-decoration:none}
h1,h2{line-height:1.2}
.contenedor{max-width:1040px;margin:0 auto;padding:24px 16px}
.centro{max-width:440px;margin:0 auto}

/* Tarjetas / cajas */
.caja{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:20px}
.caja+.caja{margin-top:16px}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;border:1px solid var(--linea);
  background:var(--blanco);color:var(--tinta);border-radius:10px;padding:9px 14px;font-size:.9rem;
  font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap}
.btn:hover{border-color:#cfd3dc;background:#fafbfc}
.btn-azul{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-oscuro);border-color:var(--azul-oscuro)}
.btn-mini{padding:5px 9px;font-size:.78rem;border-radius:8px}
.btn-peligro{color:var(--rojo);border-color:#f3c9c9}
.btn-peligro:hover{background:#fdf2f2}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Formularios */
label.campo{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--gris);font-weight:600}
label.campo input,label.campo select,input.txt,select.txt{
  border:1px solid var(--linea);border-radius:9px;padding:9px 11px;font-size:.92rem;color:var(--tinta);
  background:var(--blanco);width:100%;font-family:inherit}
input:focus,select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(229,72,77,.14)}
.rejilla{display:grid;gap:12px}
.rejilla.r-2{grid-template-columns:1fr 1fr}
@media(max-width:560px){.rejilla.r-2{grid-template-columns:1fr}}

/* Tabla */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);
  font-weight:700;padding:8px 10px;border-bottom:1px solid var(--linea)}
td{padding:10px;border-bottom:1px solid var(--linea);vertical-align:top}
.desborde{overflow:auto}

/* Pastillas de estado */
.pastilla{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700}
.p-pendiente{background:#fef3c7;color:#92400e}
.p-enviado{background:#dbeafe;color:#1e40af}
.p-entregado{background:#d1fae5;color:#065f46}
.p-gris{background:#eef0f4;color:#4b5563}
.p-alerta{background:#fde2e2;color:#991b1b}

/* Encabezado del panel */
.barra{background:var(--blanco);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.barra .contenedor{display:flex;align-items:center;gap:14px;padding:12px 16px}
.marca{font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.crecer{flex:1}
.ficha{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ind{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;flex:1;min-width:150px}
.ind .num{font-size:1.5rem;font-weight:800}
.ind .et{font-size:.76rem;color:var(--gris);font-weight:600}

/* Avisos */
.aviso{padding:10px 12px;border-radius:9px;font-size:.86rem;margin:10px 0}
.aviso-error{background:#fdecec;color:#991b1b;border:1px solid #f5c2c2}
.aviso-ok{background:#e7f6ee;color:#065f46;border:1px solid #b6e3c9}
.oculto{display:none!important}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--tinta);color:#fff;
  padding:11px 18px;border-radius:10px;font-size:.88rem;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:100}

/* ── Celular: la tabla se vuelve tarjetas ─────────────────────────────────
   Cada fila es una tarjeta; cada celda muestra su título (data-label) a la
   izquierda; los botones quedan abajo, visibles y fáciles de tocar. */
@media (max-width:900px){
  .contenedor{padding:16px 12px}
  .barra .contenedor{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .barra .crecer{display:none}
  .barra select{flex:1 1 140px;min-width:140px}
  .ficha{gap:8px}
  .ind{min-width:calc(50% - 4px);padding:12px}
  .ind .num{font-size:1.25rem}
  .caja.desborde{padding:8px;background:transparent;border:none;box-shadow:none}
  table.tarjetas,table.tarjetas tbody,table.tarjetas tr,table.tarjetas td{display:block;width:100%}
  table.tarjetas thead{display:none}
  table.tarjetas tr{background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);
    padding:12px 14px;margin-bottom:10px}
  table.tarjetas td{border:none;padding:3px 0;display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
  table.tarjetas td[data-label]::before{content:attr(data-label);flex:0 0 74px;font-size:.68rem;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;color:var(--gris);padding-top:3px}
  table.tarjetas td.acciones{flex-wrap:wrap;gap:6px;padding-top:10px;margin-top:6px;border-top:1px solid var(--linea);white-space:normal!important}
  table.tarjetas td.acciones .btn{flex:1 1 auto;padding:8px 10px;font-size:.82rem}
  table.tarjetas td.cabeza{justify-content:space-between;font-size:1rem}
  .capa{padding:12px 8px}
  .capa .panel{padding:16px}
  details.menu .menu-lista{min-width:240px}
}

@media (max-width:480px){ .barra .marca > span{display:none} }

/* Menú desplegable simple (details/summary) */
details.menu{position:relative}
details.menu>summary{list-style:none}
details.menu>summary::-webkit-details-marker{display:none}
details.menu .menu-lista{position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:#fff;border:1px solid var(--linea);
  border-radius:12px;box-shadow:0 10px 30px rgba(18,24,38,.14);padding:6px;display:flex;flex-direction:column;gap:4px;min-width:260px}
details.menu .menu-lista .btn{justify-content:flex-start;border-color:transparent;width:100%}
details.menu .menu-lista .btn:hover{background:#f3f6fb}

/* Capa / modal */
.capa{position:fixed;inset:0;background:rgba(18,24,38,.45);display:flex;align-items:flex-start;
  justify-content:center;padding:30px 16px;overflow:auto;z-index:50}
.capa .panel{background:#fff;border-radius:14px;max-width:560px;width:100%;padding:22px}

/* Resultados de búsqueda de agencias */
.resultados{max-height:260px;overflow:auto;border:1px solid var(--linea);border-radius:10px;background:#fff;margin-top:8px}
.op{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--linea);font-size:.85rem;line-height:1.35}
.op:hover{background:#fff4f3}
.op b{color:var(--tinta)}
.op small{color:var(--gris)}

/* ── «N° de orden por revisar» (#/revisar) ────────────────────────────────
   Celular: lista de tarjetas; cada una abre una hoja a pantalla completa.
   Computadora (900 px o más): dos columnas, las órdenes a la izquierda y sus
   pedidos posibles a la derecha. */
.rv-lista{display:flex;flex-direction:column;gap:8px}
.rv-orden{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:10px 12px;font:inherit;color:inherit;cursor:pointer;box-shadow:var(--sombra)}
.rv-orden:hover{border-color:#cfd3dc}
.rv-orden.activa{border-color:var(--azul);box-shadow:0 0 0 2px rgba(229,72,77,.18)}
.rv-orden .rv-dato{display:block;font-size:.82rem;color:var(--gris);margin-top:2px;overflow-wrap:anywhere}
.rv-cab{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.rv-num{font-family:monospace;font-size:1rem}
.rv-vacio{color:var(--gris);font-size:.88rem;padding:10px 0}
.rv-hoja{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:16px;box-shadow:var(--sombra);min-width:0}
.rv-titulo{font-size:.74rem;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.05em;margin:12px 0 4px}
.rv-pedido{border:1px solid var(--linea);border-radius:10px;padding:8px 10px;margin-bottom:6px;display:flex;gap:8px;
  justify-content:space-between;align-items:center;flex-wrap:wrap}
.rv-historial{list-style:none;font-size:.8rem;color:var(--gris);display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere}
.rv-volver-lista{display:none}
@media (min-width:900px){
  .rv-columnas{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:16px;align-items:start}
  .rv-hoja{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto}
}
@media (max-width:899.98px){
  .rv-hoja{display:none}
  .rv-hoja.abierta{display:block;position:fixed;inset:0;z-index:40;border:none;border-radius:0;box-shadow:none;overflow:auto;
    padding:14px 14px 28px}
  .rv-volver-lista{display:inline-flex;margin-bottom:12px}
  /* Con el dedo: los botones de esta pantalla miden 44 px de alto como mínimo, y los que deciden van a lo ancho. */
  .rv-hoja .btn,#rv-filtros .btn,#rv-mas,#vista-extra [data-volver]{min-height:44px;padding:10px 14px;font-size:.86rem}
  .rv-hoja .txt{min-height:44px}
  .rv-pedido [data-rv-es],.rv-acciones .btn{flex:1 1 100%}
}

/* ── Resumen del panel (tanda 4): "Qué hacer ahora" y tarjetas ────────────
   Celular: 2 tarjetas por fila; computadora (900 px o más): 4. Cada tarjeta
   es un enlace a su lista. */
.p-etapa-datos{background:#ede9fe;color:#5b21b6}
.banner-accion{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#fff7f6;
  border:1px solid #fbc9c5;border-radius:var(--radio);padding:12px 14px;margin-bottom:10px}
.banner-accion>div{flex:1 1 220px;min-width:0}
.banner-accion small{display:block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--azul-oscuro)}
.banner-accion b{font-size:.98rem;line-height:1.35;overflow-wrap:anywhere}
.banner-accion.al-dia{background:#e7f6ee;border-color:#b6e3c9}
.banner-accion.al-dia small{color:#065f46}
.tarjetas-resumen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.tarjeta-resumen{display:flex;flex-direction:column;gap:2px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);
  padding:11px 13px;color:var(--tinta);box-shadow:var(--sombra);min-width:0}
.tarjeta-resumen:hover{border-color:#cfd3dc}
.tarjeta-resumen .num{font-size:1.45rem;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.tarjeta-resumen .et{font-size:.76rem;color:var(--gris);font-weight:600;line-height:1.3}
.tarjeta-resumen.llama{border-color:#f3c9c9;background:#fffafa}
.tarjeta-resumen.llama .num{color:var(--azul-oscuro)}
.incidencias{background:#fffbeb;border:1px solid #fde68a;border-radius:var(--radio);padding:10px 14px;margin-bottom:12px;font-size:.86rem;color:#92400e}
.incidencias ul{list-style:none;margin-top:4px;display:flex;flex-direction:column;gap:3px}
.incidencias a{color:#92400e;text-decoration:underline}
@media (min-width:900px){ .tarjetas-resumen{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} }

/* ── Lista nueva: buscador fijo arriba, chips, filtros y elegidos ─────────── */
#lista-nueva{scroll-margin-top:var(--alto-barra,0px)}
.buscador{position:sticky;top:var(--alto-barra,0px);z-index:15;background:var(--fondo);padding:6px 0 8px}
.buscador .txt{font-size:1rem;padding:11px 14px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;margin-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;border:1px solid var(--linea);background:var(--blanco);border-radius:999px;padding:7px 12px;font:inherit;font-size:.8rem;
  font-weight:600;color:var(--tinta);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:#cfd3dc}
.chip.activo{background:var(--azul);border-color:var(--azul);color:#fff}
.chip.activo .pastilla{background:rgba(255,255,255,.25);color:#fff}
.chips.apagados .chip:not(.activo){opacity:.55}
.filtros-lista{margin-bottom:8px}
details#filtros>summary{list-style:none}
details#filtros>summary::-webkit-details-marker{display:none}
details#filtros[open]{flex:1 1 100%;order:9}
.filtros-caja{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:8px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radio);padding:12px;align-items:end}
.filtros-caja .resultados{grid-column:1/-1;margin-top:0}
.lista-aviso{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.aviso-lista{font-size:.84rem;color:var(--gris)}
.aviso-lista.malo{color:var(--rojo)}
.aviso-lista a{text-decoration:underline}
.lista-estado{padding:20px;text-align:center;color:var(--gris)}
#lista tr[data-pedido]{cursor:pointer}
#lista tr[data-pedido]:hover td{background:#fafbfc}
#lista tr.elegida td{background:#fff4f3}
#lista td.acciones{white-space:nowrap;text-align:right}
.col-elegir{width:36px}
.col-elegir input{width:20px;height:20px;cursor:pointer}
@media (min-width:900px){ .col-destino{max-width:200px} }

/* Barra de los elegidos: fija abajo, con sus acciones. */
.barra-seleccion{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--tinta);color:#fff;display:flex;gap:8px 12px;align-items:center;
  flex-wrap:wrap;padding:10px 16px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.barra-seleccion .sel-n{font-weight:700;font-size:.9rem}
.barra-seleccion .sel-botones{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:flex-end}
body.con-barra{padding-bottom:132px}

/* «Avisar» a varios: una fila por cliente. */
.avisar-lista{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto}
.avisar-fila{display:flex;gap:8px;justify-content:space-between;align-items:center;border:1px solid var(--linea);border-radius:10px;
  padding:8px 10px;font-size:.86rem;min-width:0;overflow-wrap:anywhere}
.avisar-fila.hecha{background:#e7f6ee}

/* ── Detalle de un pedido ─────────────────────────────────────────────────
   Computadora: un panel de 420 px a la derecha, encima de la lista.
   Celular: a pantalla completa con «← Volver». */
aside.detalle{position:fixed;z-index:40;background:var(--blanco);overflow:auto;padding:0 16px 28px}
.detalle-cab{position:sticky;top:0;background:var(--blanco);display:flex;align-items:center;gap:8px;padding:12px 0 8px;z-index:1;
  border-bottom:1px solid var(--linea);margin-bottom:10px}
.detalle-titulo{flex:1;font-weight:700;color:var(--gris);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em}
.dt-cab h2{font-size:1.15rem;margin:6px 0 2px;overflow-wrap:anywhere}
.dt-codigo{font-family:monospace;font-size:1rem;margin-right:6px}
.dt-acciones{margin:12px 0}
.dt-datos{display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:10px;margin-bottom:6px}
.dt-dato{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--linea);font-size:.86rem}
.dt-dato:last-child{border-bottom:none}
.dt-dato>span{color:var(--gris);flex:0 0 auto}
.dt-dato>b{font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.historial{list-style:none;font-size:.82rem;display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.historial li>span{color:var(--gris);margin-right:4px;white-space:nowrap}
@media (min-width:900px){
  aside.detalle{top:var(--alto-barra,0px);right:0;bottom:0;width:420px;border-left:1px solid var(--linea);box-shadow:-10px 0 30px rgba(18,24,38,.12)}
  .detalle-cab [data-dt-cerrar]:first-child{display:none}
}
@media (max-width:899.98px){
  .hoja-completa{inset:0}
  .detalle-x{display:none}
  body.con-detalle{overflow:hidden}
  /* Con el dedo: los botones del detalle, de la barra de elegidos y los chips miden 44 px de alto como mínimo.
     También los de cada tarjeta de la lista (lo que más se toca), «Cargar 50 más» y los de arriba. */
  aside.detalle .btn,.barra-seleccion .btn,#filtros-lista .btn{min-height:44px;padding:10px 14px;font-size:.86rem}
  table.tarjetas td.acciones .btn,#lista-mas,#btn-nuevo,#btn-excel{min-height:44px}
  .chip{min-height:40px}
  /* La barra de elegidos: el número arriba y sus botones en una sola fila que se desliza (no tapa media pantalla). */
  .barra-seleccion{padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:6px}
  .barra-seleccion .sel-n{flex:1 1 100%;font-size:.84rem}
  .barra-seleccion .sel-botones{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .barra-seleccion .sel-botones .btn{flex:0 0 auto}
  body.con-barra{padding-bottom:110px}
  /* Elegida: la tarjeta entera se marca (no sus celdas). */
  #lista tr.elegida{border-color:var(--azul);box-shadow:0 0 0 2px rgba(229,72,77,.18)}
  #lista tr.elegida td,#lista tr[data-pedido]:hover td{background:transparent}
  .tarjeta-resumen:last-child:nth-child(odd){grid-column:1/-1}
  .buscador .txt{font-size:.95rem;text-overflow:ellipsis}
}

/* ── /unir: casillas para elegir qué rótulos van al PDF (tanda 5) ── */
.u-marcar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;font-size:.8rem;color:var(--gris)}
.u-contador{flex:1 1 100%;font-weight:700;color:var(--tinta)}
.u-filas{max-height:240px;overflow:auto;margin-top:6px;border:1px solid var(--linea);border-radius:10px;padding:4px 10px}
.u-fila{display:flex;gap:8px;align-items:flex-start;padding:4px 0;cursor:pointer;overflow-wrap:anywhere;border-bottom:1px solid var(--linea)}
.u-fila:last-child{border-bottom:none}
.u-fila input{flex:0 0 auto;width:16px;height:16px;margin-top:1px;accent-color:var(--azul)}
.u-fila>span{min-width:0}
.u-fila.no-va>span{opacity:.5}
@media (max-width:560px){
  /* Con el dedo: casillas y botones más grandes. */
  .u-marcar .btn{min-height:40px}
  .u-fila{padding:9px 0}
  .u-fila input{width:20px;height:20px}
}

/* ── Clave de Shalom: «🔒 Clave masiva» o «🔑 Una clave para cada uno» ──────
   Al exportar se elige con cuál sale el Excel; con «una para cada uno», la
   lista de claves va en el orden del Excel (N° 1, N° 2…). En la computadora la
   ventana es más ancha y la lista se desplaza sola; en el celular, tarjetas. */
.capa .panel.panel-ancho{max-width:900px}
.op-clave{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--linea);border-radius:12px;padding:12px 14px;
  cursor:pointer;margin-bottom:8px;line-height:1.4;background:var(--blanco)}
.op-clave:hover{background:#fafbfc}
.op-clave:has(input:checked){border-color:var(--azul);background:#fff4f3;box-shadow:0 0 0 2px rgba(229,72,77,.14)}
.op-clave input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--azul)}
.op-clave b{display:block;font-size:.95rem;color:var(--tinta)}
.op-clave small{display:block;color:var(--gris);font-size:.84rem;margin-top:2px}
.claves-lista{border:1px solid var(--linea);border-radius:12px;margin:12px 0;overflow-wrap:anywhere}
.claves-lista td{vertical-align:middle}
.claves-lista tr.hecha td{background:#e7f6ee}
.claves-lista .c-n{font-weight:800;white-space:nowrap}
.claves-lista .c-doc{font-family:monospace;white-space:nowrap}
.claves-lista .c-nota{display:block;font-size:.76rem;color:var(--gris)}
.claves-lista .c-clave{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.clave-grande{font-family:monospace;font-size:1.55rem;font-weight:800;letter-spacing:.18em;min-width:5.2ch}
/* Los que no van en el último archivo (sin N°, al final de «Ver claves»): más apagados. */
.claves-lista tr.fuera .clave-grande{color:var(--gris)}
@media (min-width:901px){
  /* Alta justa para que «Listo» se vea entero en 1280 × 720 con 25 pedidos o más. */
  .claves-lista{max-height:min(40vh,520px);overflow:auto}
  .claves-lista thead th{position:sticky;top:0;background:var(--blanco);z-index:1}
  /* «Copiar» y «Copiada ✓» miden lo mismo: «Corregir» no baja a otra línea y la fila no cambia de alto. */
  .claves-lista .c-clave{flex-wrap:nowrap}
  .claves-lista [data-clave-copiar]{min-width:9.5ch}
  .claves-lista td{padding-top:7px;padding-bottom:7px}
  .claves-lista .clave-grande{line-height:1.15}
}
/* En la laptop (1100 px o más), la lista de claves más ancha: el nombre como en el DNI cabe en una línea. */
@media (min-width:1100px){ .capa .panel.panel-ancho{max-width:1040px} }
@media (max-width:900px){
  .claves-lista{border:none;margin:10px 0}
  .claves-lista table.tarjetas tr{padding:10px 12px;margin-bottom:8px}
  .claves-lista table.tarjetas tr.hecha{background:#e7f6ee}
  .claves-lista .c-clave .btn{min-height:40px}
  .claves-lista .clave-grande{font-size:1.35rem;letter-spacing:.12em;min-width:0}
}