/* ══════ PRODUCCIÓN ═══════════════════════════════════════════════════════
   Estilos del módulo de producción. Es un módulo del panel y sigue
   docs/ESTETICA.md como el resto (Sebastián, 21/10: los módulos con los mismos
   principios que toda la aplicación): usa las piezas que ya existen —
   buscador .bus, filtros .grupos, avisos .nota y .err, vacíos .vacio, tablas
   .tabla-stock, tarjetas .card, cifras .kpis, códigos .mono— y aquí solo va
   lo que no tiene equivalente, con el prefijo `pd-`.
   La terminal se usa en el obrador, con guantes: ahí, y solo ahí, lo que se
   toca es grande (regla 6 de ESTETICA.md: 52 px). El reporte es de oficina y
   va con la densidad normal del panel. Sin sombras: se separa con línea. */

.pd{display:flex;flex-direction:column;gap:14px;padding-bottom:96px}
/* Los huecos de los avisos (cola, último registro), sin nada dentro, no
   suman separación: dejaban un vacío grande encima de la búsqueda. */
.pd > div:empty{display:none}
.pd .nota{margin-bottom:0}
.pd .nota strong{display:block;margin-bottom:2px}
/* Lo que cuenta la cola (aviso, lo pendiente…) va junto pero no pegado. */
#pd-cola > * + *{margin-top:10px}
/* La entrada con el usuario de OMNI no es de aquí: es la de gestión, en
   js/ui.js (UI.entradaOmniHtml) y css/ui.css, compartida con compras. */

/* ── estado de la terminal ───────────────────────────────────────────────*/
.pd-estado{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13.5px;color:var(--tinta-2)}
.pd-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linea);border-radius:999px;
  padding:4px 11px;background:var(--sup);white-space:nowrap}
.pd-chip i{width:9px;height:9px;border-radius:50%;background:var(--verde)}
.pd-chip.off i{background:var(--ambar)}
.pd-chip.mal i{background:var(--rojo)}

/* ── mesa: productos a la izquierda, lote a la derecha ───────────────────*/
.pd-mesa{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.pd-prod{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Pegado arriba de .cuerpo, que es lo que se desplaza en el panel. Se pega por
   dentro de su margen (22 px, y 15 px en móvil): el `top` negativo lo sube
   hasta el borde, porque por ese hueco se veían pasar las tarjetas
   (Sebastián, 21/10). */
.pd-busca{position:sticky;top:-22px;z-index:3;background:var(--fondo);padding:10px 0;display:flex;flex-direction:column;gap:10px}
@media(max-width:760px){ .pd-busca{top:-15px} }
/* El buscador del panel (.bus) a tamaño de obrador. */
.pd-bus input{min-height:52px;font-size:16px;padding-left:40px}
.pd-bus svg{left:14px;top:18px;width:16px;height:16px}
/* Los filtros del panel (.grupos), a tamaño de obrador. Todos a la vista: si
   no caben en una fila, bajan a otra (Sebastián, 21/10: se cortaba el último). */
.pd-grupos button{min-height:44px;padding:0 16px;font-size:14px}
/* En el móvil, algo menores: a 44 px eran tres filas pegadas arriba. */
@media(max-width:760px){ .pd-grupos button{min-height:36px;padding:0 12px;font-size:13px} }

.pd-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px}
.pd-carta{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;text-align:left;
  min-height:122px;padding:14px;border-radius:var(--r);border:1px solid var(--linea);background:var(--sup);
  font:inherit;color:var(--tinta);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:transform .08s ease,border-color .15s ease}
.pd-carta:hover{border-color:var(--linea-fuerte)}
.pd-carta:active{transform:scale(.97)}
.pd-carta.en-lote{border-color:var(--verde);background:var(--verde-suave)}
.pd-carta .nm{font-size:16.5px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.pd-carta .cod{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--tenue)}
/* El contador va abajo, junto al código: arriba tapaba el final del nombre. */
.pd-carta .cnt{position:absolute;bottom:10px;right:10px;min-width:38px;height:38px;padding:0 10px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;background:var(--verde);color:#fff;font-weight:600;
  font-size:16px;font-variant-numeric:tabular-nums}
.pd-carta[disabled]{opacity:.45;cursor:not-allowed}
.pd-carta .sin{font-size:12px;font-weight:600;color:var(--ambar)}
.pd-carta.pulso{animation:pd-pulso .3s ease}
@keyframes pd-pulso{40%{transform:scale(1.04);border-color:var(--verde)}}
.pd-busca-api{justify-self:start}

/* ── lote ─────────────────────────────────────────────────────────────────*/
.pd-lote{position:sticky;top:6px;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);
  display:flex;flex-direction:column;max-height:calc(100vh - var(--barra,0px) - 24px)}
