/* ==========================================================================
   Bancada — Panel de PIEZAS
   La tabla donde el usuario pasa el día. Densa, tranquila y sin un solo
   color literal: todo sale de tokens.css.

   La tabla no es un <table>: cada renglón es una grilla con las mismas
   columnas que la cabecera (--pz-grid), para poder dibujar sólo lo que se ve.
   ========================================================================== */

.pz {
  /* La columna de la veta lleva su "?" al lado del rótulo y la de acciones
     tiene tres botones (nota, duplicar, borrar): por eso son más anchas que
     lo que ocupa su contenido a secas. */
  --pz-grid: 46px minmax(90px, 1fr) 64px 92px 92px minmax(122px, 210px) 66px 80px 100px;
  --pz-alto: 40px;
  --pz-gutter: 11px;            /* el ancho de la barra de scroll */
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  background: var(--paper);
}

/* ==========================================================================
   Barra de herramientas
   ========================================================================== */
.pz-barra {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* A 1024 de ancho no entran en un renglón: pasan al de abajo en vez de desbordar el panel. */
  flex-wrap: wrap;
}
.pz-barra > .espacio { flex: 1 1 0; min-width: 0; }
.pz-barra > .btn--primario { margin-left: auto; }

.pz-buscador { position: relative; width: 236px; flex: none; }
.pz-buscador svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); pointer-events: none;
}
.pz-buscador .input { padding-left: 33px; height: 36px; }
.pz-buscador .input::-webkit-search-cancel-button { display: none; }

/* Con qué espesor pinta el click en un canto */
.pz-pluma {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper-2);
}
.pz-pluma__label {
  font-size: var(--fs-xs); font-weight: 620; color: var(--ink-4);
  letter-spacing: .04em; text-transform: uppercase; padding: 0 4px 0 6px;
}
.pz-pluma__op {
  height: 28px; min-width: 38px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--ink-3);
  font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pz-pluma__op:hover { background: var(--surface); color: var(--ink); }
.pz-pluma__op.activo {
  background: var(--surface); color: var(--acc-ink);
  border-color: var(--acc-line); box-shadow: var(--sh-1);
}
.pz-pluma__op:focus-visible { outline: none; box-shadow: var(--ring); }

.pz-atajo {
  margin-left: 2px; padding: 1px 5px;
  border: 1px solid currentColor; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  opacity: .5;
}

.pz-enlace {
  background: none; border: 0; padding: 0;
  color: var(--acc); font-size: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--acc-line);
}
.pz-enlace:hover { text-decoration-color: var(--acc); }
.pz-enlace:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 3px; }

/* ==========================================================================
   Qué medida estoy cargando
   Una sola opción para todo el trabajo, arriba de la tabla. Si está mal
   puesta, todas las piezas con canto grueso salen 4 mm cortas.
   ========================================================================== */
.pz-opcion {
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px var(--s4);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.pz-opcion[hidden] { display: none; }
.pz-opcion__label { font-weight: 600; cursor: pointer; white-space: nowrap; }
.pz-opcion__texto {
  min-width: 0;
  font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   Avisos
   ========================================================================== */
.pz-avisos {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3) var(--s4) 0;
}
.pz-avisos:empty, .pz-avisos[hidden] { display: none; }

/* ==========================================================================
   Tabla
   ========================================================================== */
.pz-cuerpo {
  display: flex; flex-direction: column;
  min-height: 0;
  margin: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.pz-cab {
  display: grid;
  grid-template-columns: var(--pz-grid);
  align-items: center;
  height: 34px;
  padding-right: var(--pz-gutter);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.pz-cab[hidden] { display: none; }
.pz-cab .pz-cel {
  font-size: var(--fs-xs); font-weight: 680;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-4); white-space: nowrap;
}
.pz-cab .pz-cel--c, .pz-cab .pz-cel--cant { justify-content: flex-end; }
.pz-uni { font-style: normal; font-weight: 500; opacity: .7; margin-left: 3px; text-transform: none; letter-spacing: 0; }

/* El "?" de la veta vive en la cabecera: chico, pero se toca en 33 px */
.pz-cab .pz-cel--mini { gap: 4px; }
.pz-cab .pz-pista { width: 16px; height: 16px; font-size: 10px; letter-spacing: 0; }

.pz-vista {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-gutter: stable;
  position: relative;
}
.pz-vista:focus { outline: none; }
.pz-lienzo { position: relative; width: 100%; }

/* ---- Un renglón ---------------------------------------------------------- */
.pz-fila {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--pz-alto);
  display: grid;
  grid-template-columns: var(--pz-grid);
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  will-change: transform;
}
.pz-fila:hover { background: var(--paper-2); }
.pz-fila.sel { background: var(--acc-soft); }
.pz-fila.sel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc);
}
.pz-fila--modulo { background: var(--surface-sunk); }
.pz-fila--modulo:hover { background: var(--paper-3); }
.pz-fila--nueva { background: var(--surface); }

