/* ==========================================================================
   Build Your Trailer — configurator styles
   Loaded only on /build-your-trailer/ and /es/arma-tu-traila/.
   Uses the site design tokens from site.css. No external requests.
   ========================================================================== */

.cfg {
  --cfg-bg: var(--ink-2);
  --cfg-panel: #1b1f28;
  --cfg-line: rgba(255, 255, 255, .11);
  --cfg-line-2: rgba(255, 255, 255, .2);
  --cfg-txt: #eceef2;
  --cfg-txt-2: #9aa3b0;
  background: var(--cfg-bg);
  color: var(--cfg-txt);
  border-radius: var(--r-l);
  padding: clamp(1rem, 2.4vw, 1.9rem);
  box-shadow: var(--sh-l);
  container-type: inline-size;
}

.cfg :is(h2, h3, h4) { color: var(--cfg-txt); }
.cfg p { color: var(--cfg-txt-2); }
.cfg :focus-visible { outline-color: var(--ember); }

/* ----------------------------------------------------------- top bar */
.cfg-top {
  display: flex; flex-wrap: wrap; gap: .9rem 1.4rem;
  align-items: flex-end; justify-content: space-between;
  padding-bottom: 1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--cfg-line);
}
.cfg-top h2 { margin: 0 0 .15em; font-size: clamp(1.3rem, 2.4vw, 1.85rem); }
.cfg-top p { margin: 0; font-size: .92rem; max-width: 46ch; }

#cfg-presets { display: flex; flex-wrap: wrap; gap: .45rem; }
#cfg-presets button {
  font: 650 .82rem/1 var(--f-d);
  color: var(--cfg-txt); background: #262c37;
  border: 1px solid var(--cfg-line-2); border-radius: 999px;
  padding: .55rem .95rem; cursor: pointer;
  transition: background .14s, border-color .14s, transform .14s;
}
#cfg-presets button:hover {
  background: #b04508; border-color: var(--flame); transform: translateY(-1px);
}

