/* Kids Radio — térmica-segura: SOLO transform/opacity en transiciones, sin loops.
   Ver PERFORMANCE-THERMAL-SPEC.md */
:root{
  --bg:#FBF7FF; --lav:#E8D0F4; --ink:#4a3b5c;
  --radio:#F4977E; --songs:#56C39A; --fav:#C08AE0;
  --tap:.12s;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; padding:0;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
html,body{height:100%;}
body{font-family:-apple-system,system-ui,sans-serif; background:var(--bg); color:var(--ink);
  overscroll-behavior:none;}
img{pointer-events:none; -webkit-user-drag:none;}

/* Screens */
.screen{display:none; min-height:100dvh; padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);}
.screen.active{display:flex; flex-direction:column;}

/* HOME */
.home-head{display:flex; align-items:center; justify-content:center; position:relative;
  padding:18px 0 6px;}
.logo{width:84px; height:84px; border-radius:22px; box-shadow:0 6px 18px rgba(0,0,0,.12);}
.star{position:absolute; right:4px; top:18px; width:48px; height:48px; border:none;
  background:transparent; color:#f4c542; font-size:30px; opacity:.55; touch-action:none;}
/* feedback al mantener pulsado: la estrella crece durante los 5s (descubrible para el adulto) */
.star.holding{transform:scale(1.7); opacity:1; transition:transform 5s linear, opacity 5s linear;}
.tiles{flex:1; display:flex; flex-direction:column; gap:18px; justify-content:center; padding:8px 0 24px;}
.tile{flex:1 1 0; min-height:0; border:none; border-radius:30px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.10); transition:transform var(--tap) ease;}
.tile img{height:78%; max-height:180px; width:auto; object-fit:contain;}
.tile-radio{background:#FCEAE3;} .tile-songs{background:#E1F5EE;} .tile-fav{background:#F2E6FA;}
.tile:active{transform:scale(.96);}

/* Nav home button */
.nav-home{align-self:flex-start; border:none; background:transparent; padding:10px 4px; margin-top:6px;}
.nav-home img{width:66px; height:66px;}

/* Grids (Radio / Songs / Favoritos) */
.grid{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start;
  padding:6px 0 24px; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.cell{border:none; background:#fff; border-radius:26px; aspect-ratio:1/1; display:flex;
  align-items:center; justify-content:center; box-shadow:0 5px 14px rgba(0,0,0,.08);
  transition:transform var(--tap) ease;}
.cell img{width:74%; height:74%; object-fit:contain;}
.cell:active{transform:scale(.95);}
.cell.playing{box-shadow:0 0 0 5px var(--songs), 0 5px 14px rgba(0,0,0,.12);}

.empty{flex:1; display:flex; align-items:center; justify-content:center;}
.empty img{width:120px; height:120px; opacity:.28;}

/* Overlays (player / gate / parent) */
.overlay{display:none; position:fixed; inset:0; z-index:10; flex-direction:column; align-items:center;
  background:linear-gradient(160deg,#F4E9FB,#FBF7FF); padding:env(safe-area-inset-top) 22px env(safe-area-inset-bottom);}
.overlay.active{display:flex;}
.overlay.light{background:var(--bg);}

/* Player */
.player-top{width:100%; display:flex; justify-content:space-between; padding-top:12px;}
.round{border:none; background:transparent; padding:0;}
.round img{width:64px; height:64px; transition:transform var(--tap) ease;}
.round:active img{transform:scale(.92);}
.art{width:62vw; max-width:300px; height:62vw; max-height:300px; margin:auto 0;
  object-fit:contain;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.18));}
.art.loading{opacity:.5;}
/* estado "temporizador de sueño activo" (visible) */
.round.on img{filter:drop-shadow(0 0 0 3px #C08AE0) drop-shadow(0 0 8px #C08AE0);}
.round.on::after{content:"●"; position:absolute; color:#C08AE0; font-size:14px; margin:-6px 0 0 -14px;}
.player-controls{display:flex; align-items:center; justify-content:center; gap:26px; margin-bottom:8px;}
.play-big{border:none; background:transparent; padding:0;}
.play-big img{width:120px; height:120px; transition:transform var(--tap) ease;}
.play-big:active img{transform:scale(.94);}
.fav-btn{margin:14px auto 22px;}

/* Gate / PIN (texto OK — adultos) */
.gate-close{position:absolute; top:calc(env(safe-area-inset-top) + 12px); right:18px;
  border:none; background:transparent; font-size:26px; color:var(--ink); opacity:.6;}
.overlay h2{margin-top:18vh; font-size:24px;}
.muted{color:#8a7b9c;} .small{font-size:13px; max-width:320px; text-align:center; margin-top:auto; padding-bottom:8px;}
.dots{display:flex; gap:16px; margin:20px 0 28px;}
.dots span{width:16px; height:16px; border-radius:50%; border:2px solid var(--fav);}
.dots span.on{background:var(--fav);}
.pinpad{display:grid; grid-template-columns:repeat(3,72px); gap:16px;}
.key{width:72px; height:72px; border-radius:50%; border:none; background:#fff; font-size:26px; color:var(--ink);
  box-shadow:0 3px 8px rgba(0,0,0,.08); transition:transform var(--tap) ease;}
.key:active{transform:scale(.92);} .key-x{background:#f3ecf8;}

/* Parent settings */
.row{display:flex; align-items:center; gap:12px; margin:22px 0; font-size:17px; width:100%; max-width:340px;}
.row input[type=range]{flex:1;}
.btn{margin:10px 0; padding:14px 22px; border:none; border-radius:16px; background:var(--fav); color:#fff;
  font-size:16px; font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,.12);}
.btn:active{transform:scale(.97);}

@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }