:root {
  --cfg-bg: #08090b;
  --cfg-panel: #111317;
  --cfg-card: #181b20;
  --cfg-card-2: #20242b;
  --cfg-border: rgba(255,255,255,.09);
  --cfg-text: #f5f5f5;
  --cfg-muted: #9a9da5;
  --cfg-accent: #ffffff;
  --cfg-success: #76e39b;
  --cfg-radius: 18px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.configurator-page {
  margin: 0;
  background: var(--cfg-bg);
  color: var(--cfg-text);
  font-family: Inter, system-ui, sans-serif;
  overflow: hidden;
}

.config-header {
  height: 70px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 28px;
  border-bottom: 1px solid var(--cfg-border);
  background: rgba(8,9,11,.92);
  position: relative;
  z-index: 5;
}
.config-brand, .config-exit { color: inherit; text-decoration: none; }
.config-brand { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:900; }
.config-brand > span:last-child span { opacity:.55; }
.config-brand-mark {
  width:32px; height:32px; border:1px solid var(--cfg-border); border-radius:9px;
  display:grid; place-items:center; overflow:hidden;
}
.config-brand-mark img { width:100%; height:100%; object-fit:contain; }
.config-header-center { text-align:center; display:flex; flex-direction:column; gap:2px; }
.config-header-center strong { font-size:14px; }
.eyebrow { color:var(--cfg-muted); font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.config-exit { justify-self:end; color:var(--cfg-muted); font-size:12px; display:flex; gap:8px; align-items:center; }
.config-exit:hover { color:var(--cfg-text); }

.configurator {
  height: calc(100vh - 70px);
  width: auto;
  border-radius: 0px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 430px;
}

.viewer-panel {
  position:relative;
  min-width:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.055), transparent 35%),
    linear-gradient(135deg,#0b0c0f,#07080a);
}
.viewer-panel::after {
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.1), transparent 25%, transparent 75%, rgba(0,0,0,.35));
}
.viewer-top {
  position:absolute; top:30px; left:34px; right:34px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-start;
}
.viewer-top h1 { margin:5px 0 2px; font-size:27px; letter-spacing:-.04em; }
.viewer-top p { margin:0; color:var(--cfg-muted); font-size:12px; }
.viewer-reset {
  width:40px; height:40px; border:1px solid var(--cfg-border); background:rgba(15,16,19,.7);
  color:var(--cfg-text); border-radius:12px; cursor:pointer; backdrop-filter:blur(10px);
}
.three-canvas { position:absolute; inset:0; }
.three-canvas canvas { width:100%!important; height:100%!important; display:block; }
.viewer-help {
  position:absolute; z-index:2; left:34px; bottom:26px;
  display:flex; gap:18px; color:#777b84; font-size:10px;
}
.viewer-help span { display:flex; align-items:center; gap:6px; }
.viewer-status { color:#9da2aa; }
.viewer-status i { font-size:7px; }

.config-panel {
  height:100%;
  background:var(--cfg-panel);
  border-left:1px solid var(--cfg-border);
  display:flex; flex-direction:column;
  min-height:0;
}
.config-panel-head {
  padding:25px 25px 16px; display:flex; justify-content:space-between; align-items:center;
}
.config-panel-head h2 { margin:5px 0 0; font-size:25px; letter-spacing:-.035em; }
.help-button, .guide-close {
  border:0; background:transparent; color:var(--cfg-muted); cursor:pointer;
}
.help-button { font-size:17px; }

.progress { display:flex; gap:5px; padding:0 25px 17px; }
.progress-dot {
  height:3px; flex:1; background:#292d34; border-radius:9px; cursor:pointer;
}
.progress-dot.done, .progress-dot.active { background:#e7e7e7; }

.step-scroll {
  /* Permite el desplazamiento vertical cuando el contenido supera el alto */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* Scroll fluido en dispositivos iOS */
  
  /* Ajusta la altura máxima para pantallas de escritorio/laptop */
  max-height: 360px; 
  padding-right: 8px; /* Evita que la barra de scroll monte sobre las tarjetas */
  padding-bottom: 24px; /* Espacio de seguridad para no cortar la última tarjeta */
}
.step-scroll::-webkit-scrollbar {
  width: 5px;
}
.step-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}
.step-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}
.step-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

