/* =========================================================
   ARMADO VISUAL DEL PC
   La torre se va llenando a medida que el cliente elige piezas.
   ========================================================= */

.armado { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px; }
.armado__cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.armado__cab h3 { font-size: 16px; display: flex; align-items: center; gap: 9px; }
.armado__sub { font-size: 12.8px; color: var(--txt-2); margin: 0 0 16px; }

.armado__escena {
  position: relative;
  background: linear-gradient(160deg, #1a1428 0%, #241a3d 55%, #2f1f4d 100%);
  border-radius: 12px; padding: 20px; overflow: hidden;
  display: grid; grid-template-columns: 292px 1fr; gap: 26px; align-items: center;
  min-height: 500px;
}
.armado__escena::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 25% 30%, rgba(218,28,92,.18), transparent 55%),
              radial-gradient(circle at 80% 75%, rgba(51,79,180,.22), transparent 55%);
  pointer-events: none;
}

/* ---------- la torre ---------- */
.torre { position: relative; width: 292px; height: 456px; margin: 0 auto; }
.torre__caja {
  position: absolute; inset: 0;
  border: 2.5px solid rgba(255,255,255,.16); border-radius: 12px;
  background: rgba(255,255,255,.035);
  transition: border-color .45s var(--ease-salida), background .45s, box-shadow .45s;
}
.torre--con-gabinete .torre__caja {
  border-color: rgba(124,224,176,.5);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 40px rgba(124,224,176,.12), 0 0 26px rgba(124,224,176,.12);
}
/* vidrio lateral */
.torre__vidrio {
  position: absolute; left: 12px; top: 12px; right: 12px; bottom: 42px;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(140deg, rgba(255,255,255,.07), rgba(255,255,255,.01));
  opacity: 0; transition: opacity .5s var(--ease-salida);
}
.torre--con-gabinete .torre__vidrio { opacity: 1; }

/* cada ranura donde entra una pieza */
.ranura {
  position: absolute; border-radius: 6px;
  border: 1.5px dashed rgba(255,255,255,.18);
  display: grid; place-items: center;
  transition: border-color .35s, background .35s;
}
/* La etiqueta cuelga debajo de su ranura. Como los nombres son mas
   anchos que las ranuras chicas, se dejan sobresalir hacia un lado
   solamente: PROCESADOR hacia la derecha y REFRIGERACION hacia la
   izquierda. Asi nunca se cruzan, que era lo que se veia apretado. */
