/* ==========================================================================
   Bancada — Panel "Mueble"
   El catálogo paramétrico, las tarjetas del trabajo y el diálogo de medidas.
   Todos los colores salen de tokens.css; lo que falta se deriva con color-mix.
   ========================================================================== */

.mod [hidden],
.dlg [hidden],
.modal--mueble [hidden] { display: none !important; }

.mod {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s6) var(--s9);
}

/* ---- Barra de la pantalla ------------------------------------------------ */
.mod__barra {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s6) 0 var(--s4);
  background: var(--paper);
}
.mod__barra::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--s4);
  transform: translateY(100%);
  background: linear-gradient(var(--paper), transparent);
  pointer-events: none;
}
.mod__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -.026em;
  line-height: var(--lh-tight);
  margin: 0;
}
.mod__contador {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  color: var(--acc-ink);
  font-size: var(--fs-xs);
  font-weight: 680;
}

.mod__seccion { margin-top: var(--s5); }
.mod__seccion-titulo {
  font-size: var(--fs-xs);
  font-weight: 680;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 var(--s3);
}

/* ==========================================================================
   Tarjetas de los muebles del trabajo
   ========================================================================== */
.mod__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
  gap: var(--s4);
}

.mod-tarjeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease);
}
.mod-tarjeta:hover { box-shadow: var(--sh-2); border-color: var(--line-2); }
.mod-tarjeta:focus-within { border-color: var(--acc-line); }

.mod-tarjeta__mini {
  height: 140px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--surface) 0%, var(--paper-2) 100%);
}
.mod-tarjeta__mini canvas { display: block; width: 100%; height: 100%; }

.mod-tarjeta__cuerpo {
  padding: var(--s3) var(--s4) var(--s2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.mod-tarjeta__encabezado { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.mod-tarjeta__nombre {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 640;
  letter-spacing: -.012em;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 3px 6px;
  margin: -3px -6px;
  width: calc(100% + 12px);
  min-width: 0;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mod-tarjeta__nombre:hover { background: var(--paper-2); }
.mod-tarjeta__nombre:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--acc);
  box-shadow: var(--ring);
}
.mod-tarjeta__tipo {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  letter-spacing: .02em;
}
.mod-tarjeta__medidas {
  font-size: var(--fs-base);
  font-weight: 560;
  color: var(--ink-2);
}
.mod-tarjeta__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

.mod-tarjeta__pie {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  /* Con tres tarjetas a lo ancho el pie no entra: que envuelva antes de cortar
     el botón por la mitad, que es peor que perder una línea de alto. */
  flex-wrap: wrap;
  row-gap: var(--s2);
}
.mod-tarjeta__pie .btn { flex: 1 1 auto; min-width: 0; }
.mod-tarjeta__pie .btn--icono { flex: 0 0 auto; }
.mod-tarjeta__cant { display: flex; align-items: center; gap: var(--s2); }
.mod-tarjeta__cant-label {
  font-size: var(--fs-xs);
  font-weight: 620;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ==========================================================================
   Catálogo
   ========================================================================== */
.cat__cabecera {
  display: flex;
  align-items: flex-end;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.cat__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 660;
  letter-spacing: -.018em;
  margin: 0 0 3px;
}
.cat__bajada {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 0;
  max-width: 64ch;
}

.cat__familias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.cat__familia {
  height: 36px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 560;
  box-shadow: var(--sh-1);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.cat__familia:hover { background: var(--paper-2); border-color: var(--line-strong); color: var(--ink); }
.cat__familia:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--acc); }
.cat__familia[aria-selected="true"] {
  background: var(--acc-soft);
  border-color: var(--acc);
  color: var(--acc-ink);
  font-weight: 680;
  box-shadow: inset 0 0 0 1px var(--acc);
}

.cat__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: var(--s4);
}

.cat-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform var(--t) var(--ease-out),
              box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease);
}
.cat-tarjeta::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow var(--t) var(--ease);
  pointer-events: none;
}
.cat-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sh-3); border-color: transparent; }
.cat-tarjeta:hover::after { box-shadow: inset 0 0 0 1.5px var(--acc); }
.cat-tarjeta:focus-visible { outline: none; box-shadow: var(--sh-2), var(--ring); border-color: var(--acc); }
.cat-tarjeta:active { transform: translateY(0); }

.cat-tarjeta__mini {
  height: 112px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--surface) 0%, var(--paper-2) 100%);
}
.cat-tarjeta__mini canvas { display: block; width: 100%; height: 100%; }

