/**
 * OSAKI — Configurador. Todo el CSS va bajo .osaki-configurator.
 *
 * El scoping es obligatorio, no cosmetico: esto se incrusta en un WordPress con
 * un tema que no controlamos. Nada de estilos a elementos desnudos, nada de
 * !important salvo donde haya que ganarle a un reset agresivo del tema, y
 * variables propias con prefijo para no chocar con las del tema.
 *
 * IDENTIDAD ARIMA. La ESTRUCTURA viene del sistema de diseno entregado; los
 * COLORES no. Aquel proponia un rojo #ec3013 que no existe en la marca: la
 * paleta real es el arena #b6ae88 (Pantone 452) como principal, con la gama
 * #b0baa6 · #dbe2da · #7d9ca6 · #a89766 · #e6c176 · #ee7413. El naranja de esa
 * gama es el unico tono con fuerza suficiente para las llamadas a la accion, y
 * por eso ocupa el lugar que el sistema de diseno daba al rojo. Esquinas a 0 y
 * serifa clasica para los titulos, como manda el manual.
 *
 * Tipografias en vendor/ (ruta relativa a ESTE archivo, valida tanto en el
 * prototipo como dentro del plugin, que copia assets/ y vendor/ juntos). El
 * empaquetador standalone sustituye el @import por las fuentes incrustadas.
 */
@import url("../vendor/arima-fonts.css");

/* ---------------------------------------------------------- tokens */

.osaki-configurator {
  --osk-bg: #f2f1ec;
  --osk-card: #ffffff;
  --osk-sand: #b6ae88;          /* ARIMA principal · Pantone 452 */
  --osk-sand-deep: #9a8c5f;
  --osk-sand-soft: #eceadf;
  --osk-sage-soft: #dbe2da;
  --osk-action: #ee7413;        /* naranja de la gama: llamadas a la accion */
  --osk-action-deep: #cf620c;
  --osk-ink: #201e1d;
  --osk-ink-soft: #444141;
  --osk-muted: #7d7979;
  --osk-line: #d7d3d3;
  --osk-line-soft: #eae7e7;
  --osk-dark: #2d2b2b;
  --osk-ok: #4a6440;
  --osk-ok-soft: #dbe2da;
  --osk-bad: #9d3526;
  --osk-bad-soft: #f5e6e2;
  --osk-warn: #755714;
  --osk-warn-soft: #f7edd6;
  --osk-radius: 0px;
  --osk-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --osk-font-display: "Mixta Didone", "Bodoni Moda", "Bodoni MT", Georgia, serif;

  box-sizing: border-box;
  color: var(--osk-ink);
  background: var(--osk-bg);
  font: 14px/1.5 var(--osk-font);
  container-type: inline-size;
}
.osaki-configurator *,
.osaki-configurator *::before,
.osaki-configurator *::after { box-sizing: inherit; }

.osaki-configurator h1,
.osaki-configurator h2,
.osaki-configurator h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }

/* ---------------------------------------------------------- cabecera */

.osaki-configurator .osk-header {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px;
  padding: 18px 22px 14px;
  background: var(--osk-card); border-bottom: 2px solid var(--osk-ink);
}
.osaki-configurator .osk-wordmark {
  font-family: var(--osk-font-display); font-weight: 600;
  font-size: 30px; line-height: 1; letter-spacing: .01em;
}
.osaki-configurator .osk-title { font-size: 13px; font-weight: 600; color: var(--osk-muted); margin: 5px 0 0; }
.osaki-configurator .osk-header__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.osaki-configurator .osk-brandmark {
  font-family: var(--osk-font-display); font-size: 16px; letter-spacing: .24em;
  color: var(--osk-sand-deep); text-transform: uppercase;
}

