/* ==========================================================================
   Bancada — Materiales
   Las placas, los ajustes de corte, el stock de sobrantes y la lista de precios.
   Sin colores literales: todo sale de tokens.css.
   ========================================================================== */

.mat {
  position: relative;
  height: 100%;
  overflow-y: auto;
  background: var(--paper);
}
.mat__interior {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s5) var(--s6) var(--s10);
}

/* ---- Índice pegado arriba ------------------------------------------------ */
.mat__indice {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: calc(var(--s5) * -1) calc(var(--s6) * -1) var(--s5);
  padding: var(--s3) var(--s6);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.mat__indice::-webkit-scrollbar { display: none; }
.mat__indice-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 560;
  white-space: nowrap;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mat__indice-btn:hover { background: var(--paper-2); color: var(--ink); }
.mat__indice-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.mat__indice-btn.on {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  font-weight: 620;
  box-shadow: var(--sh-1);
}

/* ---- Secciones ----------------------------------------------------------- */
.mat-seccion {
  scroll-margin-top: 66px;
  padding-top: var(--s6);
}
.mat-seccion + .mat-seccion { margin-top: var(--s7); border-top: 1px solid var(--line); }

.mat-seccion__cab {
  display: flex;
  align-items: flex-end;
  gap: var(--s4);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}
.mat-seccion__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 660;
  letter-spacing: -.018em;
  margin: 0;
}
.mat-seccion__sub {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 3px 0 0;
  max-width: 72ch;
}
.mat-seccion__acciones { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.mat-seccion__cuerpo { display: flex; flex-direction: column; gap: var(--s3); }

.mat-vacio .vacio { height: auto; padding: var(--s8) var(--s6); }
.mat-vacio {
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
}

/* ==========================================================================
   1 · Placas
   ========================================================================== */
.mat-placa { overflow: hidden; }

.mat-placa__cab {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex-wrap: wrap;
}

.mat-muestra {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-inset);
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mat-muestra:hover { border-color: var(--acc); box-shadow: var(--sh-1); }
.mat-muestra:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--acc); }

.mat-placa__nombre {
  flex: 1 1 220px;
  max-width: 340px;
  font-size: var(--fs-md);
  font-weight: 600;
  border-color: transparent;
  background: transparent;
}
.mat-placa__nombre:hover { background: var(--surface); border-color: var(--line-2); }
.mat-placa__nombre:focus { background: var(--surface); }

.mat-placa .input-sufijo { width: 94px; flex: none; }
.mat-placa__uso {
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mat-placa__uso:hover { border-color: var(--acc); color: var(--acc-ink); }
.mat-placa__uso:focus-visible { outline: none; box-shadow: var(--ring); }

.mat-placa__cuerpo { padding: var(--s4); }
.mat-placa__grupo { margin-bottom: var(--s3); }

/* ---- Tabla de medidas ---------------------------------------------------- */
.mat-formatos { margin-bottom: var(--s2); }
.mat-formatos .tabla th { position: static; background: transparent; border-bottom: 1px solid var(--line-2); }
.mat-formatos .tabla td { padding: 5px 10px; }
.mat-formatos .tabla td:first-child, .mat-formatos .tabla th:first-child { padding-left: 0; }
.mat-formatos .tabla td:last-child, .mat-formatos .tabla th:last-child { padding-right: 0; width: 34px; }
.mat-formatos .tabla tbody tr:last-child td { border-bottom: 0; }
.mat-formatos .tabla tbody tr:hover td { background: transparent; }

.mat-medida { display: flex; align-items: center; gap: 6px; }
.mat-medida__x { color: var(--ink-4); font-size: var(--fs-sm); }
.mat-mm { width: 86px; flex: none; }
.mat-stock { width: 116px; }

/* ---- Plata --------------------------------------------------------------- */
.mat-peso { position: relative; display: block; width: 132px; }
.mat-peso::before {
  content: "$";
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-xs); color: var(--ink-4); pointer-events: none;
}
.mat-peso .input { padding-left: 22px; }

/* ---- Interruptor con texto ----------------------------------------------- */
.mat-switch {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) 0 0;
  cursor: pointer;
}
.mat-switch .switch { display: inline-block; margin-top: 1px; }
.mat-switch__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mat-switch__txt b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.mat-switch__txt .campo__ayuda { max-width: 68ch; line-height: var(--lh-snug); }