.cat-tarjeta__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s3) var(--s4) var(--s2);
  flex: 1;
}
.cat-tarjeta__nombre {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 640;
  letter-spacing: -.012em;
  color: var(--ink);
}
.cat-tarjeta__desc {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-3);
}
.cat-tarjeta__pie {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px var(--s4) 11px;
  font-size: var(--fs-xs);
  color: var(--ink-4);
}
.cat-tarjeta__familia {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 680;
}
.cat-tarjeta__medidas { color: var(--ink-3); }

/* ==========================================================================
   Diálogo de configuración
   ========================================================================== */
.modal--mueble { width: min(1020px, 100%); }

.dlg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s6);
  align-items: start;
}
@media (max-width: 960px) {
  .dlg { grid-template-columns: minmax(0, 1fr); }
  .dlg__vista { position: static; }
}

.dlg__params { min-width: 0; }
.dlg__aviso:not(:empty) { margin-bottom: var(--s4); }

/* ---- Las tres medidas grandes ---- */
.dlg__principales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.campo--grande { gap: 6px; }
.campo--grande .campo__label {
  font-size: var(--fs-sm);
  font-weight: 640;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
}
.input--grande {
  height: 52px;
  font-size: var(--fs-xl);
  font-weight: 620;
  letter-spacing: -.02em;
  padding: 0 13px;
}
.input-sufijo .input--grande { padding-right: 46px; }
.campo--grande .input-sufijo::after { right: 13px; font-size: var(--fs-sm); }
.select--grande { height: 52px; font-size: var(--fs-md); font-weight: 560; }
.campo__rango { margin-top: -1px; }

/* ---- Más opciones ---- */
.dlg__mas-btn {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dlg__mas-btn:hover { background: var(--paper-2); border-color: var(--line-strong); color: var(--ink); }
.dlg__mas-btn:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--acc); }
.dlg__mas-btn svg { margin-left: auto; color: var(--ink-4); transition: transform var(--t) var(--ease); }
.dlg__mas-btn.abierto svg { transform: rotate(90deg); }
.dlg__mas-cuenta {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--paper-3);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 680;
}

.dlg__mas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: var(--s3) var(--s4);
  margin-top: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  animation: mod-desplegar var(--t) var(--ease-out);
}
@keyframes mod-desplegar {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.dlg__mas .campo--bool {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--s3);
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.campo__label--bool {
  font-size: var(--fs-sm);
  font-weight: 560;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
}
.campo__ayuda--bool { flex-basis: 100%; margin-top: 2px; }

/* ---- El nombre del mueble ---- */
.dlg__campo-nombre { margin-bottom: var(--s4); }
.dlg__nombre { font-weight: 580; }

/* ---- Lo que cambia el despiece: visible, nunca plegado ----
   Estos parámetros cambian qué significan las medidas de arriba (el zócalo que
   sale de adentro del alto) o cuántas piezas se cortan (los costados prestados).
   Abajo de "Más opciones" el mueble sale distinto de lo que el carpintero cree
   que pidió. */
.dlg__clave {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s3);
  padding: var(--s3) var(--s4) var(--s4);
  border: 1px solid var(--acc-line);
  border-radius: var(--r);
  background: var(--acc-soft);
}
.dlg__clave-tit { grid-column: 1 / -1; margin: 0; color: var(--acc-ink); }
.dlg__clave .campo--bool {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--s3);
  padding: 6px 0 0;
}
.dlg__clave .campo--bool + .campo--bool { border-top: 1px solid var(--acc-line); }
.dlg__clave .campo__ayuda { color: var(--acc-ink); opacity: .85; }

/* Un desplegable de opciones largas ("Camisero: colgar corto y estantes abajo", "Cantidad de patas")
   ocupa el renglón entero de su bloque: en una celda de 190 px corta el texto de lo que quedó elegido. */
.dlg__principales .campo--ancho,
.dlg__clave .campo--ancho,
.dlg__mas .campo--ancho { grid-column: 1 / -1; }

/* Lo que hay que poner para que el mueble cambie, dicho al lado del control (el alto de la base en 0). */
.campo__ayuda--alerta,
.dlg__clave .campo__ayuda--alerta {
  padding-left: 8px;
  border-left: 3px solid var(--warn);
  color: var(--ink);
  font-weight: 640;
  opacity: 1;
}
.campo__ayuda--alerta[hidden] { display: none; }

/* ==========================================================================
   La mano: de qué lado queda el rincón

   Va arriba y a la vista, nunca plegada: con la mano al revés el esquinero
   tiene la puerta contra la pared y no abre. Y no se explica con palabras —"mano
   izquierda" no quiere decir nada arriba de un caballete—: se dibuja la planta,
   con la pared del rincón de un lado y el frente hacia el que mira.

   Los mismos estilos los usa la ficha del Ambiente, que monta el mismo control.
   ========================================================================== */
