/* Fondo del login: tienda de pinturas en 3D (anima solo, sin interacción).
   Adaptado de backgorund_login/tienda_de_pinturas_interactiva.html: solo la
   escena (pared, anaqueles con botes, piso, mostrador y abanico de muestras);
   se quitaron el encabezado, botones y tarjeta de información. Todas las clases
   llevan el prefijo "tp-" para no chocar con style.css. */
.tp-escena{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  perspective:1200px; perspective-origin:50% 40%;
  background:#0f172a;
}
.tp-world{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.tp-back-wall{
  position:absolute; width:120vw; height:120vh; top:-10vh; left:-10vw;
  background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
  transform:translateZ(-300px); box-shadow:inset 0 0 100px rgba(0,0,0,.8);
}
.tp-ceiling{
  position:absolute; top:-20vh; left:-10vw; width:120vw; height:60vh; z-index:2; pointer-events:none;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.15) 0%,transparent 40%),
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.2) 0%,transparent 50%),
    radial-gradient(circle at 80% 0%,rgba(255,255,255,.15) 0%,transparent 40%);
}
.tp-glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--tp-glow,rgba(14,165,233,.15)) 0%,transparent 70%);
  transition:background .8s ease;
}
.tp-shelves{
  position:absolute; top:10%; width:100%; display:flex; justify-content:space-around;
  padding:0 5%; transform:translateZ(-150px);
}
.tp-shelf{
  width:42%; background:rgba(30,41,59,.7); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:16px;
  display:flex; flex-direction:column; gap:24px; box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.tp-rack{
  position:relative; height:100px; border-bottom:8px solid #475569;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:space-around; padding-bottom:4px;
}
.tp-rack::after{
  content:''; position:absolute; bottom:-16px; left:0; right:0; height:8px;
  background:linear-gradient(180deg,rgba(0,0,0,.4),transparent);
}
.tp-can{
  width:52px; height:68px; position:relative; border-radius:6px 6px 4px 4px;
  background:linear-gradient(90deg,#64748b 0%,#cbd5e1 25%,#f8fafc 45%,#94a3b8 75%,#475569 100%);
  box-shadow:0 8px 12px rgba(0,0,0,.4),inset 0 2px 2px rgba(255,255,255,.8);
  transform-origin:bottom center;
}
.tp-can.tp-sel{ animation:tpBounce .6s ease infinite alternate; }
@keyframes tpBounce{ from{transform:translateY(0)} to{transform:translateY(-10px)} }
.tp-can-rim{
  position:absolute; top:0; left:-2px; right:-2px; height:6px;
  background:linear-gradient(90deg,#475569,#e2e8f0,#334155); border-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.tp-can-label{
  position:absolute; top:12px; left:2px; right:2px; height:42px; background:#fff; border-radius:2px;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  padding:3px; overflow:hidden; box-shadow:inset 0 0 4px rgba(0,0,0,.15);
}
.tp-can-stripe{ width:100%; height:22px; border-radius:2px; position:relative; transition:background-color .4s ease; }
.tp-can-stripe::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); }
.tp-can-brand{ font:800 6px/1 'Plus Jakarta Sans',Arial,sans-serif; color:#1e293b; letter-spacing:.5px; text-transform:uppercase; }
.tp-floor{
  position:absolute; width:160vw; height:160vh; left:-30vw; top:35vh;
  background:
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    radial-gradient(circle at 50% 30%,rgba(51,65,85,.8) 0%,rgba(15,23,42,1) 80%);
  background-size:80px 80px,80px 80px,100% 100%;
  transform:rotateX(80deg) translateZ(0); transform-origin:50% 0%;
  box-shadow:inset 0 50px 100px rgba(0,0,0,.9);
}
.tp-counter{
  position:absolute; bottom:-5vh; left:50%; transform:translateX(-50%) translateZ(50px);
  width:70vw; max-width:900px; height:280px;
  background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);
  border-top:6px solid #38bdf8; border-radius:20px 20px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,.6),inset 0 2px 4px rgba(255,255,255,.1);
  z-index:5; display:flex; justify-content:center; align-items:flex-start; padding-top:20px;
}
.tp-desk-top{
  position:absolute; top:-20px; left:-2%; width:104%; height:24px;
  background:linear-gradient(90deg,#334155,#64748b,#334155); border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.5);
}
.tp-fan{ position:relative; width:280px; height:180px; margin-top:10px; }
.tp-blade{
  position:absolute; bottom:10px; left:50%; width:44px; height:160px; margin-left:-22px;
  border-radius:22px 22px 8px 8px; background:#fff; transform-origin:bottom center;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1);
  box-shadow:-2px 4px 10px rgba(0,0,0,.3),inset 0 0 0 1px rgba(0,0,0,.05);
  padding:6px; display:flex; flex-direction:column; gap:4px; overflow:hidden;
}
.tp-box{ flex:1; border-radius:6px; position:relative; }
.tp-box::after{ content:''; position:absolute; inset:0; border-radius:6px; background:linear-gradient(135deg,rgba(255,255,255,.3) 0%,transparent 60%); }
.tp-pivot{
  position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:18px; height:18px;
  border-radius:50%; background:radial-gradient(circle,#cbd5e1 0%,#475569 100%);
  border:2px solid #fff; box-shadow:0 2px 4px rgba(0,0,0,.4); z-index:50;
}
@media (max-width:767.98px){
  .tp-shelf{ padding:10px; gap:16px; }
  .tp-can{ width:36px; height:48px; }
  .tp-can-label{ top:8px; height:30px; }
  .tp-can-stripe{ height:14px; }
  .tp-can-brand{ display:none; }
  .tp-fan{ transform:scale(.7); transform-origin:center top; }
}