/* ---- Paleta de colores ---------------------------------------------------- */
.mat-paleta__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: var(--s4) var(--s3);
}
.mat-color__caja { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mat-color {
  width: 100%;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-inset);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease);
}
.mat-color:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.mat-color:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--acc); }
.mat-color.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--acc); }
.mat-color__nombre { font-size: var(--fs-xs); color: var(--ink-3); text-align: center; line-height: var(--lh-snug); }

/* ---- Catálogo de plaza ---------------------------------------------------- */
.mat-catalogo { display: flex; flex-direction: column; }
.mat-catalogo__fila {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 10px var(--s2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.mat-catalogo__fila:last-child { border-bottom: 0; }
.mat-catalogo__fila:hover { background: var(--paper-2); }
.mat-catalogo__fila.ya { opacity: .6; cursor: default; }
.mat-catalogo__fila input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--acc); flex: none; margin: 0; }
.mat-catalogo__nombre { font-size: var(--fs-base); font-weight: 580; }
.mat-catalogo__medidas { font-size: var(--fs-xs); color: var(--ink-4); }
.mat-catalogo__precio { font-size: var(--fs-sm); font-weight: 620; color: var(--ink-2); white-space: nowrap; }

/* ==========================================================================
   2 · Ajustes de corte
   ========================================================================== */
.mat-ajustes { overflow: hidden; }
.mat-ajuste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.mat-ajuste:last-child { border-bottom: 0; }
.mat-ajuste__txt h4 {
  margin: 0 0 3px;
  font-size: var(--fs-md);
  font-weight: 620;
  letter-spacing: -.008em;
}
.mat-ajuste__txt p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-base);
  max-width: 68ch;
}
.mat-ajuste__ctrl { justify-self: end; width: 100%; max-width: 210px; }
.mat-ajuste__ctrl .mat-switch { padding-top: 0; }

.mat-opciones { display: inline-flex; width: 100%; }
.mat-opcion {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  margin-left: -1px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 560;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mat-opcion:first-child { margin-left: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.mat-opcion:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.mat-opcion:hover { background: var(--paper-2); color: var(--ink); }
.mat-opcion:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--acc); z-index: 1; }
.mat-opcion.on {
  background: var(--acc-soft);
  border-color: var(--acc);
  color: var(--acc-ink);
  font-weight: 640;
  box-shadow: inset 0 0 0 1px var(--acc);
  z-index: 1;
}

/* ==========================================================================
   3 · Sobrantes
   ========================================================================== */
.mat-hero {
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding: var(--s5);
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--acc-soft) 0%, var(--surface) 58%);
  border-color: var(--acc-line);
}
.mat-hero__plata { flex: none; }
.mat-hero__plata .total-grande { font-size: var(--fs-3xl); }
.mat-hero__txt { flex: 1 1 320px; min-width: 0; }
.mat-hero__linea { font-size: var(--fs-md); color: var(--ink-2); }
.mat-hero__linea b { color: var(--ink); font-weight: 680; }
.mat-hero__txt p { margin: 4px 0 0; font-size: var(--fs-sm); max-width: 62ch; line-height: var(--lh-base); }
.mat-hero .aviso { flex: 1 1 100%; }