.ranura__eti {
  position: absolute; bottom: -20px; left: 0; right: 0; text-align: center;
  font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  color: rgba(255,255,255,.42); font-weight: 700; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.ranura--llena { border-color: transparent; background: transparent; }
.ranura--llena .ranura__eti { color: rgba(255,255,255,.72); }

/* Posiciones dentro de la torre.

   La placa madre es la unica que contiene a otras: adentro van el
   procesador y la RAM, uno debajo del otro, para que cada nombre
   tenga su propia linea. La refrigeracion y el SSD salieron a la
   columna derecha, que ademas es donde van de verdad: el radiador
   se atornilla al gabinete, no a la placa.

   Cada ranura tiene la proporcion del dibujo que va adentro. Antes
   eran todas mas bajas que el dibujo, que es cuadrado, y la pieza
   se desbordaba y tapaba su propia etiqueta: la fuente no dejaba
   ver la palabra FUENTE. Las medidas salen del viewBox 80x80 de
   assets/piezas.js, y tamRanura en arma-tu-pc.html usa las mismas. */
.ranura--placa  { left: 16px;  top: 34px;  width: 180px; height: 169px; }  /* dibujo 68x64 */
.ranura--cpu    { left: 34px;  top: 42px;  width: 42px;  height: 42px; }   /* 64x64 */
.ranura--ram    { left: 34px;  top: 122px; width: 104px; height: 62px; }   /* 64x38 */
.ranura--ssd    { left: 212px; top: 46px;  width: 58px;  height: 18px; }   /* 66x20 */
.ranura--refrigeracion { left: 212px; top: 100px; width: 58px; height: 58px; } /* 52x52 */
.ranura--gpu    { left: 22px;  top: 228px; width: 140px; height: 86px; }   /* 72x44 */
.ranura--fuente { left: 22px;  top: 348px; width: 104px; height: 73px; }   /* 60x42 */

/* el nombre de la placa va arriba, no abajo, donde chocaba con la
   tarjeta grafica */
.ranura--placa > .ranura__eti { top: -18px; bottom: auto; }

/* La pieza entra volando.

   Va centrada con position+transform y no con place-items: cuando el
   dibujo es mas grande que la ranura, la grilla lo pega al borde de
   arriba en vez de centrarlo, y la pieza terminaba corrida hacia
   abajo tapando su propia etiqueta. */
.ranura .pieza, .ranura .pieza-foto {
  position: absolute; left: 50%; top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) translate(38px, -26px) scale(.55) rotate(12deg);
  transition: opacity .5s var(--ease-salida), transform .6s var(--ease-rebote);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
.ranura--llena .pieza, .ranura--llena .pieza-foto { opacity: 1; transform: translate(-50%, -50%); }

/* La RAM y la tarjeta grafica estan dibujadas un poco bajo el centro
   del viewBox (los pines y el conector PCIe). Se corrige aqui para
   que queden centradas en su ranura. */
.ranura--llena.ranura--ram .pieza { transform: translate(-50%, -50%) translateY(-6.25%); }
.ranura--llena.ranura--gpu .pieza { transform: translate(-50%, -50%) translateY(-2.5%); }
.pieza-foto { object-fit: contain; border-radius: 4px; }

/* destello al encajar */
.ranura--encajando::after {
  content: ''; position: absolute; inset: -6px; border-radius: 10px;
  border: 2px solid #7ce0b0; animation: encaje .7s var(--ease-salida) forwards;
}
@keyframes encaje {
  0%   { opacity: 1; transform: scale(.85); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* aspas girando cuando el PC esta "encendido" */
.pieza-aspa { transform-box: fill-box; }
.armado--encendido .pieza-aspa { animation: girar 2.4s linear infinite; }
.armado--encendido .pieza-aspa--2 { animation-duration: 3.1s; }
@keyframes girar { to { transform: rotate(360deg); } }

/* luz de encendido */
.torre__luz {
  position: absolute; right: 18px; bottom: 22px;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.16); transition: background .4s, box-shadow .4s;
}
.armado--encendido .torre__luz {
  background: #7ce0b0; box-shadow: 0 0 12px 3px rgba(124,224,176,.75);
  animation: respirar 2.6s ease-in-out infinite;
}
@keyframes respirar { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ---------- panel derecho ---------- */
.armado__info { position: relative; color: #fff; }
.armado__estado { font-family: var(--f-titulo); font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.armado__detalle { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.55; margin: 0 0 16px; max-width: 380px; }

.armado__lista { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.armado__item {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center;
  font-size: 12.5px; color: rgba(255,255,255,.55);
  padding: 5px 9px; border-radius: 6px; transition: background .3s, color .3s;
}
.armado__item--ok { color: #fff; background: rgba(255,255,255,.07); }
.armado__item__n {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; background: rgba(255,255,255,.12);
}
.armado__item--ok .armado__item__n { background: #0f8a4d; }
.armado__item b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.armado__item span { font-size: 11.5px; opacity: .7; white-space: nowrap; }

.armado__barra { height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; margin-bottom: 8px; }
.armado__barra i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--magenta), #7ce0b0);
  transition: width .7s var(--ease-salida);
}
.armado__pct { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 14px; }

.armado__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.armado__btn {
  height: 38px; padding: 0 18px; border-radius: var(--radio-s);
  font-size: 13px; font-weight: 700; background: rgba(255,255,255,.14); color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, transform .2s;
}
.armado__btn:hover:not(:disabled) { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.armado__btn:disabled { opacity: .4; cursor: not-allowed; }
.armado__btn--on { background: var(--magenta); }
.armado__btn--on:hover { background: var(--magenta); filter: brightness(1.1); }

/* aviso de incompatibilidad sobre la escena */
.armado__alerta {
  background: rgba(218,28,92,.9); color: #fff; border-radius: var(--radio-s);
  padding: 10px 13px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px;
  display: flex; gap: 9px; align-items: flex-start;
}
.armado__alerta svg { flex-shrink: 0; margin-top: 1px; }

/* durante la secuencia de armado */
.armado--montando .ranura { border-color: rgba(255,255,255,.3); }

@media (max-width: 800px) {
  .armado__escena { grid-template-columns: 1fr; min-height: 0; }
  /* el escalado no achica la caja, asi que se recupera el hueco */
  .torre { transform: scale(.86); transform-origin: top center; margin-bottom: -64px; }
}

/* ---------- piezas en el selector y en los pasos ---------- */
.paso__pieza {
  width: 44px; height: 44px; border-radius: 8px; background: var(--morado-50);
  display: grid; place-items: center; flex-shrink: 0;
}
.paso__pieza .pieza, .paso__pieza .pieza-foto { width: 34px; height: 34px; }
.paso { grid-template-columns: 42px 44px 1fr auto; }
.opc { grid-template-columns: 54px 1fr auto auto; }
.opc__pieza { width: 54px; height: 54px; border-radius: 8px; background: var(--morado-50); display: grid; place-items: center; }
.opc__pieza .pieza, .opc__pieza .pieza-foto { width: 42px; height: 42px; }

@media (max-width: 700px) {
  .paso { grid-template-columns: 34px 40px 1fr; }
  .opc { grid-template-columns: 48px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .armado--encendido .pieza-aspa { animation: none; }
  /* sin vuelo, pero el centrado se mantiene */
  .ranura .pieza, .ranura .pieza-foto { opacity: 1; transform: translate(-50%, -50%); }
  .ranura--llena .pieza { opacity: 1; }
  .ranura--encajando::after { animation: none; opacity: 0; }
}

/* En telefono la torre (292 px) mas los rellenos no cabian en los
   343 px utiles y empujaban la pagina hacia el lado. Se achican los
   rellenos, que es lo que sobra, y no la torre. */
@media (max-width: 480px) {
  .armado { padding: 10px; }
  .armado__escena { padding: 10px; gap: 14px; }
  .armado__escena > * { min-width: 0; }
}

/* ---- la foto dentro de su ranura ----

   Se acomoda al hueco en vez de forzarse a un cuadrado. Antes cada
   foto salia de 70 x 70 px metida en ranuras de 58 x 18, y todas
   terminaban montadas una sobre otra.

   El fondo claro no es decoracion: las fotos de producto vienen
   con fondo blanco recortado y sobre la torre oscura se perdian
   los bordes, que era la otra mitad de por que se veian pegadas.
   Cada pieza queda como una tarjetita aparte, que es lo que hace
   que se entienda cual es cual. */
.pieza-foto--hueco {
  width: 100%; height: 100%;
  object-fit: contain;
  background: rgba(255,255,255,.92);
  border-radius: 5px;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* La placa madre contiene al procesador y a la RAM, asi que su
   foto va detras de las dos y mas apagada: si compite con ellas,
   el cuadro se vuelve ilegible. */
.ranura--placa .pieza-foto--hueco { opacity: .55; }
.ranura--llena.ranura--placa { z-index: 0; }
.ranura--llena.ranura--cpu,
.ranura--llena.ranura--ram { z-index: 2; }