/* ------------------------------------------------------------ layout */
.cfg-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 300px);
  align-items: start;
}
@container (max-width: 1080px) {
  .cfg-grid { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .cfg-side-r { grid-column: 1 / -1; }
}
@container (max-width: 720px) {
  .cfg-grid { grid-template-columns: minmax(0, 1fr); }
  .cfg-side-r { grid-column: auto; }
}

.cfg-panel {
  background: var(--cfg-panel);
  border: 1px solid var(--cfg-line);
  border-radius: var(--r);
  padding: .85rem;
}
.cfg-panel + .cfg-panel { margin-top: .9rem; }
.cfg-panel > h3 {
  font: 800 .72rem/1 var(--f-d); letter-spacing: .1em; text-transform: uppercase;
  color: var(--cfg-txt-2); margin: 0 0 .7rem;
}

/* --------------------------------------------------------- palette */
#cfg-palette { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
#cfg-palette::-webkit-scrollbar { width: 9px; }
#cfg-palette::-webkit-scrollbar-thumb { background: #39414f; border-radius: 9px; }

.pg { border-bottom: 1px solid var(--cfg-line); }
.pg:last-child { border-bottom: 0; }
.pg > summary {
  cursor: pointer; list-style: none; padding: .55rem .2rem;
  font: 700 .86rem/1.2 var(--f-d); color: var(--cfg-txt);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.pg > summary::-webkit-details-marker { display: none; }
.pg > summary::before {
  content: "+"; font: 700 1rem/1 var(--f-m); color: var(--flame-l);
  width: 1em; flex: none;
}
.pg[open] > summary::before { content: "\2013"; }
.pg > summary i { font-style: normal; font-size: .72rem; color: var(--cfg-txt-2); margin-left: auto; }
.pgi { display: grid; gap: .3rem; padding: .15rem 0 .7rem; }

.pb {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  background: #232935; border: 1px solid transparent; border-radius: var(--r-s);
  color: var(--cfg-txt); font: 600 .82rem/1.25 var(--f); padding: .5rem .55rem;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.pb:hover { background: #2c3543; border-color: var(--cfg-line-2); }
.pb em { margin-left: auto; font-style: normal; font-size: .7rem; color: var(--cfg-txt-2); font-family: var(--f-m); white-space: nowrap; }
.sw { width: 12px; height: 12px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }

/* ---------------------------------------------------------- stage */
.cfg-stage { background: var(--cfg-panel); border: 1px solid var(--cfg-line); border-radius: var(--r); overflow: hidden; }
.cfg-tabs { display: flex; gap: .3rem; padding: .55rem .6rem; border-bottom: 1px solid var(--cfg-line); flex-wrap: wrap; align-items: center; }
.cfg-tabs [data-view] {
  font: 700 .8rem/1 var(--f-d); color: var(--cfg-txt-2); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: .45rem .8rem; cursor: pointer;
}
.cfg-tabs [data-view][aria-pressed="true"] { background: #b04508; color: #fff; }
.cfg-tabs .cfg-tools { margin-left: auto; display: flex; gap: .3rem; flex-wrap: wrap; }
.cfg-tools button {
  font: 650 .76rem/1 var(--f-d); color: var(--cfg-txt-2); background: #232935;
  border: 1px solid var(--cfg-line); border-radius: 8px; padding: .45rem .7rem; cursor: pointer;
}
.cfg-tools button:hover { color: var(--cfg-txt); border-color: var(--cfg-line-2); }

.cfg-canvas-2d, .cfg-canvas-3d { position: relative; background: #12161d; }
.cfg-canvas-2d[hidden], .cfg-canvas-3d[hidden] { display: none; }
.cfg canvas { display: block; width: 100%; touch-action: none; cursor: grab; }
.cfg canvas:active { cursor: grabbing; }
.cfg-hint {
  margin: 0; padding: .5rem .75rem; font-size: .76rem; color: var(--cfg-txt-2);
  border-top: 1px solid var(--cfg-line); background: var(--cfg-panel);
}
.cfg-hint kbd {
  font: 650 .72rem/1 var(--f-m); background: #2c3543; border: 1px solid var(--cfg-line-2);
  border-bottom-width: 2px; border-radius: 4px; padding: .12rem .35rem; color: var(--cfg-txt);
}

/* -------------------------------------------------------- controls */
.cfg-ctrls { display: grid; gap: .8rem; }
.cfg-ctrl label { display: block; font: 700 .74rem/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; color: var(--cfg-txt-2); margin-bottom: .35rem; }
.cfg-ctrl output { float: right; font-family: var(--f-m); color: var(--ember); letter-spacing: 0; text-transform: none; }
.cfg-ctrl input[type="range"] { width: 100%; accent-color: var(--flame); }
.cfg-ctrl select {
  width: 100%; background: #232935; color: var(--cfg-txt); font: 600 .86rem/1 var(--f);
  border: 1px solid var(--cfg-line-2); border-radius: var(--r-s); padding: .55rem .6rem;
}

/* ----------------------------------------------------------- stats */
#cfg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
#cfg-stats .cs {
  background: #232935; border: 1px solid var(--cfg-line); border-radius: var(--r-s);
  padding: .55rem .4rem; text-align: center; min-width: 0;
}
#cfg-stats .cs b { display: block; font: 800 1rem/1.15 var(--f-m); color: var(--ember); overflow-wrap: anywhere; }
#cfg-stats .cs span { display: block; font-size: .66rem; line-height: 1.25; color: var(--cfg-txt-2); margin-top: .2rem; }

/* ---------------------------------------------------------- checks */
#cfg-checks {
  display: grid; gap: .4rem; max-height: 380px; overflow-y: auto;
  overscroll-behavior: contain;
  /* fades the last card at the cut line so a clipped check reads as
     "scroll for more" rather than as a rendering bug */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
}
#cfg-checks::-webkit-scrollbar { width: 9px; }
#cfg-checks::-webkit-scrollbar-thumb { background: #39414f; border-radius: 9px; }
.chk {
  font-size: .8rem; line-height: 1.45; padding: .55rem .65rem;
  border-radius: var(--r-s); border-left: 3px solid; background: #232935; color: #d7dce4;
}
.chk-t { display: block; font: 800 .62rem/1 var(--f-d); letter-spacing: .12em; margin-bottom: .3rem; }
.chk-req { border-color: #e04b3c; } .chk-req .chk-t { color: #ff8577; }
.chk-warn { border-color: var(--ember); } .chk-warn .chk-t { color: var(--ember); }
.chk-ok { border-color: var(--verify); } .chk-ok .chk-t { color: #63d3a1; }
.chk-co { border-color: #4a9ede; } .chk-co .chk-t { color: #7fbdf0; }

/* ------------------------------------------------------------ list */
#cfg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 260px; overflow-y: auto; }
#cfg-list li {
  display: flex; align-items: center; gap: .5rem; margin: 0; padding: .4rem .5rem;
  background: #232935; border: 1px solid transparent; border-radius: var(--r-s);
  font-size: .8rem; cursor: pointer;
}
#cfg-list li.on { border-color: var(--flame); background: #2e2620; }
#cfg-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cfg-list .dim { margin-left: auto; font: 500 .7rem/1 var(--f-m); color: var(--cfg-txt-2); white-space: nowrap; }
#cfg-list .rm {
  flex: none; width: 22px; height: 22px; border-radius: 5px; cursor: pointer;
  background: transparent; border: 1px solid var(--cfg-line); color: var(--cfg-txt-2);
  font: 700 1rem/1 var(--f); padding: 0;
}
#cfg-list .rm:hover { background: #e04b3c; border-color: #e04b3c; color: #fff; }

.cfg-empty { font-size: .82rem; color: var(--cfg-txt-2); margin: 0; padding: .3rem 0; }

/* ------------------------------------------------------------ spec */
#cfg-spec {
  width: 100%; min-height: 190px; resize: vertical;
  background: #12161d; color: #cfd6e0; border: 1px solid var(--cfg-line);
  border-radius: var(--r-s); padding: .65rem; font: 400 .74rem/1.55 var(--f-m);
}
.cfg-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.cfg-actions button { flex: 1 1 auto; }
#cfg-send {
  background: var(--flame); color: var(--txt); border: 0; border-radius: var(--r-s);
  font: 800 .92rem/1 var(--f-d); padding: .85rem 1rem; cursor: pointer;
}
#cfg-send:hover { background: #ff7a33; }
#cfg-send:disabled { opacity: .45; cursor: not-allowed; }
#cfg-copy {
  background: transparent; color: var(--cfg-txt); border: 1px solid var(--cfg-line-2);
  border-radius: var(--r-s); font: 650 .88rem/1 var(--f-d); padding: .85rem 1rem; cursor: pointer;
}

/* -------------------------------------------------- external engine */
.cfg-external[hidden] { display: none; }
.cfg-external { min-height: 420px; }
.cfg-external iframe { width: 100%; border: 0; display: block; border-radius: var(--r); }

/* -------------------------------------------------------- no-script */
.cfg-noscript {
  background: var(--cfg-panel); border: 1px solid var(--cfg-line); border-radius: var(--r);
  padding: 1.1rem; font-size: .9rem; color: var(--cfg-txt-2);
}

@media print { .cfg-grid, .cfg-top { display: block; } .cfg canvas { break-inside: avoid; } }

/* ------------------------------------------------ page-level tweaks used
   only by the configurator page (hero sits tight against the widget, and
   the widget section runs edge-to-edge inside the wrap). */
.hero.hero-tight { padding-bottom: clamp(1rem, 3vw, 2rem); }
.hero.hero-tight .hero-in { max-width: 900px; }
.sec.sec-flush { padding-top: 0; }
.cfg .kicker { color: var(--flame-l); }

.cfg-stage + .cfg-panel{margin-top:.9rem}

.cfg-top[hidden]{display:none}
.cfg-builtin[hidden]{display:none}