/* ══════════════════════════════════════════════════════════════════════
   Balbuu Amamentação — VERSÃO NOITE
   A mãe usa às 3h da manhã: fundo navy calmo, nada de branco que ofusca,
   botão grande embaixo (onde o polegar alcança com o bebê no colo).
   Cores: só as 6 do Balbuu (Balbuu/DESIGN.md). O escuro das superfícies é o
   mesmo truque do modo escuro do app (fonemas-app/css/app.css): branco translúcido.
   ⛔ Cor de texto só por token aqui no :root, nunca hex solto.
   ⛔ Um botão laranja por tela: Terminar, Salvar, Tocar, Montar e mandar.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --fundo: var(--grafite);
  --texto: var(--bg1);
  --txt2: #9fb3c4;                       /* texto secundário no escuro (Balbuu/DESIGN.md) */
  --superficie: rgba(255,255,255,.06);
  --borda: rgba(255,255,255,.16);
  --veu: rgba(0,0,0,.55);
  --lado-e: var(--turq);                 /* cada seio tem a sua cor, em todo o app */
  --lado-d: var(--amarelo);
  color-scheme: dark;
}

[hidden]{ display:none !important; }

html,body{ background:var(--fundo); }
body{ color:var(--texto); font-size:16px; line-height:1.4; }
button{ cursor:pointer; font-family:'Baloo 2', system-ui, sans-serif; color:inherit; }
button:focus-visible, input:focus-visible{ outline:3px solid var(--amarelo); outline-offset:2px; }
/* desligado = cor apagada, não transparência (com opacity o texto some junto: regra do conferir) */
button:disabled{ cursor:default; background:transparent; color:var(--txt2); border-color:var(--borda); }

.app{
  max-width:480px; margin:0 auto;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; gap:12px;
  padding:0 16px;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  transition:padding-bottom 200ms;
}
body.com-aviso .app, body.com-aviso .pagina{ padding-bottom:96px; }   /* o aviso de baixo não cobre os botões */

/* --- topo: o bebê --- */
.topo-bebe{ display:flex; flex-direction:column; align-items:flex-start; width:100%; min-height:44px;
  background:none; border:0; text-align:left; padding:4px 0 0; }
.topo-marca{ font-size:14px; font-weight:700; color:var(--turqtxt); line-height:1.2; }
.topo-nome{ font-size:20px; font-weight:800; color:var(--texto); line-height:1.25; }
.pilula{ width:100%; min-height:44px; border:1px solid var(--borda); background:var(--superficie);
  border-radius:9999px; font-size:16px; font-weight:800; color:var(--texto); }
.instalar-lugar .detalhe{ margin-top:8px; }

/* --- cartões e textos --- */
.cartao{ background:var(--superficie); border:1px solid var(--borda); border-radius:6px; padding:16px; }
.centro{ text-align:center; }
.rotulo{ display:block; font-size:14px; font-weight:700; color:var(--txt2); margin-bottom:4px; }
.grande{ font-family:'Baloo 2', system-ui, sans-serif; font-size:clamp(30px, 9vw, 40px); font-weight:800; line-height:1.15; }
.detalhe{ font-size:15px; color:var(--txt2); }
.erro{ color:var(--rosa); font-weight:700; }