.osaki-configurator .osk-lang { display: inline-flex; border: 1px solid var(--osk-line); }
.osaki-configurator .osk-lang__btn {
  border: 0; background: transparent; color: var(--osk-muted);
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer;
}
.osaki-configurator .osk-lang__btn.is-active { background: var(--osk-ink); color: #fff; }

/* ---------------------------------------------------------- pestanas */

.osaki-configurator .osk-tabs {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 0 22px; background: var(--osk-card);
  border-bottom: 1px solid var(--osk-line);
}
.osaki-configurator .osk-tab {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--osk-muted);
  padding: 11px 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.osaki-configurator .osk-tab:hover { color: var(--osk-ink); }
.osaki-configurator .osk-tab.is-active { color: var(--osk-ink); border-bottom-color: var(--osk-action); }
/* ---------------------------------------------------------------------------
   EL ATRIBUTO hidden MANDA.  Leelo antes de poner display en cualquier clase.

   El navegador oculta un elemento con [hidden] mediante display:none de su hoja
   de usuario, y CUALQUIER regla de autor que ponga display gana a eso. Es decir:
   escribir .osk-algo { display: flex } hace que un <div class="osk-algo" hidden>
   se vea igual. El 17-sep-2026 eso dejo el configurador con un DIV OPACO Y VACIO
   tapando el visor 3D entero (el aviso de respaldo, .osk-viewer__fallback, que
   lleva inset:0 y fondo propio): la escena se dibujaba perfectamente por debajo
   -medido: el lienzo tenia la composicion- y en pantalla solo se veia un
   rectangulo liso, sin ningun error. Encima se comia los clics, asi que
   seleccionar una pieza en el 3D tampoco funcionaba.

   Esta regla general lo corta de raiz para todo el configurador. Las reglas por
   clase que hay debajo se quedan porque el override de movil depende de ellas:
   son mas especificas y por eso siguen mandando donde toca.
   --------------------------------------------------------------------------- */
.osaki-configurator [hidden] { display: none !important; }

.osaki-configurator .osk-tabpanel[hidden] { display: none; }

/* ---------------------------------------------------------- rejilla */

.osaki-configurator .osk-grid {
  display: grid; grid-template-columns: 340px minmax(0, 1fr) 290px;
  gap: 18px; padding: 18px 22px 26px; align-items: start;
}
.osaki-configurator .osk-wrap { padding: 18px 22px 26px; }
@container (max-width: 1160px) {
  .osaki-configurator .osk-grid { grid-template-columns: 320px minmax(0, 1fr); }
  .osaki-configurator .osk-rail { grid-column: 1 / -1; position: static; }
}
@container (max-width: 780px) {
  .osaki-configurator .osk-grid { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 22px; }
  .osaki-configurator .osk-wrap { padding: 14px 16px 22px; }
  .osaki-configurator .osk-header { padding: 14px 16px 12px; }
  .osaki-configurator .osk-tabs { padding: 0 16px; gap: 14px; }
}
.osaki-configurator .osk-panel { min-width: 0; background: var(--osk-card); border: 1px solid var(--osk-line); }
.osaki-configurator .osk-main { display: grid; gap: 14px; min-width: 0; }

/* ---------------------------------------------------------- acordeon de pasos */

.osaki-configurator .osk-steps__head { padding: 13px 14px; border-bottom: 1px solid var(--osk-line); }
.osaki-configurator .osk-steps__no { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--osk-muted); }
.osaki-configurator .osk-steps__name { font-family: var(--osk-font-display); font-size: 21px; line-height: 1.15; margin-top: 2px; }
.osaki-configurator .osk-dots { display: flex; gap: 4px; margin-top: 10px; }
.osaki-configurator .osk-dot { flex: 1; height: 3px; background: var(--osk-line); }
.osaki-configurator .osk-dot.is-done { background: var(--osk-sand); }
.osaki-configurator .osk-dot.is-active { background: var(--osk-action); }

.osaki-configurator .osk-step { border-bottom: 1px solid var(--osk-line-soft); }
.osaki-configurator .osk-step__btn {
  width: 100%; display: flex; align-items: baseline; gap: 10px;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  font: inherit; padding: 11px 14px; color: var(--osk-ink);
}
.osaki-configurator .osk-step__btn:hover { background: var(--osk-bg); }
.osaki-configurator .osk-step__no {
  font-family: var(--osk-font-display); font-size: 15px; color: var(--osk-sand-deep); min-width: 20px;
}
.osaki-configurator .osk-step__name { font-size: 13px; font-weight: 600; }
.osaki-configurator .osk-step__sum { margin-left: auto; font-size: 11.5px; color: var(--osk-muted); text-align: right; }
.osaki-configurator .osk-step.is-open > .osk-step__btn { background: var(--osk-sand-soft); }
.osaki-configurator .osk-step.is-open .osk-step__no { color: var(--osk-ink); }
.osaki-configurator .osk-step__body { padding: 4px 14px 16px; }
.osaki-configurator .osk-step__body[hidden] { display: none; }

