/* Tarefas da Família — visual.
 *
 * Feito para o celular primeiro: é lá que a mãe vai cadastrar e o menino vai
 * marcar. O computador só ganha o quadro em três colunas lado a lado.
 *
 * Nenhuma fonte ou ícone vindo de fora: tudo com a fonte do próprio sistema e
 * emoji. Recurso externo é o que falha primeiro numa rede ruim — e aqui o atraso
 * apareceria justamente na hora do aviso.
 */

:root {
    --fundo: #f4f5f7;
    --cartao: #ffffff;
    --borda: #dfe1e6;
    --texto: #172b4d;
    --texto-fraco: #5e6c84;
    --acento: #0b5fff;
    --acento-texto: #ffffff;
    --ok: #0a7c3f;
    --ok-fundo: #e6f6ec;
    --perigo: #b3261e;
    --perigo-fundo: #fdecea;
    --atencao: #8a5300;
    --atencao-fundo: #fff4e0;
    --sombra: 0 1px 2px rgba(9, 30, 66, .12), 0 0 1px rgba(9, 30, 66, .08);
    --raio: 10px;
}

/* Tema escuro pela preferência do sistema. Não há botão de troca de propósito:
   uma preferência só, a do aparelho, é menos coisa para dar errado. */
@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #16181d;
        --cartao: #22252c;
        --borda: #363a44;
        --texto: #e6e8ee;
        --texto-fraco: #9aa3b2;
        --acento: #5b93ff;
        --acento-texto: #0b1020;
        --ok: #58d68d;
        --ok-fundo: #16301f;
        --perigo: #ff8a80;
        --perigo-fundo: #341a18;
        --atencao: #ffcf70;
        --atencao-fundo: #332a14;
        --sombra: 0 1px 2px rgba(0, 0, 0, .5);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    background: var(--fundo);
    color: var(--texto);
    -webkit-text-size-adjust: 100%;
}

/* As "safe areas" do iPhone instalado na tela de início.
 *
 * Sem isto, o título da página fica escondido atrás do notch e o último botão
 * da tela cai embaixo da barrinha de gestos — e o dedo não alcança. Em
 * navegador comum e no computador os env() valem 0, então não muda nada lá. */
main {
    max-width: 1100px;
    margin: 0 auto;
    padding:
        1rem
        calc(1rem + env(safe-area-inset-right))
        calc(4rem + env(safe-area-inset-bottom))
        calc(1rem + env(safe-area-inset-left));
}

h1 { font-size: 1.35rem; margin: .4rem 0 1rem; }
h2 { font-size: 1.05rem; }
a { color: var(--acento); }

/* ------------------------------------------------------------------ barra */

.barra {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: space-between;
    /* O topo soma a safe area: no iPhone instalado, o menu começa abaixo do
       relógio e da bateria em vez de atrás deles. */
    padding:
        calc(.7rem + env(safe-area-inset-top))
        calc(1rem + env(safe-area-inset-right))
        .7rem
        calc(1rem + env(safe-area-inset-left));
    background: var(--cartao);
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 5;
}

.marca { font-size: 1rem; }

.barra nav { display: flex; gap: .25rem; flex-wrap: wrap; }

.barra nav a {
    padding: .4rem .6rem;
    border-radius: var(--raio);
    text-decoration: none;
    color: var(--texto);
    font-size: .95rem;
}

.barra nav a:hover { background: var(--fundo); }
.barra nav a.sair { color: var(--texto-fraco); }

/* ---------------------------------------------------------------- recados */

.recado, .erro {
    padding: .7rem .9rem;
    border-radius: var(--raio);
    margin: 0 0 1rem;
}

.recado { background: var(--ok-fundo); color: var(--ok); }
.erro { background: var(--perigo-fundo); color: var(--perigo); }

.vazio { color: var(--texto-fraco); }

/* --------------------------------------------------------------- cartões */

.cartao {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.1rem;
}

/* ------------------------------------------------------------- tela de login
 *
 * É a primeira coisa que a família vê, e a única tela sem menu. Por isso ela
 * carrega a identidade: símbolo, nome e uma linha dizendo para que serve.
 */

.entrada {
    max-width: 23rem;
    margin: 0 auto;
    /* 100dvh ("dynamic viewport height") e não 100vh: no Safari do iPhone o
       100vh conta a altura COM a barra de endereço recolhida, então a tela
       ficava alta demais e sobrava rolagem numa página que cabia inteira. O
       100vh fica como reserva para navegador velho que não conhece dvh. */
    min-height: calc(100vh - 2rem);
    min-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
    padding: 1rem 0 2rem;
}