.step-intro { color:var(--cfg-muted); font-size:12px; line-height:1.6; margin:0 0 18px; }
.options { display:flex; flex-direction:column; gap:9px; }
.option-card {
  position:relative; width:100%; text-align:left; border:1px solid var(--cfg-border);
  background:var(--cfg-card); color:var(--cfg-text); border-radius:14px; padding:13px;
  cursor:pointer; transition:.18s ease; display:grid; grid-template-columns:54px 1fr auto; gap:12px; align-items:center;
}
.option-card:hover { background:var(--cfg-card-2); border-color:rgba(255,255,255,.18); transform:translateY(-1px); }
.option-card.selected { border-color:rgba(255,255,255,.65); background:#20242a; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; }
.option-card.disabled { opacity:.38; cursor:not-allowed; transform:none; }
.option-thumb {
  width:54px; height:54px; border-radius:11px; background:#252a31; overflow:hidden;
  display:grid; place-items:center; color:#aeb3bb; font-size:17px;
}
.option-thumb img { width:100%; height:100%; object-fit:cover; }
.option-info strong { display:block; font-size:12px; margin-bottom:4px; }
.option-info span { display:block; font-size:10px; color:var(--cfg-muted); line-height:1.45; }
.option-price { font-size:11px; font-weight:800; white-space:nowrap; }
.selection-mark {
  position:absolute; right:11px; top:11px; width:16px; height:16px; border:1px solid #60656e; border-radius:50%;
  display:grid; place-items:center; font-size:8px; color:transparent;
}
.option-card.selected .selection-mark { background:#fff; border-color:#fff; color:#111; }

.skip-card {
  margin-top:9px; width:100%; padding:11px 13px; border:1px dashed #383c43; background:transparent;
  color:#aeb1b8; border-radius:12px; cursor:pointer; font-size:11px; text-align:left;
}
.skip-card.selected { border-style:solid; border-color:#858991; color:#fff; background:#191c20; }

.multi-option { grid-template-columns:54px 1fr auto; }
.checkbox-mark { border-radius:5px; }
.option-card.multi.selected .checkbox-mark { border-radius:5px; }

.guide-link {
  display:inline-flex; align-items:center; gap:6px; margin:15px 0 3px; color:#ddd;
  font-size:10px; font-weight:700; border:0; padding:0; background:none; cursor:pointer;
}
.guide-link i { font-size:9px; }

.config-footer {
  border-top:1px solid var(--cfg-border); padding:16px 25px 22px; background:#101216;
}
.price-summary { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:13px; }
.price-summary span { display:block; font-size:11px; font-weight:700; }
.price-summary small { color:var(--cfg-muted); display:block; font-size:9px; margin-top:3px; }
.price-summary strong { font-size:22px; letter-spacing:-.04em; }
.footer-actions { display:grid; grid-template-columns:42px 1fr; gap:8px; }
.btn-back, .btn-next {
  border:1px solid var(--cfg-border); min-height:46px; border-radius:12px; cursor:pointer; font-weight:800;
}
.btn-back { background:#191c21; color:#b8bbc2; }
.btn-next { background:#f2f2f2; color:#0d0e10; }
.btn-next:hover { background:#fff; }
.btn-next:disabled { opacity:.35; cursor:not-allowed; }
.btn-back:disabled { opacity:.25; cursor:not-allowed; }

.mobile-price { display:none; }

.guide-modal { position:fixed; inset:0; z-index:20; display:none; }
.guide-modal.open { display:block; }
.guide-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(7px); }
.guide-card {
  position:absolute; width:min(480px, calc(100vw - 30px)); max-height:80vh; overflow:auto;
  left:50%; top:50%; transform:translate(-50%,-50%); background:#15181c; border:1px solid var(--cfg-border);
  border-radius:20px; padding:28px; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.guide-card h3 { font-size:26px; margin:7px 0 16px; letter-spacing:-.04em; }
.guide-close { position:absolute; right:18px; top:18px; font-size:18px; }
.guide-card p { color:#b0b3ba; font-size:12px; line-height:1.65; }
.guide-card .guide-item { padding:12px 0; border-top:1px solid var(--cfg-border); }
.guide-card .guide-item strong { font-size:12px; }
.guide-card .guide-item p { margin:5px 0 0; }

.toast {
  position:fixed; z-index:30; left:50%; bottom:25px; transform:translate(-50%,20px);
  background:#f2f2f2; color:#111; border-radius:12px; padding:12px 16px; display:flex; gap:9px; align-items:center;
  font-size:11px; font-weight:800; opacity:0; pointer-events:none; transition:.2s;
}
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast i { color:#168044; }
/* =========================================================
   REGLAS DE RESPONSIVIDAD Y FIXES VISUALES
========================================================= */

/* Bloqueo de gestos por defecto en el lienzo para mejorar el OrbitControls táctil */
.three-canvas canvas {
  touch-action: none;
}

@media (max-width: 900px) {
  body.configurator-page {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .config-header {
    height: 60px;
    padding: 0 16px;
    grid-template-columns: 1fr auto;
  }

  .config-header-center {
    display: none;
  }

  .configurator {
    height: auto;
    min-height: calc(100vh - 60px);
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  /* El visor 3D ocupa la parte superior de la pantalla */
  .viewer-panel {
    height: 42vh;
    min-height: 320px;
    width: 100%;
    flex: none;
    position: relative;
    z-index: 2;
  }

  /* Ajuste de precio móvil para evitar solapamiento con la ayuda visual */
  .mobile-price {
    display: block;
    position: absolute;
    z-index: 3;
    right: 18px;
    top: 18px;
    font-size: 15px;
    font-weight: 800;
    background: rgba(24, 27, 32, 0.85);
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--cfg-border);
    backdrop-filter: blur(8px);
  }

  .viewer-top h1 {
    font-size: 20px;
  }

  .viewer-top p {
    font-size: 11px;
  }

  .viewer-help {
    left: 16px;
    bottom: 14px;
    gap: 10px;
  }

  .viewer-help span:not(.viewer-status) {
    display: none;
  }

  /* El panel de configuración se expande verticalmente debajo del visor */
  .config-panel {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 0;
    border-top: 1px solid var(--cfg-border);
  }

  .step-scroll {
    flex: 1;
    min-height: 0;
    max-height: none; /* Elimina el límite de 35vh para dar cabida a todo el listado */
    padding-bottom: 40px; /* Margen amplio para deslizar cómodamente sobre el footer */
  }
}

@media (max-width: 520px) {
  .config-exit {
    font-size: 0;
  }

  .config-exit i {
    font-size: 14px;
  }

  .viewer-panel {
    min-height: 280px;
    height: 38vh;
  }

  .config-panel-head, 
  .step-scroll, 
  .config-footer,
  .progress {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Reestructuración de las tarjetas de opciones para pantallas pequeñas */
  .option-card {
    grid-template-columns: 44px 1fr auto;
    gap: 10px;
    padding: 10px;
  }

  .option-thumb {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .option-info strong {
    font-size: 11px;
  }

  .option-info span {
    font-size: 9.5px;
  }

  .option-price {
    font-size: 10px;
  }

  .footer-actions {
    grid-template-columns: 44px 1fr;
  }
}