.osaki-configurator .osk-steps__foot { display: flex; gap: 8px; padding: 12px 14px; }
.osaki-configurator .osk-steps__foot .osk-btn { flex: 1; min-width: 0; }
.osaki-configurator .osk-steps__foot .osk-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.osaki-configurator .osk-step__hint,
.osaki-configurator .osk-hint { color: var(--osk-muted); font-size: 12px; margin: 0 0 11px; }

/* ---------------------------------------------------------- campos */

.osaki-configurator label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--osk-muted); }
.osaki-configurator label > span { display: block; margin-bottom: 4px; }
.osaki-configurator input[type="text"],
.osaki-configurator input[type="number"],
.osaki-configurator input[type="date"],
.osaki-configurator input[type="email"],
.osaki-configurator select,
.osaki-configurator textarea {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 13px; color: var(--osk-ink);
  background: var(--osk-card); border: 1px solid var(--osk-line); border-radius: var(--osk-radius);
}
.osaki-configurator input:focus-visible,
.osaki-configurator select:focus-visible,
.osaki-configurator textarea:focus-visible,
.osaki-configurator button:focus-visible { outline: 2px solid var(--osk-action); outline-offset: 1px; }
.osaki-configurator textarea { resize: vertical; }
.osaki-configurator .osk-field { margin-bottom: 10px; }
/* Fila compacta del editor: etiqueta a la izquierda y control a la derecha. La
   usan las cuatro posiciones de los accesorios magneticos, donde apilar cuatro
   campos a lo alto ocuparia mas que el propio panel que se esta editando. */
.osaki-configurator .osk-field--inline {
  display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center;
  gap: 8px; margin-bottom: 7px;
}
.osaki-configurator .osk-field--inline > span { font-size: 12px; color: var(--osk-muted); }
.osaki-configurator .osk-field__label {
  display: block; font-size: 12px; color: var(--osk-muted); margin-bottom: 7px;
}
.osaki-configurator .osk-check {
  grid-column: 2; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--osk-muted); margin-top: 2px;
}
.osaki-configurator .osk-check input { margin: 0; }
/* Aviso de que la pieza sobresale del panel: informa, no impide. */
.osaki-configurator .osk-check--aviso { color: var(--osk-warn); }
.osaki-configurator .osk-field-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 9px; margin-bottom: 10px;
}
.osaki-configurator input[type="file"] { font-size: 12px; max-width: 100%; }

/* ---------------------------------------------------------- botones */