.marca-entrada { text-align: center; }

.marca-entrada .simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    font-size: 2.1rem;
    border-radius: 50%;
    background: var(--cartao);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra);
    margin-bottom: .7rem;
}

.marca-entrada h1 { margin: 0; font-size: 1.5rem; }

.marca-entrada .lema {
    margin: .35rem 0 0;
    color: var(--texto-fraco);
    font-size: .92rem;
}

.entrada .cartao { padding: 1.3rem; }

/* O campo de senha e o olho dividem a mesma moldura, em vez de o botão flutuar
   por cima: assim o foco do teclado marca os dois juntos e nada se desalinha
   quando a fonte do sistema é maior. */
.campo-senha {
    display: flex;
    align-items: stretch;
    margin-top: .3rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    overflow: hidden;
}

/* Os seletores de atributo são de propósito: a regra geral lá em cima é
   `input[type=password]`, que tem o MESMO peso de `.campo-senha input` — e,
   vindo depois no arquivo, venceria, devolvendo a moldura e o canto arredondado
   para dentro da moldura de fora. Com [type=...] aqui, esta regra pesa mais. */
.campo-senha input[type=password],
.campo-senha input[type=text] {
    border: none;
    margin: 0;
    border-radius: 0;
    background: transparent;
    flex: 1;
    min-width: 0;
}

.campo-senha input:focus { outline: none; }
.campo-senha:focus-within { outline: 2px solid var(--acento); outline-offset: 1px; }

.ver-senha {
    background: none;
    border: none;
    border-left: 1px solid var(--borda);
    border-radius: 0;
    padding: 0 .8rem;
    font-size: 1.1rem;
    min-height: 0;
    cursor: pointer;
    /* Não sai do fluxo de tabulação, mas quem navega por teclado chega no
       "Entrar" antes do olho — o olho é conveniência, não caminho. */
}

.entrada button.entrar {
    width: 100%;
    margin-top: .3rem;
    padding: .8rem;
    font-size: 1.02rem;
}

.rodape-entrada {
    text-align: center;
    margin: 0;
    font-size: .84rem;
    color: var(--texto-fraco);
}

/* ------------------------------------------------------------ formulários */

.formulario { display: grid; gap: .9rem; }

label { display: block; font-weight: 600; font-size: .9rem; }

input, select, textarea, button {
    font: inherit;
    color: inherit;
}

input[type=text], input[type=password], input[type=time], input[type=date],
input:not([type]), select, textarea {
    width: 100%;
    margin-top: .3rem;
    padding: .6rem .7rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    font-weight: 400;
    /* 16px no celular impede o Safari de dar zoom ao focar o campo — com menos
       que isso a tela "salta" a cada toque num campo. */
    font-size: 16px;
}

textarea { resize: vertical; }

label small {
    display: block;
    margin-top: .3rem;
    font-weight: 400;
    color: var(--texto-fraco);
    font-size: .82rem;
}

fieldset {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .8rem;
}

legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }

label.radio {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    margin: .35rem 0;
    flex-wrap: wrap;
}

label.radio input[type=radio], label.radio input[type=checkbox] { width: auto; margin: 0; }
label.radio input[type=date] { width: auto; margin: 0 0 0 .3rem; }

.dias { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .6rem 1.6rem; }

label.dia {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-weight: 400;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: .25rem .6rem;
    font-size: .88rem;
}

label.dia input { width: auto; margin: 0; }

button, .botao {
    display: inline-block;
    padding: .6rem 1rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--acento);
    color: var(--acento-texto);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    /* Alvo de toque confortável: menos que isso erra o dedo no celular. */
    min-height: 44px;
}

button:disabled { opacity: .55; cursor: default; }

button.secundario, .botao.secundario {
    background: var(--cartao);
    color: var(--texto);
    border-color: var(--borda);
}

