/* Piel del app: separa las superficies y calienta el morado.
   Antes el fondo, las tarjetas, la barra superior y las pestañas usaban tonos
   casi idénticos, así que todo se leía como una sola mancha. Aquí el lienzo
   tiene profundidad, las tarjetas flotan sobre él y la barra de pestañas es
   una barra. Nada de esto toca los colores del texto. */

/* ---------- lienzo con profundidad y un poco de calor ---------- */
body{
  background:
    radial-gradient(115% 70% at 88% -8%, oklch(.64 .21 348 / .5), transparent 58%),
    radial-gradient(95% 55% at 2% 2%, oklch(.6 .17 262 / .42), transparent 55%),
    linear-gradient(180deg, oklch(.49 .215 301) 0%, oklch(.38 .175 299) 58%, oklch(.32 .15 297) 100%);
  background-attachment:fixed;
}
[data-theme=dark] body{
  background:
    radial-gradient(115% 70% at 88% -8%, oklch(.42 .16 348 / .5), transparent 58%),
    radial-gradient(95% 55% at 2% 2%, oklch(.38 .13 262 / .45), transparent 55%),
    linear-gradient(180deg, oklch(.3 .13 300) 0%, oklch(.24 .1 298) 60%, oklch(.2 .085 297) 100%);
  background-attachment:fixed;
}

/* Polvo de estrellas: casi imperceptible, pero quita la sensación de plano. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, oklch(1 0 0 / .5), transparent),
    radial-gradient(1.4px 1.4px at 74% 9%, oklch(1 0 0 / .4), transparent),
    radial-gradient(1.8px 1.8px at 33% 62%, oklch(1 0 0 / .32), transparent),
    radial-gradient(1.3px 1.3px at 88% 47%, oklch(1 0 0 / .4), transparent),
    radial-gradient(1.5px 1.5px at 56% 83%, oklch(1 0 0 / .3), transparent),
    radial-gradient(1.2px 1.2px at 22% 92%, oklch(1 0 0 / .35), transparent);
}
#app{position:relative;z-index:1}

/* ---------- las tarjetas flotan sobre el lienzo ---------- */
.hm-card,.hm-sorpresa,.hm-todos,.hm-versiculo,.lb-group-head,.parent-panel,
.settings-row,.profile-child-card,.profile-stats>button,.profile-options>button,
.jy-flame-card,.jy-cal,.lb-empty{
  background:oklch(1 0 0 / .11);
  border:1px solid oklch(1 0 0 / .17);
  box-shadow:0 12px 26px -16px oklch(.12 .07 298 / .85), inset 0 1px 0 oklch(1 0 0 / .12);
}
[data-theme=dark] .hm-card,[data-theme=dark] .hm-sorpresa,[data-theme=dark] .hm-todos,
[data-theme=dark] .hm-versiculo,[data-theme=dark] .lb-group-head,[data-theme=dark] .parent-panel,
[data-theme=dark] .settings-row,[data-theme=dark] .profile-child-card,
[data-theme=dark] .jy-flame-card,[data-theme=dark] .jy-cal{
  background:oklch(1 0 0 / .07);border-color:oklch(1 0 0 / .12);
}

/* La portada de cada cuento gana sombra propia: se despega del fondo. */
.lb-cover{box-shadow:0 14px 28px -16px oklch(.1 .06 298 / .95)}
.lb-card{transition:transform .18s}
.lb-card:active{transform:scale(.97)}

/* ---------- barra superior y pestañas dejan de confundirse con el cuerpo ---------- */
/* La barra fija se pintaba con márgenes negativos fijos, pero el relleno del
   contenido cambia con el ancho: en pantallas grandes las portadas asomaban por
   los lados y por encima. El fondo lo pinta un pseudoelemento que se extiende
   más allá del contenedor, así no depende del ancho, y el contenido de arriba
   ya no puede quedar por encima de la barra. */
/* 'clip' recorta el fondo de la barra: sin él, el -100vw de la derecha
   dejaba la página desplazándose de lado. 'clip' no crea contenedor de
   scroll, así que el sticky de arriba sigue funcionando. */
.main{padding-top:0;overflow-x:clip}
.topbar{position:sticky;top:0;z-index:7;padding-top:16px;padding-bottom:12px;margin-bottom:22px}
.topbar>*{position:relative;z-index:1}
.topbar::before{
  content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;z-index:0;
  background:oklch(.4 .18 300 / .94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid oklch(1 0 0 / .13);
}
[data-theme=dark] .topbar::before{background:oklch(.24 .1 299 / .95)}

@media(max-width:760px){
  .sidebar{
    background:oklch(.27 .125 298 / .93);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid oklch(1 0 0 / .16);
    border-radius:20px 20px 0 0;
    box-shadow:0 -12px 32px -14px oklch(.1 .06 298 / .95);
    height:74px;
  }
  [data-theme=dark] .sidebar{background:oklch(.19 .08 297 / .95)}
  /* La pestaña activa se ve de lejos: pastilla clara con la marca encima. */
  .nav button.active{background:oklch(1 0 0 / .14);color:var(--aqua)}
  .nav button.active::after{
    content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
    width:18px;height:3px;border-radius:99px;background:var(--aqua);
  }
  .nav button{position:relative}
  .mini{
    bottom:74px;border-radius:18px 18px 0 0;
    background:oklch(.34 .155 299 / .95);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid oklch(1 0 0 / .14);
  }
  [data-theme=dark] .mini{background:oklch(.24 .1 298 / .96)}
}
@media(min-width:761px){
  .sidebar{
    background:oklch(.3 .14 299 / .86);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-right:1px solid oklch(1 0 0 / .13);
  }
  [data-theme=dark] .sidebar{background:oklch(.21 .09 298 / .9)}
}

/* ---------- los cinco módulos, todos a la vista, sin arrastrar ---------- */
.lb-filters{
  display:flex;flex-wrap:wrap;overflow:visible;gap:8px;
  margin:0 0 22px;padding:0;
}
/* Compactos a propósito: con seis módulos y letra grande no cabían en dos filas. */
.lb-chip{flex:0 1 auto;white-space:nowrap;padding:8px 13px;font-size:12.5px;gap:6px}
.lb-chip svg{width:16px;height:16px}

/* ---------- detalles que lo vuelven más de niños ---------- */
.heading h1,.lb-intro h1{letter-spacing:-.5px}
.hm-versiculo{
  background:
    radial-gradient(90% 120% at 100% 0%, oklch(.85 .13 92 / .22), transparent 60%),
    oklch(1 0 0 / .11);
}
.hm-versiculo blockquote{position:relative;padding-left:16px}
.hm-versiculo blockquote::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;
  border-radius:99px;background:var(--gold);
}
.brand svg{filter:drop-shadow(0 3px 6px oklch(.15 .08 298 / .55))}

@media (prefers-reduced-motion:reduce){.lb-card{transition:none}}