/* ==========================================================================
   Workstations v5: que componente decide (cuatro tarjetas blancas), indice de software en pildoras,
   carga por componente y diagrama de nucleos. Todo con los tokens de base.css.
   ========================================================================== */

/* Que componente decide tu espera: el riel se vuelve una rejilla de 2 x 2 tarjetas blancas */
.rail--grid { gap: 16px; text-align: left; }
@media (min-width: 760px) { .rail--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rail--grid > .rail__row,
.rail--grid > .rail__row:first-child,
.rail--grid > .rail__row:last-child { padding: 26px; border: 0; border-radius: var(--r-card); background: var(--white); }

/* Indice de software: cuatro flujos en columnas; cada programa es una pildora y el elegido se rellena */
.sw-index { display: grid; gap: var(--sp-7) var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .sw-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .sw-index { grid-template-columns: minmax(0, 1fr); } }
.sw-index__group { display: grid; align-content: start; gap: var(--sp-2); }
.sw-index__flow { padding-bottom: var(--sp-2); text-align: left; }
.sw-index__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 46px;
  padding: 0 18px 0 20px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--white);
  font-size: var(--fs-16);
  letter-spacing: var(--tr-16);
  font-weight: 500;
  text-align: left;
}
.sw-index__tab:hover { border-color: var(--white); }
.sw-index__tab[aria-selected="true"] { background: var(--white); border-color: var(--white); color: var(--black); }
.sw-index__tab .icon { width: 16px; height: 16px; opacity: 0; }
.sw-index__tab[aria-selected="true"] .icon { opacity: 1; }
.sw-index__tab:focus-visible { outline-offset: 3px; }

/* Panel del programa: tarjeta sobre oscuro con el nombre, la lectura y la carga de cada componente */
.sw-panels { margin-top: var(--sp-8); }
.sw-panel { display: grid; gap: var(--sp-7) clamp(32px, 16px + 4vw, 80px); margin-top: 0; padding: 32px; border: 1px solid var(--hair); border-radius: var(--r-card); text-align: left; }
@media (min-width: 960px) { .sw-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 759px) { .sw-panel { padding: 22px; } }
.sw-panel__name { font-size: var(--fs-35); letter-spacing: var(--tr-35); line-height: 1.1; color: var(--white); }
.sw-panel__read { margin-top: var(--sp-4); font-size: var(--fs-18); letter-spacing: var(--tr-18); line-height: 1.55; max-width: 32em; color: var(--ash); }
.sw-panel .btn { margin-top: var(--sp-7); }
.no-js .sw-panel + .sw-panel { margin-top: var(--sp-6); }

/* Carga por componente: tres casillas (Secundario 1, Importa 2, Decisivo 3). Es el dato, no adorno: casillas
   sueltas en pildora, sin pista de fondo. */
.sw-load { display: grid; margin: 0; padding: 0; list-style: none; }
.sw-load__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 6.5rem; align-items: center; gap: var(--sp-5); min-height: 56px; border-top: 1px solid var(--hair); }
.sw-load__row:first-child { border-top: 0; }
.sw-load__part { font-size: var(--fs-16); letter-spacing: var(--tr-16); color: var(--white); }
.sw-load__bar { display: inline-flex; gap: 5px; }
.sw-load__bar i { display: block; width: 26px; height: 10px; border: 1px solid var(--smoke); border-radius: var(--r-pill); }
.sw-load__row[data-level="1"] .sw-load__bar i:nth-child(-n+1),
.sw-load__row[data-level="2"] .sw-load__bar i:nth-child(-n+2),
.sw-load__row[data-level="3"] .sw-load__bar i { background: var(--white); border-color: var(--white); }
.sw-load__level { font-size: var(--fs-15); letter-spacing: var(--tr-15); color: var(--smoke); text-align: right; }
.sw-load__row[data-level="3"] .sw-load__level { color: var(--white); }
@media (max-width: 479px) {
  .sw-load__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding-block: var(--sp-3); }
  .sw-load__level { grid-column: 1 / -1; text-align: left; }
}

/* Procesador: dos formas de ser rapido (8 nucleos; lleno = trabajando) */
.ws-cpu { display: grid; gap: var(--sp-7); }
@media (min-width: 760px) { .ws-cpu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-cpu h4 { margin-top: var(--sp-4); }
.ws-cpu p { margin-top: var(--sp-2); }
.ws-cores { display: grid; grid-template-columns: repeat(8, 16px); gap: 5px; }
.ws-cores span { display: block; height: 16px; border: 1px solid var(--black); border-radius: var(--r-pill); }
.ws-cores--one span:first-child,
.ws-cores--many span { background: var(--black); }

/* Antes de comprar otra: las filas y, al lado, cuando ya no conviene */
.ws-mejorar { display: grid; gap: 16px; text-align: left; }
@media (min-width: 960px) { .ws-mejorar { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.ws-mejorar__aside { display: grid; gap: var(--sp-5); justify-items: start; }
.ws-mejorar__aside .callout { padding: 0; border: 0; }
.ws-mejorar__more { font-size: var(--fs-15); letter-spacing: var(--tr-15); color: var(--black); }

/* Las casillas se llenan con scaleX (motion.js pone .is-filled en la carga del programa visible al entrar y cada
   vez que se cambia de programa). El borde de una casilla llena ya es blanco; el relleno entra en orden. */
.motion .sw-load__bar i { position: relative; overflow: clip; }
.motion .sw-load__row .sw-load__bar i { background: transparent; }
.motion .sw-load__bar i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.motion .sw-load.is-filled .sw-load__row[data-level="1"] .sw-load__bar i:nth-child(-n+1)::before,
.motion .sw-load.is-filled .sw-load__row[data-level="2"] .sw-load__bar i:nth-child(-n+2)::before,
.motion .sw-load.is-filled .sw-load__row[data-level="3"] .sw-load__bar i::before {
  transform: none;
  transition: transform .6s var(--ease-p4) var(--fill-d, 0ms);
}