.pz-cel {
  display: flex; align-items: center; gap: 6px;
  height: 100%; min-width: 0;
  padding: 0 7px;
}
.pz-cel--n {
  justify-content: center; padding: 0;
  color: var(--ink-4); font-size: var(--fs-xs);
  cursor: pointer;
}
.pz-nro { font-variant-numeric: tabular-nums; }
.pz-fila.sel .pz-nro { color: var(--acc-ink); font-weight: 680; }
.pz-nro-mas { display: inline-flex; color: var(--ink-4); opacity: .55; }
.pz-fila--nueva:hover .pz-nro-mas, .pz-fila--nueva:focus-within .pz-nro-mas { opacity: 1; color: var(--acc); }

.pz-texto {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sm);
}
.pz-ro { color: var(--ink-3); }
.pz-cel--cant, .pz-cel--largo, .pz-cel--ancho { justify-content: flex-end; }
.pz-cel--c { justify-content: flex-end; }
.pz-cel--veta, .pz-cel--cantos { justify-content: center; padding: 0 3px; }
.pz-cab .pz-cel--mini, .pz-cab .pz-cel--cantos { justify-content: center; padding: 0 3px; }

.pz-tag {
  display: inline-flex; flex: none;
  color: var(--ink-4);
}
.pz-fila--modulo .pz-cel--nombre { cursor: pointer; }
.pz-fila--modulo .pz-cel--nombre:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acc); border-radius: var(--r-sm); }

/* ---- Inputs de celda ------------------------------------------------------ */
.pz-inp {
  width: 100%; height: 30px; min-width: 0;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pz-inp.num { text-align: right; font-variant-numeric: tabular-nums; }
.pz-inp::placeholder { color: var(--ink-4); opacity: .75; }
.pz-fila:hover .pz-inp { border-color: var(--line); background: var(--surface); }
.pz-inp:hover { border-color: var(--line-strong); }
.pz-inp:focus {
  outline: none; background: var(--surface);
  border-color: var(--acc); box-shadow: var(--ring);
}
.pz-fila--nueva .pz-inp::placeholder { color: var(--ink-4); }
.pz-fila--nueva .pz-cel--nombre .pz-inp::placeholder { font-style: italic; }

/* Hereda de .select (app.css): sólo le sacamos el marco hasta que haga falta */
.pz-sel {
  height: 30px; min-width: 0;
  padding: 0 24px 0 7px;
  border-color: transparent;
  background-color: transparent;
  background-position: right 6px center;
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
}
.pz-fila:hover .pz-sel { border-color: var(--line); background-color: var(--surface); }
.pz-sel:focus { outline: none; border-color: var(--acc); box-shadow: var(--ring); background-color: var(--surface); }
.pz-muestra { flex: none; }
.pz-muestra--vacia { background: var(--paper-3); border-style: dashed; }

/* Lo que falta se marca con borde punteado, no sólo con color */
.pz-cel--falta .pz-inp,
.pz-cel--falta .pz-sel {
  border-color: var(--warn-line);
  border-style: dashed;
  background: var(--warn-soft);
}
.pz-cel--mal .pz-inp {
  border-color: var(--bad);
  border-style: solid;
  background: var(--bad-soft);
}

/* ---- Veta ----------------------------------------------------------------- */
.pz-veta {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-4);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pz-veta:hover { background: var(--paper-2); color: var(--ink-2); border-color: var(--line); }
.pz-veta.activo {
  color: var(--acc-ink); background: var(--acc-soft); border-color: var(--acc-line);
}
.pz-veta.activo svg { stroke-width: 2; }
.pz-veta--forzada { opacity: .72; }
.pz-veta:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--acc); }