.osaki-configurator .osk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--osk-radius); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px;
}
.osaki-configurator .osk-btn--primary { background: var(--osk-action); color: #fff; }
.osaki-configurator .osk-btn--primary:hover { background: var(--osk-action-deep); }
.osaki-configurator .osk-btn--ghost { background: var(--osk-card); color: var(--osk-ink); border-color: var(--osk-line); }
.osaki-configurator .osk-btn--ghost:hover { background: var(--osk-sand-soft); border-color: var(--osk-sand); }
/* Contorno oscuro: accion secundaria con peso, para no sumar otro naranja junto
   al del PDF (la pestana Exportacion tenia dos y se veia cargada). */
.osaki-configurator .osk-btn--outline { background: transparent; color: var(--osk-ink); border-color: var(--osk-ink); }
.osaki-configurator .osk-btn--outline:hover { background: var(--osk-ink); color: #fff; }
.osaki-configurator .osk-btn--block { width: 100%; }
/* El PDF lleva icono de documento: con el correo en naranja, el icono y el contorno
   oscuro hacen que se lea como accion importante (pedido 22-oct-2026). El icono
   va en mascara para que tome el color del texto, tambien al pasar el raton. */
.osaki-configurator .osk-btn--pdf { font-weight: 700; }
.osaki-configurator .osk-btn--pdf::before {
  content: ""; width: 16px; height: 16px; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.osaki-configurator .osk-btn:disabled { opacity: .45; cursor: not-allowed; }
.osaki-configurator .osk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.osaki-configurator .osk-btn-icon {
  border: 1px solid var(--osk-line); background: var(--osk-card); color: var(--osk-ink);
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 10px; cursor: pointer;
}
.osaki-configurator .osk-btn-icon:hover { background: var(--osk-sand-soft); }
.osaki-configurator .osk-btn-icon.is-active { background: var(--osk-ink); color: #fff; border-color: var(--osk-ink); }

/* ---------------------------------------------------------- pared */

.osaki-configurator .osk-proposal { font-size: 12px; margin: 9px 0 0; color: var(--osk-muted); }
.osaki-configurator .osk-proposal strong { color: var(--osk-ink); }
.osaki-configurator .osk-dims { font-size: 13px; font-weight: 600; margin: 2px 0 0; }
.osaki-configurator .osk-tariff-note { font-size: 11.5px; color: var(--osk-warn); margin: 9px 0 0; }

/* ---------------------------------------------------------- deshacer */

.osaki-configurator .osk-undo { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.osaki-configurator .osk-undo .osk-btn { padding: 4px 10px; font-size: 12px; }
.osaki-configurator .osk-undo__hint { font-size: 11px; color: var(--osk-muted); margin-left: auto; }

/* ---------------------------------------------------------- alzado */

/* El alzado se genera desde las MISMAS piezas colocadas que el visor 3D, asi que
   todo va posicionado en porcentaje sobre una caja con la proporcion real de la
   composicion. Nada de rejilla CSS: con gaps, los remates y los accesorios no
   caerian donde caen en el 3D. */
.osaki-configurator .osk-elevation {
  /* El alto NO se limita aqui: las piezas del alzado se colocan en porcentajes
     sobre esta caja, asi que recortar el alto sin recortar el ancho las estiraria.
     El tope se pone como ANCHO MAXIMO derivado de la proporcion de la pared, y lo
     hace renderElevation(), que es quien conoce esa proporcion. */
  position: relative; width: 100%;
  /* Fondo OSCURO a proposito: es lo que se ve por las juntas, y ademas hace que
     el remate de acero (gris claro) se lea. Con el gris medio anterior el acero
     y el fondo eran casi el mismo color y los remates de acero desaparecian. */
  background: #55605a; border: 1px solid var(--osk-ink);
  margin-bottom: 8px; overflow: hidden;
}
.osaki-configurator .osk-el {
  position: absolute; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: 9px; font-weight: 600; line-height: 1;
  cursor: pointer; background: transparent;
}
.osaki-configurator .osk-el:focus-visible { outline: 2px solid var(--osk-action); outline-offset: -2px; z-index: 6; }

/* Arrastre de paneles en el alzado. */
.osaki-configurator .osk-el--panel { cursor: grab; }
.osaki-configurator .osk-el--panel.is-dragging { opacity: .45; cursor: grabbing; }
.osaki-configurator .osk-el--panel.is-drop { outline: 2px solid var(--osk-action); outline-offset: -2px; z-index: 7; }
.osaki-configurator .osk-elevation__note {
  margin: 8px 2px 0; font-size: 12px; color: var(--osk-warn);
}
.osaki-configurator .osk-value { font-size: 13px; font-weight: 600; }
.osaki-configurator .osk-value--muted { font-size: 12px; color: var(--osk-muted); align-self: center; }

.osaki-configurator .osk-el--panel {
  color: rgba(0,0,0,.42); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
}
.osaki-configurator .osk-el--panel:hover { box-shadow: inset 0 0 0 2px #46524a; z-index: 5; }
.osaki-configurator .osk-el--perf {
  background-image: radial-gradient(circle, rgba(0,0,0,.34) 1.2px, transparent 1.4px);
  background-size: 7px 7px;
}

/* Remates: el tipo NO se codifica solo por color. Con 10 RAL de panel en juego el
   color ya esta sobrecargado, y el roble cuesta el triple que el acero.
   Contorno fino en TODOS los remates: garantiza que se separen del fondo sea cual
   sea su color, sin tener que falsear el color del producto. El roble, con su
   tono real, solo llega a 2,1 de contraste. */
/* En el ALZADO manda el accesorio: se dibuja por encima del remate (z-index 4
   contra 3). Es al reves que en el 3D, y a proposito: el alzado es un plano de
   trabajo donde interesa ver y poder pinchar el accesorio, mientras que el 3D
   ensena el montaje real, donde el remate se apoya SOBRE el accesorio. */
.osaki-configurator .osk-el--trim { z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.osaki-configurator .osk-el--trim:hover { box-shadow: 0 0 0 2px var(--osk-action); z-index: 6; }
.osaki-configurator .osk-el--trim-steel { background: #c4cbd0; }
.osaki-configurator .osk-el--trim-oak {
  background: #b98a52;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 2px, transparent 2px 5px);
}
.osaki-configurator .osk-el--trim-led {
  background: #ffe9a8;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 1px, transparent 1px 4px);
}
.osaki-configurator .osk-el.is-pinned { box-shadow: 0 0 0 1.5px #17201a; }
.osaki-configurator .osk-el.is-selected { box-shadow: 0 0 0 3px var(--osk-action) !important; z-index: 7; }

.osaki-configurator .osk-el--acc { z-index: 4; background: #3f4a43; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* El color de fondo de estas tres clases es solo un respaldo: renderElevation()
   pone en linea el background-color del acabado real, el mismo que pinta el 3D.
   Por eso el hover no cambia el color (lo pisaria el estilo en linea): aclara. */
.osaki-configurator .osk-el--acc:hover,
.osaki-configurator .osk-el--mag:hover { filter: brightness(1.15); }
.osaki-configurator .osk-el--mag { z-index: 4; background: rgba(169,140,110,.85); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

/* ---------------------------------------------------------- editor de pieza */

.osaki-configurator .osk-seg-label { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--osk-muted); margin-bottom: 5px; }
.osaki-configurator .osk-seg { display: flex; border: 1px solid var(--osk-line); }
.osaki-configurator .osk-seg__btn {
  flex: 1; border: 0; background: var(--osk-card); color: var(--osk-ink);
  font: inherit; font-size: 12px; font-weight: 600; padding: 7px 6px; cursor: pointer;
  border-right: 1px solid var(--osk-line-soft);
}
.osaki-configurator .osk-seg__btn:last-child { border-right: 0; }
.osaki-configurator .osk-seg__btn:hover { background: var(--osk-sand-soft); }
.osaki-configurator .osk-seg__btn.is-active { background: var(--osk-ink); color: #fff; }
.osaki-configurator .osk-field--sep { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--osk-line-soft); }

.osaki-configurator .osk-cell-editor {
  margin-top: 11px; border: 1px solid var(--osk-sand); background: var(--osk-bg); padding: 12px;
}
.osaki-configurator .osk-cell-editor__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; font-size: 13px; }
.osaki-configurator .osk-cell-editor__head .osk-btn { padding: 2px 9px; }
.osaki-configurator .osk-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--osk-muted); margin-top: 4px; }
.osaki-configurator .osk-bulk .osk-btn { padding: 4px 9px; font-size: 12px; }

/* ---------------------------------------------------------- remates y accesorios */

.osaki-configurator .osk-trim-required,
.osaki-configurator .osk-acc-cap {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--osk-muted); margin-bottom: 9px;
}
.osaki-configurator .osk-trim-required strong,
.osaki-configurator .osk-acc-cap strong { color: var(--osk-ink); font-size: 15px; }
.osaki-configurator .osk-trim-required .osk-btn { padding: 3px 9px; font-size: 11.5px; }
.osaki-configurator .osk-trim-balance { font-size: 12px; margin: 2px 0 0; font-weight: 600; }
.osaki-configurator .osk-trim-balance.is-ok { color: var(--osk-ok); }
.osaki-configurator .osk-trim-balance.is-bad { color: var(--osk-bad); }

/* "Acero (calculado)": el acero NO es un campo, es el resto. Ensenarlo como dato
   y no como input es lo que evita que alguien deje la suma descuadrada. */
.osaki-configurator .osk-calc {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--osk-sand-soft); padding: 9px 11px; margin-bottom: 9px;
}
.osaki-configurator .osk-calc__k { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--osk-ink-soft); }
.osaki-configurator .osk-calc__v { font-family: var(--osk-font-display); font-size: 20px; line-height: 1; }

.osaki-configurator .osk-acc-list { display: grid; gap: 6px; margin-bottom: 11px; }
.osaki-configurator .osk-acc {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--osk-line-soft); padding: 7px 9px;
}
.osaki-configurator .osk-acc__name { font-size: 12px; font-weight: 600; }
.osaki-configurator .osk-acc__meta { font-size: 11px; color: var(--osk-muted); }

/* Paso a paso con −/+ : en una lista de accesorios el gesto habitual es "uno
   mas", no "escribe un numero". El input sigue ahi y se puede teclear. */
.osaki-configurator .osk-step-num { display: flex; align-items: center; border: 1px solid var(--osk-line); background: var(--osk-card); }
.osaki-configurator .osk-step-num button {
  border: 0; background: transparent; color: var(--osk-ink);
  font: inherit; font-size: 15px; line-height: 1; padding: 5px 9px; cursor: pointer;
}
.osaki-configurator .osk-step-num button:hover { background: var(--osk-sand-soft); }
.osaki-configurator .osk-step-num input {
  width: 44px; border: 0; border-left: 1px solid var(--osk-line-soft); border-right: 1px solid var(--osk-line-soft);
  text-align: center; padding: 5px 2px; font-size: 13px; font-weight: 600;
  -moz-appearance: textfield;
}
.osaki-configurator .osk-step-num input::-webkit-outer-spin-button,
.osaki-configurator .osk-step-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------- visor */

.osaki-configurator .osk-viewer-card { background: var(--osk-card); border: 1px solid var(--osk-line); padding: 12px; }
.osaki-configurator .osk-viewer-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.osaki-configurator .osk-viewer-card__title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--osk-muted); }
.osaki-configurator .osk-viewer {
  /* El fondo casa con el de la escena 3D: asi no hay un destello claro entre que
     se monta la caja y el visor pinta su primer fotograma. */
  position: relative; width: 100%; background: #5f6b64; border: 1px solid var(--osk-line-soft);
  aspect-ratio: 16 / 10; overflow: hidden;
  /* El tope de alto es lo que mantiene las tres columnas cuadradas. Sin el, en
     una pantalla ancha la caja del 3D se va a 700 px de alto -manda el ancho, por
     el aspect-ratio-, empuja el alzado fuera de la vista y deja el panel de pasos
     y el rail de resumen pareciendo cortos. Con el tope, el lienzo se queda en
     formato panoramico y el visor y el alzado juntos ocupan lo que la columna de
     los ocho pasos. */
  max-height: min(46vh, 430px);
}
.osaki-configurator .osk-viewer canvas { display: block; width: 100%; height: 100%; }
.osaki-configurator .osk-viewer__toolbar { display: flex; gap: 6px; }
.osaki-configurator .osk-dim-label {
  position: absolute; font-size: 11px; font-weight: 600; color: var(--osk-ink);
  /* El lienzo del visor tiene fondo oscuro: la pastilla va opaca para que la
     cota se lea, no translucida sobre la escena. */
  background: rgba(255,255,255,.94); padding: 2px 7px; pointer-events: none;
  /* La posicion la pone el visor (projectLabels), fuera de la silueta del
     mosaico. Aqui NO puede haber bottom/right: con top y bottom a la vez y alto
     automatico, la pastilla se ESTIRABA hasta el pie del visor y tapaba media
     composicion. */
  left: 0; top: 0; white-space: nowrap;
}
/* La marca sobre el visor. aria-hidden porque es decorativa: la marca ya esta
   anunciada en la cabecera y repetirla solo estorbaria a un lector de pantalla.
   pointer-events:none para no robarle el clic ni el zoom al lienzo que tiene
   debajo -que es exactamente el fallo que tapo el visor entero hace un rato-. */
.osaki-configurator .osk-viewer__brand {
  position: absolute; right: 12px; bottom: 10px; pointer-events: none;
  font-family: var(--osk-font-display); font-size: 13px; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.88);
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
/* Con logotipo de imagen: alto fijo, ancho el que pida su proporcion. */
.osaki-configurator .osk-viewer__brand img {
  display: block; height: 26px; width: auto; opacity: .9;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.45));
}

