/*
 * Modal de COLOR — solo lo propio de las muestras.
 *
 * DEPENDE DE `im-material-modal.css`, que trae la carcasa compartida por los dos modales: la capa
 * (`.imm-overlay`), la caja (`.imm-modal`), la cabecera (`.imm-head`), el pie (`.imm-mfoot`) y los
 * botones. No se duplica aquí a propósito: si mañana cambia el ancho o el radio de la caja, se
 * toca en un sitio y los dos modales van a una. Este fichero debe cargarse DESPUÉS.
 */

/* El de color lleva menos contenido que el de material: ni necesita los 1500 px de la web ni
   ocupar toda la altura. `height: auto` es lo importante — hereda `calc(100vh - 56px)` del modal
   de material y con 10 muestras la caja salía medio vacía; con un material de un solo color sería
   casi todo hueco. Así se ajusta a lo que hay, y el tope deja que el cuerpo haga scroll si algún
   material llegara a tener muchísimos. */
.imm-modal-color {
  width: min(920px, 100%);
  height: auto;
  max-height: min(720px, calc(100vh - 56px));
}

.imm-swgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

.imm-swcard {
  background: #fff; border: 1px solid var(--imm-line); border-radius: 14px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px; text-align: left; position: relative;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.imm-swcard:hover { border-color: var(--imm-ink-3); transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(0,0,0,.45); }
.imm-swcard:focus-visible { outline: 2px solid var(--imm-coral); outline-offset: 2px; }
.imm-swcard.imm-sel { border-color: var(--imm-coral); box-shadow: 0 0 0 2px rgba(242,106,62,.35); }

.imm-sw {
  height: 96px; border-radius: 10px; position: relative; overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}
/* Rayado muy tenue: insinúa las capas de una pieza impresa y, de paso, hace que los tonos muy
   claros se lean como superficie y no como un hueco en la tarjeta. */
.imm-sw::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(255,255,255,.14) 5px 6px);
}
/* Blanco y translúcido sobre tarjeta blanca necesitan un borde de verdad, o desaparecen. */
.imm-sw-claro { border-color: rgba(0,0,0,.18); }

.imm-swtick {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--imm-coral); color: #fff; display: none; place-items: center; z-index: 2;
}
.imm-swtick svg { width: 12px; height: 12px; }
.imm-swcard.imm-sel .imm-swtick { display: grid; }

.imm-swlbl { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--imm-ink); }

/* La muestra del pie, junto a «Color seleccionado» */
.imm-swdot {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.1); display: block;
}
.imm-swdot.imm-sw-claro { border-color: rgba(0,0,0,.18); }

@media (max-height: 760px) { .imm-sw { height: 78px; } }
@media (max-width: 720px) {
  .imm-overlay .imm-modal.imm-modal-color { height: 100dvh; max-height: none; }
  .imm-swgrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .imm-sw { height: 76px; }
}