.dois{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.tres{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.pilha{ display:flex; flex-direction:column; gap:12px; }

/* --- botões da tela de início ---
   Celular baixo (320x568) não cabe tudo: a barra de baixo fica PRESA no rodapé (sticky) e o
   resto rola por trás dela. Começar, Terminar e Dor nunca somem embaixo da dobra. */
.atalhos{ margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.barra-fixa{ position:sticky; bottom:0; z-index:5; display:flex; flex-direction:column; gap:12px;
  padding-top:4px; background:var(--fundo); transition:bottom 200ms; }
body.com-aviso .barra-fixa{ bottom:84px; }   /* sobe junto com o aviso, pra ele não tampar os botões */
.grade{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.atalho{ min-height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:6px 4px; border:1px solid var(--borda); background:var(--superficie); color:var(--texto); border-radius:8px;
  font-family:'Nunito', system-ui, sans-serif; font-size:14px; font-weight:800; line-height:1.15; text-align:center;
  transition:background 200ms; }
/* ícone (js/icones.js): segue a cor do texto, e o dedo atravessa ele e cai no botão */
.ic{ width:1.25em; height:1.25em; flex:none; vertical-align:-.25em; margin-right:.35em;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ic-dor{ color:var(--rosa); }
.atalho .ic{ width:26px; height:26px; margin:0 0 2px; }
/* dormindo, o botão vira "Acordou": a lua dá lugar ao sol */
#botaoSono .ic-acordou, #botaoSono.ativo .ic-sono{ display:none; }
#botaoSono.ativo .ic-acordou{ display:block; }
.atalho small{ font-size:12px; font-weight:700; color:var(--txt2); }
.atalho.ativo{ background:var(--turq); color:var(--sobrecor); border-color:transparent; }
.atalho.ativo small{ color:var(--sobrecor); }

.lado{ min-height:96px; border:0; border-radius:8px; font-size:26px; font-weight:800; color:var(--sobrecor); transition:transform 200ms; }
.lado-e{ background:var(--lado-e); }
.lado-d{ background:var(--lado-d); }
.lado:active, .atalho:active, .grandao:active{ transform:scale(.97); }

.botao-contorno{ min-height:60px; border:1px solid var(--borda); background:var(--superficie); color:var(--texto);
  border-radius:8px; font-size:19px; font-weight:800; line-height:1.15; padding:4px 8px; }
.botao-acao{ min-height:60px; border:0; background:var(--laranja); color:var(--sobrecor); border-radius:8px;
  font-size:22px; font-weight:800; padding:4px 8px; }
.botao-acao .ic{ width:24px; height:24px; }
.botao-contorno:active, .botao-acao:active, .botao-dor:active{ transform:scale(.98); }

.botao-dor{ min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:2px solid var(--rosa); background:var(--rosa); color:var(--sobrecor); border-radius:8px;
  font-size:20px; font-weight:800; line-height:1.15; padding:4px 8px; }
.botao-dor small{ font-family:'Nunito', system-ui, sans-serif; font-size:13px; font-weight:700; }
.botao-dor.aberta{ background:transparent; color:var(--rosa); }

.resumo{ min-height:44px; background:none; border:0; color:var(--txt2); padding:0 4px;
  font-family:'Nunito', system-ui, sans-serif; font-size:15px; font-weight:600; text-align:center; }

/* --- o relógio ---
   Letra encolhe com a tela: mamada de mais de 1 hora vira "1:02:34" e, com tamanho fixo,
   estourava a largura no celular pequeno (320px). */
.relogio{ font-family:'Baloo 2', system-ui, sans-serif; font-size:clamp(52px, 16vw, 72px); font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; margin:4px 0 12px; }
.tempo-lado{ border:1px solid var(--borda); border-radius:6px; padding:8px; text-align:center; }
.tempo-lado span{ display:block; font-size:15px; font-weight:700; color:var(--txt2); }
.tempo-lado b{ display:block; font-family:'Baloo 2', system-ui, sans-serif; font-size:clamp(22px, 7vw, 28px); font-weight:800;
  font-variant-numeric:tabular-nums; }
.tempo-lado.ativo{ border-color:transparent; color:var(--sobrecor); }
.tempo-lado.ativo span{ color:var(--sobrecor); }
.tempo-lado.e.ativo{ background:var(--lado-e); }
.tempo-lado.d.ativo{ background:var(--lado-d); }
#mamando .detalhe{ margin-top:8px; }

/* --- página inteira (histórico) --- */
.pagina{ position:fixed; inset:0; z-index:40; overflow:auto; background:var(--fundo);
  display:flex; flex-direction:column; gap:12px; padding:0 16px 16px;
  padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
.pagina > *{ width:100%; max-width:448px; margin-left:auto; margin-right:auto; }
.pagina-topo{ display:flex; align-items:center; gap:12px; }
.pagina-topo h2{ font-size:22px; font-weight:800; }
.voltar{ min-height:44px; padding:0 16px; border:1px solid var(--borda); background:var(--superficie); border-radius:9999px;
  font-size:16px; font-weight:800; }
.dia-nav{ display:grid; grid-template-columns:56px minmax(0,1fr) 56px; align-items:center; gap:8px; text-align:center; }
.dia-nav b{ font-family:'Baloo 2', system-ui, sans-serif; font-size:20px; }
.dia-nav .botao-contorno{ min-height:48px; font-size:26px; }
.resumo-dia p{ font-size:15px; line-height:1.5; }
.lista{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.item{ width:100%; min-height:52px; display:grid; grid-template-columns:52px minmax(0,1fr); align-items:center; gap:8px;
  text-align:left; border:1px solid var(--borda); background:var(--superficie); border-radius:6px; padding:8px 12px;
  font-family:'Nunito', system-ui, sans-serif; font-size:15px; font-weight:600; color:var(--texto); }
.item b{ font-family:'Baloo 2', system-ui, sans-serif; font-size:17px; }
.pagina-baixo{ margin-top:auto; padding-top:8px; }
.pagina-baixo .botao-contorno{ width:100%; }

/* --- janelinhas que sobem de baixo --- */
.veu{ position:fixed; inset:0; z-index:50; background:var(--veu); }
.janela{ position:fixed; left:0; right:0; bottom:0; z-index:60; width:100%; max-width:480px; margin:0 auto;
  overflow:auto; display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(var(--superficie), var(--superficie)), var(--fundo);
  border:1px solid var(--borda); border-bottom:0; border-radius:8px 8px 0 0;
  padding:16px; padding-bottom:max(16px, env(safe-area-inset-bottom)); }
.janela-topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.janela-topo h2{ display:flex; align-items:center; gap:8px; font-size:22px; font-weight:800; }
.janela-topo h2 .ic{ width:24px; height:24px; margin:0; }
.fechar{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--borda); background:transparent; border-radius:9999px; }
.fechar .ic{ width:20px; height:20px; margin:0; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips button{ min-height:44px; padding:0 16px; border:1px solid var(--borda); background:transparent; color:var(--texto);
  border-radius:9999px; font-family:'Nunito', system-ui, sans-serif; font-size:16px; font-weight:800; }
.chips button.on{ background:var(--turq); color:var(--sobrecor); border-color:transparent; }

.numero-grande{ font-family:'Baloo 2', system-ui, sans-serif; font-size:48px; font-weight:800; text-align:center; line-height:1; }
.numero-medio{ font-family:'Baloo 2', system-ui, sans-serif; font-size:30px; font-weight:800; text-align:center; line-height:1.1; }
.contador{ display:flex; flex-direction:column; gap:8px; }
.contador .botao-contorno{ min-height:48px; font-size:24px; }

.grandao{ min-height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border:1px solid var(--borda); background:var(--superficie); color:var(--texto); border-radius:8px;
  font-size:18px; font-weight:800; }
.grandao .ic{ width:32px; height:32px; margin:0; }
.ics{ display:flex; gap:2px; }                 /* "Os dois": gota e cocô lado a lado */
.ics .ic{ width:28px; height:28px; }

.campo{ display:flex; flex-direction:column; gap:6px; }
.campo > span{ font-size:14px; font-weight:700; color:var(--txt2); }
.campo input{ width:100%; min-height:48px; padding:0 12px; border:1px solid var(--borda); background:var(--superficie);
  color:var(--texto); border-radius:6px; font-family:'Nunito', system-ui, sans-serif; font-size:18px; font-weight:700; }
.campo input[type=range]{ padding:0; border:0; background:none; accent-color:var(--turq); }
.botao-perigo{ min-height:52px; border:1px solid var(--rosa); background:transparent; color:var(--rosa); border-radius:8px;
  font-size:18px; font-weight:800; }

/* --- celular baixo: tudo um pouco mais enxuto pra caber mais sem rolar --- */
@media (max-height: 680px){
  .app{ gap:8px; }
  .cartao{ padding:12px; }
  .grande{ font-size:28px; }
  .atalho{ min-height:50px; }
  .atalho .ic{ width:22px; height:22px; }
  .lado{ min-height:72px; font-size:22px; }
  .botao-dor{ min-height:48px; font-size:18px; }
  .botao-acao, .botao-contorno{ min-height:52px; }
  .relogio{ font-size:48px; margin:2px 0 8px; }
  .barra-fixa{ gap:8px; }
}

/* --- aviso de baixo ("Mamada salva · Desfazer") --- */
.aviso{
  position:fixed; z-index:70; left:16px; right:16px; bottom:max(16px, env(safe-area-inset-bottom));
  max-width:448px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg1); color:var(--sobrecor); border:1px solid var(--borda);
  border-radius:8px; padding:12px 12px 12px 16px; font-weight:700;
}
.aviso button{ min-height:44px; padding:0 16px; border:1px solid var(--sobrecor); background:transparent; color:var(--sobrecor);
  border-radius:9999px; font-size:18px; font-weight:800; }