/* ============================================================
   JR Pallet — estilos del catálogo 3D (products.html)
   Complementa styles.css: acá solo va lo propio del visor.
   Las variables (--green-700, --sand, --ease…) vienen de styles.css.
   ============================================================ */

/* Varias reglas de acá fijan `display`, y eso anula el atributo hidden: la regla
   del navegador es [hidden]{display:none} y pierde por especificidad frente a
   cualquier clase. Se restablece de una vez para todo el archivo. */
[hidden]{display:none !important}

.card{background:var(--white);border:1px solid rgba(30,40,20,.09);border-radius:var(--radius);box-shadow:var(--shadow)}
.card__h{padding:14px 16px 0}
.card__h h3{font-size:.95rem}
.card__h span{font-size:.78rem;color:var(--muted)}

/* ---------- Escenario ---------- */
.stage{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#fdfbf7,#eef2e9 70%,#e6ece0);
  border:1px solid rgba(30,40,20,.09);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  height:clamp(480px,64vh,760px);
}
/* En vertical conviene un escenario menos alto: como el modelo encaja por el
   ancho, el alto de más se desperdicia en aire arriba y abajo. */
@media(max-width:640px){.stage{height:clamp(380px,56vh,490px)}}

#viewer{position:absolute;inset:0;cursor:grab}
#viewer:active{cursor:grabbing}
#viewer canvas{display:block;width:100%;height:100%;touch-action:none}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* etiquetas de cota, dibujadas en HTML sobre el lienzo (CSS2DRenderer) */
.lbl{font-family:"Manrope";font-size:11px;font-weight:800;color:var(--green-900);
  background:rgba(255,255,255,.92);border:1px solid rgba(30,40,20,.12);
  padding:2px 7px;border-radius:999px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(20,40,10,.12);transform:translate(-50%,-50%)}
.lbl--mut{color:var(--muted);font-weight:700;background:rgba(255,255,255,.85)}

/* ---------- Catálogo: panel deslizante dentro del escenario ---------- */
.panel{
  position:absolute;left:12px;top:60px;bottom:60px;width:250px;z-index:6;
  display:flex;flex-direction:column;overflow:hidden;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border:1px solid rgba(30,40,20,.1);border-radius:14px;box-shadow:var(--shadow-lg);
  transition:transform .28s var(--ease),opacity .2s var(--ease),visibility .28s;
}
.panel.is-closed{transform:translateX(calc(-100% - 16px));opacity:0;visibility:hidden}
.panel__h{display:flex;align-items:baseline;gap:.5rem;padding:.75rem .9rem .35rem}
.panel__h b{font-family:"Sora";font-weight:700;font-size:.88rem}
.panel__h i{font-style:normal;font-size:.72rem;color:var(--muted)}

.scrim{position:absolute;inset:0;z-index:5;background:rgba(20,30,15,.38);
  opacity:0;visibility:hidden;transition:.25s var(--ease)}
.scrim.is-on{opacity:1;visibility:visible}
@media(min-width:901px){.scrim{display:none}}
@media(max-width:900px){.panel{width:min(272px,76%);top:56px;bottom:56px}}

.burger{
  width:38px;height:38px;flex:0 0 auto;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.5px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid rgba(30,40,20,.1);border-radius:12px;box-shadow:var(--shadow);
}
.burger span{display:block;width:17px;height:2px;border-radius:2px;
  background:var(--green-800);transition:.22s var(--ease)}