.osaki-configurator .osk-viewer__fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; font-size: 13px; color: var(--osk-muted); background: var(--osk-bg);
}
.osaki-configurator .osk-viewer__note { font-size: 11px; color: var(--osk-muted); margin: 9px 2px 0; }

/* ---------------------------------------------------------- rail de resumen */

.osaki-configurator .osk-rail { position: sticky; top: 12px; display: grid; gap: 12px; min-width: 0; }
.osaki-configurator .osk-rail__card { background: var(--osk-card); border: 1px solid var(--osk-line); padding: 14px; }
.osaki-configurator .osk-rail__k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--osk-muted); }
.osaki-configurator .osk-rail__big {
  font-family: var(--osk-font-display); font-size: 30px; line-height: 1.05; margin-top: 4px; overflow-wrap: break-word;
}
.osaki-configurator .osk-rail__sub { font-size: 11.5px; color: var(--osk-muted); margin-top: 3px; }
.osaki-configurator .osk-rail__rows { margin-top: 12px; border-top: 1px solid var(--osk-line-soft); }
.osaki-configurator .osk-rail__row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--osk-line-soft);
}
.osaki-configurator .osk-rail__row span { color: var(--osk-muted); }
.osaki-configurator .osk-rail__row strong { font-weight: 600; }
.osaki-configurator .osk-rail__actions { display: grid; gap: 7px; margin-top: 12px; }
.osaki-configurator .osk-rail__mail { display: grid; gap: 7px; padding: 10px; background: var(--osk-sand-soft); border: 1px solid var(--osk-line); }
.osaki-configurator .osk-rail__mail .osk-hint { margin: 0; }
.osaki-configurator .osk-rail__mail .osk-hint:empty { display: none; }

