/* Diário de humor — visual calmo: cores suaves, sem animações, alvos grandes */
:root {
    --fundo: #f6f4ef;
    --cartao: #ffffff;
    --texto: #2e2e2c;
    --suave: #6b6a65;
    --borda: #dcd8cf;
    --destaque: #4f7a6b;
    --destaque-claro: #e4eee9;
    --aviso: #fbf3e2;
    --aviso-borda: #e3c27a;
}

* { box-sizing: border-box; }
html { font-size: 17px; }
body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.55;
}
*, *::before, *::after { transition: none !important; animation: none !important; }

a { color: var(--destaque); }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; font-weight: 600; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; font-weight: 600; }
h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; font-weight: 600; }
.sub { color: var(--suave); margin: 0 0 1.5rem; }
.pequeno { font-size: .85rem; color: var(--suave); }

/* Topo */
.topo { background: var(--cartao); border-bottom: 1px solid var(--borda); }
.topo nav { max-width: 900px; margin: 0 auto; padding: .75rem 1rem; display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.topo .marca { font-weight: 600; margin-right: auto; color: var(--texto); text-decoration: none; }
.topo nav a.link { padding: .45rem .7rem; border-radius: 8px; text-decoration: none; color: var(--texto); }
.topo nav a.link.ativo { background: var(--destaque-claro); color: var(--destaque); font-weight: 600; }

main { max-width: 860px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; }
.cartao > summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; }
.cartao > summary::-webkit-details-marker { display: none; }
.cartao > summary::after { content: "abrir +"; font-weight: 400; color: var(--suave); font-size: .9rem; }
.cartao[open] > summary::after { content: "fechar −"; }
.cartao[open] > summary { margin-bottom: 1rem; }