.burger.is-on span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.is-on span:nth-child(2){opacity:0}
.burger.is-on span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* el desvanecido inferior avisa de que la lista sigue hacia abajo */
.cat{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 .7rem .9rem;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
.cat::-webkit-scrollbar{width:6px}
.cat::-webkit-scrollbar-thumb{background:rgba(30,40,20,.2);border-radius:3px}
.fam{margin-top:10px}
.fam:first-child{margin-top:2px}
.fam__t{font-family:"Sora";font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:.35rem .3rem}

.item{width:100%;display:flex;align-items:center;gap:.65rem;text-align:left;
  background:var(--sand);border:1.5px solid rgba(30,40,20,.1);border-radius:12px;
  padding:.6rem .75rem;cursor:pointer;font-family:inherit;
  transition:.2s var(--ease);margin-bottom:.4rem}
.item:hover{border-color:var(--green-600);transform:translateX(3px)}
.item.is-active{border-color:var(--green-700);
  background:linear-gradient(0deg,rgba(60,155,19,.07),rgba(60,155,19,.07)),var(--white);
  box-shadow:0 8px 20px rgba(47,125,26,.12)}
.item__chk{width:18px;height:18px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(30,40,20,.2);color:transparent;font-size:.62rem;font-weight:800;
  display:grid;place-items:center;transition:.2s}
.item.is-active .item__chk{background:var(--green-700);border-color:var(--green-700);color:#fff}
.item__n{flex:1;min-width:0}
.item__n b{display:block;font-size:.9rem;font-weight:700}
.item__n i{display:block;font-style:normal;font-size:.74rem;font-weight:600;color:var(--muted)}
.item__s{font-size:.7rem;font-weight:700;color:var(--muted);background:rgba(30,40,20,.06);
  padding:.16rem .45rem;border-radius:999px;white-space:nowrap}
.item.is-active .item__s{background:var(--green-700);color:#fff}

/* ---------- Barras de control sobre el escenario ---------- */
/* La barra superior va por encima del velo para que el botón siga cerrando.
   Tres columnas con los lados iguales: así las vistas quedan centradas en el
   escenario pase lo que pase con el botón o con la placa. Las columnas
   laterales pueden encogerse a cero, de modo que la del medio nunca se corre. */
.hud{position:absolute;top:12px;left:12px;right:12px;z-index:7;pointer-events:none;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start;gap:8px}
.hud > .burger{justify-self:start}
.hud > #views{justify-self:center}
.hud > .hud__der{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.hud *{pointer-events:auto}

.hudb{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
/* En esta página el flotante de la esquina inferior derecha es el de la
   cotización, en el lugar que ocupa el de correo en el resto del sitio. Es
   fixed (60 px + 20 de margen): mientras la ventana no sea más ancha que el
   contenedor pisa el control de despiece, así que se le deja el hueco. */
@media(max-width:1220px){.hudb{padding-right:72px}}

.chipbar{display:flex;flex-wrap:wrap;gap:4px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border:1px solid rgba(30,40,20,.1);border-radius:999px;
  padding:4px;box-shadow:var(--shadow)}
/* acotado a .chipbar: styles.css ya define un .chip distinto para otros usos */
.chipbar .chip{font-family:inherit;font-size:.75rem;font-weight:700;color:var(--muted);
  background:transparent;border:0;padding:.34rem .66rem;border-radius:999px;
  cursor:pointer;transition:.18s var(--ease);white-space:nowrap}
.chipbar .chip:hover{color:var(--green-700);border-color:transparent}
.chipbar .chip.is-on{background:var(--green-700);color:#fff}

.badge{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(30,40,20,.1);border-radius:12px;padding:.5rem .8rem;
  box-shadow:var(--shadow);font-size:.76rem;text-align:right}
.badge b{display:block;font-family:"Sora";font-size:.9rem;color:var(--green-800)}

.slider{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border:1px solid rgba(30,40,20,.1);border-radius:999px;
  padding:.4rem .9rem;box-shadow:var(--shadow);font-size:.75rem;font-weight:700;color:var(--muted)}
.slider input{width:140px;accent-color:var(--green-700)}
.slider b{color:var(--green-800);min-width:2.4em;text-align:right}

#tip{position:absolute;z-index:4;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--green-900);color:#fff;font-size:.75rem;font-weight:700;
  padding:.35rem .6rem;border-radius:8px;transform:translate(-50%,-140%);white-space:nowrap}
#tip.on{opacity:1}

/* Etiquetas de los chips: <b> es la versión larga y <i> la abreviada.
   En pantalla angosta se intercambian para que las barras no se desborden. */
.chipbar .chip i{display:none;font-style:normal}
@media(max-width:900px){.solo-ancho{display:none}}
@media(max-width:640px){
  .chipbar .chip b{display:none}
  .chipbar .chip i{display:inline}
  /* el nombre del modelo ya está en la ficha, justo debajo: la placa sobra
     y libera una fila entera de alto para el 3D */
  .badge{display:none}
  /* Sin la placa, la columna derecha se queda sin ancho y el botón de ficha
     se montaba encima de las vistas: pasa a una segunda fila propia. */
  .hud{grid-template-columns:auto minmax(0,1fr)}
  .hud > .hud__der{grid-column:1 / -1;grid-row:2}
  .chipbar{border-radius:20px}   /* si una barra pasa a dos filas, la píldora no queda rara */
  .chipbar .chip{font-size:.72rem;padding:.32rem .58rem}
  .slider{padding:.35rem .7rem;font-size:.7rem}
  .slider input{width:96px}
}

/* ---------- Ficha técnica ---------- */
.ficha__scroll{overflow-x:auto}

.modal table{width:100%;border-collapse:collapse;font-size:.84rem}
.modal thead th{background:var(--green-700);color:#fff;font-weight:700;text-align:left;
  padding:.55rem .8rem;font-size:.75rem;white-space:nowrap}
.modal thead th:first-child{border-radius:10px 0 0 0}
.modal thead th:last-child{border-radius:0 10px 0 0}
.modal tbody tr{border-bottom:1px solid rgba(30,40,20,.07);cursor:pointer;transition:background .15s}
.modal tbody tr:hover{background:rgba(60,155,19,.07)}
.modal tbody tr.is-on{background:rgba(60,155,19,.13);box-shadow:inset 3px 0 0 var(--green-700)}
.modal tbody td{padding:.55rem .8rem;white-space:nowrap}
.modal tbody td:first-child{font-weight:700;white-space:normal}
.modal tbody tr.tot{background:var(--sand);font-weight:800;cursor:default}
.modal tbody tr.tot:hover{background:var(--sand)}

.det{display:block;font-weight:600;font-size:.74rem;color:var(--muted)}
.swatch{display:inline-block;width:9px;height:9px;border-radius:3px;
  margin-right:.45rem;vertical-align:middle}
.desc{margin-top:.9rem;font-size:.85rem;line-height:1.6;color:var(--muted)}

/* ya no es una barra lateral angosta: al ir a todo el ancho se reparte en
   columnas para no quedar como una lista de trece filas */
.kv{display:grid;gap:.5rem 1.6rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kv__row{display:flex;justify-content:space-between;gap:1rem;font-size:.83rem;
  border-bottom:1px dashed rgba(30,40,20,.12);padding-bottom:.4rem}
.kv__row span:first-child{color:var(--muted);font-weight:600}
.kv__row span:last-child{font-weight:800;text-align:right}

/* ============================================================
   Cotizador
   ============================================================ */
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin-top:18px}
/* la acción principal va a la derecha; el texto informativo queda a la izquierda */
.acciones__add{display:flex;align-items:center;gap:.6rem;margin-left:auto}
@media(max-width:560px){.acciones__add{width:100%;margin-left:0;justify-content:space-between}}
.acciones__nota{font-size:.86rem;color:var(--muted)}
.acciones__nota b{color:var(--ink)}

/* confirmación efímera al añadir; no desplaza nada al aparecer */
.aviso{font-size:.82rem;font-weight:700;color:var(--green-700);
  background:rgba(60,155,19,.1);padding:.3rem .7rem;border-radius:999px;
  opacity:0;transform:translateY(4px);transition:.22s var(--ease)}
.aviso.is-on{opacity:1;transform:none}

.cotiza{margin-top:18px}
/* va acotado a .card__h porque ahí ya hay un "span" con color propio que,
   por ser más específico, dejaba el número en verde sobre verde */
.card__h .cotiza__n{display:inline-block;min-width:1.5em;margin-left:.4rem;padding:.05rem .45rem;
  font-family:"Manrope";font-size:.78rem;font-weight:800;text-align:center;
  color:#fff;background:var(--green-700);border-radius:999px;vertical-align:middle}
.cotiza__vacio{padding:14px 16px 18px;font-size:.88rem;color:var(--muted)}
.cotiza__lista{padding:0 16px}

/* cuatro columnas: miniatura · nombre · cantidad · borrar */
.linea{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.8rem;
  padding:.7rem 0;border-bottom:1px solid rgba(30,40,20,.08)}
.linea:last-child{border-bottom:0}
.linea__n b{display:block;font-size:.9rem;font-weight:700}
.linea__n i{display:block;font-style:normal;font-size:.76rem;color:var(--muted)}
.linea__x{width:30px;height:30px;flex:0 0 auto;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--muted);font-size:1.25rem;line-height:1;
  transition:.18s var(--ease)}
.linea__x:hover{background:#fde8e4;color:#b23b25}

.paso{display:flex;align-items:center;gap:2px;background:var(--sand);border-radius:999px;padding:3px}
.paso__b{width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;background:transparent;
  color:var(--green-800);font-size:1rem;font-weight:800;line-height:1;transition:.18s var(--ease)}
.paso__b:hover{background:var(--white)}
.paso__i{width:44px;border:0;background:transparent;text-align:center;
  font-family:"Manrope";font-size:.92rem;font-weight:700;color:var(--ink);
  -moz-appearance:textfield}
.paso__i::-webkit-outer-spin-button,.paso__i::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.cotiza__vaciar{display:block;margin:.9rem 16px 0;padding:0;border:0;background:none;cursor:pointer;
  font-family:"Manrope";font-size:.8rem;font-weight:700;color:var(--muted);text-decoration:underline}
.cotiza__vaciar:hover{color:#b23b25}

.cotiza__form{padding:18px 16px 20px;margin-top:.9rem;border-top:1px solid rgba(30,40,20,.08)}
.cotiza__campos{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:640px){
  .cotiza__campos{grid-template-columns:1fr}
  /* En una columna: la miniatura a la izquierda ocupando las dos filas, el
     nombre arriba y debajo cantidad y borrar. El selector se ajusta a su
     contenido en vez de estirarse a todo el ancho. */
  .linea{grid-template-columns:auto 1fr auto;row-gap:.5rem}
  .linea__img{grid-row:1 / span 2;align-self:start}
  .linea__n{grid-column:2 / -1}
  .paso{grid-column:2;justify-self:start}
  .linea__x{grid-column:3;grid-row:2}
}

/* miniatura del modelo en cada línea: deliberadamente chica, es una ayuda
   de reconocimiento, no una foto de producto */
.linea__img{width:40px;height:40px;flex:0 0 auto;border-radius:8px;
  background:var(--sand);object-fit:contain}

/* selector de cuántas unidades se añaden de una vez */
.paso--add{background:var(--white);border:1.5px solid rgba(30,40,20,.14)}

/* Acceso flotante a la lista. Ocupa la esquina inferior derecha, la misma que
   el botón de correo en el resto del sitio: acá esa es la acción principal.
   Circular a propósito: con etiqueta de texto tapaba los controles. */
.fab-cotiza{position:fixed;right:20px;bottom:20px;z-index:60;
  width:60px;height:60px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:var(--green-700);box-shadow:0 10px 26px rgba(47,125,26,.45);
  transition:transform .2s var(--ease),background .2s}
.fab-cotiza:hover{transform:scale(1.08);background:var(--green-800)}
.fab-cotiza__n{position:absolute;top:-2px;right:-2px;
  min-width:22px;height:22px;padding:0 5px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--green-900);border:2px solid var(--cream);
  font-family:"Manrope";font-size:.7rem;font-weight:800;line-height:1}
@media(max-width:640px){.fab-cotiza{right:14px;bottom:14px;width:52px;height:52px}}

/* ============================================================
   Ficha técnica en capa
   ============================================================ */
.btn-ficha{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;
  padding:.34rem .7rem;border:1px solid rgba(30,40,20,.12);border-radius:999px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--green-800);
  box-shadow:var(--shadow);
  font-family:"Manrope";font-size:.73rem;font-weight:700;white-space:nowrap;
  transition:.2s var(--ease)}
.btn-ficha:hover{border-color:var(--green-600);background:#fff;color:var(--green-700)}

.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px)}
.modal[hidden]{display:none}
.modal__velo{position:absolute;inset:0;background:rgba(18,52,10,.55);backdrop-filter:blur(3px)}
.modal__caja{position:relative;display:flex;flex-direction:column;
  width:100%;max-width:1040px;max-height:100%;overflow:hidden;
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  animation:fichaEntra .22s var(--ease)}
@keyframes fichaEntra{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}

.modal__h{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex:0 0 auto;padding:1rem 1.2rem;background:var(--green-800);color:#fff}
.modal__h h3{font-size:1rem;color:#fff}
.modal__x{width:34px;height:34px;flex:0 0 auto;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;line-height:1;
  transition:.18s var(--ease)}
.modal__x:hover{background:rgba(255,255,255,.28)}

.modal__cuerpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1.2rem}
/* una sola columna: planos, tabla y al final los datos derivados, que al ir
   a lo ancho se reparten en varias columnas en vez de quedar en lista larga */
/* minmax(0,…) y no 1fr: los ítems de grid traen min-width:auto, así que sin
   esto la tabla ancha estira la columna y el modal desborda en horizontal */
.modal__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:start}

.modal__rot{margin-bottom:.55rem;font-family:"Sora";font-size:.7rem;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.modal__datos{background:var(--sand);border-radius:12px;padding:1rem 1.1rem}
.modal__pie{margin-top:.7rem;font-size:.74rem;color:var(--muted)}

/* ---- planos de componentes ----
   Tira horizontal sobre la tabla, del mismo ancho. El alto lo calcula
   products3d.js como el 70 % del de la tabla y lo deja en --planos-alto;
   las tarjetas se ajustan a ese alto y la tira se desplaza en horizontal
   cuando los planos no caben. */
.modal__planos{margin-bottom:1.3rem}
.planos{display:flex;gap:.7rem;overflow-x:auto;overscroll-behavior-x:contain;
  height:var(--planos-alto,210px);padding-bottom:.35rem;scrollbar-width:thin}
/* en macOS la barra flotante se esconde y no se nota que la tira desplaza */
.planos::-webkit-scrollbar{height:6px}
.planos::-webkit-scrollbar-track{background:transparent}
.planos::-webkit-scrollbar-thumb{background:rgba(30,40,20,.22);border-radius:3px}
.planos::-webkit-scrollbar-thumb:hover{background:rgba(30,40,20,.38)}
.plano{flex:0 0 auto;height:100%;margin:0;display:flex;flex-direction:column;
  background:var(--white);border:1px solid rgba(30,40,20,.12);border-radius:12px;
  padding:.6rem;transition:.2s var(--ease)}
.plano__lienzo{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:var(--cream);border-radius:8px;padding:.4rem}
.plano svg{display:block;height:100%;width:auto;max-width:100%}
.plano__pie{margin-top:.45rem;display:flex;flex-direction:column;gap:.05rem;line-height:1.3}
.plano__pie b{font-family:"Sora";font-size:.8rem;color:var(--ink);white-space:nowrap}
.plano__pie span{color:var(--muted);font-size:.71rem;white-space:nowrap}
/* el resaltado acompaña al de la tabla y el modelo 3D */
.plano.is-on{border-color:var(--green-700);box-shadow:0 0 0 2px rgba(60,155,19,.22)}
.plano.is-off{opacity:.4}
@media(prefers-reduced-motion:reduce){.plano{transition:none}}