/* ════════════════════════════════════════════════════════════
   🥚 LIMPIAAI v13.0 — PIXAR RENDER EDITION
   Estética de película 3D animada: materiales glossy/clay,
   iluminación cinematográfica, squash & stretch, candy colors,
   sombras suaves multicapa, rim lights y rebotes spring.
   Se apila sobre style/premium/celestial/quantum/titan.
   ════════════════════════════════════════════════════════════ */

/* ═══ PIXAR DESIGN TOKENS ═══ */
:root {
  /* Spring easings (squash & stretch) */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.22, 1.2, .36, 1);
  /* Candy palette accents */
  --px-candy1: #8b5cf6;
  --px-candy2: #22d3ee;
  --px-candy3: #fbbf24;
  --px-candy4: #fb7185;
  /* Clay material shadows (multicapa = profundidad 3D) */
  --px-clay:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -6px 14px rgba(0,0,0,.35) inset,
    0 2px 3px rgba(0,0,0,.35),
    0 10px 24px rgba(0,0,0,.45),
    0 24px 60px rgba(124,58,237,.12);
  --px-clay-hover:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 -6px 16px rgba(0,0,0,.3) inset,
    0 4px 6px rgba(0,0,0,.35),
    0 16px 36px rgba(0,0,0,.5),
    0 32px 80px rgba(124,58,237,.2);
  /* Glossy button material */
  --px-gloss:
    0 2px 0 rgba(255,255,255,.25) inset,
    0 -8px 16px rgba(0,0,0,.25) inset,
    0 8px 20px rgba(124,58,237,.45),
    0 20px 48px rgba(124,58,237,.25);
  /* Bigger toy-like radii */
  --r: 16px; --rl: 22px; --rx: 28px;
}

/* ═══ CINEMATIC AMBIENT — warm key light + cool fill ═══ */
body.pixar-mode::after {
  background:
    radial-gradient(ellipse 60% 40% at 25% 12%, rgba(251,191,36,.05) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 78% 85%, rgba(34,211,238,.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 55% 45%, rgba(139,92,246,.05) 0%, transparent 60%);
}

/* ═══ CLAY CARDS — soft 3D material ═══ */
.pixar-mode .glass-card,
.pixar-mode .stat-card,
.pixar-mode .tech-card,
.pixar-mode .hist-item,
.pixar-mode .weather-card,
.pixar-mode .bio-card,
.pixar-mode .heat-card,
.pixar-mode .oracle-card,
.pixar-mode .notice {
  border-radius: var(--rx) !important;
  box-shadow: var(--px-clay) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: transform .35s var(--spring), box-shadow .35s ease !important;
}
.pixar-mode .stat-card:hover,
.pixar-mode .tech-card:hover,
.pixar-mode .hist-item:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: var(--px-clay-hover) !important;
}
.pixar-mode .stat-card:active,
.pixar-mode .tech-card:active,
.pixar-mode .hist-item:active {
  transform: translateY(1px) scale(.97);
  transition-duration: .12s;
}

/* Top-light sheen on cards (como luz de estudio desde arriba) */
.pixar-mode .stat-card::before,
.pixar-mode .tech-card::before {
  content: '';
  position: absolute; inset: 0 0 55% 0;
  border-radius: var(--rx) var(--rx) 50% 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent);
  pointer-events: none;
}
.pixar-mode .stat-card, .pixar-mode .tech-card { position: relative; overflow: hidden; }

/* ═══ GLOSSY 3D BUTTONS — plastic toy material ═══ */
.pixar-mode .btn-primary {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 45%, #6d28d9 100%) !important;
  box-shadow: var(--px-gloss) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--spring), box-shadow .3s ease, filter .2s ease !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.pixar-mode .btn-primary::before {
  /* specular highlight — brillo de plástico */
  content: '';
  position: absolute; top: 6%; left: 8%; right: 8%; height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.02));
  pointer-events: none;
}
.pixar-mode .btn-primary:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.08); }
.pixar-mode .btn-primary:active { transform: translateY(1px) scale(.94); transition-duration: .1s; }

.pixar-mode .hdr-btn, .pixar-mode .hdr-cmdk {
  border-radius: 999px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 3px 8px rgba(0,0,0,.35) !important;
  transition: transform .25s var(--spring) !important;
}
.pixar-mode .hdr-btn:active, .pixar-mode .hdr-cmdk:active { transform: scale(.88); }

/* ═══ SQUASH & STRETCH universal (JS añade .px-squash) ═══ */
@keyframes pxSquash {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.06, .9); }
  55%  { transform: scale(.96, 1.05); }
  75%  { transform: scale(1.02, .98); }
  100% { transform: scale(1, 1); }
}
.px-squash { animation: pxSquash .45s var(--spring-soft); }

/* ═══ HERO — movie poster ═══ */
.pixar-mode .hero-title {
  /* Texto 3D extruido estilo cartel de película animada */
  text-shadow:
    0 1px 0 rgba(255,255,255,.15),
    0 2px 0 rgba(109,40,217,.8),
    0 3px 0 rgba(91,33,182,.7),
    0 4px 0 rgba(76,29,149,.6),
    0 6px 12px rgba(0,0,0,.5),
    0 12px 40px rgba(124,58,237,.35);
  letter-spacing: .01em;
}
.pixar-mode .hero-eyebrow {
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 12px rgba(0,0,0,.3);
  background: linear-gradient(180deg, rgba(139,92,246,.25), rgba(109,40,217,.15));
}

