/* =========================================================
   Mi Piano — el modo bebé (2–3 años)
   ---------------------------------------------------------
   Pantalla completa ENCIMA de toda la app (z-index 90: por encima de
   la mascota, 85–86; por debajo de los diálogos, 96–97, para que el
   panel de planes que abre el adulto se vea). Ver docs/Modo bebé.md.

   Todo es GRANDE y nada se selecciona, se arrastra ni hace zoom: lo
   usa alguien que toca con la mano entera.
   ========================================================= */

.bebe{display:none;position:fixed;inset:0;z-index:90;overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%,#fffdf6 0,#fdf1d8 70%);
  grid-template-rows:minmax(0,1fr) minmax(170px,42%);
  -webkit-user-select:none;user-select:none;touch-action:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
body.bebe-on{overflow:hidden}
body.bebe-on .bebe{display:grid}
body.sin-bebe #bebebtn, body.sin-bebe #bebebtn2, body.sin-bebe #ppbebe{display:none}
.bebe.tiembla{animation:bb-tiembla .35s}

/* ---------- arriba: la mascota y el estímulo ---------- */
.bb-arriba{position:relative;display:flex;align-items:center;justify-content:center;
  gap:3vw;padding:10px 64px 6px;min-height:0}
.bb-mascota{width:min(24vh,19vw);flex:none}
.bb-mascota svg{width:100%;height:auto;display:block}
.bb-mascota.salta{animation:bb-salta .6s ease-out}
.bb-mascota.rie{animation:bb-rie .5s ease-in-out}
.bb-estimulo{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;height:100%}

/* la portada: el ▶ enorme y las burbujas de actividad */
.bb-portada-caja{display:flex;flex-direction:column;align-items:center;gap:2.4vh}
.bb-play{width:min(26vh,22vw);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;
  background:var(--gold);color:#fff;font-size:min(12vh,10vw);line-height:1;padding-left:1.2vh;
  box-shadow:0 10px 0 var(--gold-dk),0 18px 30px rgba(120,80,10,.25);animation:bb-late 1.8s ease-in-out infinite}
.bb-play:active{transform:translateY(6px);box-shadow:0 4px 0 var(--gold-dk)}
.bb-acts{display:flex;gap:1.6vw;flex-wrap:wrap;justify-content:center}
.bb-act{width:min(13vh,11vw);aspect-ratio:1;border-radius:22%;border:0;cursor:pointer;
  background:#fff;font-size:min(7vh,6vw);line-height:1;
  box-shadow:0 5px 0 #e3d8bf,0 8px 16px rgba(0,0,0,.08)}
.bb-act:active{transform:translateY(4px);box-shadow:0 1px 0 #e3d8bf}
.bb-canciones .bb-act{width:min(18vh,14vw);font-size:min(10vh,8vw)}

.bb-grande{font-size:min(22vh,18vw);line-height:1;animation:bb-flota 2.6s ease-in-out infinite}

/* Busca el color: el globo */
.bb-globo{position:relative;width:min(30vh,26vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.65) 0 11%,transparent 12%),var(--c);
  box-shadow:inset -14px -18px 0 rgba(0,0,0,.14),0 14px 30px rgba(0,0,0,.14);
  animation:bb-flota 2.6s ease-in-out infinite}
.bb-globo i{position:absolute;left:50%;top:100%;width:2px;height:8vh;background:#b9ae98;transform:translateX(-50%)}
.bb-globo-forma{position:absolute;left:28%;top:28%;width:44%;height:44%;opacity:.95}
.bb-globo-forma .f{stroke:none}
.bb-globo.menea,.bb-tecla-grande.menea,.bb-puntos.menea{animation:bb-menea .45s ease-in-out}
.bb-globo.revienta,.bb-tecla-grande.revienta{animation:bb-revienta .5s ease-out forwards}

/* Negras o blancas: una tecla enorme */
.bb-tecla-grande{width:min(15vh,13vw);height:min(34vh,30vw);border-radius:0 0 16px 16px;
  box-shadow:0 12px 26px rgba(0,0,0,.18)}
.bb-tecla-grande.negra{background:#2e2a22}
.bb-tecla-grande.blanca{background:#fff;border:4px solid #c9c1af}

/* Sigue la luz y canción mágica: la fila de colores */
.bb-puntos{display:flex;gap:1.4vw;flex-wrap:wrap;justify-content:center;max-width:62vw}
.bb-punto{display:block;width:min(10vh,8vw);aspect-ratio:1;transition:transform .2s,opacity .2s}
.bb-punto.negra{border-radius:50%;background:#2e2a22}
.bb-punto.ahora{transform:scale(1.3);filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 8px var(--c))}
.bb-punto.hecho{opacity:.3;transform:scale(.8)}
.bb-cancion{display:flex;align-items:center;gap:3vw}
.bb-cancion .bb-grande{font-size:min(16vh,13vw)}

/* Fuerte y suave: el oso enorme o el pajarito pequeño */
.bb-fuerza{line-height:1;animation:bb-flota 2.6s ease-in-out infinite}
.bb-fuerza.fuerte{font-size:min(30vh,25vw)}
.bb-fuerza.suave{font-size:min(13vh,11vw)}
.bb-fuerza.baila{animation:bb-baila .7s ease-in-out 2}
.bb-fuerza.menea{animation:bb-menea .45s ease-in-out}

/* ---------- el teclado gigante ---------- */
.bb-teclado{position:relative;margin:0 1.2vw calc(1.2vh + env(safe-area-inset-bottom));touch-action:none}
.bb-tecla{position:absolute;top:0;bottom:0;cursor:pointer}
.bb-blanca{background:#fff;border:2px solid #c9c1af;border-top:0;border-radius:0 0 18px 18px;
  box-shadow:inset 0 -12px 0 #efe8d9;transition:background .06s}
.bb-pega{position:absolute;left:50%;bottom:14%;width:min(64%,12vh);aspect-ratio:1;transform:translateX(-50%)}
/* la forma de la nota: el color lo lleva el SVG, el borde lo pone esto */
.bb-forma{display:block;width:100%;height:100%;overflow:visible}
.bb-forma .f{stroke:rgba(0,0,0,.22);stroke-width:4;stroke-linejoin:round}
.bb-blanca.on{background:var(--c);box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
.bb-blanca.on .bb-pega{transform:translateX(-50%) scale(1.08)}
.bb-blanca.on .bb-forma .f{fill:#fff;stroke:rgba(255,255,255,.6)}
.bb-negra{bottom:auto;height:58%;background:#2e2a22;border-radius:0 0 12px 12px;z-index:2;
  box-shadow:inset 0 -8px 0 #151310}
.bb-negra.on{background:#6a6254}
.bb-tecla.pista{animation:bb-pista 1s ease-in-out infinite}

/* ---------- burbujas y confeti ---------- */
.bb-lienzo{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.bb-burbuja{position:absolute;font-style:normal;line-height:1;transform:translateX(-50%);
  text-shadow:0 2px 0 rgba(0,0,0,.08);animation:bb-sube 1.3s ease-out forwards}
.bb-conf{position:absolute;top:-6%;width:14px;height:22px;border-radius:3px;animation:bb-cae 2.4s linear forwards}

/* ---------- el álbum de pegatinas ---------- */
.bb-album-btn{background:#fff7e0}
.bb-premio{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:4;
  width:min(34vh,30vw);aspect-ratio:1;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 10px #fde68a,0 20px 50px rgba(0,0,0,.25);animation:bb-premio 2.8s ease-in-out forwards}
.bb-premio span{font-size:min(20vh,17vw);line-height:1}
.bb-album{display:none;position:absolute;inset:0;z-index:5;overflow:auto;
  background:#fff7e0;padding:70px 3vw 3vh;touch-action:pan-y}
body.bb-album-on .bb-album{display:block}
.bb-album-cerrar{position:absolute;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;border:0;background:#fff;font-size:26px;cursor:pointer;
  box-shadow:0 4px 0 #e3d8bf}
/* diez por fila: en una tablet apaisada caben las treinta sin desplazar */
.bb-album-hojas{display:grid;grid-template-columns:repeat(10,1fr);gap:1.2vw;max-width:1100px;margin:0 auto}
.bb-hueco{position:relative;aspect-ratio:1;border-radius:18px;border:3px dashed #e3d3a8;
  display:flex;align-items:center;justify-content:center;font-size:min(9vh,5.5vw);line-height:1;background:transparent}
.bb-hueco.lleno{border:0;background:#fff;box-shadow:0 4px 0 #ecdcb4;cursor:pointer;padding:0}
.bb-hueco.lleno.salta{animation:bb-salta .6s ease-out}
.bb-hueco b{position:absolute;right:6px;bottom:4px;font-size:.9rem;color:var(--gold-dk)}
body.bb-sesion .bb-album-btn{display:none}

/* ---------- las esquinas: candado (adulto) y casa ---------- */
.bb-candado,.bb-casa{position:absolute;top:calc(8px + env(safe-area-inset-top));z-index:7;
  width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.7);
  font-size:20px;line-height:48px;padding:0;cursor:pointer}
.bb-candado{right:10px;opacity:.55;touch-action:none}
.bb-candado span{position:relative;z-index:1}
.bb-candado svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.bb-candado circle{fill:none;stroke:var(--gold);stroke-width:3.5;stroke-dasharray:101;stroke-dashoffset:101}
.bb-candado.apretando{opacity:1}
.bb-candado.apretando circle{transition:stroke-dashoffset 3s linear;stroke-dashoffset:0}
.bb-casa{left:10px;font-size:24px}
body.bb-portada .bb-casa, body.bb-sesion .bb-casa, body.bb-dormido-on .bb-casa{display:none}

/* ---------- dormido ---------- */
.bb-dormido{display:none;position:absolute;inset:0;z-index:6;background:rgba(30,34,62,.9);
  flex-direction:column;align-items:center;justify-content:center;color:#fff}
body.bb-dormido-on .bb-dormido{display:flex}
.bb-dormido-cara{width:min(34vh,30vw);transform:rotate(-10deg);filter:brightness(.85);
  animation:bb-respira 3.2s ease-in-out infinite}
.bb-dormido-cara svg{width:100%;height:auto}
.bb-dormido span{font-size:min(12vh,10vw);animation:bb-flota 2.6s ease-in-out infinite}
.bb-dormido span.ronca{animation:bb-revienta .6s ease-out}

/* ---------- el panel del adulto ---------- */
.bb-adulto{display:none;position:absolute;inset:0;z-index:8;background:rgba(34,29,20,.45);
  overflow:auto;padding:3vh 3vw;touch-action:auto;-webkit-user-select:text;user-select:text}
body.bb-adulto-on .bb-adulto{display:block}
.bb-panel{background:var(--paper);max-width:720px;margin:0 auto;border-radius:18px;
  padding:16px 20px 26px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.bb-panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bb-panel-top h3{margin:0;font-size:1.25rem}
.bb-panel h4{margin:22px 0 6px;font-size:1.02rem}
.bb-panel p{margin:6px 0;line-height:1.5}
.bb-sub{font-weight:600;margin-top:12px!important}
.bb-fila{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.bb-check{display:flex;gap:8px;align-items:center;font-size:1rem;cursor:pointer}
.bb-check input{width:22px;height:22px}
.bb-seg{display:flex;gap:6px;flex-wrap:wrap}
.bb-seg button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;
  font:inherit;cursor:pointer;min-height:var(--tap)}
.bb-seg button.on{background:var(--gold);border-color:var(--gold);color:#fff}
.bb-prueba{background:#fff;border:2px solid var(--gold);border-radius:12px;padding:10px 14px}
.bb-colores{display:flex;flex-wrap:wrap;gap:6px 14px}
.bb-col{display:inline-flex;align-items:center;gap:6px}
.bb-col .bb-forma{width:18px;height:18px}
.bb-col small{color:var(--soft)}
.bb-col.sola small{color:var(--ok);font-weight:600}

/* ---------- animaciones ---------- */
@keyframes bb-late{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes bb-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bb-salta{0%,100%{transform:translateY(0)}35%{transform:translateY(-22%)}65%{transform:translateY(-6%)}}
@keyframes bb-rie{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes bb-menea{0%,100%{transform:translateX(0)}20%{transform:translateX(-14px)}40%{transform:translateX(12px)}60%{transform:translateX(-8px)}80%{transform:translateX(5px)}}
@keyframes bb-revienta{0%{transform:scale(1);opacity:1}60%{transform:scale(1.35);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes bb-sube{0%{transform:translate(-50%,0) scale(.3);opacity:0}15%{transform:translate(-50%,-15%) scale(1);opacity:1}100%{transform:translate(-50%,-180%) scale(1.1);opacity:0}}
@keyframes bb-cae{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(540deg)}}
@keyframes bb-tiembla{0%,100%{transform:translate(0)}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-4px)}75%{transform:translate(-3px,2px)}}
@keyframes bb-pista{0%,100%{box-shadow:inset 0 -12px 0 #efe8d9}50%{box-shadow:inset 0 0 0 8px var(--c),0 0 24px var(--c)}}
@keyframes bb-baila{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(12deg) scale(1.1)}}
@keyframes bb-premio{0%{transform:translate(-50%,-50%) scale(0) rotate(-30deg);opacity:0}
  18%{transform:translate(-50%,-50%) scale(1.1) rotate(8deg);opacity:1}
  30%,75%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
  100%{transform:translate(-50%,-160%) scale(.3);opacity:0}}
@keyframes bb-respira{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(-10deg) scale(1.04)}}

/* móvil en vertical: el teclado un poco más bajo, todo lo demás igual */
@media (orientation:portrait){
  .bebe{grid-template-rows:minmax(0,1fr) minmax(160px,34%)}
  .bb-arriba{flex-direction:column;padding-top:60px}
  .bb-mascota{width:min(18vh,30vw)}
  .bb-album-hojas{grid-template-columns:repeat(5,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .bb-play,.bb-grande,.bb-globo,.bb-dormido span,.bb-dormido-cara{animation:none}
}