/* Lo único que el prototipo añade o cambia sobre caja-base.css (copia sin tocar de estilos.css). */

/* ---------- orden de apilado: los textos siempre por encima de lo que vuela ---------- */

/* El cable y la caja se salen por la derecha a propósito: que nunca generen desplazamiento lateral. */
html { overflow-x: clip; }

.mini-marco { position: relative; z-index: 5; }
h1, .pedido, .portada-sub, .portafolio-titulo { position: relative; z-index: 6; }
.cabecera { z-index: 7; }
.orden { z-index: 8; }

/* La versión original escalaba el marco con transform; aquí se le da el tamaño de verdad porque
   las fichas viven dentro y se miden con coordenadas de pantalla. Ocupa lo mismo que antes. */
.mini-escritorio { width: 112%; margin: -4.9% 0 -4.9% 1%; transform: translateY(4%); }

/* ---------- la Mac mini en capas ---------- */

.mini {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 620;
  container-type: inline-size;
  pointer-events: none;
}
.mini-capa { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.mini-fondo { z-index: 1; }
.mini-luz { z-index: 2; opacity: 0; }
/* Sin z-index propio: cada ficha se apila por su cuenta, detrás de las paredes al salir y por delante después. */
.vuelo { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mini-frente { z-index: 4; }
.mini-cable-capa { z-index: 5; }

/* ---------- la tapa ---------- */

/* Se dibuja con la misma proyección de la caja y se mueve sin 3D de navegador: en un dibujo sin perspectiva, inclinar
   la tapa hacia quien mira es exactamente estirarla en vertical. Se ve igual y no depende de cada motor. */
.tapa {
  --k: calc(100cqw / 760); /* un punto del dibujo, en píxeles */
  --plano: matrix(.866, .5, -.866, .5, 0, 0);
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: calc(350 * var(--k)) calc(240 * var(--k)); /* el centro de la tapa */
}
/* Teléfonos viejos, sin unidades de contenedor (iOS anterior al 16): la misma medida, calculada desde la pantalla. */
@supports not (width: 1cqw) {
  .tapa { --k: calc(min(1240px, 100vw - 40px) * .4875 / 760); }
  @media (max-width: 860px) { .tapa { --k: calc(min(330px, 86vw) / 760); } }
}
.tapa-canto, .tapa-cara, .tapa-halo {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(340 * var(--k));
  height: calc(340 * var(--k));
  border-radius: calc(48 * var(--k));
  transform-origin: 0 0;
  transform: translate(calc(350 * var(--k)), calc(70 * var(--k))) var(--plano);
}
/* El grosor: una sola pieza que asoma por debajo de la cara. Su separación la marca la animación. */
.tapa-canto {
  background: linear-gradient(to top right, #83868C 4.1%, #A2A5AA 42.65%, #D2D4D7 50%, #C6C8CC 59.2%, #AEB0B5 95.9%);
  transform: translate(calc(350 * var(--k)), calc((70 + var(--canto, 10)) * var(--k))) var(--plano);
}
.tapa-cara {
  overflow: hidden;
  background: linear-gradient(135deg, #F4F4F5 0, #DFE0E3 45%, #EDEEF0 62%, #D3D4D8 100%);
  box-shadow: inset 0 0 0 calc(1.4 * var(--k)) #FAFAFB;
}
.tapa-firma { position: absolute; inset: 0; width: 100%; height: 100%; }
.tapa-velo, .tapa-brillo { position: absolute; display: block; pointer-events: none; opacity: 0; }
/* Al inclinarse, el metal pierde la luz de arriba: oscurece más por la punta cercana. */
.tapa-velo { inset: 0; background: linear-gradient(135deg, rgba(40, 42, 48, .55), rgba(40, 42, 48, .9)); }
/* El reflejo: bandas claras y oscuras que cruzan la cara al girar, como en una pieza anodizada. */
.tapa-brillo {
  left: -60%;
  top: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0) 26%,
    rgba(30, 32, 36, .2) 33%,
    rgba(255, 255, 255, 0) 39%,
    rgba(255, 255, 255, .55) 45%,
    rgba(255, 255, 255, .98) 49.5%,
    rgba(255, 255, 255, .62) 52%,
    rgba(255, 255, 255, .12) 58%,
    rgba(30, 32, 36, .16) 64%,
    rgba(255, 255, 255, 0) 72%);
}
/* Sombra blanda para que la tapa no se pierda contra el fondo claro de la página. */
.tapa-halo {
  box-shadow: 0 0 calc(70 * var(--k)) calc(4 * var(--k)) rgba(29, 30, 33, .34);
  opacity: 0;
  transform: translate(calc(350 * var(--k)), calc(82 * var(--k))) var(--plano);
}

/* ---------- las fichas: cada agente es una clavija con la forma exacta de su puerto ---------- */

.ficha {
  --alto: calc(var(--ficha-w, 58px) * 48 / 58);
  position: absolute;
  z-index: 3;
  left: calc(var(--ficha-w, 58px) / -2);
  top: calc(var(--alto) / -2);
  width: var(--ficha-w, 58px);
  height: var(--alto);
  visibility: hidden;
}
.ficha svg { display: block; width: 100%; height: 100%; overflow: visible; }
html.caja-activa .ficha { will-change: transform; }
html.caja-activa .tapa, html.caja-activa .tapa-canto, html.caja-activa .tapa-brillo { will-change: transform; }
html.caja-activa .tapa-velo, html.caja-activa .tapa-halo, html.caja-activa .mini-luz { will-change: opacity; }
/* Todo aterrizado: nada se mueve, así que nada necesita capa aparte (ni la memoria que ocupa). */
html.caja-activa.caja-quieta :is(.ficha, .tapa, .tapa-canto, .tapa-brillo, .tapa-velo, .tapa-halo, .mini-luz) { will-change: auto; }

/* Mientras alguien escribe en la caja de pedir, lo que vuela se aparta. */
html.caja-pidiendo .ficha { visibility: hidden !important; }

/* ---------- el panel ---------- */



/* Antes de que llegue su ficha, el puerto está vacío. Sin animación se ve siempre ocupado. */
html.caja-activa .puerto:not(.puerto-lleno):not([aria-pressed="true"]) .puerto-clavija,
html.caja-activa .puerto:not(.puerto-lleno):not([aria-pressed="true"]) .puerto-icono { visibility: hidden; }
/* Al llegar la ficha, el foquito parpadea: red enlazada. Solo cambia la opacidad de una capa, así no hay que repintar. */
html.caja-activa .puerto-foco::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cable, var(--firma-clara));
  box-shadow: 0 0 10px var(--cable, var(--firma));
  opacity: 0;
  pointer-events: none;
}
html.caja-activa .puerto-lleno .puerto-foco::after { animation: enlace-puerto .6s linear 1; }
@keyframes enlace-puerto {
  0%, 30%, 62% { opacity: 1; }
  16%, 46%, 100% { opacity: 0; }
}

@media (max-width: 860px) {
  .mini-escritorio { width: auto; margin: 0; transform: none; }
}