.mat-grupo { overflow: hidden; }
.mat-grupo__cab {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.mat-grupo__cab h3 { margin: 0; font-size: var(--fs-md); font-weight: 620; }
.mat-grupo__pie { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }

.mat-sobrantes { display: flex; flex-direction: column; }
.mat-sobrante {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 92px 150px 72px;
  align-items: center;
  gap: var(--s3);
  padding: 9px var(--s4);
  border-bottom: 1px solid var(--line);
}
.mat-sobrante__acciones { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.mat-sobrante:last-child { border-bottom: 0; }
.mat-sobrante:hover { background: var(--paper-2); }

.mat-sobrante__marco {
  width: 86px; height: 64px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.mat-sobrante__dibujo { display: block; }
.mat-sobrante__datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mat-sobrante__origen { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dónde está guardado: el dato que hace que el sobrante se encuentre. */
.mat-sobrante__ubic {
  height: 26px;
  padding: 0 7px;
  font-size: var(--fs-xs);
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--line-2);
  border-radius: 0;
  width: 100%;
}
.mat-sobrante__ubic::placeholder { color: var(--ink-4); }
.mat-sobrante__ubic:hover { background: var(--surface); border-color: var(--line-2); border-radius: var(--r-sm); }
.mat-sobrante__ubic:focus { background: var(--surface); border-radius: var(--r-sm); }
.mat-sobrante__cant { display: flex; flex-direction: column; gap: 2px; }
.mat-sobrante__cant .input { width: 74px; }
.mat-sobrante__info {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  font-size: var(--fs-sm); color: var(--ink-3);
}
.mat-sobrante__plata { font-weight: 640; color: var(--ink); }

/* ---- Los que ya no están: usados y roturas ------------------------------- */
.mat-historial__cab {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s4);
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--ink-2);
}
.mat-historial__cab h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 620;
}
.mat-historial__cab svg { color: var(--ink-4); transition: transform var(--t) var(--ease); flex: none; }
.mat-historial.abierto .mat-historial__cab svg { transform: rotate(90deg); }
.mat-historial__cab:hover { background: var(--paper-2); }
.mat-historial__cab:focus-visible { outline: none; box-shadow: var(--ring); }
.mat-baja {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 7px var(--s4);
  border-top: 1px solid var(--line);
}
.mat-baja__txt { min-width: 0; }
.mat-baja__txt .chiquito { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Listas con tilde (guardar del plano / vaciar los usados) ------------- */
.mat-lista-check { display: flex; flex-direction: column; }
.mat-lista-check__fila {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px var(--s2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.mat-lista-check__fila:last-child { border-bottom: 0; }
.mat-lista-check__fila:hover { background: var(--paper-2); }
.mat-lista-check__fila input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--acc); flex: none; margin: 0; }
.mat-lista-check__n { display: flex; align-items: center; gap: 6px; flex: none; }
.mat-lista-check__n .input { width: 72px; }

/* ==========================================================================
   4 · Lista de precios
   ========================================================================== */
.mat-fecha {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  flex-wrap: wrap;
}
.mat-fecha .seccion-titulo { margin-bottom: 2px; }
.mat-fecha__dia {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 680;
  letter-spacing: -.015em;
  line-height: var(--lh-tight);
}
.mat-fecha__alerta { color: var(--warn); font-weight: 620; }

.mat-sincro {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  flex-wrap: wrap;
}
.mat-sincro h4 { margin: 0 0 2px; font-size: var(--fs-md); font-weight: 620; }
.mat-sincro p { margin: 0; font-size: var(--fs-sm); max-width: 70ch; line-height: var(--lh-base); }

.mat-bloque__sub { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }

.mat-precios-grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s7);
}
.mat-precio {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
  min-height: 44px;
}
.mat-precio__nombre { font-size: var(--fs-sm); color: var(--ink-2); }
.mat-precio__unidad { font-size: var(--fs-xs); color: var(--ink-4); white-space: nowrap; }
.mat-precio .mat-peso,
.mat-precio .input-sufijo,
.mat-precio__num { width: 132px; flex: none; }

/* ==========================================================================
   Catálogo por diseño (pestaña «Por diseño» y «Elegir un diseño…» del mueble)
   El color de cada muestra lo pone el JS (es el tono de la placa); acá sólo
   tokens.
   ========================================================================== */
.melcat [hidden] { display: none !important; }
.melcat { display: flex; flex-direction: column; gap: var(--s3); }
.melcat__barra { display: flex; align-items: center; gap: var(--s3); }
.melcat__buscador { position: relative; flex: 1; max-width: 320px; }
.melcat__buscador svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); pointer-events: none;
}
.melcat__buscador .input { width: 100%; height: 40px; padding-left: 34px; }
.melcat__buscador .input::-webkit-search-cancel-button { display: none; }

.melcat__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.melcat__chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: 560;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.melcat__chip:hover { background: var(--paper-2); }
.melcat__chip:focus-visible { outline: none; box-shadow: var(--ring); }
.melcat__chip.on { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc-ink); }
.melcat__chip-cuenta { font-size: var(--fs-xs); font-weight: 650; color: var(--ink-4); }
.melcat__chip.on .melcat__chip-cuenta { color: var(--acc-ink); }

.melcat__lista { display: flex; flex-direction: column; gap: var(--s5); }
.melcat__titulo {
  margin: 0 0 var(--s2);
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-4);
}
.melcat__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: var(--s3);
}
.melcat__muestra {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-height: 44px; padding: 6px 6px 9px;
  text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.melcat__muestra:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--line-strong); }