.pd-lote .vacio{padding:26px 10px}
.pd-lote-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 16px 10px;border-bottom:1px solid var(--linea)}
.pd-lote-cab h2{margin:0;font-size:19px}
.pd-total{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.pd-total small{font-size:13px;font-weight:500;color:var(--tenue);margin-left:4px}
.pd-lineas{overflow-y:auto;padding:6px 10px;display:flex;flex-direction:column;gap:6px;min-height:80px}
.pd-linea{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--linea-2)}
.pd-linea .nm{font-size:14.5px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.pd-pasos{display:flex;align-items:center;gap:6px}
.pd-mas{width:48px;height:48px;border-radius:var(--r-sm);border:1px solid var(--linea-fuerte);background:var(--sup);
  font:inherit;font-size:22px;font-weight:600;color:var(--tinta);cursor:pointer;touch-action:manipulation}
.pd-mas:active{background:var(--hover)}
.pd-cant{width:72px;height:48px;text-align:center;font:inherit;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;
  border-radius:var(--r-sm);border:1px solid var(--linea);background:var(--sup);color:var(--tinta)}
.pd-lote-pie{padding:12px 16px 16px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.pd-destino{font-size:13px;color:var(--tinta-2)}
/* La acción del obrador: el botón principal del panel, a lo ancho y a 52 px. */
.pd-registrar{width:100%;min-height:52px;font-size:16px;font-weight:600}
.pd-fila{display:flex;gap:8px}
.pd-fila .btn{flex:1;min-height:52px;font-size:15px}
.pd-historial{font-size:13px;color:var(--tenue);margin:0}

/* ── cola sin conexión ────────────────────────────────────────────────────*/
.pd-parada{display:flex;flex-direction:column;gap:6px}
.pd-parada .pd-fila{margin-top:6px;flex-wrap:wrap}
.pd-pendientes{font-size:13.5px;color:var(--tinta-2);border:1px solid var(--linea);border-radius:var(--r-sm);padding:8px 12px;background:var(--sup)}
.pd-pendientes summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.pd-pendientes div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--linea-2)}
.pd-rechazado{color:var(--rojo);font-size:12px;white-space:nowrap}

/* ── reporte: la densidad normal del panel ───────────────────────────────*/
.pd-controles{display:flex;flex-direction:column;gap:10px}
.pd-ctrl-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.pd-fechas{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13.5px;color:var(--tinta-2)}
.pd-fechas .ui-dd{min-width:150px}
.pd-exportar{display:flex;flex-wrap:wrap;gap:8px}
/* Tres cifras, siempre en una fila: con dos columnas quedaba un hueco. */
.pd .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.pd-periodo{margin:0;font-size:13.5px;font-weight:600;color:var(--tinta-2)}
/* «Cuándo se produce»: el gráfico de Inicio (.ini-graf). Los dos en una
   línea, repartidos 3 a 2, y uno debajo del otro en el móvil. Cada gráfico se
   dibuja al ancho de su hueco (dibujarCuando en produccion.js). */
.pd-cuando{margin:0}
.pd-graficos{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px 28px}
.pd-graficos.uno,.pd-graficos.apilados{grid-template-columns:minmax(0,1fr)}
/* Una línea fina entre los dos, en el centro del hueco y sin llegar arriba
   ni abajo (Sebastián, 21/10). Solo cuando van uno al lado del otro. */