button.perigo { background: var(--perigo); color: #fff; }

.botoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.filtro {
    display: flex;
    gap: .8rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filtro label { font-weight: 400; }
.filtro select { width: auto; }

/* --------------------------------------------------------------- o quadro */

.quadro { display: grid; gap: 1rem; }

/* Quatro colunas no computador. No celular continuam empilhadas: quatro
   colunas lado a lado numa tela de 360px não cabem sem virar ilegíveis. */
@media (min-width: 760px) {
    .quadro { grid-template-columns: repeat(2, 1fr); align-items: start; }
}

@media (min-width: 1040px) {
    .quadro { grid-template-columns: repeat(4, 1fr); }
}

.coluna {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .8rem;
}

.coluna.alvo { outline: 2px dashed var(--acento); outline-offset: 2px; }

.coluna h2 {
    margin: 0 0 .7rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-fraco);
}

.conta {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .8rem;
}

.cartoes { display: grid; gap: .7rem; }

.tarefa {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--borda);
    border-radius: 8px;
    padding: .7rem;
}

/* Vermelho na lateral, e não no fundo: marca o atraso sem deixar o texto
   ilegível e sem gritar com a criança a cada abertura da tela. */
.tarefa.atrasada { border-left-color: var(--perigo); }
.tarefa.arrastando { opacity: .4; }
.tarefa[draggable=true] { cursor: grab; }

.tarefa .titulo { font-weight: 600; }

.tarefa .meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .7rem;
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--texto-fraco);
}

.tarefa .hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.tarefa .hora.quando-der { font-weight: 400; font-style: italic; }
.tarefa.atrasada .hora { color: var(--perigo); }

.tarefa .descricao { margin: .45rem 0 0; font-size: .88rem; color: var(--texto-fraco); }

.tarefa .acoes { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }

.tarefa .acoes button {
    min-height: 36px;
    padding: .3rem .6rem;
    font-size: .82rem;
    font-weight: 500;
    background: var(--cartao);
    color: var(--texto);
    border-color: var(--borda);
}

.tarefa .acoes button[data-para=feita] { color: var(--ok); border-color: var(--ok); }
.tarefa .acoes button.disparar { color: var(--acento); border-color: var(--acento); }

/* --------------------------------------------------------------- tabelas */

.lista {
    width: 100%;
    border-collapse: collapse;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    overflow: hidden;
}

.lista th, .lista td {
    padding: .6rem .7rem;
    text-align: left;
    border-bottom: 1px solid var(--borda);
    font-size: .92rem;
}

.lista th { font-size: .78rem; text-transform: uppercase; color: var(--texto-fraco); }
.lista tr:last-child td { border-bottom: none; }
.lista tr.inativa td { opacity: .55; }

.acoes-linha { display: flex; gap: .7rem; align-items: center; white-space: nowrap; }
.em-linha { display: inline; }