/* ═══ MASCOTA PIXAR (hero + splash) ═══ */
.px-mascot {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 12px 30px rgba(124,58,237,.45)) drop-shadow(0 4px 10px rgba(0,0,0,.5));
  animation: pxFloat 4.5s ease-in-out infinite;
  transition: transform .4s var(--spring);
  will-change: transform;
}
@keyframes pxFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  50%      { transform: translateY(-10px) rotate(2deg) scale(1.02); }
}
.pixar-mode .hero-egg {
  font-size: 0 !important; /* oculta emoji, muestra mascota */
  /* v21 CORRECCIÓN DE CENTRADO:
     `.hero-egg` es `position:absolute; inset:0` sobre un envoltorio de 150px.
     Al fijarle aquí 130px de ancho, `inset:0` deja de poder estirarlo y el
     elemento se ancla al borde IZQUIERDO, quedando 10px descentrado respecto
     al envoltorio y ~139px respecto al centro del título. Ese era el huevo
     desplazado a la izquierda que se veía en pantalla.
     Se ocupa todo el envoltorio y se centra la imagen por flexbox, limitando
     el tamaño del huevo con la propia imagen, no con la caja. */
  inset: 0;
  width: auto; height: auto;
  display: flex; align-items: center; justify-content: center;
}
.pixar-mode .hero-egg .px-mascot {
  width: 130px; height: 130px;
  max-width: 100%;
}
.pixar-mode .portal-egg {
  font-size: 0 !important;
  /* v19: huevo ceremonial protagonista — mucho más grande que el anterior (90px) */
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
/* v19: el huevo sacro NO se recorta en círculo (no es una mascota en medallón)
   y no lleva marco ni fondo: es un objeto aislado con alfa limpio. */
.px-egg-sacred {
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: contain;
  filter:
    drop-shadow(0 0 45px rgba(251,191,36,.30))
    drop-shadow(0 18px 44px rgba(124,58,237,.42))
    drop-shadow(0 6px 14px rgba(0,0,0,.55));
  animation: pxEggAscend 6s ease-in-out infinite;
}
/* Levitación ceremonial: más lenta y con menos rotación que pxFloat → más solemne */
@keyframes pxEggAscend {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  50%      { transform: translateY(-18px) rotate(1deg) scale(1.035); }
}
/* Suelo con sombra de contacto (grounding shadow, clave del look 3D) */
.pixar-mode .hero-egg-wrap::after {
  content: '';
  position: absolute; bottom: -14px; left: 50%;
  width: 90px; height: 18px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,.55) 0%, transparent 70%);
  border-radius: 50%;
  animation: pxShadow 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pxShadow {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .8; }
  50%      { transform: translateX(-50%) scaleX(.75); opacity: .5; }
}

/* ═══ NAV DOCK — juguete flotante ═══ */
.pixar-mode .bnav {
  border-radius: 26px 26px 0 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 -12px 40px rgba(0,0,0,.5),
    0 -2px 12px rgba(124,58,237,.15);
}
.pixar-mode .bnav-item { transition: transform .3s var(--spring); }
.pixar-mode .bnav-item.active { transform: translateY(-4px); }
.pixar-mode .bnav-item.active .bnav-icon {
  filter: drop-shadow(0 4px 10px rgba(139,92,246,.6));
  animation: pxSquash .5s var(--spring-soft);
}
.pixar-mode .bnav-item:active { transform: scale(.85); transition-duration: .1s; }

/* ═══ GAUGE / RESULTADOS — candy glow ═══ */
.pixar-mode .gauge-wrap, .pixar-mode .result-card {
  border-radius: var(--rx) !important;
  box-shadow: var(--px-clay) !important;
}

/* ═══ MODALES — bottom sheets tipo juguete ═══ */
.pixar-mode .legal-content,
.pixar-mode .journal-content,
.pixar-mode .cmdk-box {
  border-radius: var(--rx) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 -20px 80px rgba(124,58,237,.15),
    0 30px 90px rgba(0,0,0,.7) !important;
}

/* ═══ HISTORIAL: diario + comparador (estilos v12 pendientes) ═══ */
.hist-journal {
  margin: 6px 0 8px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(139,92,246,.08);
  border: 1px dashed rgba(139,92,246,.25);
  font-size: .72rem; color: var(--ta);
  display: flex; gap: 6px; align-items: center;
}
.hist-journal em { font-style: normal; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-journal-btn {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.25);
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .25s var(--spring), background .2s;
}
.hist-journal-btn:hover { background: rgba(139,92,246,.28); transform: scale(1.12); }
.hist-journal-btn:active { transform: scale(.85); }

/* ═══ SPLASH — logo de película ═══ */
.pixar-mode .splash-brand {
  text-shadow:
    0 2px 0 rgba(109,40,217,.9),
    0 4px 0 rgba(91,33,182,.7),
    0 6px 0 rgba(76,29,149,.5),
    0 10px 24px rgba(0,0,0,.6),
    0 16px 60px rgba(124,58,237,.4);
}

/* ═══ ORACLE CARD — carta de juguete brillante ═══ */
.pixar-mode .oracle-inner {
  box-shadow: var(--px-clay) !important;
  border-radius: var(--rx) !important;
}

/* ═══ TOASTS — burbujas bouncy ═══ */
.pixar-mode .toast {
  border-radius: 999px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 10px 30px rgba(0,0,0,.5) !important;
  animation: pxToastIn .5s var(--spring) !important;
}
@keyframes pxToastIn {
  0%   { transform: translateY(30px) scale(.6); opacity: 0; }
  60%  { transform: translateY(-4px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ═══ INPUTS / SELECT ═══ */
.pixar-mode input[type="text"], .pixar-mode textarea, .pixar-mode select {
  border-radius: 16px !important;
  box-shadow: 0 -2px 6px rgba(0,0,0,.3) inset, 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .px-mascot, .pixar-mode .hero-egg-wrap::after { animation: none; }
  .px-squash { animation: none; }
}