/* Práctica «Sustitución de la pasta térmica» (js/paste-main.js). Se apoya en practice-workbench.css; aquí solo
   la capa propia sobre la placa, las zonas pulsables y los materiales de la mesa. */

/* Capa sobre la placa, en % de la imagen: sigue el zoom. Encima de las zonas de la escena (z-index 100–110). */
.tp-layer { position: absolute; inset: 0; z-index: 115; pointer-events: none; }
.tp-cpu-paste, .tp-new-paste { position: absolute; pointer-events: none; user-select: none; }
.tp-cpu-paste { opacity: var(--left, 1); transition: opacity .3s ease-out; }
.tp-cpu-paste[hidden], .tp-new-paste[hidden] { display: none; }
/* Punto de pasta nueva visto desde arriba: gris, con un brillo que le da volumen. */
.tp-new-paste { border-radius: 50%; background: radial-gradient(circle at 38% 34%, #e4e6e7 0 8%, #a9adb0 34%, #80868a 70%, #5f6569 100%); box-shadow: 0 0 0 1px rgb(70 75 80 / 35%); }
/* Las etiquetas de la placa (socket, palanca…) no forman parte de esta práctica y tapaban el procesador. */
.paste-practice .scene__labels { display: none; }

/* Destinos, con el mismo lenguaje que la práctica de placa (css/styles.css, .highlight): línea naranja y halo.
   `target`: donde va el material en la mano, respira. `control`: lo que se pulsa, dos destellos cada 3,2 s.
   Al pasar por encima se iluminan; con el material encima (arrastre), se marcan en turquesa. */
.tp-spot { position: absolute; translate: -50% -50%; min-width: 40px; min-height: 40px; padding: 0; border: 1.6px solid #ffb248; border-radius: 10px; background: transparent; cursor: pointer; pointer-events: auto; touch-action: none; box-shadow: 0 0 0 4.5px rgb(255 178 72 / 30%); transition: background-color .15s, filter .15s; }
.tp-spot--round { border-radius: 50%; }
.tp-spot--target { animation: tp-breathe 2.4s ease-in-out infinite; }
.tp-spot--control { animation: tp-attention 3.2s ease-in-out infinite; }
.tp-spot:hover, .tp-spot:focus-visible { background: rgb(255 178 72 / 22%); filter: drop-shadow(0 0 3px rgb(255 178 72 / 90%)); }
.tp-spot.is-valid { border-color: #3CC9D9; box-shadow: 0 0 0 3.5px rgb(60 201 217 / 38%); background: rgb(60 201 217 / 16%); animation: none; }
.tp-spot:focus-visible { outline: 3px solid #1B5480; outline-offset: 3px; }
/* Anclaje ya girado o presionado: se hunde un instante y queda en turquesa, con un relleno que lo distingue de los
   que faltan (turquesa de las señales «hecho» de la guía de estilo, docs/guia-estilo.md). */
.tp-spot.is-done { border-color: #3CC9D9; border-width: 2px; background: radial-gradient(circle, rgb(60 201 217 / 45%) 0 45%, rgb(60 201 217 / 18%) 70%); box-shadow: 0 0 0 3.5px rgb(60 201 217 / 38%); animation: none; cursor: default; filter: none; }
.tp-spot.is-pressing { animation: tp-press .3s ease-out; }
@keyframes tp-press { 0% { scale: 1; } 40% { scale: .78; box-shadow: 0 0 0 1px rgb(60 201 217 / 60%), inset 0 0 8px rgb(0 0 0 / 45%); } 100% { scale: 1; } }
@keyframes tp-breathe { 50% { box-shadow: 0 0 0 4.5px rgb(255 178 72 / 14%); } }
@keyframes tp-attention { 0%, 68%, 80%, 100% { box-shadow: 0 0 0 4.5px rgb(255 178 72 / 30%); } 74%, 86% { box-shadow: 0 0 0 8px rgb(255 178 72 / 75%); } }
/* El disipador de la mesa, cuando es la superficie que se limpia. */
/* Disipador sobre la mesa como destino (limpiar su base, soltarlo al levantarlo): el mismo recuadro naranja que en la
   placa y dos destellos cada 3,2 s, sin cambiar su tamaño. */
.practice-page .desk-piece.tp-target { border-radius: 10px; outline: 1.6px solid #ffb248; outline-offset: -4px; box-shadow: inset 0 0 0 6px rgb(255 178 72 / 25%); cursor: pointer; animation: tp-flash-inset 3.2s ease-in-out infinite; }
.practice-page .desk-piece.tp-target:hover { filter: drop-shadow(0 0 3px rgb(255 178 72 / 90%)); }
.practice-page .desk-piece.tp-target.is-valid { outline-color: #3CC9D9; box-shadow: inset 0 0 0 6px rgb(60 201 217 / 30%); animation: none; }
/* Hueco de la mesa donde se deja el disipador al levantarlo (destino del arrastre). */
.practice-page .tp-drop { width: 100%; height: 100%; }
@keyframes tp-flash-inset { 0%, 68%, 80%, 100% { box-shadow: inset 0 0 0 6px rgb(255 178 72 / 25%); } 74%, 86% { box-shadow: inset 0 0 0 12px rgb(255 178 72 / 55%), 0 0 0 4px rgb(255 178 72 / 50%); } }

/* Materiales sobre la mesa (columna de piezas de practice-workbench.css). */
.practice-page .tp-wrap--wipes { top: 5%; left: 6%; width: 82%; height: 16%; }
.practice-page .tp-wrap--alcohol { top: 24%; left: 22%; width: 52%; height: 20%; }
.practice-page .tp-wrap--syringe { top: 48%; left: 4%; width: 88%; height: 8%; }
.practice-page .tp-wrap--cooler { top: 61%; left: 5%; width: 86%; height: 25%; }
/* Misma caja que la imagen de debajo (el relleno de 10 px de .desk-piece--tool): las dos imágenes coinciden píxel a píxel. */
.practice-page .desk-piece .tp-cooler-paste { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; opacity: var(--left, 1); transition: opacity .3s ease-out; pointer-events: none; }
/* Toallita del montón humedecida con alcohol: la hoja de arriba se ve mojada (tono frío) mientras se usa. */
.tp-wet { position: absolute; left: 24%; top: 8%; width: 62%; height: 48%; border-radius: 45% 55% 50% 40%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgb(140 195 230 / 50%) 0 35%, rgb(160 205 235 / 22%) 60%, transparent 75%); }
.tp-wet.is-wetting { animation: tp-wet-in 1.5s ease-out; }
@keyframes tp-wet-in { 0%, 50% { opacity: 0; } 100% { opacity: 1; } }

/* Toallita suelta, recortada de la imagen de las toallitas (assets/thermal-paste/toallita.webp): solo aparece al
   arrastrarla y en la pasada animada. Húmeda (brillo frío en el borde) y con la pasta gris que recoge (--stain). */
.tp-cloth { position: absolute; display: block; pointer-events: none; aspect-ratio: 1; border-radius: 4px;
  background: radial-gradient(circle at 52% 52%, rgb(105 112 118 / calc(var(--stain, 0) * .7)) 0 20%, transparent 46%) no-repeat, url('../assets/thermal-paste/toallita.webp') center / contain no-repeat;
  box-shadow: inset 0 0 8px rgb(150 200 235 / 40%); filter: drop-shadow(1px 3px 2px #3b302a33); }
.tp-cloth--stroke { z-index: 2; animation: tp-stroke .6s ease-in-out; }
.tp-cloth--on-desk { left: 32%; top: 32%; width: 36%; aspect-ratio: 1; }
@keyframes tp-stroke { 0% { translate: -55% -20%; rotate: -8deg; } 50% { translate: 55% 15%; rotate: 8deg; } 100% { translate: -45% 25%; rotate: -4deg; } }
/* Material arrastrado: sigue al puntero sin interceptarlo. */
.tp-ghost { position: fixed; z-index: 200; pointer-events: none; translate: -50% -50%; }
.tp-ghost .tp-cloth { position: static; width: 52px; rotate: 12deg; }
.tp-ghost img { display: block; width: 120px; height: auto; filter: drop-shadow(1px 4px 4px #3b302a40); }
.tp-ghost--cooler img { width: 150px; }
/* Jeringa en camino al centro del procesador: la punta (extremo izquierdo) llega al punto, aprieta y se retira. */
.tp-flying { position: fixed; z-index: 200; pointer-events: none; height: auto; translate: -1% -50%; transition: left .6s ease-in-out, top .6s ease-in-out, opacity .3s; filter: drop-shadow(1px 4px 4px #3b302a40); }
.tp-flying.is-pressing { animation: tp-dispense .55s ease-in-out; }
.tp-flying.is-leaving { opacity: 0; translate: 10% -80%; transition: opacity .3s, translate .3s; }
@keyframes tp-dispense { 40%, 70% { translate: -5% -50%; } }
.tp-new-paste.tp-grow { animation: tp-grow .55s ease-out; }
@keyframes tp-grow { from { scale: 0; } 70% { scale: 1.08; } to { scale: 1; } }

/* El alcohol se acerca a las toallitas, se inclina y vuelve: humedece la toallita al empezar cada limpieza. */
.practice-page .tp-wrap--alcohol.is-pouring { z-index: 3; animation: tp-pour 1.5s ease-in-out; }
.practice-page .tp-wrap--alcohol.is-pouring::after { content: ''; position: absolute; left: 30%; top: 2%; width: 6px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #9fd0ef; opacity: 0; animation: tp-drop 1.5s ease-in; }
@keyframes tp-pour { 0% { translate: 0 0; rotate: 0deg; } 35%, 70% { translate: 8% -62%; rotate: -32deg; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes tp-drop { 0%, 40% { opacity: 0; translate: 0 0; } 45% { opacity: 1; } 70% { opacity: 1; translate: -6px 26px; } 75%, 100% { opacity: 0; translate: -6px 30px; } }

.tp-list { margin: 6px 0 0; padding-left: 18px; }
.tp-progress { margin: 0; font-size: 13px; font-weight: 600; color: #45505A; }
.callout--warning { background: #fff4e5; }
.callout--warning .icon { color: #8a4b00; }
@media (prefers-reduced-motion: reduce) { .tp-spot, .tp-spot.is-pressing, .tp-wet, .practice-page .desk-piece.tp-target, .tp-cloth { animation: none; } .tp-cpu-paste, .tp-cooler-paste { transition: none; } }
/* Conector del ventilador al enchufarlo: se coge y se arrastra hasta CPU_FAN (mismo aviso que en la práctica de placa). */
.paste-practice .loose.tp-grab { padding: 12px; cursor: grab; touch-action: none; animation: fan-plug-attention 2.4s ease-in-out infinite; }
/* El relleno (centrado por translate) amplía la zona táctil del conector, que en móvil mide unos 20 px. */
.paste-practice .loose.tp-grab.tp-moving { cursor: grabbing; animation: none; }
@media (prefers-reduced-motion: reduce) { .paste-practice .loose.tp-grab { animation: none; filter: brightness(1.4) drop-shadow(0 0 4px #ffab38); } }

/* Dosificar la pasta (paso 4): la jeringa apoyada con la punta en el centro, el émbolo se mantiene pulsado y el punto
   crece. Si sobra, se ve aplastada y desbordando la tapa, como quedaría al apretar el disipador. */
.tp-dose-syringe { position: absolute; z-index: 1; width: 120px; height: auto; translate: -1% -50%; pointer-events: none; user-select: none; filter: drop-shadow(1px 4px 4px #3b302a40); transition: translate .12s, opacity .3s; }
.tp-dose-syringe[hidden] { display: none; }
.tp-dose-syringe.is-pressing { translate: -4% -50%; }
.tp-dose-syringe.is-leaving { opacity: 0; translate: 10% -80%; }
.tp-spot[data-spot="press"] { touch-action: none; -webkit-touch-callout: none; user-select: none; }
.tp-new-paste.is-spread {
  border-radius: 46% 54% 41% 59% / 55% 43% 57% 45%; opacity: var(--left, 1); transition: opacity .3s ease-out;
  background: radial-gradient(circle at 42% 40%, #d9dcde 0 10%, #a4a9ac 40%, #8a9094 72%, #6d7377 100%);
  animation: tp-spread .6s ease-out;
}
@keyframes tp-spread { from { scale: .3; } 75% { scale: 1.04; } to { scale: 1; } }
/* Medidor pegado al borde inferior del procesador, centrado con él (js/paste-main.js lo coloca en % de la placa,
   así que sigue el zoom); cristal blanco como el panel. */
.tp-meter {
  position: absolute; z-index: 2; display: grid; gap: 6px; width: 230px; margin-top: 6px; translate: -50% 0;
  padding: 8px 12px; border-radius: 12px; background: rgb(255 255 255 / 92%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 4px 14px rgb(0 0 0 / 25%); pointer-events: none;
}
.tp-meter[hidden] { display: none; }
.tp-meter__label { margin: 0; font-size: 13px; font-weight: 600; color: #45505A; }
.tp-meter__track { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #e3e7ea, #f6d7b0); }
.tp-meter__ok { position: absolute; inset: 0 calc((1 - var(--pea-max)) * 100%) 0 calc(var(--pea-min) * 100%); border-radius: 3px; background: #3CC9D9; }
.tp-meter__mark { position: absolute; top: -4px; left: calc(var(--dose, 0) * 100%); width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #000; }
.tp-meter__scale { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 8px; font-size: 12px; color: #45505A; }
.tp-meter__scale span:nth-child(2) { color: #0a5d6b; font-weight: 600; }
.tp-meter__scale span:last-child { text-align: right; }
@media (prefers-reduced-motion: reduce) { .tp-new-paste.is-spread { animation: none; } .tp-dose-syringe { transition: none; } }