.link-perigo {
    background: none;
    border: none;
    color: var(--perigo);
    padding: 0;
    min-height: 0;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

/* Formulários curtos dentro da tabela de Pessoas (senha, telefone). Ficam em
   linha no computador e quebram no celular, onde a tabela já rola de lado. */
.senha-rapida {
    display: inline-flex;
    gap: .3rem;
    align-items: center;
}

.senha-rapida input {
    width: 11rem;
    margin: 0;
    padding: .35rem .5rem;
    font-size: 14px;
}

.senha-rapida button {
    min-height: 34px;
    padding: .25rem .6rem;
    font-size: .82rem;
    font-weight: 500;
}

.etiqueta {
    display: inline-block;
    background: var(--atencao-fundo);
    color: var(--atencao);
    border-radius: 999px;
    padding: .05rem .5rem;
    font-size: .75rem;
    font-weight: 600;
}

.etiqueta.perigo { background: var(--perigo-fundo); color: var(--perigo); }

/* ------------------------------------------------------------- histórico */

.dia-historico {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .8rem 1rem;
    margin-bottom: .8rem;
}

.dia-historico h2 { margin: 0 0 .4rem; display: flex; align-items: center; gap: .6rem; }

.placar {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 0 .55rem;
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.placar.tudo { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok); }

.dia-historico ul { list-style: none; margin: 0; padding: 0; }
.dia-historico li { padding: .15rem 0; font-size: .92rem; }
.dia-historico li.falhou { color: var(--texto-fraco); }
.dia-historico li small { color: var(--texto-fraco); }

/* --------------------------------------------------------------- diálogos */

.dialogo {
    border: 1px solid var(--borda);
    border-radius: 14px;
    background: var(--cartao);
    color: var(--texto);
    padding: 1.2rem;
    max-width: min(32rem, calc(100vw - 2rem));
    /* Com muitas tarefas o aviso passava da altura da tela e o último botão
       ficava inalcançável. Agora a lista rola dentro do próprio aviso.
       dvh pelo mesmo motivo do login: no iPhone o 100vh mente. */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(9, 30, 66, .35);
}

.dialogo::backdrop { background: rgba(9, 30, 66, .55); }

.dialogo-titulo { margin: 0 0 .5rem; font-size: 1.15rem; }
.dialogo-texto { margin: 0 0 1rem; color: var(--texto-fraco); }
.dialogo-texto:empty { display: none; }

.dialogo-botoes { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

/* ----------------------------------------------------------- pop-up aviso */

.popup-aviso { border-left: 5px solid var(--acento); }

/* Uma animação curta de entrada: o pulo chama o olho de quem já estava com a
   página aberta e não viu nada mudar. Quem pediu menos movimento no sistema
   não recebe o pulo — a regra abaixo desliga. */
@keyframes saltar {
    from { transform: scale(.94); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.popup-aviso { animation: saltar .18s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .popup-aviso { animation: none; }
}

.lista-avisos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .8rem; }

.lista-avisos li {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: .7rem;
}

.lista-avisos .item-topo { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.lista-avisos .hora { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--acento); }
.lista-avisos .descricao { margin: .35rem 0 0; font-size: .88rem; color: var(--texto-fraco); }
.lista-avisos .item-botoes { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.lista-avisos .feito { background: var(--ok); color: #fff; }
.lista-avisos .vez { display: block; margin-top: .4rem; color: var(--atencao); font-size: .78rem; }

.dialogo-campo {
    width: 100%;
    margin: 0 0 1rem;
    padding: .6rem .7rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--fundo);
    font-size: 16px;
}

/* ------------------------------------------------- conferência (a fila da mãe) */

/* A coluna "Conferir" é a única que pede ação dela — mas só se marca quando
   tem gente na fila (classe tem-fila), senão o destaque grita à toa. */
.coluna.tem-fila { border-color: var(--atencao); }
.coluna.tem-fila h2 { color: var(--atencao); }

.tarefa .marcada { margin: .4rem 0 0; font-size: .8rem; color: var(--texto-fraco); }
.tarefa .marcada.reprovada { color: var(--atencao); }

.tarefa .acoes button.aprovar { color: var(--ok); border-color: var(--ok); }
.tarefa .acoes button.reprovar { color: var(--atencao); border-color: var(--atencao); }

/* Contador no menu: é como ela vê que há coisa esperando sem abrir a tela. */
.aviso-menu {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 .35rem;
    margin-left: .15rem;
    border-radius: 999px;
    background: var(--perigo);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25rem;
}

/* --------------------------------------------------------- a tela do filho */
/*
 * Nada de três colunas aqui. Ele tem uma decisão só por tarefa — "já fiz" — e a
 * tela inteira existe para deixar esse botão grande e impossível de errar.
 */

.tela-filho { max-width: 34rem; margin: 0 auto; }
.tela-filho h1 { font-size: 1.5rem; text-align: center; margin-bottom: 1rem; }

.progresso { margin-bottom: 1.4rem; }

/* Duas faixas lado a lado: verde = aprovado, amarelo = esperando conferência.
   Flex em vez de posicionamento absoluto para a segunda faixa começar sempre
   exatamente onde a primeira termina, sem conta de "left".

   A classe chama "trilha" e não "barra" de propósito: .barra é o menu do topo,
   e o padding e o flex-wrap de lá vazavam para cá. */
.progresso .trilha {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    height: 12px;
    border-radius: 999px;
    background: var(--borda);
    overflow: hidden;
}

/* Altura em pixel, e NÃO height:100%: dentro de um contêiner flex a
   porcentagem não resolveu e as faixas ficaram com altura zero — a barra
   aparecia cinza mesmo com o valor certo na largura.
   flex:0 0 auto para a largura valer exatamente o que foi calculado: com o
   encolhimento padrão do flex, a faixa de 100% era espremida. */
.progresso .trilha span {
    display: block;
    flex: 0 0 auto;
    height: 12px;
    /* Cresce animado: a barra andando é a recompensa visível de ter feito. */
    transition: width .4s ease-out;
}

.progresso .trilha .feito { background: var(--ok); }
.progresso .trilha .conferindo { background: var(--atencao); }

.placar-filho { text-align: center; margin: .45rem 0 0; color: var(--texto-fraco); font-size: .92rem; }
.placar-filho .esperando { color: var(--atencao); }

/* "Agora: <tarefa>" — responde "o que eu faço?" sem ele ler a tela toda. */
.agora-faca {
    margin: 0 0 1.2rem;
    padding: .7rem .9rem;
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--acento);
    border-radius: var(--raio);
    font-size: .95rem;
    color: var(--texto-fraco);
}

.agora-faca strong { color: var(--texto); }

.agora-faca .hora-proxima {
    margin-left: .3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--acento);
}

/* Dia fechado. É a única recompensa que o sistema tem para dar. */
.comemora {
    text-align: center;
    padding: 1.6rem 1rem;
    margin-bottom: 1.2rem;
    background: var(--ok-fundo);
    border: 1px solid var(--ok);
    border-radius: var(--raio);
}

.comemora .festa {
    display: block;
    font-size: 3rem;
    line-height: 1;
    animation: pular .5s ease-out;
}

.comemora h2 { margin: .5rem 0 .2rem; color: var(--ok); font-size: 1.3rem; }
.comemora p { margin: 0; color: var(--ok); font-size: .95rem; }

@keyframes pular {
    0%   { transform: scale(.3) rotate(-12deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .comemora .festa { animation: none; }
}

/* ------------------------------------------------- resumo do dia (quadro) */

.resumo-dia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

.resumo-dia .ficha {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .6rem .8rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.resumo-dia .ficha strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.resumo-dia .ficha span {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--texto-fraco);
}

/* Só acende quando há o que fazer: ficha colorida com zero dentro vira ruído,
   e aí ninguém olha mais para nenhuma delas. */
.resumo-dia .ficha.destaque {
    border-color: var(--atencao);
    background: var(--atencao-fundo);
}
.resumo-dia .ficha.destaque strong,
.resumo-dia .ficha.destaque span { color: var(--atencao); }

.resumo-dia .ficha.alerta {
    border-color: var(--perigo);
    background: var(--perigo-fundo);
}
.resumo-dia .ficha.alerta strong,
.resumo-dia .ficha.alerta span { color: var(--perigo); }

.coluna-vazia {
    margin: 0;
    padding: .4rem 0 .2rem;
    font-size: .85rem;
    color: var(--texto-fraco);
}

.nada-hoje { text-align: center; font-size: 1.1rem; margin-top: 2rem; }

.titulo-secao {
    margin: 1.8rem 0 .7rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-fraco);
}

.tarefa-filho {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-left: 5px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1rem;
    margin-bottom: .9rem;
}

.tarefa-filho.atrasada { border-left-color: var(--perigo); }
.tarefa-filho.conferindo { border-left-color: var(--atencao); }
.tarefa-filho.pronta { border-left-color: var(--ok); opacity: .62; padding: .6rem 1rem; }

.tarefa-filho .cabeca { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tarefa-filho .hora { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--acento); }
.tarefa-filho.atrasada .hora { color: var(--perigo); }
.tarefa-filho .hora.quando-der { font-size: .95rem; font-weight: 400; font-style: italic; color: var(--texto-fraco); }
.tarefa-filho .certo { font-size: 1.3rem; }

.tarefa-filho h2 { margin: .3rem 0 0; font-size: 1.25rem; }
.tarefa-filho.pronta h2 { margin: 0; font-size: 1rem; font-weight: 500; }
.tarefa-filho .descricao { margin: .4rem 0 0; color: var(--texto-fraco); font-size: .92rem; }

/* O recado da reprova precisa saltar: é a única informação nova na tarefa que
   voltou, e sem ele o menino refaz exatamente igual. */
.tarefa-filho .refazer {
    margin: .7rem 0 0;
    padding: .55rem .7rem;
    background: var(--atencao-fundo);
    color: var(--atencao);
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 600;
}

/* O botão ocupa a largura toda e é alto: alvo grande é o que faz uma criança
   acertar de primeira, com o celular na mão e pressa para sair. */
.feito-grande {
    width: 100%;
    margin-top: .9rem;
    padding: .9rem;
    font-size: 1.1rem;
    background: var(--ok);
    color: #fff;
    min-height: 54px;
}

.tarefa-filho .desfazer {
    margin-top: .7rem;
    background: none;
    border: 1px solid var(--borda);
    color: var(--texto-fraco);
    font-size: .82rem;
    font-weight: 500;
    min-height: 36px;
    padding: .3rem .7rem;
}

/* Convite para instalar na tela de início (só iPhone, só quando ainda não
   está instalado). */
.convite-instalar {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    background: var(--cartao);
    border: 1px solid var(--acento);
    border-radius: var(--raio);
    padding: .8rem .9rem;
    margin-bottom: 1rem;
}

.convite-instalar p { margin: 0; flex: 1; font-size: .88rem; line-height: 1.4; }
.convite-instalar button { min-height: 38px; padding: .35rem .8rem; font-size: .85rem; }

/* Aviso de som bloqueado dentro do pop-up — é um BOTÃO: um toque liga o som e
   dispara a sirene na hora. */
.sem-som {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0 0 .9rem;
    padding: .6rem .75rem;
    background: var(--atencao-fundo);
    color: var(--atencao);
    border: 1px solid var(--atencao);
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 400;
    min-height: 0;
    cursor: pointer;
}

/* Faixa "Receber aviso com o app fechado" (Web Push). */
.ligar-push {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    background: var(--cartao);
    border: 1px solid var(--acento);
    border-radius: var(--raio);
    padding: .8rem .9rem;
    margin-bottom: 1rem;
}

.ligar-push p { margin: 0; flex: 1; min-width: 12rem; font-size: .92rem; }
.ligar-push span { display: block; margin-top: .15rem; font-size: .82rem; color: var(--texto-fraco); }
.ligar-push div { display: flex; gap: .5rem; flex-wrap: wrap; }
.ligar-push button { min-height: 40px; padding: .4rem .9rem; font-size: .88rem; }

.ligar-push.pronto { border-color: var(--ok); background: var(--ok-fundo); }
.ligar-push.pronto p, .ligar-push.pronto span { color: var(--ok); }

/* Falta instalar o app: é instrução, não oferta — sem botão, porque não há
   nada para tocar aqui. */
.ligar-push.falta-instalar {
    border-color: var(--atencao);
    background: var(--atencao-fundo);
}
.ligar-push.falta-instalar p { color: var(--atencao); }
.ligar-push.falta-instalar span { color: var(--atencao); opacity: .9; }

/* Faixa "Ligar o alarme" no topo da tela, enquanto o som está bloqueado. */
.ligar-som {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 1rem;
    padding: .8rem .9rem;
    background: var(--atencao-fundo);
    color: var(--atencao);
    border: 1px solid var(--atencao);
    border-radius: var(--raio);
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
}

.ligar-som span {
    display: block;
    margin-top: .15rem;
    font-size: .82rem;
    opacity: .85;
}

.ligar-som.pronto {
    background: var(--ok-fundo);
    color: var(--ok);
    border-color: var(--ok);
}

/* ---------------------------------------------------- alarme VISUAL
 *
 * Enquanto a sirene toca, o aviso pulsa. É o que resolve o iPhone no
 * silencioso, onde o Safari cala o som e não existe vibração: mudo, mas
 * impossível de ignorar.
 */
@keyframes pulsarAlarme {
    0%, 100% {
        border-color: var(--acento);
        box-shadow: 0 10px 40px rgba(9, 30, 66, .35);
    }
    50% {
        border-color: var(--perigo);
        box-shadow: 0 0 0 6px rgba(179, 38, 30, .35), 0 10px 40px rgba(9, 30, 66, .35);
    }
}

@keyframes piscarFundo {
    0%, 100% { background: rgba(9, 30, 66, .55); }
    50%      { background: rgba(179, 38, 30, .55); }
}

.popup-aviso.alarmando {
    border: 2px solid var(--acento);
    animation: saltar .18s ease-out, pulsarAlarme 1s ease-in-out infinite;
}

.popup-aviso.alarmando::backdrop {
    animation: piscarFundo 1s ease-in-out infinite;
}

/* Quem pediu menos movimento recebe o aviso parado — mas continua com a
   moldura vermelha, que é a informação, não o enfeite. */
@media (prefers-reduced-motion: reduce) {
    .popup-aviso.alarmando {
        animation: none;
        border-color: var(--perigo);
        box-shadow: 0 0 0 6px rgba(179, 38, 30, .35);
    }
    .popup-aviso.alarmando::backdrop { animation: none; }
}

/* ------------------------------------------------------- tela do "já fiz" */

.aviso-feito {
    max-width: 26rem;
    margin: 3rem auto;
    text-align: center;
}

.aviso-feito .emoji { font-size: 3.2rem; display: block; margin-bottom: .4rem; }
.aviso-feito h1 { margin: .2rem 0 .6rem; }
.aviso-feito p { color: var(--texto-fraco); }
.aviso-feito form { margin-top: 1.2rem; }
.aviso-feito button { width: 100%; font-size: 1.05rem; padding: .8rem; }