.osaki-configurator .osk-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--osk-line-soft); }
.osaki-configurator .osk-metric { background: var(--osk-card); padding: 8px 10px; min-width: 0; }
.osaki-configurator .osk-metric__k { display: block; font-size: 10.5px; color: var(--osk-muted); }
.osaki-configurator .osk-metric__v { display: block; font-size: 14px; font-weight: 600; margin-top: 1px; overflow-wrap: break-word; }

.osaki-configurator .osk-validations { display: grid; gap: 6px; }
.osaki-configurator .osk-msg { padding: 8px 10px; font-size: 12px; }
.osaki-configurator .osk-msg--ok { background: var(--osk-ok-soft); color: var(--osk-ok); }
.osaki-configurator .osk-msg--bad { background: var(--osk-bad-soft); color: var(--osk-bad); font-weight: 600; }
.osaki-configurator .osk-msg--warn { background: var(--osk-warn-soft); color: var(--osk-warn); }

/* ---------------------------------------------------------- BOM */

.osaki-configurator .osk-bom-card { background: var(--osk-card); border: 1px solid var(--osk-line); padding: 16px; }
.osaki-configurator .osk-bom-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.osaki-configurator .osk-bom-head h2 { font-family: var(--osk-font-display); font-weight: 600; font-size: 24px; }
.osaki-configurator .osk-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--osk-muted); }
.osaki-configurator .osk-bom-head__sub { font-size: 12px; color: var(--osk-muted); margin: 3px 0 0; }
.osaki-configurator .osk-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--osk-muted); }
.osaki-configurator .osk-toggle input { width: auto; }

