/* ==========================================================================
   Finde · Modo niño (D-170) — estilos compartidos del rincón y sus juegos.

   Mismo lenguaje que el resto de la app (tokens, Outfit + DM Sans, coral),
   pero pensado para un dedo chico: blancos de toque grandes, texto en
   primera persona, sin precios ni barra inferior, y movimiento con resorte
   (--spring-vivo / --spring-suave) en todo lo que se toca. Cada pantalla
   pone su propio fondo con --nino-fondo.
   ========================================================================== */

body.nino {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
.nino .phone { background: var(--nino-fondo, var(--bg-app)); }

.nino-escena {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--nino-fondo, var(--bg-app));
}

/* --- Barra de arriba: volver · lo que pasa en el juego · salir (adultos) ---- */
.nino-barra {
  flex: none; position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.nino-redondo {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-card);
  font-size: 22px; line-height: 1; color: var(--ink-900); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.nino-redondo:active { transform: scale(.9); }
/* El candado se llena como un anillo mientras se mantiene presionado. */
.nino-salir { background: conic-gradient(var(--coral-600) calc(var(--p, 0) * 360deg), rgba(255, 255, 255, .94) 0); }
.nino-salir::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.nino-salir > span { position: relative; font-size: 20px; }

/* inline-block y no inline-flex: en un contenedor flex el espacio entre el texto
   y el <b> se pierde ("Mi álbum4/31"). */
.nino-pildora {
  display: inline-block; height: 40px; line-height: 40px; padding: 0 var(--space-4); text-align: center;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-card);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); color: var(--ink-900);
  white-space: nowrap;
}
.nino-pildora b { font-variant-numeric: tabular-nums; }
.nino-pildora .pe { font-style: normal; margin-right: 6px; }
.nino-pildora--rebota { animation: nino-rebota 460ms var(--spring-vivo); }

.nino-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 60px; padding: 0 var(--space-6); border-radius: var(--radius-pill);
  background: var(--coral-600); color: #fff; box-shadow: var(--shadow-accent);
  font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl);
  transition: transform var(--dur-fast) var(--ease);
}
.nino-boton:active { transform: scale(.95); }
.nino-boton--claro { background: #fff; color: var(--ink-900); box-shadow: var(--shadow-card); }

/* --- Carta de plan: degradado de la categoría + emoji grande ------------------- */
.nino-carta {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; color: #fff;
  background: linear-gradient(155deg, var(--c1, #2D6CA8), var(--c2, #1f4c76));
  box-shadow: var(--shadow-raised);
}
.nino-carta::before, .nino-carta::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: #fff; }
.nino-carta::before { width: 62%; aspect-ratio: 1; right: -16%; top: -22%; opacity: .12; }
.nino-carta::after  { width: 46%; aspect-ratio: 1; left: -14%; bottom: -20%; opacity: .08; }
.nino-carta__emoji { line-height: 1; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .22)); }
.nino-carta__titulo {
  font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nino-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .22); color: #fff; backdrop-filter: blur(4px);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
}

/* --- Movimiento compartido ------------------------------------------------------ */
@keyframes nino-pop     { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes nino-rebota  { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes nino-flota   { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes nino-sube    { from { transform: translateY(28px); opacity: 0; } }
@keyframes nino-entra-der { from { transform: translateX(110%) rotate(6deg); opacity: 0; } }
@keyframes nino-entra-izq { from { transform: translateX(-110%) rotate(-6deg); opacity: 0; } }
@keyframes nino-sale-der  { to { transform: translateX(115%) rotate(10deg); opacity: 0; } }
@keyframes nino-sale-izq  { to { transform: translateX(-115%) rotate(-10deg); opacity: 0; } }
@keyframes nino-cae     { from { transform: translateY(-60px) scale(.9); opacity: 0; } }

/* Confeti (js/nino.js → FindeNino.confeti) */
.conf {
  position: absolute; z-index: 60; width: 10px; height: 14px; border-radius: 3px; background: var(--c);
  pointer-events: none; animation: nino-conf 950ms cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes nino-conf {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  55%  { transform: translate(calc(var(--dx) * .85), var(--dy)) rotate(calc(var(--rot) * .6)); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 150px)) rotate(var(--rot)); opacity: 0; }
}

/* Avisos cortos ("¡Guardado en tu mochila!") */
.nino-aviso {
  position: absolute; left: 50%; top: 40%; z-index: 40; transform: translateX(-50%);
  padding: 14px 22px; border-radius: var(--radius-pill); background: #fff; color: var(--ink-900);
  box-shadow: var(--shadow-raised); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl);
  white-space: nowrap; pointer-events: none; animation: nino-aviso 1500ms var(--ease) forwards;
}
@keyframes nino-aviso {
  0% { transform: translate(-50%, 16px) scale(.8); opacity: 0; }
  15% { transform: translate(-50%, 0) scale(1.04); opacity: 1; }
  80% { transform: translate(-50%, -6px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -22px) scale(.96); opacity: 0; }
}

.nino-estado { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--nino-fondo, var(--bg-app)); }
.nino-estado[hidden] { display: none; }
.nino-estado .estado-red, .nino-estado .estado-red p { color: rgba(255, 255, 255, .92); }
.nino-estado .estado-red i, .nino-estado .cargador-puntos i { color: #fff; }
.nino-estado .cargador-puntos i { background: #fff; }