.mensagem { background: var(--destaque-claro); border: 1px solid #c3d9cf; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.25rem; }
.apoio { background: var(--aviso); border: 1px solid var(--aviso-borda); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.erros { background: #f7e6e3; border: 1px solid #e0b4ad; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.25rem; }

/* Escalas com botões */
.campo { margin-bottom: 1.4rem; }
.campo > .rotulo { display: block; font-weight: 600; margin-bottom: .4rem; }
.escala { display: flex; flex-wrap: wrap; gap: .35rem; }
.escala label { flex: 1 0 2.6rem; }
.escala input, .chips input, .opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.escala span {
    display: block; text-align: center; padding: .6rem 0; border: 1px solid var(--borda);
    border-radius: 8px; background: #fbfaf7; cursor: pointer; font-variant-numeric: tabular-nums;
}
.escala input:checked + span, .opcoes input:checked + span, .chips input:checked + span {
    background: var(--destaque); border-color: var(--destaque); color: #fff; font-weight: 600;
}
.escala input:focus-visible + span, .chips input:focus-visible + span, .opcoes input:focus-visible + span { outline: 3px solid #9cbfb2; outline-offset: 2px; }
.extremos { display: flex; justify-content: space-between; font-size: .85rem; color: var(--suave); margin-top: .25rem; }
.limpar { background: none; border: none; color: var(--suave); text-decoration: underline; cursor: pointer; padding: 0; font-size: .85rem; margin-top: .25rem; }

.escala.humor span { border-width: 2px; }

.chips, .opcoes { display: flex; flex-wrap: wrap; gap: .45rem; }
.chips span, .opcoes span {
    display: inline-block; padding: .45rem .85rem; border: 1px solid var(--borda); border-radius: 999px;
    background: #fbfaf7; cursor: pointer;
}

input[type=text], input[type=email], input[type=password], input[type=number], input[type=datetime-local], input[type=date], textarea {
    width: 100%; font: inherit; padding: .6rem .7rem; border: 1px solid var(--borda); border-radius: 8px; background: #fff; color: var(--texto);
}
input[type=number] { max-width: 8rem; }
textarea { min-height: 5.5rem; resize: vertical; }
.check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--destaque); }

.botao {
    display: inline-block; font: inherit; padding: .7rem 1.4rem; border-radius: 10px; border: 1px solid var(--destaque);
    background: var(--destaque); color: #fff; cursor: pointer; text-decoration: none; font-weight: 600;
}
.botao.secundario { background: #fff; color: var(--destaque); }
.botao.perigo { background: #fff; color: #9b4a3f; border-color: #d9b0a9; }
.acoes { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.barra-salvar { position: sticky; bottom: 0; background: var(--fundo); padding: .9rem 0; border-top: 1px solid var(--borda); }

/* Histórico */
.dia { margin-bottom: 1.5rem; }
.registro { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-top: 1px solid var(--borda); }
.registro:first-of-type { border-top: none; }
.termometro { flex: 0 0 auto; width: 4.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.termometro .bulbo { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #2e2e2c; }
.registro .info { flex: 1; min-width: 0; }
.registro .valores { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .9rem; color: var(--suave); }
.etiqueta { display: inline-block; font-size: .8rem; padding: .1rem .55rem; border-radius: 999px; background: #efece5; margin: .25rem .25rem 0 0; }
.etiqueta.crise { background: #f2dfd2; }

.navmes { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }


/* Relatório */
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-weight: 600; background: #f3f1ec; }
td.n, th.n { text-align: center; font-variant-numeric: tabular-nums; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.numero { border: 1px solid var(--borda); border-radius: 10px; padding: .7rem .8rem; }
.numero strong { display: block; font-size: 1.35rem; }
.legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; margin: .25rem 0 .5rem; }
.legenda i { display: inline-block; width: 1.4rem; height: .3rem; vertical-align: middle; margin-right: .3rem; border-radius: 2px; }
.lista-freq { columns: 2; padding-left: 1.1rem; margin: 0; }
svg.grafico { width: 100%; height: auto; display: block; }
.filtro { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; align-items: end; }

@media print {
    @page { margin: 1.4cm; }
    html { font-size: 12px; }
    body { background: #fff; }
    .topo, .nao-imprimir { display: none !important; }
    main { max-width: none; padding: 0; }
    .cartao { border: none; padding: 0; margin-bottom: 1rem; break-inside: avoid; }
    .cartao.quebra-ok { break-inside: auto; }
    th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    svg, .legenda i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Menu: perfil e sair */
.topo nav a.link.perfil { border: 1px solid var(--borda); }
.topo nav button.link.sair { font: inherit; background: none; border: none; padding: .45rem .9rem; color: var(--suave); cursor: pointer; text-decoration: underline; }

/* Login / cadastro */
.caixa-entrada { max-width: 26rem; margin: 2rem auto; }
.caixa-entrada .campo input:not([type=checkbox]) { width: 100%; }

/* Perfis */
.perfil-linha { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .9rem 0; border-top: 1px solid var(--borda); }
.perfil-linha:first-of-type { border-top: none; }
.perfil-linha .nome { flex: 1; min-width: 10rem; }
.perfil-linha form { margin: 0; }
details.gerenciar { margin-top: .5rem; width: 100%; }
details.gerenciar summary { cursor: pointer; color: var(--suave); font-size: .9rem; }
.inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.inline input[type=text] { width: auto; flex: 1; min-width: 10rem; }
.selo { font-size: .8rem; padding: .1rem .6rem; border-radius: 999px; background: var(--destaque-claro); color: var(--destaque); font-weight: 600; }

/* Carinhas na escala de humor (perfil de criança) */
.escala span.carinha { display: block; border: none; background: none; padding: 0 0 .15rem; font-size: 1.5rem; line-height: 1.2; }
.escala input:checked + span span.carinha { background: none; }

/* Atalhos de horário no registro */
.atalhos-hora { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.atalhos-hora button { font: inherit; font-size: .9rem; padding: .35rem .75rem; border: 1px solid var(--borda); border-radius: 999px; background: #fbfaf7; color: var(--texto); cursor: pointer; }
.atalhos-hora button:focus-visible { outline: 3px solid #9cbfb2; outline-offset: 2px; }
.dia .cabecalho-dia { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.dia .cabecalho-dia a { font-size: .9rem; }

/* Figurinhas nas escalas */
.figurinhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .45rem; }
.figurinhas input { position: absolute; opacity: 0; pointer-events: none; }
.figurinhas span {
    display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center;
    padding: .55rem .3rem .5rem; border: 2px solid var(--borda); border-radius: 12px; background: #fbfaf7;
    cursor: pointer; font-size: .82rem; line-height: 1.2; color: var(--suave); height: 100%;
}
.figurinhas span b { font-size: 2rem; line-height: 1.1; font-weight: normal; }
.figurinhas input:checked + span { border-color: var(--destaque); background: var(--destaque-claro); color: var(--texto); font-weight: 600; }
.figurinhas input:focus-visible + span { outline: 3px solid #9cbfb2; outline-offset: 2px; }
.fig { font-size: 1.1em; }

/* Padrões / conclusões */
.padroes { list-style: none; padding: 0; margin: 0; }
.padroes li { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--borda); break-inside: avoid; }
.padroes li:first-child { border-top: none; padding-top: 0; }
.padroes .icone { font-size: 1.4rem; line-height: 1.3; flex: 0 0 1.8rem; text-align: center; }
.resumo-semana { background: var(--destaque-claro); border: 1px solid #c3d9cf; border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1.25rem; }
.periodos { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.periodos a { padding: .4rem .9rem; border: 1px solid var(--borda); border-radius: 999px; text-decoration: none; color: var(--texto); background: #fff; }
.periodos a.ativo { background: var(--destaque); border-color: var(--destaque); color: #fff; font-weight: 600; }
.distribuicao { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; align-items: start; text-align: center; }
.distribuicao > div { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.distribuicao > div.vazio { opacity: .45; }
.distribuicao b { font-size: 1.8rem; font-weight: normal; height: 2.4rem; line-height: 2.4rem; }
.distribuicao .barra { width: 60%; height: 4.5rem; background: #f0ede6; border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.distribuicao .barra i { display: block; width: 100%; background: var(--destaque); border-radius: 6px 6px 0 0; }
.distribuicao .pequeno { line-height: 1.15; }