.dlg__mano:not(:empty) { margin-bottom: var(--s4); }
.campo--mano { gap: 6px; }

.mano {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}
.mano__opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 92px;
  padding: var(--s2) 6px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.mano__opcion:hover { border-color: var(--acc); background: var(--acc-soft); color: var(--acc-ink); }
.mano__opcion:focus-visible { outline: none; border-color: var(--acc); box-shadow: var(--ring); }
.mano__opcion[aria-checked="true"] {
  border-color: var(--acc);
  background: var(--acc-soft);
  color: var(--acc-ink);
  font-weight: 560;
}

.mano__dibujo { display: block; width: 54px; height: 54px; }
.mano__dibujo svg { width: 100%; height: 100%; display: block; }
.mano__pared { fill: none; stroke: var(--ink-2); stroke-width: 2.4; }
.mano__cuerpo { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.mano__ciego { fill: var(--paper-3); stroke: none; }
.mano__frente { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.mano__opcion:hover .mano__pared,
.mano__opcion[aria-checked="true"] .mano__pared { stroke: var(--acc-ink); }
.mano__opcion:hover .mano__frente,
.mano__opcion[aria-checked="true"] .mano__frente { stroke: var(--acc); }
.mano__opcion[aria-checked="true"] .mano__ciego { fill: var(--acc-soft-2); }

.mano__txt { line-height: var(--lh-tight); }

/* "Es este": el lado que dice el ambiente. Sólo aparece en el que corresponde,
   y nunca se aplica solo. */
.mano__sug {
  display: none;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--acc);
  color: var(--sobre-acc);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.mano__opcion--sug { border-style: dashed; border-color: var(--acc); }
.mano__opcion--sug .mano__sug { display: block; }
.mano__opcion--sug[aria-checked="true"] { border-style: solid; }

.mano__pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: 6px var(--s2);
  border: 1px solid var(--acc-line);
  border-radius: var(--r-sm);
  background: var(--acc-soft);
  color: var(--acc-ink);
  font-size: var(--fs-sm);
}
.mano__pie span { flex: 1; min-width: 140px; }

/* ---- Placas ---- */
.mats {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.mats__fila {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  padding: 4px 0;
}
.mats__label { font-size: var(--fs-sm); color: var(--ink-2); }
.mats__control { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.mats__control .select { flex: 1; min-width: 0; }
.mats__control .muestra { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.mats__link {
  margin-top: var(--s2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--acc);
  font-size: var(--fs-xs);
  font-weight: 620;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mats__link:hover { color: var(--acc-hover); }
.mats__link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }

/* ---- El dibujo ---- */
.dlg__vista {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  min-width: 0;
}
.iso {
  position: relative;
  height: 258px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
}
.iso__lienzo {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.iso__lienzo:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acc); }
.iso--girando { cursor: grabbing; }
.iso__acciones {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(3px);
}
.iso__pieza {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  min-height: 19px;
  padding: 0 2px;
}

/* ---- Lo que sale del mueble ---- */
.dlg__resumen {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.dlg__metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.dlg__metricas .metrica { padding: 4px 0; }
.dlg__herrajes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* ---- Pie del diálogo ---- */
.dlg__cant { display: flex; align-items: center; gap: var(--s3); }
.dlg__cant-label { font-size: var(--fs-sm); color: var(--ink-3); }

/* ==========================================================================
   Contador − / +
   ========================================================================== */
.contador {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.contador__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.contador__btn:hover { background: var(--paper-2); color: var(--ink); }
.contador__btn:active { background: var(--paper-3); }
.contador__btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acc); }
.contador__btn[disabled] { opacity: .32; pointer-events: none; }
.contador__valor {
  min-width: 3ch;
  padding: 0 4px;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 640;
  color: var(--ink);
}
.contador--grande {
  display: flex;
  width: 100%;
  height: 52px;
  justify-content: space-between;
}
.contador--grande .contador__btn { width: 52px; }
.contador--grande .contador__valor {
  flex: 1;
  font-size: var(--fs-xl);
  font-weight: 620;
  letter-spacing: -.02em;
}

/* ==========================================================================
   Impresión — A4 en blanco y negro
   ========================================================================== */
@media print {
  .mod__barra, .cat__familias, .cat__cabecera, .mod-tarjeta__pie { display: none !important; }
  .mod__grilla { grid-template-columns: repeat(2, 1fr); }
  .mod-tarjeta, .cat-tarjeta { box-shadow: none; break-inside: avoid; }
  .mano__sug, .mano__pie { display: none !important; }
}