/* =====================================================================
   Modo Kids — tema claro, colorido e arredondado.
   Carregado por cima de app.css só quando o Modo Kids está ligado
   (body.kids). Redefine as variáveis de tema e arredonda tudo, sem tocar
   no app.css: desligar o modo é simplesmente não carregar este arquivo.
   ===================================================================== */

body.kids {
    --bg:      #fef9ee;   /* creme quente */
    --bg-2:    #ffffff;
    --bg-3:    #fff4d6;
    --texto:   #2a2140;
    --texto-2: #6b5b8a;
    --borda:   rgba(90, 60, 140, .14);
    --royal:   #4f7cff;
    --dourado: #ffb02e;
    background:
        radial-gradient(60% 40% at 15% 0%, #ffe6a733 0, transparent 60%),
        radial-gradient(50% 40% at 100% 10%, #b5e0ff44 0, transparent 60%),
        var(--bg);
    color: var(--texto);
}

/* Cores vivas rotativas para os cards, por posição -- a vitrine infantil
   fica alegre mesmo antes de qualquer arte enviada. */
body.kids {
    --k1: #ff8fab; --k2: #7ed0a0; --k3: #5ab0ff;
    --k4: #ffc24d; --k5: #b892ff; --k6: #ff9f68;
}

/* -------- Topo infantil -------- */
.kids-topo {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 12px;
    padding: 12px clamp(16px, 4vw, 40px);
    background: #fff;
    border-bottom: 3px solid #ffe1a6;
}
.kids-topo .marca-texto { font-weight: 800; font-size: 20px; color: var(--texto); }
.kids-topo .marca em { color: var(--royal); font-style: normal; }
.kids-sair {
    display: inline-flex; align-items: center; gap: 7px;
    background: #fff0f3; color: #d6456b;
    border: 2px solid #ffd0dc; border-radius: 999px;
    padding: 9px 16px; font-weight: 700; font-size: 14px;
    cursor: pointer;
}
.kids-sair:hover { background: #ffe1e8; }

/* -------- Saudação -------- */
.kids-ola {
    padding: 26px clamp(16px, 4vw, 40px) 4px;
}
.kids-ola h1 {
    font-size: clamp(28px, 5vw, 46px);
    letter-spacing: -1px;
    margin: 0;
}
.kids-ola p { color: var(--texto-2); font-size: 16px; margin: 6px 0 0; }

/* -------- Cards redondos e grandes -------- */
body.kids .prateleira-topo h2 { font-size: clamp(19px, 2.4vw, 24px); }
body.kids .item { width: 190px; }
body.kids .item-capa {
    aspect-ratio: 1;
    border-radius: 28px;
    border: 4px solid #fff;
    box-shadow: 0 8px 22px rgba(120, 90, 30, .16);
}
body.kids .faixa.layout-capa .item-capa,
body.kids .faixa.layout-destaque .item-capa { aspect-ratio: 1; }
body.kids .capa-gerada {
    align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(150deg, var(--cor, #5ab0ff), #ffffff00);
}
body.kids .capa-gerada .cg-versiculo,
body.kids .capa-gerada .cg-tipo { display: none; }
body.kids .capa-gerada .cg-titulo { font-size: 17px; text-shadow: 0 1px 6px rgba(0,0,0,.25); }

/* Cor viva por posição no carrossel. */
body.kids .faixa .item:nth-child(6n+1) { --cor: var(--k1); }
body.kids .faixa .item:nth-child(6n+2) { --cor: var(--k2); }
body.kids .faixa .item:nth-child(6n+3) { --cor: var(--k3); }
body.kids .faixa .item:nth-child(6n+4) { --cor: var(--k4); }
body.kids .faixa .item:nth-child(6n+5) { --cor: var(--k5); }
body.kids .faixa .item:nth-child(6n)   { --cor: var(--k6); }

body.kids .item-titulo { font-size: 15px; font-weight: 700; text-align: center; }
body.kids .item-meta { text-align: center; }
body.kids .item:hover { transform: scale(1.06) rotate(-1.5deg); }

/* Selo de acesso mais gentil */
body.kids .selo-livre { background: #7ed0a0; }
body.kids .selo-plano { background: #b892ff; }
body.kids .selo-pago  { background: var(--dourado); color: #4a2f00; }

/* Faixa etária vira etiqueta fofa */
.kids-idade {
    position: absolute; left: 9px; top: 9px;
    background: #fff; color: var(--texto);
    border-radius: 999px; padding: 3px 9px;
    font-size: 11px; font-weight: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* -------- Grade (livros/busca) -------- */
body.kids .grade { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
body.kids .item-velado .velo { background: rgba(255,240,200,.7); color: #b06a00; }

/* Barra inferior escondida no Kids (navegação simplificada) */
body.kids .barra-app { display: none; }
body.kids { padding-bottom: 30px; }

/* Havia aqui um modal de saída que pedia um PIN de 4 números. O PIN foi
   removido a pedido do dono -- sair do Modo Kids é um clique. */

/* Hero claro no Modo Kids (o gradiente escuro adulto nao combina). */
body.kids .hero { min-height: min(42vh, 340px); }
body.kids .hero-fundo > div { display: none; }
body.kids .hero-fundo { background: linear-gradient(140deg, #ffe6a7, #b5e0ff); }
body.kids .hero-fundo::after {
    background: linear-gradient(180deg, rgba(254,249,238,0) 45%, var(--bg) 100%);
}
body.kids .hero h1, body.kids .hero-etiqueta { color: var(--texto); }
body.kids .hero-sinopse { color: var(--texto-2); }

/* Hero COM ARTE no Modo Kids. Aqui o texto e ESCURO sobre fundo claro, e a
   mesma arte borrada que serve de fundo no ambiente adulto chega escurecida
   -- titulo preto sobre imagem escura nao se le. No Kids ela entra CLARA e
   apagada, como papel de parede, e a arte de verdade continua inteira ao
   lado. */
body.kids .hero.com-arte { min-height: 0; }
body.kids .hero.com-arte .hero-fundo img {
    filter: blur(34px) brightness(1.55) saturate(1.1);
    opacity: .5;
}
body.kids .hero.com-arte .hero-fundo::after {
    background: linear-gradient(180deg, rgba(254,249,238,.5) 0%, rgba(254,249,238,.28) 45%, var(--bg) 100%);
}
body.kids .hero.com-arte .hero-arte img { max-height: min(46vh, 340px); }
/* Dourado sobre fundo claro quase nao se le: no Kids o "Ler mais" vai de royal. */
body.kids .hero-mais { color: var(--royal); }
body.kids .bt-claro { background: var(--royal); color: #fff; }
body.kids .bt-fantasma { background: #ffffffcc; color: var(--texto); }

/* No Modo Kids o emoji domina a capa -- e o "rosto" que a crianca reconhece. */
body.kids .cg-emoji { font-size: 72px; margin: 0; }
body.kids .capa-gerada .cg-titulo { margin-top: 8px; }

/* Seletor de idioma no tema claro do Kids. */
body.kids .idiomas-atual {
    background: #fff; color: var(--texto);
    border: 2px solid #ffe1a6;
}
body.kids .idiomas-lista {
    background: #fff; border: 1px solid var(--borda);
    box-shadow: 0 12px 30px rgba(120,90,30,.18);
}
body.kids .idiomas-lista a { color: var(--texto-2); }
body.kids .idiomas-lista a:hover { background: #fff4d6; color: var(--texto); }
body.kids .idiomas-lista a.ativo { color: var(--royal); }