.melcat__muestra:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--acc); }
.melcat__muestra.on { background: var(--acc-soft); border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.melcat__muestra:disabled { cursor: default; background: var(--paper-2); }
.melcat__muestra:disabled .melcat__nombre { color: var(--ink-3); }

.melcat__color {
  position: relative; display: block; height: 64px; overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: var(--sh-inset);
}
/* Las que tienen veta llevan unas rayitas finas, sólo para distinguirlas de un vistazo. */
.melcat__color--veta::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 7px);
}
.melcat__tilde {
  position: absolute; top: 5px; right: 5px;
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--acc); color: var(--sobre-acc);
}
.melcat__muestra.on .melcat__tilde { display: flex; }
.melcat__nombre {
  padding: 0 2px;
  font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-snug); color: var(--ink);
  overflow-wrap: anywhere;
}
.melcat__marcas { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px; }
.melcat__vacio { padding: var(--s7) var(--s4); text-align: center; color: var(--ink-3); }

/* La franja «N elegidas»: cuenta también las que el buscador deja fuera de la vista */
.melcat__elegidas {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  min-height: 44px; padding: var(--s2) var(--s3);
  background: var(--acc-soft); border: 1px solid var(--acc-line); border-radius: var(--r-md);
}
.melcat__elegidas-txt { flex: 1 1 200px; font-size: var(--fs-sm); font-weight: 620; color: var(--acc-ink); }
.melcat__elegidas .btn { min-height: 36px; }

/* Pie del diálogo de un solo diseño */
.melcat__pie { width: 100%; }
.melcat__eleccion { font-size: var(--fs-base); font-weight: 620; color: var(--ink); }
.melcat__eleccion.mudo { font-weight: 500; }

/* Pestañas «Placas de plaza» / «Por diseño» del diálogo de Materiales */
.melcat__pestanas {
  display: flex; gap: var(--s1);
  margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4);
  padding: var(--s2) var(--s5) 0;
  border-bottom: 1px solid var(--line);
  position: sticky; top: calc(var(--s5) * -1); z-index: 2;
  background: var(--surface);
}
.melcat__pestana {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 var(--s4);
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--ink-3); font-size: var(--fs-base); font-weight: 580;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.melcat__pestana:hover { color: var(--ink); }
.melcat__pestana:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.melcat__pestana[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--acc); }
.melcat__pestana-cuenta {
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--paper-3); color: var(--ink-3);
  font-size: var(--fs-xs); font-weight: 650;
}
.melcat__pestana[aria-selected="true"] .melcat__pestana-cuenta { background: var(--acc-soft-2); color: var(--acc-ink); }
.melcat__panel[hidden] { display: none; }

/* «Elegir un diseño…» debajo de la placa del mueble (Cuerpo, Puertas y frentes) */
.mats__diseno {
  grid-column: 2;
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--s3);
  border: 1px solid var(--acc-line); border-radius: var(--r-sm);
  background: var(--acc-soft); color: var(--acc-ink);
  font-size: var(--fs-sm); font-weight: 620;
  transition: background var(--t-fast) var(--ease);
}
.mats__diseno:hover { background: var(--acc-soft-2); }
.mats__diseno:focus-visible { outline: none; box-shadow: var(--ring); }

/* ==========================================================================
   Pantallas angostas (1366 con el dock abierto ya entra, pero por las dudas)
   ========================================================================== */
@media (max-width: 980px) {
  .mat-precios-grilla { grid-template-columns: 1fr; }
  .mat-ajuste { grid-template-columns: 1fr; }
  .mat-ajuste__ctrl { justify-self: start; }
  .mat-sobrante { grid-template-columns: 94px minmax(0, 1fr) 92px 72px; }
  .mat-sobrante__info { grid-column: 2 / 4; align-items: flex-start; }
}

/* ==========================================================================
   Impresión: papel A4 en blanco y negro
   ========================================================================== */
@media print {
  .mat { overflow: visible; height: auto; background: var(--surface); }
  .mat__indice,
  .mat-seccion__acciones,
  .mat-sobrante .btn,
  .mat-placa__cab .btn,
  .mat-formatos .tabla td:last-child { display: none; }
  .mat-placa, .mat-grupo, .mat-hero, .mat-fecha, .mat-sincro, .mat-bloque, .mat-ajustes {
    box-shadow: none;
    break-inside: avoid;
  }
  .mat-seccion { break-inside: auto; }
  .input, .select, .mat-peso .input { border-color: var(--line-2); background: transparent; }
}