/* * Modal de selección de MATERIAL — calculadora Imprimakers * * TODO va prefijado `imm-` y colgando de `.imm-root`. No es manía: el diseño original usa * nombres como .card, .grid, .modal, .body, .close, .tabs o .chip, que ya existen en el tema y * en la hoja del visor (viewer/styles/style.css). Sin prefijo, el modal rompería la calculadora * y la calculadora rompería el modal, y el fallo aparecería solo en producción. * * Las variables también van prefijadas por lo mismo: --ink o --line son nombres demasiado * comunes para dejarlos sueltos en :root. */ .imm-root { --imm-ink: #101010; --imm-ink-2: #4d4d4d; --imm-ink-3: #8a8a8a; --imm-line: #e9e9e9; --imm-line-2: #f1f1f1; --imm-bg: #f5f4f1; --imm-coral: #f26a3e; --imm-coral-deep: #d9532a; --imm-coral-soft: #fff0e9; --imm-teal: #2fb8a8; --imm-teal-deep: #1e8a7c; --imm-teal-soft: #ecf8f5; --imm-ok: #2e9f6b; --imm-ok-soft: #e7f6ee; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -.005em; -webkit-font-smoothing: antialiased; color: var(--imm-ink); } .imm-root *, .imm-root *::before, .imm-root *::after { box-sizing: border-box; } .imm-root button { font-family: inherit; cursor: pointer; } .imm-root img { max-width: 100%; display: block; } /* ── capa y caja ─────────────────────────────────────────────────────────────────────────── */ .imm-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(12,12,12,.6); backdrop-filter: blur(5px); display: grid; place-items: center; /* 20px a cada lado = los mismos márgenes que el contenedor de la web. */ padding: 28px 20px; /* Corta el encadenado del desplazamiento: sin esto, al llegar al final de la rejilla la rueda seguía moviendo la página de detrás. El bloqueo de ya lo impide, pero esto lo para antes de llegar y además cubre el arrastre con el dedo en el móvil. */ overscroll-behavior: contain; } .imm-modal { /* EL MISMO ANCHO QUE LA WEB. El `.container` del sitio es `min(1500px, 100% - 40px)`, medido en la propia página (1240 px a 1280 de ventana, 1400 a 1440, y tope de 1500 de ahí en adelante). El modal estaba clavado a 1140 px y se quedaba estrecho para la cantidad de información que lleva cada tarjeta. Como la capa ya reserva los 20 px de cada lado, aquí basta con el 100% y el tope de 1500. */ width: min(1500px, 100%); height: calc(100vh - 56px); max-height: 1000px; background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 90px -30px rgba(0,0,0,.55); } /* ── cabecera ────────────────────────────────────────────────────────────────────────────── */ /* Una sola fila: título a la izquierda; a la derecha y a su misma altura, el conmutador de tecnología, la ficha de la pieza y el cierre. Ya no hay segunda fila de filtros. */ .imm-head { background: #0f0f0f; color: #fff; padding: 20px 28px 20px; position: relative; overflow: hidden; flex-shrink: 0; } .imm-head::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 88% 0%, rgba(242,106,62,.22), transparent 55%); pointer-events: none; } .imm-head > * { position: relative; z-index: 2; } .imm-top { display: flex; align-items: center; gap: 20px; } .imm-top > div:first-child { margin-right: auto; min-width: 0; } .imm-head h2 { margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: #fff; } .imm-head h2 em { font-style: normal; color: var(--imm-coral); } .imm-head-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .imm-piece { display: flex; align-items: center; gap: 12px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 11px; padding: 10px 14px; } .imm-piece .imm-ic { width: 34px; height: 34px; border-radius: 8px; background: rgba(242,106,62,.14); color: var(--imm-coral); display: grid; place-items: center; flex-shrink: 0; } .imm-piece .imm-ic svg { width: 17px; height: 17px; } .imm-piece b { display: block; font-size: 13px; font-weight: 700; color: #fff; } .imm-piece span { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: #8d8d8d; letter-spacing: .04em; margin-top: 2px; } .imm-close { width: 40px; height: 40px; border-radius: 10px; background: #1a1a1a; border: 1px solid #2a2a2a; color: #fff; display: grid; place-items: center; flex-shrink: 0; } .imm-close:hover { background: var(--imm-coral); border-color: var(--imm-coral); } .imm-close svg { width: 15px; height: 15px; } /* ── conmutador de tecnología ────────────────────────────────────────────────────────────── */ /* Va en la fila del título, así que se dibuja como un conmutador con la misma caja oscura que la ficha de la pieza (mismo fondo, borde y radio), no como pestañas subrayadas: el subrayado necesitaba una línea base común que aquí no existe. El activo en coral, como todo lo activo. */ .imm-tabs { display: flex; gap: 4px; padding: 4px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 11px; flex-shrink: 0; } .imm-tab { background: none; border: none; color: #8d8d8d; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; letter-spacing: -.01em; white-space: nowrap; flex-shrink: 0; transition: color .12s, background .12s; } .imm-tab .imm-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; background: #262626; color: #b5b5b5; border-radius: 99px; padding: 2px 7px; } .imm-tab:hover { color: #fff; } .imm-tab.imm-on { background: var(--imm-coral); color: #fff; } .imm-tab.imm-on .imm-n { background: rgba(255,255,255,.22); color: #fff; } /* ── cuerpo ──────────────────────────────────────────────────────────────────────────────── */ .imm-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 22px 28px 28px; background: var(--imm-bg); flex: 1 1 auto; min-height: 0; } .imm-hint { display: flex; align-items: center; gap: 12px; background: var(--imm-teal-soft); border: 1px solid #cfeae5; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; font-size: 13.5px; color: #12564e; line-height: 1.45; } .imm-hint svg { width: 17px; height: 17px; color: var(--imm-teal-deep); flex-shrink: 0; } .imm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .imm-card { background: #fff; border: 1px solid var(--imm-line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-align: left; padding: 0; position: relative; transition: border-color .15s, transform .15s, box-shadow .15s; } /* Filtrar por tecnología solo oculta tarjetas; hace falta ganarle al `display` de arriba y al `display: grid` que la tarjeta toma en móvil. Por eso el selector lleva `.imm-root` delante. */ .imm-root .imm-card[hidden] { display: none; } .imm-card:hover { border-color: var(--imm-ink-3); transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(0,0,0,.5); } .imm-card:focus-visible { outline: 2px solid var(--imm-coral); outline-offset: 2px; } .imm-card.imm-sel { border-color: var(--imm-coral); box-shadow: 0 0 0 2px rgba(242,106,62,.35), 0 16px 30px -22px rgba(242,106,62,.6); } .imm-ph { position: relative; aspect-ratio: 16/10; background: #eceae6; overflow: hidden; } .imm-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } .imm-card:hover .imm-ph img { transform: scale(1.045); } .imm-tech { position: absolute; top: 10px; left: 10px; background: rgba(15,15,15,.88); color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .14em; font-weight: 700; padding: 5px 9px; border-radius: 6px; backdrop-filter: blur(4px); } .imm-tick { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--imm-coral); color: #fff; display: none; place-items: center; } .imm-tick svg { width: 13px; height: 13px; } .imm-card.imm-sel .imm-tick { display: grid; } .imm-cbody { padding: 14px 16px 14px; flex: 1; display: flex; flex-direction: column; } /* Nombre a la izquierda y precio a la derecha en la misma línea: la tarjeta pierde el pie entero y en la misma pantalla caben más materiales que comparar. */ .imm-nm { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .imm-nm b { font-size: 16px; font-weight: 700; letter-spacing: -.015em; min-width: 0; /* Nombres largos en alemán («Standardharz») se partían por la letra que no cabía. Con el `lang` que pone el modal en su raíz, el navegador guiona por sílabas del idioma. */ overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; } .imm-desc { font-size: 12.5px; color: var(--imm-ink-2); line-height: 1.45; margin: 6px 0 0; } .imm-price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; text-align: right; flex-shrink: 0; line-height: 1.2; } .imm-diff { display: block; width: max-content; margin: 3px 0 0 auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; color: var(--imm-ok); background: var(--imm-ok-soft); border-radius: 5px; padding: 2px 6px; } .imm-diff.imm-up { color: var(--imm-coral-deep); background: var(--imm-coral-soft); } .imm-sheet { display: block; padding: 10px 16px; border-top: 1px solid var(--imm-line-2); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--imm-ink-3); text-decoration: none; } .imm-sheet:hover { color: var(--imm-coral-deep); background: var(--imm-coral-soft); } .imm-empty { padding: 60px 20px; text-align: center; color: var(--imm-ink-3); font-size: 14px; } /* ── barra inferior ──────────────────────────────────────────────────────────────────────── */ .imm-mfoot { border-top: 1px solid var(--imm-line); background: #fff; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-shrink: 0; flex-wrap: wrap; } .imm-picked { display: flex; align-items: center; gap: 14px; } .imm-picked .imm-sw { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--imm-bg); flex-shrink: 0; } .imm-picked .imm-sw img { width: 100%; height: 100%; object-fit: cover; } .imm-picked em { font-style: normal; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--imm-ink-3); font-weight: 700; display: block; margin-bottom: 3px; } .imm-picked b { font-size: 15px; font-weight: 700; } .imm-picked b i { font-style: normal; color: var(--imm-ink-3); font-weight: 600; font-size: 13px; } .imm-acts { display: flex; align-items: center; gap: 10px; } .imm-btn-ghost { background: transparent; color: var(--imm-ink); border: 1px solid var(--imm-ink); padding: 13px 18px; border-radius: 9px; font-weight: 600; font-size: 13.5px; } .imm-btn-ghost:hover { background: var(--imm-ink); color: #fff; } .imm-btn-primary { background: var(--imm-coral); color: #fff; border: none; padding: 13px 22px; border-radius: 9px; font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 12px 26px -12px rgba(242,106,62,.6); } .imm-btn-primary:hover { background: var(--imm-coral-deep); } /* ── adaptaciones ────────────────────────────────────────────────────────────────────────── */ @media (max-height: 820px) { .imm-ph { aspect-ratio: 16/7; } .imm-desc { margin-bottom: 10px; } } @media (max-height: 760px) { .imm-head { padding: 14px 28px 14px; } .imm-head h2 { font-size: 20px; } .imm-piece { display: none; } .imm-body { padding: 16px 28px 20px; } .imm-hint { padding: 9px 14px; font-size: 12.5px; margin-bottom: 14px; } .imm-mfoot { padding: 11px 28px; } } @media (max-width: 980px) { .imm-head h2 { font-size: 22px; } .imm-piece { display: none; } /* Aquí el conmutador ya no cabe junto al título: baja a su propia fila, a lo ancho, y el cierre se queda arriba a la derecha del título. */ .imm-top { flex-wrap: wrap; row-gap: 12px; } .imm-top > div:first-child { order: 1; } .imm-head-right { order: 2; } .imm-tabs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; } .imm-tabs::-webkit-scrollbar { display: none; } } @media (max-width: 720px) { .imm-overlay { padding: 0; } .imm-modal { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; } .imm-head { padding: 16px 18px 0; } .imm-head h2 { font-size: 20px; } .imm-close { width: 36px; height: 36px; } .imm-body { padding: 16px 18px 20px; } .imm-hint { font-size: 12.5px; padding: 11px 13px; flex-wrap: wrap; } .imm-grid { grid-template-columns: 1fr; gap: 12px; } /* Tarjeta en fila: la foto a la izquierda y el texto a la derecha, que es como se ve una lista en el móvil sin obligar a hacer scroll por cada material. */ .imm-card { display: grid; grid-template-columns: 120px 1fr; grid-template-areas: "ph body"; } .imm-ph { grid-area: ph; aspect-ratio: auto; height: 100%; min-height: 150px; } .imm-cbody { grid-area: body; padding: 13px 14px 12px; } .imm-nm { flex-wrap: wrap; } .imm-mfoot { padding: 12px 18px; flex-direction: column; align-items: stretch; gap: 10px; } .imm-picked { order: 1; } .imm-acts { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .imm-btn-primary { justify-content: center; font-size: 13px; padding: 14px 12px; } .imm-btn-ghost { text-align: center; } } @media (max-width: 430px) { .imm-tab { padding: 7px 9px; font-size: 11.5px; gap: 5px; } }