.osaki-configurator .osk-bom-wrap { overflow: auto; max-height: 560px; border: 1px solid var(--osk-line); }
.osaki-configurator .osk-bom { width: 100%; border-collapse: collapse; font-size: 12px; }
.osaki-configurator .osk-bom th,
.osaki-configurator .osk-bom td { padding: 7px 9px; border-bottom: 1px solid var(--osk-line-soft); text-align: left; vertical-align: top; }
.osaki-configurator .osk-bom th {
  background: var(--osk-card); position: sticky; top: 0; z-index: 1;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--osk-muted);
  border-bottom: 2px solid var(--osk-ink);
}
.osaki-configurator .osk-bom .num { text-align: right; white-space: nowrap; }
.osaki-configurator .osk-bom tbody tr:hover { background: var(--osk-bg); }
.osaki-configurator .osk-bom tr.osk-fam td {
  background: var(--osk-sand-soft); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--osk-ink);
}
.osaki-configurator .osk-bom tr.osk-fam:hover td { background: var(--osk-sand-soft); }
.osaki-configurator .osk-bom .osk-rule { color: var(--osk-muted); font-size: 11px; max-width: 280px; }
.osaki-configurator .osk-bom .osk-noprice { color: var(--osk-bad); font-weight: 600; }
.osaki-configurator .osk-bom .osk-code { white-space: nowrap; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }

.osaki-configurator .osk-family-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.osaki-configurator .osk-family-total { border: 1px solid var(--osk-line-soft); padding: 8px 10px; font-size: 12px; }
.osaki-configurator .osk-family-total span { display: block; color: var(--osk-muted); font-size: 11px; }
.osaki-configurator .osk-family-total strong { font-size: 14px; font-weight: 600; }

