/* ==========================================================================
   Servidores y NAS v5: el diagrama de bahias (tarjeta blanca) y la regla 3-2-1 como dato.
   Todo con los tokens de base.css.
   ========================================================================== */
.rail--bays { max-width: 920px; margin-inline: auto; text-align: left; }
.rail--bays .rail__value { font-size: var(--fs-35); letter-spacing: var(--tr-35); }
/* Bahias de disco (dato real, hecho con CSS): lleno = guarda datos, contorno = la redundancia que cubre la falla */
.bays { display: inline-flex; gap: 6px; margin: 0; }
.rail__row > .bays { order: -2; margin-bottom: var(--sp-3); }
.bays__disk { position: relative; width: 16px; height: 34px; border: 1px solid var(--black); border-radius: var(--r-pill); background: var(--black); }
.bays__disk--spare { background: transparent; }
.bays--legend { gap: 4px; margin-right: 4px; vertical-align: middle; }
.bays--legend .bays__disk { width: 10px; height: 20px; }

/* Con movimiento, cada disco es un contorno con un relleno (i) que motion.js enciende en orden; despues "falla"
   el de redundancia (queda hueco, igual que el diagrama fijo) y los que guardan datos siguen encendidos. */
.motion .rail .bays__disk { overflow: clip; background: transparent; }
.motion .rail .bays__disk > i { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--black); transform-origin: 50% 100%; }

/* La regla 3-2-1: la cifra grande como dato */
.srv-321 { display: grid; margin: 0; }
.srv-321 > div { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; gap: var(--sp-4); padding-block: var(--sp-3); border-top: 1px solid var(--line); }
.srv-321 > div:first-child { border-top: 0; }
.srv-321 dt { font-size: var(--fs-35); letter-spacing: var(--tr-35); line-height: 1.1; font-weight: 450; color: var(--fg); }
.srv-321 dd { color: var(--fg-2); }