/* ========================================================= personalize.css — FULL (Light/Dark) + Responsive Fixes Requiere: ========================================================= */ /* ------------------------- 1) TOKENS (Light default) -------------------------- */ :root{ --pl-bg: #ffffff; --pl-card: #ffffff; --pl-text: #101318; --pl-muted: rgba(16,19,24,.68); --pl-border: rgba(16,19,24,.12); --pl-border-strong: rgba(16,19,24,.18); --pl-soft: rgba(16,19,24,.04); --pl-soft-2: rgba(16,19,24,.06); --pl-shadow: 0 18px 55px rgba(0,0,0,.10); --pl-radius: 22px; --pl-radius-sm: 16px; --pl-accent: rgba(13,110,253,.22); --pl-accent-strong: rgba(13,110,253,.38); --pl-overlay: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.48)); } /* ------------------------- 2) TOKENS (Dark) -------------------------- */ [data-bs-theme="dark"]{ --pl-bg: #0f1113; --pl-card: rgba(255,255,255,.035); --pl-text: rgba(255,255,255,.92); --pl-muted: rgba(255,255,255,.64); --pl-border: rgba(255,255,255,.09); --pl-border-strong: rgba(255,255,255,.14); --pl-soft: rgba(255,255,255,.05); --pl-soft-2: rgba(255,255,255,.075); --pl-shadow: 0 26px 80px rgba(0,0,0,.55); --pl-accent: rgba(13,110,253,.22); --pl-accent-strong: rgba(13,110,253,.34); --pl-overlay: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.72)); } /* ------------------------- 3) SECTION WIDTH (más ancho) Solo afecta el configurador -------------------------- */ #productConfigSection.container{ /* Bootstrap xl ~1320; lo subimos un poco */ max-width: 1460px; } @media (max-width: 1600px){ #productConfigSection.container{ max-width: 1400px; } } @media (max-width: 1400px){ #productConfigSection.container{ max-width: 1320px; } } /* Fondo suave (premium) */ #productConfigSection{ position: relative; scroll-margin-top: 110px; } #productConfigSection > *{ position:relative; z-index:1; } /* ------------------------- 4) LAYOUT BASE -------------------------- */ .pl-config{ display: grid; grid-template-columns: 360px 1fr; gap: 22px; align-items: start; } /* Seguridad anti-desborde */ .pl-config, .pl-config *{ min-width: 0; word-break: break-word; } /* ------------------------- 5) LEFT NAV -------------------------- */ .pl-config__nav{ position: sticky; top: 110px; padding: 18px; border-radius: var(--pl-radius); background: radial-gradient(900px 520px at 12% 0%, var(--pl-soft), transparent 55%), linear-gradient(180deg, var(--pl-card), rgba(255,255,255,.015)); border: 1px solid var(--pl-border); box-shadow: var(--pl-shadow); } .pl-config__navHead{ padding: 6px 6px 14px; border-bottom: 1px solid var(--pl-border); margin-bottom: 10px; } .pl-config__navTitle{ letter-spacing: .16em; font-size: .78rem; font-weight: 900; color: var(--pl-muted); } .pl-config__navSub{ margin-top: 6px; font-size: 1rem; color: var(--pl-text); font-weight: 800; opacity: .92; } .pl-config__navList{ display: grid; gap: 10px; padding-top: 12px; } /* NAV ITEM */ .pl-config__navItem{ width: 100%; text-align: left; border-radius: 18px; padding: 12px 14px; border: 1px solid var(--pl-border); background: rgba(255,255,255,.02); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; display: flex; flex-direction: column; gap: 2px; outline: none; color: var(--pl-text); } .pl-config__navItem:hover{ transform: translateY(-1px); border-color: var(--pl-border-strong); box-shadow: 0 16px 50px rgba(0,0,0,.25); } .pl-config__navItem.is-active{ background: rgba(255,255,255,.05); border-color: var(--pl-border-strong); box-shadow: inset 0 0 0 1px var(--pl-accent-strong); } .pl-config__navLabel{ font-weight: 900; letter-spacing: .12em; font-size: .78rem; text-transform: uppercase; color: var(--pl-text); } .pl-config__navHint{ font-size: .92rem; color: var(--pl-muted); } /* Focus */ .pl-config__navItem:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--pl-accent); border-color: var(--pl-border-strong); } /* ------------------------- 6) SUMMARY (izquierda) -------------------------- */ .pl-cfgSummary{ margin-top: 12px; border: 1px solid var(--pl-border); background: rgba(0,0,0,.18); border-radius: 18px; padding: 12px; } [data-bs-theme="light"] .pl-cfgSummary{ background: rgba(16,19,24,.03); } .pl-cfgSummary__title{ font-weight: 900; letter-spacing: .18em; font-size: .74rem; color: var(--pl-muted); margin-bottom: 10px; opacity: .9; } .pl-cfgSummary__list{ display: grid; gap: 8px; } .pl-cfgSummary__row{ border: 1px solid var(--pl-border); border-radius: 14px; padding: 8px 10px; background: rgba(255,255,255,.02); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; } .pl-cfgSummary__k{ font-size: .72rem; letter-spacing: .12em; font-weight: 900; color: var(--pl-muted); text-transform: uppercase; } .pl-cfgSummary__v{ font-weight: 800; font-size: .94rem; color: var(--pl-text); opacity: .92; text-align: right; } .pl-cfgSummary__empty{ color: var(--pl-muted); font-size: .92rem; line-height: 1.45; } /* ------------------------- 7) RIGHT DETAIL -------------------------- */ .pl-config__detail{ border-radius: var(--pl-radius); background: radial-gradient(1100px 520px at 10% 0%, var(--pl-soft), transparent 56%), linear-gradient(180deg, var(--pl-card), rgba(255,255,255,.012)); border: 1px solid var(--pl-border); box-shadow: var(--pl-shadow); overflow: hidden; } /* HERO */ .pl-config__hero{ position: relative; height: 340px; background: var(--pl-soft); overflow: hidden; } .pl-config__img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform .35s ease, filter .35s ease; } .pl-config__hero::after{ content:""; position:absolute; inset:0; background: radial-gradient(1200px 520px at 8% 0%, rgba(0,0,0,.30), transparent 60%), var(--pl-overlay); pointer-events:none; } .pl-config__detail:hover .pl-config__img{ transform: scale(1.04); filter: saturate(1.06); } .pl-config__badge{ position: absolute; left: 18px; bottom: 18px; z-index: 2; padding: 10px 14px; border-radius: 999px; font-weight: 900; letter-spacing: .12em; font-size: .75rem; color: #fff; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.40); backdrop-filter: blur(8px); } /* GRID */ .pl-config__grid{ padding: 18px; display: grid; grid-template-columns: 1fr 420px; /* centro + opciones */ gap: 16px; align-items: start; } /* ------------------------- 8) CARDS -------------------------- */ .pl-configCard{ border-radius: var(--pl-radius-sm); border: 1px solid var(--pl-border); background: radial-gradient(900px 420px at 0% 0%, rgba(255,255,255,.06), transparent 58%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); padding: 14px; } [data-bs-theme="light"] .pl-configCard{ background: linear-gradient(180deg, rgba(16,19,24,.03), transparent); } .pl-configCard--note{ grid-column: 1 / -1; } .pl-configCard__title{ margin: 0 0 6px; font-size: 1.28rem; font-weight: 900; color: var(--pl-text); } .pl-configCard__desc{ margin: 0 0 10px; color: var(--pl-muted); line-height: 1.55; max-width: 66ch; } .pl-configCard__subtitle{ margin: 0 0 12px; letter-spacing: .18em; font-size: .78rem; font-weight: 900; color: var(--pl-muted); } /* ------------------------- 9) CHIPS -------------------------- */ .pl-chipRow{ display: flex; flex-wrap: wrap; gap: 8px; } .pl-chip{ display: inline-flex; align-items: center; padding: .30rem .58rem; border-radius: 999px; border: 1px solid var(--pl-border); background: rgba(255,255,255,.045); font-size: .84rem; color: var(--pl-text); } /* ------------------------- 10) KV (Detalles) -------------------------- */ .pl-kv{ margin: 0; display: grid; gap: 10px; } .pl-kv__row{ display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,.10); } [data-bs-theme="light"] .pl-kv__row{ border-bottom-color: rgba(16,19,24,.12); } .pl-kv__row:last-child{ border-bottom: 0; padding-bottom: 0; } .pl-kv dt{ margin: 0; color: var(--pl-muted); font-weight: 700; } .pl-kv dd{ margin: 0; color: var(--pl-text); font-weight: 900; text-align: right; opacity: .92; } /* ------------------------- 11) NOTES -------------------------- */ .pl-bullets{ margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--pl-muted); } .pl-bullets li{ line-height: 1.55; } /* ------------------------- 12) OPTIONS GRID -------------------------- */ #cfgOptions{ /* para que no “colapse” cuando está vacío */ min-height: 120px; } .pl-optGrid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pl-opt{ position: relative; border: 1px solid var(--pl-border); background: rgba(255,255,255,.03); border-radius: 18px; overflow: hidden; padding: 0; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; color: var(--pl-text); } .pl-opt:hover{ transform: translateY(-1px); border-color: var(--pl-border-strong); box-shadow: 0 18px 55px rgba(0,0,0,.45); } .pl-opt.is-active{ border-color: rgba(13,110,253,.30); box-shadow: 0 0 0 2px var(--pl-accent), 0 20px 60px rgba(0,0,0,.55); } .pl-opt__img{ position: relative; height: 150px; background: var(--pl-soft); } .pl-opt__img::after{ content:""; position:absolute; inset:0; background: var(--pl-overlay); pointer-events:none; } .pl-opt__img img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.06) contrast(1.03); } .pl-opt__body{ padding: 12px 12px 14px; } .pl-opt__title{ font-weight: 900; color: var(--pl-text); font-size: .98rem; line-height: 1.15; margin-bottom: 2px; } .pl-opt__sub{ color: var(--pl-muted); font-size: .88rem; margin-bottom: 10px; } .pl-opt__chips{ display: flex; flex-wrap: wrap; gap: 6px; } .pl-opt__chips .pl-chip{ font-size: .80rem; padding: .26rem .54rem; } /* Focus */ .pl-opt:focus-visible{ outline: none; box-shadow: 0 0 0 4px var(--pl-accent); border-color: var(--pl-border-strong); } /* ------------------------- 13) RESPONSIVE (NO SE ROMPE) -------------------------- */ /* Tablets */ @media (max-width: 1199.98px){ .pl-config{ grid-template-columns: 340px 1fr; } .pl-config__grid{ grid-template-columns: 1fr 380px; } } /* <= LG */ @media (max-width: 991.98px){ .pl-config{ grid-template-columns: 1fr; gap: 14px; } /* Nav deja de ser sticky para evitar saltos */ .pl-config__nav{ position: relative; top: auto; } /* En tablet, opciones van abajo */ .pl-config__grid{ grid-template-columns: 1fr; gap: 14px; } .pl-config__hero{ height: 280px; } .pl-optGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Móvil */ @media (max-width: 575.98px){ #productConfigSection.container{ padding-left: 14px; padding-right: 14px; } .pl-config__nav{ padding: 14px; } .pl-config__detail{ border-radius: 18px; } .pl-config__grid{ padding: 14px; } .pl-config__hero{ height: 240px; } /* NAV: lista horizontal scroll (se ve pro y no rompe) */ .pl-config__navList{ display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px 2px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .pl-config__navItem{ min-width: 240px; scroll-snap-align: start; } /* Resumen compacto */ .pl-cfgSummary{ padding: 10px; } .pl-cfgSummary__row{ grid-template-columns: 1fr; gap: 4px; } .pl-cfgSummary__v{ text-align: left; } /* Opciones: 1 columna */ .pl-optGrid{ grid-template-columns: 1fr; } } /* Ultra pequeño */ @media (max-width: 390px){ .pl-config__navItem{ min-width: 220px; } .pl-configCard__title{ font-size: 1.15rem; } } /* ========================================= FIX: Botón "Cotizar" visible y no tapado ========================================= */ /* El panel derecho no debe “comerse” elementos */ .pl-config__detail{ overflow: visible; } /* Si tu botón está dentro de alguna card o al final del grid */ #productConfigSection .btn, #productConfigSection button{ position: relative; z-index: 5; } /* Botón específico (si tu ID existe) */ #kitchenHeroBtn, #cfgCtaBtn, #cfgCta, #cfgBtn{ display: inline-flex !important; align-items: center; justify-content: center; } /* Si el botón que usas es .btn.btn-light o .btn-dark, lo estilizamos pro */ #productConfigSection .btn.btn-dark, #productConfigSection .btn.btn-light{ border-radius: 999px; padding: .9rem 1.4rem; font-weight: 900; letter-spacing: .10em; } /* Para que no quede “pegado” al borde abajo en móvil */ @media (max-width: 575.98px){ #productConfigSection .btn{ width: 100%; } } /* ============================== COTIZAR: GRID DE CUADROS (CONFIG SELECCIONADA) ============================== */ #cotizarConfigWrap { margin-top: 14px; } #cotizarConfigGrid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } .pl-cfgTile{ border-radius: 14px; padding: 12px 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(0, 0, 0, .20); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .pl-cfgTile__k{ font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-bottom: 6px; } .pl-cfgTile__v{ font-size: .95rem; line-height: 1.25; font-weight: 600; color: rgb(115 115 115 / 92%); } /* Textarea como “backup”, más discreto */ #cotizarConfig{ min-height: 120px; max-height: 200px; padding: 12px 12px; border-radius: 14px; resize: vertical; white-space: pre-wrap; word-break: break-word; border: 1px dashed rgba(255,255,255,.12); background: rgba(0,0,0,.14); color: rgba(255,255,255,.78); font-size: .88rem; line-height: 1.45; } /* Scrollbar */ #cotizarConfig::-webkit-scrollbar{ width: 10px; } #cotizarConfig::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } /* ✅ Light mode */ [data-theme="light"] .pl-cfgTile{ background: rgba(255,255,255,.90); border-color: rgba(0,0,0,.10); box-shadow: inset 0 1px 0 rgba(0,0,0,.04); } [data-theme="light"] .pl-cfgTile__v{ color: rgba(0,0,0,.85); } [data-theme="light"] #cotizarConfig{ background: rgba(255,255,255,.85); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.72); } /* Responsive */ @media (max-width: 576px){ #cotizarConfigGrid{ grid-template-columns: 1fr; } } #cotizarConfigWrap #cotizarConfig{ display: none !important; } /* ========================================================= PERSONALIZE — OPCIONES FULL-WIDTH + DETALLES ABAJO (DESKTOP) Pegar al FINAL de personalize.css ========================================================= */ /* En pantallas grandes: Opciones a lo ancho, Detalles/Notas abajo */ @media (min-width: 992px){ /* Asegura 2 columnas en el panel derecho (la que ya tienes) */ .pl-config__grid{ display: grid; grid-template-columns: .95fr; gap: 16px; align-items: start; } /* 1) OPCIONES: primer card, full width */ .pl-config__grid > .pl-configCard:nth-child(1){ grid-column: 1 / -1; order: 1; } /* 2) DESCRIPCIÓN: izquierda */ .pl-config__grid > .pl-configCard:nth-child(2){ grid-column: 1 / 2; order: 2; } /* 3) DETALLES: full width abajo */ .pl-config__grid > .pl-configCard:nth-child(3){ grid-column: 1 / -1; order: 3; } /* 4) IMPORTANTE: full width abajo */ .pl-config__grid > .pl-configCard:nth-child(4){ grid-column: 1 / -1; order: 4; } /* Opciones: grid de cards más ancho */ .pl-optGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } /* Cards de opciones: altura consistente */ .pl-optCard{ border-radius: 18px; overflow: hidden; } .pl-optCard__img{ height: 120px; object-fit: cover; display:block; } } /* Si quieres 3 columnas cuando la pantalla no alcance para 4 */ @media (min-width: 992px) and (max-width: 1199.98px){ .pl-optGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================= PERSONALIZE — LIGHT MODE FIX (NO MÁS “LAVADO”) Pegar al FINAL de personalize.css ========================================================= */ :root{ --plL-text: #0f172a; --plL-muted: rgba(15,23,42,.72); --plL-border: rgba(15,23,42,.12); --plL-border2: rgba(15,23,42,.08); --plL-card: rgba(255,255,255,.92); --plL-card2: rgba(255,255,255,.86); --plL-chipBg: rgba(15,23,42,.05); --plL-chipBd: rgba(15,23,42,.14); --plL-shadow: 0 18px 55px rgba(15,23,42,.10); } /* Helper: aplica a ambos esquemas de light */ [data-theme="light"], [data-bs-theme="light"]{ color-scheme: light; } /* Fondo general del configurador (opcional) */ [data-theme="light"] #productConfigSection, [data-bs-theme="light"] #productConfigSection{ background: #f6f7f9; } /* NAV IZQUIERDO */ [data-theme="light"] .pl-config__nav, [data-bs-theme="light"] .pl-config__nav{ background: var(--plL-card); border: 1px solid var(--plL-border); box-shadow: var(--plL-shadow); color: var(--plL-text); } [data-theme="light"] .pl-config__navTitle, [data-bs-theme="light"] .pl-config__navTitle{ color: var(--plL-text); } [data-theme="light"] .pl-config__navSub, [data-bs-theme="light"] .pl-config__navSub{ color: var(--plL-muted); } /* Resumen */ [data-theme="light"] .pl-cfgSummary, [data-bs-theme="light"] .pl-cfgSummary{ background: rgba(15,23,42,.03); border: 1px solid var(--plL-border); } [data-theme="light"] .pl-cfgSummary .pl-sumTitle, [data-bs-theme="light"] .pl-cfgSummary .pl-sumTitle{ color: rgba(15,23,42,.75); } [data-theme="light"] .pl-cfgSummary .pl-sumRow, [data-bs-theme="light"] .pl-cfgSummary .pl-sumRow{ border-top-color: rgba(15,23,42,.12); } [data-theme="light"] .pl-cfgSummary .pl-sumK, [data-bs-theme="light"] .pl-cfgSummary .pl-sumK{ color: rgba(15,23,42,.70); } [data-theme="light"] .pl-cfgSummary .pl-sumV, [data-bs-theme="light"] .pl-cfgSummary .pl-sumV{ color: var(--plL-text); } /* Items del nav */ [data-theme="light"] .pl-config__navItem, [data-bs-theme="light"] .pl-config__navItem{ background: rgba(255,255,255,.90); border: 1px solid var(--plL-border); color: var(--plL-text); } [data-theme="light"] .pl-config__navLabel, [data-bs-theme="light"] .pl-config__navLabel{ color: rgba(15,23,42,.90); } [data-theme="light"] .pl-config__navHint, [data-bs-theme="light"] .pl-config__navHint{ color: rgba(15,23,42,.68); } [data-theme="light"] .pl-config__navItem:hover, [data-bs-theme="light"] .pl-config__navItem:hover{ box-shadow: 0 12px 30px rgba(15,23,42,.10); border-color: rgba(15,23,42,.18); } [data-theme="light"] .pl-config__navItem.is-active, [data-bs-theme="light"] .pl-config__navItem.is-active{ background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 3px rgba(37,99,235,.16); } /* HERO + BADGE */ [data-theme="light"] .pl-config__hero, [data-bs-theme="light"] .pl-config__hero{ background: var(--plL-card); border: 1px solid var(--plL-border); box-shadow: var(--plL-shadow); } [data-theme="light"] .pl-config__badge, [data-bs-theme="light"] .pl-config__badge{ background: rgba(15,23,42,.85); border: 1px solid rgba(255,255,255,.35); color: #fff; } /* CARDS DERECHA */ [data-theme="light"] .pl-configCard, [data-bs-theme="light"] .pl-configCard{ background: var(--plL-card); border: 1px solid var(--plL-border); box-shadow: var(--plL-shadow); color: var(--plL-text); } [data-theme="light"] .pl-configCard__title, [data-bs-theme="light"] .pl-configCard__title{ color: var(--plL-text); } [data-theme="light"] .pl-configCard__desc, [data-bs-theme="light"] .pl-configCard__desc{ color: var(--plL-muted); } [data-theme="light"] .pl-configCard__subtitle, [data-bs-theme="light"] .pl-configCard__subtitle{ color: rgba(15,23,42,.72); } /* Chips generales */ [data-theme="light"] .pl-chip, [data-bs-theme="light"] .pl-chip{ background: var(--plL-chipBg); border: 1px solid var(--plL-chipBd); color: rgba(15,23,42,.86); } /* KV + Notes */ [data-theme="light"] .pl-kv__row, [data-bs-theme="light"] .pl-kv__row{ border-top-color: rgba(15,23,42,.12); } [data-theme="light"] .pl-kv dt, [data-bs-theme="light"] .pl-kv dt{ color: rgba(15,23,42,.75); } [data-theme="light"] .pl-kv dd, [data-bs-theme="light"] .pl-kv dd{ color: var(--plL-text); } [data-theme="light"] .pl-bullets li, [data-bs-theme="light"] .pl-bullets li{ color: rgba(15,23,42,.74); } /* OPCIONES (cards) */ [data-theme="light"] .pl-optCard, [data-bs-theme="light"] .pl-optCard{ background: rgba(15,23,42,.02); border: 1px solid var(--plL-border); box-shadow: none; } [data-theme="light"] .pl-optCard:hover, [data-bs-theme="light"] .pl-optCard:hover{ box-shadow: 0 12px 30px rgba(15,23,42,.10); border-color: rgba(15,23,42,.18); } [data-theme="light"] .pl-optCard__name, [data-bs-theme="light"] .pl-optCard__name{ color: var(--plL-text); } [data-theme="light"] .pl-optCard__desc, [data-bs-theme="light"] .pl-optCard__desc{ color: rgba(15,23,42,.70); } [data-theme="light"] .pl-optCard.is-active, [data-bs-theme="light"] .pl-optCard.is-active{ background: rgba(37,99,235,.05); border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 3px rgba(37,99,235,.16); } /* Botón Cotizar dentro del configurador */ [data-theme="light"] .pl-config__cta, [data-bs-theme="light"] .pl-config__cta{ background: #0f172a; color: #fff; border: 1px solid rgba(15,23,42,.12); } /* ========================================================= FIX FINAL — RESUMEN VISIBLE EN LIGHT MODE Pegar al FINAL de personalize.css ========================================================= */ [data-theme="light"] .pl-cfgSummary, [data-bs-theme="light"] .pl-cfgSummary{ background: rgba(15,23,42,.03) !important; border: 1px solid rgba(15,23,42,.12) !important; } [data-theme="light"] .pl-cfgSummary * , [data-bs-theme="light"] .pl-cfgSummary *{ color: #0f172a !important; opacity: 1 !important; text-shadow: none !important; } [data-theme="light"] .pl-cfgSummary .pl-sumTitle, [data-bs-theme="light"] .pl-cfgSummary .pl-sumTitle{ color: rgba(15,23,42,.72) !important; font-weight: 700 !important; } [data-theme="light"] .pl-cfgSummary .pl-sumK, [data-bs-theme="light"] .pl-cfgSummary .pl-sumK{ color: rgba(15,23,42,.70) !important; font-weight: 700 !important; letter-spacing: .04em !important; } [data-theme="light"] .pl-cfgSummary .pl-sumV, [data-bs-theme="light"] .pl-cfgSummary .pl-sumV{ color: #0f172a !important; font-weight: 800 !important; } [data-theme="light"] .pl-cfgSummary .pl-sumRow, [data-bs-theme="light"] .pl-cfgSummary .pl-sumRow{ border-top-color: rgba(15,23,42,.12) !important; } /* ========================================================= MODAL — CONFIGURACIÓN SELECCIONADA (cards 2 columnas) Pegar al FINAL del CSS del modal (product.css) ========================================================= */ /* Wrapper (si existe) */ #cotizarConfigWrap{ margin-top: 10px; } /* Grid de tarjetas (usa el contenedor que estés usando) */ .pl-quoteCfgGrid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* Card */ .pl-quoteCfgCard{ border-radius: 14px; padding: 12px 12px; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)); box-shadow: 0 10px 30px rgba(0,0,0,.35); } /* Label (MATERIALES, ACABADOS...) */ .pl-quoteCfgCard .k{ font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; } /* Value (Melamina premium, Mate...) */ .pl-quoteCfgCard .v{ font-size: 1rem; font-weight: 800; line-height: 1.15; } /* Ajuste mobile */ @media (max-width: 575.98px){ .pl-quoteCfgGrid{ grid-template-columns: 1fr; } } /* Light mode */ [data-theme="light"] .pl-quoteCfgCard, [data-bs-theme="light"] .pl-quoteCfgCard{ border-color: rgba(15,23,42,.12); background: rgba(15,23,42,.04); box-shadow: 0 10px 30px rgba(15,23,42,.10); color: #0f172a; } [data-theme="light"] .pl-quoteCfgCard .k, [data-bs-theme="light"] .pl-quoteCfgCard .k{ color: rgba(15,23,42,.70); opacity: 1; } /* Dark mode */ [data-theme="dark"] .pl-quoteCfgCard, [data-bs-theme="dark"] .pl-quoteCfgCard{ color: #fff; } /* ========================================================= FIX — Modal: Configuración seleccionada (tarjetas) (corrige contraste/opacidad sin rediseñar) ========================================================= */ /* Contenedor de tarjetas (ajusta si tu wrapper tiene otro id/clase) */ #cotizarModal .pl-quoteCfgGrid, #cotizarModal .pl-cfgGrid, #cotizarModal .cfgGrid, #cotizarModal [data-cfg-grid]{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* Tarjeta */ #cotizarModal .pl-quoteCfgCard, #cotizarModal .pl-cfgCard, #cotizarModal .cfgCard, #cotizarModal [data-cfg-card]{ border-radius: 14px; padding: 12px 12px; opacity: 1 !important; filter: none !important; backdrop-filter: none !important; transform: none !important; } /* Label y valor (evita que se “apaguen”) */ #cotizarModal .pl-quoteCfgCard .k, #cotizarModal .pl-cfgCard .k, #cotizarModal .cfgCard .k, #cotizarModal [data-cfg-card] .k{ text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; opacity: .70 !important; margin-bottom: 4px; } #cotizarModal .pl-quoteCfgCard .v, #cotizarModal .pl-cfgCard .v, #cotizarModal .cfgCard .v, #cotizarModal [data-cfg-card] .v{ font-size: 1rem; font-weight: 800; line-height: 1.15; opacity: 1 !important; } /* DARK (modal dark) */ [data-theme="dark"] #cotizarModal .pl-quoteCfgCard, [data-bs-theme="dark"] #cotizarModal .pl-quoteCfgCard, [data-theme="dark"] #cotizarModal .pl-cfgCard, [data-bs-theme="dark"] #cotizarModal .pl-cfgCard, [data-theme="dark"] #cotizarModal .cfgCard, [data-bs-theme="dark"] #cotizarModal .cfgCard, [data-theme="dark"] #cotizarModal [data-cfg-card], [data-bs-theme="dark"] #cotizarModal [data-cfg-card]{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 10px 25px rgba(0,0,0,.35); color: #fff; } /* LIGHT (modal light) */ [data-theme="light"] #cotizarModal .pl-quoteCfgCard, [data-bs-theme="light"] #cotizarModal .pl-quoteCfgCard, [data-theme="light"] #cotizarModal .pl-cfgCard, [data-bs-theme="light"] #cotizarModal .pl-cfgCard, [data-theme="light"] #cotizarModal .cfgCard, [data-bs-theme="light"] #cotizarModal .cfgCard, [data-theme="light"] #cotizarModal [data-cfg-card], [data-bs-theme="light"] #cotizarModal [data-cfg-card]{ background: rgba(15,23,42,.04); border: 1px solid rgba(15,23,42,.12); box-shadow: 0 10px 25px rgba(15,23,42,.10); color: #0f172a; } /* Responsive */ @media (max-width: 575.98px){ #cotizarModal .pl-quoteCfgGrid, #cotizarModal .pl-cfgGrid, #cotizarModal .cfgGrid, #cotizarModal [data-cfg-grid]{ grid-template-columns: 1fr; } }