.osaki-configurator .osk-totals {
  margin-top: 14px; background: var(--osk-dark); color: #fff; padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
}
.osaki-configurator .osk-total__k { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.osaki-configurator .osk-total__v { display: block; font-size: 17px; font-weight: 600; margin-top: 3px; }
.osaki-configurator .osk-total--big .osk-total__v { font-family: var(--osk-font-display); font-size: 27px; }
.osaki-configurator .osk-total--partial { color: #e6c176; }

/* ---------------------------------------------------------- exportacion */

/* Tres columnas: entregables | oferta en curso | archivo de configuracion
   (22-oct-2026). Por debajo de 1160 px el archivo baja bajo la oferta, y por
   debajo de 780 px todo va en una columna. */
.osaki-configurator .osk-export-grid {
  display: grid; grid-template-columns: minmax(0, 560px) 280px 280px;
  gap: 16px; align-items: start; justify-content: start;
}
@container (max-width: 1160px) {
  .osaki-configurator .osk-export-grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .osaki-configurator .osk-export-card--main { grid-row: span 2; }
  .osaki-configurator .osk-export-card--file { grid-column: 2; }
}
@container (max-width: 780px) {
  .osaki-configurator .osk-export-grid { grid-template-columns: minmax(0, 1fr); }
  .osaki-configurator .osk-export-card--main { grid-row: auto; }
  .osaki-configurator .osk-export-card--file { grid-column: auto; }
}
.osaki-configurator .osk-actions--sep { margin-top: 12px; }
.osaki-configurator .osk-export-card { background: var(--osk-card); border: 1px solid var(--osk-line); padding: 16px; }
.osaki-configurator .osk-export-card h2 { font-family: var(--osk-font-display); font-weight: 600; font-size: 24px; margin-bottom: 4px; }
.osaki-configurator .osk-export-card h3 { font-size: 12px; letter-spacing: .04em; margin: 16px 0 8px; }
.osaki-configurator .osk-export-card .osk-actions { display: grid; gap: 7px; }
.osaki-configurator .osk-includes { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--osk-ink-soft); }
.osaki-configurator .osk-includes li { padding: 6px 0 6px 16px; position: relative; border-bottom: 1px solid var(--osk-line-soft); }
.osaki-configurator .osk-includes li::before { content: "—"; position: absolute; left: 0; color: var(--osk-sand-deep); }

/* ---------------------------------------------------------- impresion */

@media print {
  .osaki-configurator { background: #fff; }
  .osaki-configurator .osk-panel,
  .osaki-configurator .osk-rail,
  .osaki-configurator .osk-tabs,
  .osaki-configurator .osk-export-card,
  .osaki-configurator .osk-viewer__toolbar,
  .osaki-configurator .osk-lang { display: none !important; }
  .osaki-configurator .osk-grid { display: block; padding: 0; }
  .osaki-configurator .osk-tabpanel[hidden] { display: block !important; }
  .osaki-configurator .osk-bom-wrap { max-height: none; overflow: visible; }
}

/* ---------------------------------------------------------- arranque (WordPress)

   La plantilla del plugin pinta un contenedor con un aviso de carga, y el JS lo
   sustituye entero por la carcasa al arrancar. Estas clases nunca habian tenido
   estilo: si los scripts tardan o fallan, es LO UNICO que ve el visitante.
   El aviso de administrador cuelga FUERA del contenedor, asi que no puede ir
   anidado bajo .osaki-configurator; su propio prefijo ya lo acota. */

.osaki-configurator .osaki-configurator__boot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 220px; padding: 28px; font-size: 13px; color: var(--osk-muted);
}
.osaki-configurator .osaki-configurator__spinner {
  width: 15px; height: 15px; border: 2px solid var(--osk-line);
  border-top-color: var(--osk-action); border-radius: 50%;
  animation: osk-spin .8s linear infinite;
}
@keyframes osk-spin { to { transform: rotate(360deg); } }
/* Quien haya pedido menos movimiento no necesita un disco girando para entender
   que algo esta cargando: el texto que va al lado ya lo dice. */
@media (prefers-reduced-motion: reduce) {
  .osaki-configurator .osaki-configurator__spinner { animation: none; opacity: .5; }
}
.osaki-configurator .osaki-configurator__error,
.osaki-configurator .osaki-configurator__noscript {
  margin: 0; padding: 16px 18px; font-size: 13px;
  background: var(--osk-bad-soft); color: var(--osk-bad);
}
.osaki-configurator__admin-warning {
  margin: 0 0 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  background: #f7edd6; color: #755714; border-left: 3px solid #e6c176;
}

/* ---------------------------------------------------------- enviar la oferta por correo */
.osaki-configurator .osk-mail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--osk-line); display: grid; gap: 8px; }
.osaki-configurator .osk-mail h3 { margin: 0; }
.osaki-configurator .osk-mail__msg--ok { color: var(--osk-ok); }
.osaki-configurator .osk-mail__msg--bad { color: var(--osk-bad); }