.pd-graficos > div{position:relative}
.pd-graficos:not(.uno):not(.apilados) > div + div::before{content:'';position:absolute;left:-14px;top:12%;bottom:12%;
  width:1px;background:var(--linea)}
.pd-graf{min-height:190px}
.pd-graf svg{display:block;width:100%;height:auto}
.pd-gt{font-size:11.5px;color:var(--tenue);margin-bottom:6px}
/* Una orden desplegada enseña sus productos debajo, en la misma tabla: una
   fila por producto, con sus unidades en la columna de las unidades. */
.tabla-stock tr.pd-op.abierta td,.tabla-stock tr.pd-op-det td{background:var(--sup-2)}
.tabla-stock tr.pd-op.abierta td{border-bottom-color:transparent}
.tabla-stock tr.pd-op-det td{padding:4px 0;border-bottom:none;font-size:13px}
.tabla-stock tr.pd-op-det td:first-child{padding-left:26px}
.tabla-stock tr.pd-op-det.ult td{padding-bottom:12px;border-bottom:1px solid var(--linea-2)}
.tabla-stock tr.pd-op-det.ult:last-child td{border-bottom:none}

/* ── PDF del reporte: solo el reporte, sin el marco del panel ────────────
   El marco tiene alto fijo y overflow:hidden para que se desplace solo
   #cuerpo; en papel eso cortaría la tabla en la primera hoja. */
@media print{
  body[data-print="produccion"] .top,
  body[data-print="produccion"] .lat,
  body[data-print="produccion"] .miga,
  body[data-print="produccion"] .velo,
  body[data-print="produccion"] .hoja,
  body[data-print="produccion"] .tope .der,
  body[data-print="produccion"] .pd-controles,
  body[data-print="produccion"] .pd-barra,
  body[data-print="produccion"] .pd-velo{display:none!important}
  /* Nada con alto fijo ni con lo que sobra oculto: el panel pone
     overflow-x:hidden en html y body, y eso también recorta en vertical. */
  html:has(body[data-print="produccion"]),
  body[data-print="produccion"]{height:auto!important;overflow:visible!important}
  body[data-print="produccion"] .marco{display:block!important;height:auto!important;overflow:visible!important}
  body[data-print="produccion"] .cuerpo{overflow:visible!important;padding:0!important;height:auto!important;flex:none!important}
  body[data-print="produccion"] .tabla-stock{overflow:visible!important;margin:0!important;padding:0!important}
  body[data-print="produccion"] .tabla-stock table{min-width:0!important}
  body[data-print="produccion"] .pd{padding-bottom:0}
  body[data-print="produccion"] .card{box-shadow:none;break-inside:auto}
  body[data-print="produccion"] .kpi{break-inside:avoid}
  body[data-print="produccion"] .tabla-stock thead{display:table-header-group}
  body[data-print="produccion"] .tabla-stock tr{break-inside:avoid}
}

/* ── móvil: barra fija abajo y el lote en hoja ───────────────────────────*/
.pd-barra{display:none}
.pd-velo{display:none}
@media (max-width:899px){
  .pd-mesa{grid-template-columns:minmax(0,1fr)}
  .pd-rejilla{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .pd-barra{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;gap:12px;
    padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    background:var(--sup);border-top:1px solid var(--linea)}
  .pd-barra .res{flex:1;min-width:0;font-size:14px;color:var(--tinta-2)}
  .pd-barra .res b{display:block;font-size:22px;color:var(--tinta);font-variant-numeric:tabular-nums}
  .pd-barra .btn{min-height:54px;padding:0 20px;font-size:16px}
  .pd-lote{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:42;max-height:86vh;border-radius:16px 16px 0 0;
    transform:translateY(105%);transition:transform .22s ease;padding-bottom:env(safe-area-inset-bottom,0px)}
  .pd-lote.abierta{transform:none}
  .pd-velo.on{display:block;position:fixed;inset:0;z-index:41;background:rgba(13,17,23,.35)}
}
@media (prefers-reduced-motion: reduce){
  .pd-carta,.pd-lote{transition:none}
  .pd-carta.pulso{animation:none}
}