/* Racks Point - configuradores de carga media y pesada.
   media.html y pesada.html eran el MISMO fichero salvo 17 lineas de 975: este CSS estaba duplicado
   entero en los dos, asi que cualquier arreglo habia que hacerlo por partida doble (y mas de una vez
   se hizo en uno solo). Aqui vive una sola copia.

   NO se incluye la regla de `.mat-grid .iso-top` con url(#gridPattern): esa se queda inline en cada
   HTML porque el fragmento solo resuelve fiable dentro del propio documento.
   Tampoco lleva atributo `media` el <link>: las ~50 lineas de @media print de mas abajo SON el motor
   del PDF, y con media="screen" el PDF saldria en crudo. */

/* ==========================================================================
           ESTILOS GENERALES WEB
           ========================================================================== */
        body { margin: 0; padding: 0; background-color: transparent; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #002B49; }
        .conf-express-wrapper { width: 100%; background: #ffffff;    padding: 5px 0; }
        .conf-express-container { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: stretch; justify-content: space-between; gap: 20px; flex-wrap: nowrap; }

        /* TARJETA IZQUIERDA (CONTROLES) */
        .conf-left-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; flex: 0 0 420px; box-sizing: border-box; }
        .left-card-title { font-size: 10px; font-weight: 800; color: #002B49; text-transform: uppercase; margin-bottom: 15px; border-bottom: 1px solid #cbd5e0; padding-bottom: 4px; }
        /* Dos columnas IGUALES, la misma distribución que el layout de producto: los deslizadores
           cortos van de dos en dos al 50 %, y lo que necesita sitio (material, altura de la 1ª balda
           y protecciones) ocupa la fila entera con .span-full.
           OJO al `minmax(0, 1fr)`: un `1fr` a secas es `minmax(auto, 1fr)`, así que una etiqueta larga
           con `white-space: nowrap` —«Altura 1ª balda (suelo)»— ensancha su columna y la rejilla salía
           partida en 422 px y 159 px, con ese deslizador espachurrado en la estrecha. El `0` deja que
           las dos columnas midan exactamente lo mismo. */
        .conf-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-content: start; }
        .conf-group { display: flex; flex-direction: column; grid-column: span 1; }
        .span-full { grid-column: 1 / -1; }
        .conf-label { font-size: 9.5px; text-transform: uppercase; font-weight: 800; color: #64748b; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; white-space: nowrap; letter-spacing: -0.2px; }
        .val-badge { color: #FF6700; font-weight: 900; font-size: 10.5px; background: #fff4ed; padding: 2px 4px; border-radius: 3px; }
        
        .conf-select { background: #ffffff; border: 1px solid #cbd5e0; color: #002B49; padding: 8px 10px; border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer; transition: 0.2s; appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23002B49%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 10px top 50%; background-size: 8px auto; width: 100%; }
        
        .range-container { width: 100%; display: flex; align-items: center; padding: 4px 0; }
        .conf-range { -webkit-appearance: none; width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; outline: none; transition: 0.2s; margin: 0; }
        .conf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #FF6700; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: transform 0.1s, background 0.2s; border: 2px solid #fff; }
        .conf-range::-webkit-slider-thumb:hover { transform: scale(1.15); background: #e55c00; }

        /* MATERIAL Y PROTECCIONES */
        .material-selector { display: flex; gap: 10px; width: 100%; justify-content: flex-start; padding: 4px 0; flex-wrap: wrap; }
        .ui-swatch-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #cbd5e0; background: #fff; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; padding: 0; position: relative; }
        .ui-swatch-btn.active { border-color: #FF6700; background: #fff; box-shadow: 0 0 0 3px rgba(255,103,0,0.15); transform: scale(1.05); }
        .mat-btn-indic::after { content: ''; position: absolute; width: 6px; height: 6px; background: #FF6700; border-radius: 50%; bottom: -10px; left: 50%; transform: translateX(-50%); opacity: 0; transition: 0.2s; }
        .mat-btn-indic.active::after { opacity: 1; bottom: -8px; }
        .mat-circle { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); transition: 0.2s; }
        
        .swatch-agl { background: #e0a96d; } 
        .swatch-orange { background: #FF6700; } 
        .swatch-gal { background: #dbe2e8; } 
        .swatch-grid { background: repeating-linear-gradient(45deg, #cbd5e0, #cbd5e0 2px, #f8fafc 2px, #f8fafc 4px); }

        /* Ocultar botones especiales por defecto, se muestran por JS */

        /* EXTRAS v2 (2026-08-07): tarjetas de producto con foto real, nombre visible, precio y
           stepper grande (40px en movil). Mismos ids y handlers que la version compacta. */
        .extras-container { display:flex; flex-direction:column; gap:8px; width:100%; padding:2px 0; }
        .prot-color-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
        .prot-color-lbl { font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.4px; }
        .pcolor-btn { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; border:2px solid #e2e8f0; background:#fff; cursor:pointer; font-size:13px; font-weight:700; color:#64748b; transition:all .15s ease; }
        .pcolor-btn:hover { border-color:#cbd5e0; }
        .pcolor-btn.active { border-color:#FF6700; background:#fff8f3; color:#0f172a; box-shadow:0 0 0 2px rgba(255,103,0,.12); }
        .pcolor-dot { width:16px; height:16px; border-radius:50%; border:2px solid; display:inline-block; flex:0 0 auto; }
        .prot-card { display:flex; align-items:center; gap:10px; padding:8px 10px; border:2px solid #e2e8f0; border-radius:12px; background:#fff; transition:all .15s ease; }
        .prot-card:has(.icon-box-btn.active) { border-color:#FF6700; background:#fff8f3; box-shadow:0 0 0 2px rgba(255,103,0,.12); }
        .extras-container .prot-pick.icon-box-btn { flex:0 0 auto; width:54px; height:54px; border-radius:10px; border:2px solid #e2e8f0; background:#f8fafc; padding:2px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:none; transition:all .15s ease; }
        .extras-container .prot-pick img { width:100%; height:100%; object-fit:contain; border-radius:7px; filter:grayscale(60%) opacity(.75); transition:all .2s ease; }
        .extras-container .prot-pick.active { border-color:#FF6700; background:#fff; }
        .extras-container .prot-pick.active img { filter:none; transform:scale(1.05); }
        .prot-info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
        .prot-name { font-size:13px; font-weight:800; color:#0f172a; line-height:1.25; }
        .prot-info small { font-size:12px; color:#64748b; font-weight:600; }
        .prot-qty-ctl { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
        .prot-qty-ctl button { width:34px; height:34px; border:2px solid #cbd5e0; background:#fff; border-radius:9px; cursor:pointer; font-size:18px; font-weight:700; color:#475569; padding:0; line-height:1; transition:all .15s ease; }
        .prot-qty-ctl button:hover { border-color:#FF6700; color:#FF6700; }
        .prot-qty-ctl b { min-width:24px; text-align:center; font-size:16px; color:#0f172a; }
        @media (max-width: 640px) {
            .prot-qty-ctl button { width:40px; height:40px; font-size:20px; }
            .extras-container .prot-pick.icon-box-btn { width:60px; height:60px; }
            .prot-name { font-size:14px; }
        }
        /* EXTRAS compactos en la columna de accion (escritorio, modo libre). */
        .conf-action-col .extras-side { margin-bottom: 0; width: 100%; }
        /* Prueba de Carga 3D en la columna izquierda (escritorio, modo libre). */
        .conf-controls .conf-storage-calc.sc-izquierda { grid-column: 1 / -1; margin-top: 6px; }
        /* Caja de stats en la columna de accion: el rotulo hace wrap, nunca se recorta. */
        .conf-action-col .stat-col { overflow: visible; }
        .conf-action-col .stat-lbl { white-space: normal; }
        .extras-side .extras-container { gap:6px; }
        .extras-side .prot-card { padding:5px 8px; gap:8px; border-radius:10px; }
        .extras-side .extras-container .prot-pick.icon-box-btn { width:40px; height:40px; border-radius:8px; }
        .extras-side .prot-name { font-size:12px; }
        .extras-side .prot-info small { font-size:11px; }
        .extras-side .prot-qty-ctl { gap:4px; }
        .extras-side .prot-qty-ctl button { width:28px; height:28px; font-size:15px; border-radius:7px; }
        .extras-side .prot-qty-ctl b { min-width:20px; font-size:14px; }
        .extras-side .pcolor-btn { padding:4px 10px; font-size:12px; gap:5px; }
        .extras-side .pcolor-dot { width:13px; height:13px; }
        .icon-box-btn { flex: 1; height: 36px; border-radius: 8px; border: 2px solid #cbd5e0; background: #fff; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .icon-box-btn.active { border-color: #FF6700; background: #fff4ed; box-shadow: 0 0 0 2px rgba(255,103,0,0.15); }
        .prot-icon-colored { width: 20px; height: 20px; filter: grayscale(100%) opacity(0.35); transition: all 0.3s ease; }
        .icon-box-btn.active .prot-icon-colored { filter: grayscale(0%) opacity(1) drop-shadow(0 2px 3px rgba(218,165,32,0.4)); transform: scale(1.15); }

        /* VISUALIZADOR 3D */
        .conf-visual { flex: 1; min-height: 380px; background: #f4f6f9; border-radius: 8px; position: relative; border: 1px solid #cbd5e0; display: flex; justify-content: center; align-items: center; overflow: hidden; box-shadow: inset 0 2px 10px rgba(0,0,0,0.02); }
        /* El SVG no impone su altura intrinseca (el viewBox descolgaba el visual por debajo de
           las columnas): en absoluto llena el area, el dibujo se centra y escala solo (meet) y
           el alto del conjunto lo marcan las columnas. */
        .conf-visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
        .conf-svg { width: 100%; height: 100%; }
        .svg-anim { transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
        
        /* ESTILOS SVG Y MATERIALES */
        .iso-post, .iso-side, .iso-front, .iso-top { stroke-linejoin: round; } 
        .iso-post { fill: #002B49; stroke: #001a2c; stroke-width: 0.5; }
        
        .mat-agl .iso-top { fill: #e0a96d; stroke: #c08040; stroke-width: 0.5; }
        .mat-agl .iso-side, .mat-agl .iso-front { fill: #FF6700 !important; stroke: #cc5200 !important; stroke-width: 0.5; }
        
        .mat-orange .iso-top { fill: #ff944d; stroke: #cc5200; stroke-width: 0.5; }
        .mat-orange .iso-side, .mat-orange .iso-front { fill: #FF6700 !important; stroke: #cc5200 !important; stroke-width: 0.5; }
        
        .mat-gal .iso-top { fill: #dbe2e8; stroke: #9faec0; stroke-width: 0.5; }
        .mat-gal .iso-side, .mat-gal .iso-front { fill: #cbd5e0 !important; stroke: #a0aec0 !important; stroke-width: 0.5; }
        
        .mat-grid .iso-side, .mat-grid .iso-front { fill: #cbd5e0 !important; stroke: #a0aec0 !important; stroke-width: 0.5; }




        
        .acc-prot-front { fill: #FFD700; stroke: #DAA520; stroke-width: 0.5; } 
        .acc-prot-side { fill: #DAA520; stroke: #B8860B; stroke-width: 0.5; } 
        .acc-prot-top { fill: #FFEA00; stroke: #DAA520; stroke-width: 0.5; } 
        /* Barandilla: se dibuja como UN trazo doblado, no como caras, así que aquí manda `stroke` y
           el `fill` va a none. `round` en cap y join es lo que redondea los codos de arriba. */
        .acc-rail, .acc-rail-edge, .acc-rail-hl { fill: none; stroke-linecap: round; stroke-linejoin: round; }
        .acc-rail-edge { stroke: #B8860B; }
        .acc-rail { stroke: #FFD700; }
        .acc-rail-hl { stroke: #FFF3B0; opacity: .65; }
        .prot-naranja .acc-rail-edge { stroke: #933B00; }
        .prot-naranja .acc-rail { stroke: #FF7A1A; }
        .prot-naranja .acc-rail-hl { stroke: #FFC79E; }

        .acc-tube { fill: #FFD700; stroke: #B8860B; stroke-width: 0.5; }
        .acc-tube-dark { fill: #DAA520; stroke: #B8860B; stroke-width: 0.5; }
        .prot-naranja .acc-prot-front { fill: #FF7A1A; stroke: #D45500; }
        .prot-naranja .acc-prot-side { fill: #E05E00; stroke: #B34700; }
        .prot-naranja .acc-prot-top { fill: #FF9445; stroke: #D45500; }
        .prot-naranja .acc-tube { fill: #FF7A1A; stroke: #B34700; }
        .prot-naranja .acc-tube-dark { fill: #D45500; stroke: #933B00; }
        
        .iso-dim-line { stroke: #002B49; stroke-width: 1.5; opacity: 0.5; }
        .iso-dim-text { font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; fill: #002B49; font-weight: 800; paint-order: stroke; stroke: #ffffff; stroke-width: 3px; dominant-baseline: middle; }
        
        .pkg-face { fill: rgba(0, 100, 200, 0.15); stroke: rgba(0, 100, 200, 0.6); stroke-width: 0.5; } 
        .pkg-face-top { fill: rgba(0, 120, 240, 0.25); stroke: rgba(0, 100, 200, 0.6); stroke-width: 0.5; }
        .plt-face { fill: rgba(139, 69, 19, 0.15); stroke: rgba(139, 69, 19, 0.5); stroke-width: 0.5; } 
        .plt-face-top { fill: rgba(160, 82, 45, 0.25); stroke: rgba(139, 69, 19, 0.5); stroke-width: 0.5; }

        /* COLUMNA DERECHA */
        .conf-action-col { flex: 0 0 240px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; }
        .conf-storage-calc { background: #fff3e0; border: 1px solid #ffe0b2; border-radius: 8px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
        .conf-storage-calc .storage-title { grid-column: 1 / -1; }
        .conf-storage-calc .conf-group { min-width: 0; margin-bottom: 0; }
        .conf-storage-calc .conf-select { width: 100%; min-width: 0; box-sizing: border-box; }
        .storage-title { font-size: 10px; font-weight: 800; color: #e65100; text-transform: uppercase; margin-bottom: 0px; border-bottom: 1px solid #ffd180; padding-bottom: 4px;}
        .dim-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; }
        .dim-input { width: 100%; box-sizing: border-box; background: #ffffff; border: 1px solid #cbd5e0; color: #002B49; padding: 4px 2px; border-radius: 4px; font-size: 10px; font-weight: 800; text-align: center; }
        .hidden { display: none !important; }
        
        .conf-stats-box { background: #e3f2fd; border: 1px solid #bbdefb; border-radius: 8px; padding: 8px; display: none; grid-template-columns: 1fr 1fr; gap: 4px; }
        .stat-col { display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;}
        .stat-lbl { font-size: 8.5px; color: #0277bd; text-transform: uppercase; text-align: center; font-weight: 800; line-height: 1.2; white-space: nowrap; width: 100%;} 
        .stat-val { font-weight: 900; font-size: 11px; color: #01579b; line-height: 1.1; text-align: center; white-space: nowrap; }
        .stats-desktop { grid-column: 1 / -1; margin-top: 0; }
        .stats-desktop.active { display: grid; }

        .conf-price-wrapper { margin-top: 0; text-align: right; background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; }
        .conf-price-label { display: none; } /* diseño carga ligera: sin rótulo */
        /* ===== PRECIO estilo CARGA LIGERA en UNA SOLA LÍNEA (2026-07-20): cifra grande oscura +
           € naranja + SIN IVA + «X,XX € IVA incl.» en la misma fila, sin partirse en ningún ancho ===== */
        .rp-price-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; flex-wrap: nowrap; }
        /* Dígitos TABULARES: mismo ancho por dígito → el precio corre sin que el layout vibre */
        #ind-price, #ind-price-iva { font-variant-numeric: tabular-nums; }
        .conf-price { display: inline-flex; align-items: baseline; }
        .conf-price .rp-pv { display: inline-flex; align-items: flex-start; font-size: 2.4rem; font-weight: 900; color: #0f172a; letter-spacing: -1.5px; line-height: 0.9; }
        .conf-price .rp-cur { font-size: 1.3rem; font-weight: 800; color: #f2600a; margin-left: 4px; margin-top: 4px; }
        .conf-price .rp-tax { display: inline-block; font-size: 0.75rem; color: #0f172a; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 7px; }
        #ind-price-iva.rp-ivainc { font-size: 0.72rem !important; color: #64748b !important; font-weight: 600 !important; margin: 0 !important; display: inline !important; white-space: nowrap !important; }
        @media (max-width: 600px) {
            .conf-price .rp-pv { font-size: 1.75rem; }
            .conf-price .rp-cur { font-size: 1rem; margin-top: 2px; }
            .conf-price .rp-tax { font-size: 0.66rem; margin-left: 5px; }
            #ind-price-iva.rp-ivainc { font-size: 0.66rem !important; }
        }

        .conf-price { font-size: 32px; font-weight: 900; color: #002B49; display: block; margin-bottom: 12px; line-height: 1; letter-spacing: -1px; white-space: nowrap;}
        
        .conf-btn { background-color: #FF6700; color: white; border: none; padding: 12px 10px; border-radius: 6px; font-weight: 900; text-transform: uppercase; font-size: 13px; cursor: pointer; transition: 0.3s; text-decoration: none; display: block; box-shadow: 0 4px 12px rgba(255,103,0,0.25); text-align: center; }
        .conf-btn:hover { background-color: #e55c00; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,103,0,0.4); }
        /* ===== BOTONES RESPONSIVE (rediseño 2026-07-20): una sola línea, altura fija y aire en
           tablet/móvil; por debajo de 600px entran las etiquetas cortas (.btxt-short). ===== */
        .btxt-short { display: none; }
        @media (max-width: 1024px) {
            .conf-btn, .pdf-btn { white-space: nowrap !important; height: 44px !important; min-height: 44px !important; padding: 0 12px !important; font-size: 13px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; box-sizing: border-box !important; }
            .pdf-btn { margin-top: 0 !important; }
            .conf-price-wrapper { display: flex !important; flex-direction: column !important; gap: 8px !important; text-align: left !important; }
        }
        @media (max-width: 600px) {
            .btxt-full { display: none !important; }
            .btxt-short { display: inline !important; }
            .conf-price-wrapper { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; row-gap: 8px !important; column-gap: 4% !important; }
            .conf-price-label { flex: 1 1 36% !important; margin: 0 !important; }
            .rp-price-row { flex: 1 1 100% !important; }
            .conf-btn, .pdf-btn { flex: 1 1 48% !important; }
        }


        .pdf-btn { display: block; margin-top: 8px; padding: 10px 10px; background-color: transparent; border: 1px solid #cbd5e0; color: #002B49; font-weight: 800; text-transform: uppercase; font-size: 10.5px; text-align: center; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; }
        .pdf-btn:hover { background-color: #e2e8f0; border-color: #002B49; }

        @media (max-width: 1200px) {
            .conf-express-container { flex-direction: column; }
            .conf-left-card { width: 100%; flex: auto; box-sizing: border-box; }
            .conf-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .conf-visual { width: 100%; height: 320px; }
            .conf-action-col { width: 100%; flex: auto; gap: 12px; }
            .conf-price-wrapper { display: flex; align-items: center; justify-content: space-between; margin-top: 0; } 
            .conf-price { margin-bottom: 0; font-size: 28px; }
            /* La tarjeta de cargas se mantiene visible también en móvil (no existe variante stats-mobile). */
            .stats-desktop.active { display: grid !important; }
        }
        @media (max-width: 600px) { 
            .conf-controls { grid-template-columns: 1fr; } 
            .hide-mobile { display: none; }
            .conf-price { font-size: 26px; } 
        }

        /* ==========================================================================
           MOTOR PDF (CSS PRINT) - VERSIÓN INGENIERÍA CORPORATIVA
           ========================================================================== */
        @media print {
            @page { size: A4; margin: 0; }
            body { background: white !important; padding: 0 !important; margin: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-family: 'Segoe UI', Arial, sans-serif; color: #002B49; }
            
            .conf-express-wrapper { display: none !important; }
            #print-section { display: block !important; width: 100%; }
            
            .pdf-page { width: 210mm; min-height: 297mm; padding: 20mm; box-sizing: border-box; page-break-after: always; position: relative; background: #fff; }
            
            /* Cabecera Corporativa */
            .pdf-header { text-align: left; border-bottom: 4px solid #FF6700; padding-bottom: 15px; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: flex-end; }
            .pdf-title { font-size: 28px; font-weight: 900; margin: 0 0 5px 0; letter-spacing: -1px; text-transform: uppercase; color: #002B49; }
            .pdf-subtitle { font-size: 14px; color: #64748b; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: 1px; }
            .pdf-logo { font-size: 24px; font-weight: 900; color: #FF6700; letter-spacing: -2px; }

            /* Tarjetas de Dimensiones Generales (3 Columnas) */
            .pdf-section-title { font-size: 14px; font-weight: 800; color: #002B49; border-bottom: 2px solid #e2e8f0; margin-bottom: 15px; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
            .pdf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 30px; }
            .pdf-dim-card { background: #f8fafc; border: 1px solid #cbd5e0; padding: 15px; border-radius: 8px; text-align: center; }
            .pdf-dim-lbl { font-size: 10px; color: #64748b; text-transform: uppercase; font-weight: 800; display: block; margin-bottom: 5px; }
            .pdf-dim-val { font-size: 24px; color: #FF6700; font-weight: 900; display: block; line-height: 1; }

            /* BOM (Bill of Materials) */
            .pdf-bom-box { background: #ffffff; border: 1px solid #cbd5e0; border-radius: 8px; padding: 20px; margin-bottom: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
            .pdf-bom-list { list-style: none; padding: 0; margin: 0; }
            .pdf-bom-list li { padding: 8px 0; border-bottom: 1px dashed #e2e8f0; font-size: 12px; display: flex; align-items: center; }
            .pdf-bom-list li:last-child { border-bottom: none; }
            .pdf-bom-list strong { color: #FF6700; font-size: 14px; margin-right: 10px; width: 35px; display: inline-block; text-align: right; }
            
            /* Datos Técnicos */
            .pdf-specs-list { list-style: none; padding: 0; margin: 0; }
            .pdf-specs-list li { font-size: 12px; margin-bottom: 8px; color: #334155; }
            .pdf-specs-list b { color: #002B49; }

            /* Bloque Final de Precio y Link */
            .pdf-price-block { background: #fff4ed; border: 2px solid #FF6700; border-radius: 8px; padding: 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
            .pdf-url-box { font-size: 10px; color: #64748b; max-width: 60%; }
            .pdf-url-box a { color: #0277bd; text-decoration: none; font-weight: bold; word-break: break-all; }
            .pdf-price-val { font-size: 38px; font-weight: 900; color: #002B49; }
            .pdf-price-lbl { font-size: 12px; color: #FF6700; font-weight: 800; text-transform: uppercase; display: block; text-align: right; }

            /* PÁGINA 2: Escenarios y Simulaciones */
            .pdf-sim-card { border: 1px solid #cbd5e0; border-radius: 8px; overflow: hidden; background: #ffffff; page-break-inside: avoid; display: flex; flex-direction: column;}
            .pdf-sim-header { background: #f1f5f9; padding: 10px; border-bottom: 1px solid #cbd5e0; font-size: 11px; font-weight: 800; color: #002B49; text-transform: uppercase; text-align: center; }
            .pdf-svg-container { height: 210px; display: flex; align-items: center; justify-content: center; padding: 10px; }
            .pdf-svg-container svg { width: 100%; height: 100%; }
            .pdf-sim-footer { font-size: 9.5px; padding: 8px; text-align: center; color: #64748b;  background: #fafafa; font-weight: bold; margin-top: auto;}

            /* Llamada a la acción y pie de página */
            .pdf-cta-button { display: block; background: #FF6700; color: white !important; text-align: center; padding: 15px; border-radius: 8px; font-size: 18px; font-weight: 900; text-transform: uppercase; text-decoration: none; margin-top: 40px; }
            .pdf-footer-text { position: absolute; bottom: 15mm; left: 20mm; right: 20mm; text-align: center; font-size: 9px; color: #94a3b8;  padding-top: 10px; }
        }
/* Este bloque venía copiado de la web pública, donde arregla el responsive del catálogo, el
   megamenú, el pie y los widgets SEO. Aquí dentro no hay nada de eso: el configurador es un
   documento suelto que se sirve en un iframe. Solo se conserva lo que SÍ tiene efecto — el body
   del propio iframe, y h1/p/span/li porque el generador de PDF los usa (#print-section monta
   h1, p, ul y li). Si algún día se vuelve a pegar el bloque entero, sobra todo lo demás. */
@media (max-width: 768px) {
    body { overflow-x: hidden !important; width: 100vw !important; max-width: 100% !important; }
    h1 { font-size: 1.8rem !important; line-height: 1.2 !important; }
    p, span, li { word-wrap: break-word !important; }
}