/* ---- Acciones del renglón -------------------------------------------------- */
.pz-cel--acc { justify-content: flex-end; gap: 2px; padding-right: 5px; }
.pz-accion {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--ink-4);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pz-fila:hover .pz-accion, .pz-fila:focus-within .pz-accion { opacity: 1; }
.pz-accion:hover { background: var(--paper-3); color: var(--ink); }
.pz-accion:focus-visible { opacity: 1; outline: none; box-shadow: var(--ring); }
/* El renglón que tiene nota la muestra siempre: si hay que pasar el mouse
   para enterarse, la nota no existe. */
.pz-accion--puesta { opacity: 1; color: var(--acc); }
.pz-accion--puesta:hover { color: var(--acc-hover); }

/* ---- El globito de la nota ------------------------------------------------ */
.pz-nota {
  position: fixed; z-index: 210;
  width: 320px; max-width: calc(100vw - 20px);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  animation: pz-menu-in var(--t-fast) var(--ease-out);
}
.pz-nota__tit {
  font-size: var(--fs-sm); font-weight: 640; color: var(--ink);
  margin-bottom: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pz-nota__ta {
  width: 100%; min-height: 64px;
  resize: vertical;
  font-size: var(--fs-sm);
}
.pz-nota__pie { margin-top: 7px; line-height: var(--lh-snug); }

.pz-chk { width: 16px; height: 16px; margin: 0; accent-color: var(--acc); }

/* ==========================================================================
   El selector de cantos
   Un rectangulito con los cuatro bordes clickeables.
   sup/inf corren a lo largo · izq/der a lo ancho.
   ========================================================================== */
.cj {
  width: 58px; height: 32px; flex: none;
  position: relative;
  display: grid;
  grid-template-columns: 12px 1fr 12px;
  grid-template-rows: 9px 1fr 9px;
  border: 1px dashed var(--line-2);
  border-radius: 3px;
  background: var(--surface-sunk);
}
.cj:focus-visible { outline: none; border-color: var(--acc); border-style: solid; box-shadow: var(--ring); }

.cj__lado {
  --gr: 2px;
  --co: var(--line-2);
  position: relative;
  border: 0; padding: 0; background: transparent;
}
.cj__lado::before { content: ""; position: absolute; inset: -6px; }   /* zona de click más grande */
.cj__lado::after {
  content: ""; position: absolute; background: var(--co); border-radius: 1px;
  transition: background var(--t-fast) var(--ease), height var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.cj__lado[data-esp="f"] { --gr: 3px; --co: var(--ink-2); }
.cj__lado[data-esp="2"] { --gr: 6px; --co: var(--acc); }
.cj__lado:hover { --co: var(--acc-hover); }

.cj__sup { grid-area: 1 / 2 / 2 / 3; }
.cj__inf { grid-area: 3 / 2 / 4 / 3; }
.cj__izq { grid-area: 2 / 1 / 3 / 2; }
.cj__der { grid-area: 2 / 3 / 3 / 4; }
.cj__centro { grid-area: 2 / 2 / 3 / 3; }

.cj__sup::after, .cj__inf::after { left: 0; right: 0; height: var(--gr); }
.cj__sup::after { bottom: 0; }
.cj__inf::after { top: 0; }
.cj__izq::after, .cj__der::after { top: 0; bottom: 0; width: var(--gr); }
.cj__izq::after { right: 0; }
.cj__der::after { left: 0; }

.cj__sup::before { inset: -7px -2px 0 -2px; }
.cj__inf::before { inset: 0 -2px -7px -2px; }
.cj__izq::before { inset: -2px 0 -2px -7px; }
.cj__der::before { inset: -2px -7px -2px 0; }

.cj__centro {
  border: 0; padding: 0; background: transparent;
  font-size: 10px; font-weight: 640; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.cj__centro:hover { color: var(--acc); }
.cj--vacia { background: transparent; }
.cj--bloqueada { opacity: .6; }
.cj--bloqueada .cj__lado, .cj--bloqueada .cj__centro { cursor: default; }

/* ==========================================================================
   Menú chiquito (botón derecho sobre un canto)
   ========================================================================== */
.pz-menu {
  position: fixed; z-index: 200;
  min-width: 210px; padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  animation: pz-menu-in var(--t-fast) var(--ease-out);
}
@keyframes pz-menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.pz-menu__op {
  display: block; width: 100%; text-align: left;
  height: 32px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-2);
  font-size: var(--fs-sm);
}
.pz-menu__op:hover { background: var(--acc-soft); color: var(--acc-ink); }
.pz-menu__op:focus-visible { outline: none; background: var(--acc-soft); box-shadow: var(--ring); }
.pz-menu__sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* ==========================================================================
   Barra de acciones en lote
   ========================================================================== */
.pz-lote {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -2px 10px color-mix(in srgb, var(--ink) 7%, transparent);
  animation: pz-lote-in var(--t) var(--ease-out);
}
.pz-lote[hidden] { display: none; }
@keyframes pz-lote-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pz-lote__n { font-size: var(--fs-sm); font-weight: 640; }
.pz-lote__sub { font-size: var(--fs-xs); }
.pz-lote__sel { width: auto; min-width: 150px; height: 32px; }

/* ==========================================================================
   Pie con los totales
   ========================================================================== */
.pz-pie {
  display: flex; align-items: center; gap: var(--s2);
  height: 30px; padding: 0 var(--s4);
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  font-size: var(--fs-xs); color: var(--ink-3);
}
.pz-pie[hidden] { display: none; }
.pz-pie__dato { font-variant-numeric: tabular-nums; }
.pz-pie__punto { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); opacity: .55; }
.pz-pie__ayuda { color: var(--ink-4); }

.pz-vacio-pie { margin-top: var(--s4); font-size: var(--fs-sm); }

/* ==========================================================================
   Soltar un archivo encima
   ========================================================================== */
.pz-soltar {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.pz--soltando .pz-soltar { opacity: 1; }
.pz-soltar__caja {
  padding: var(--s7) var(--s9);
  border: 2px dashed var(--acc);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-3);
  text-align: center;
}
.pz-soltar__titulo {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 660;
  letter-spacing: -.015em; color: var(--ink);
}
.pz-soltar__texto { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 4px; }

/* ==========================================================================
   Vista previa de lo pegado
   ========================================================================== */
.pv { display: flex; flex-direction: column; gap: var(--s3); }

.pv-tabla {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.pv-fila {
  display: grid;
  grid-template-columns: 34px minmax(90px, 1fr) 62px 86px 86px minmax(120px, 190px) 74px;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.pv-fila:last-child { border-bottom: 0; }
.pv-fila--cab {
  background: var(--paper-2);
  font-size: var(--fs-xs); font-weight: 680;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4);
  padding: 7px 6px;
}
.pv-fila--dudosa {
  background: var(--warn-soft);
  box-shadow: inset 3px 0 0 var(--warn);
}
.pv-fila--fuera { opacity: .42; }
.pv-c { display: flex; align-items: center; min-width: 0; }
.pv-c--chk { justify-content: center; }
.pv-c--n { justify-content: flex-end; }
.pv-inp { height: 30px; font-size: var(--fs-sm); }
.pv-inp.num { text-align: right; }
.pv-c--cantos { justify-content: center; }

.pv-ignoradas {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: var(--s2) var(--s3);
}
.pv-ignoradas summary {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
  cursor: pointer; list-style: none;
}
.pv-ignoradas summary::-webkit-details-marker { display: none; }
.pv-ignoradas summary::before { content: "▸ "; color: var(--ink-4); }
.pv-ignoradas[open] summary::before { content: "▾ "; }
.pv-ignoradas__lista { margin-top: var(--s2); display: flex; flex-direction: column; gap: 3px; }
.pv-ignorada {
  display: flex; gap: var(--s3); align-items: baseline;
  font-size: var(--fs-xs);
  padding: 3px 0;
  border-top: 1px solid var(--line);
}
.pv-ignorada__linea {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-ignorada__motivo { flex: none; }

/* ==========================================================================
   Pantallas chicas (la de taller suele ser de 1366)
   ========================================================================== */
@media (max-width: 1280px) {
  /* En 1024 (el mínimo de la ventana) la grilla cierra justo: si se toca una
     medida de acá, rehacer la cuenta con la tabla al ancho del panel. */
  .pz { --pz-grid: 36px minmax(90px, 1fr) 58px 82px 82px minmax(104px, 170px) 58px 74px 90px; }
  .pz-cel--acc { padding-left: 2px; gap: 1px; }
  .pz-buscador { width: 180px; }
  .pz-pie__ayuda { display: none; }
}
@media (max-width: 1120px) {
  .pz-pluma__label { display: none; }
  .pz-opcion__texto { display: none; }
}