/* Ufa, Mamou */
@font-face { font-family: 'Fredoka'; src: url(../fonts/Fredoka-400.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url(../fonts/Fredoka-500.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url(../fonts/Fredoka-600.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fredoka'; src: url(../fonts/Fredoka-700.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../fonts/Nunito-400.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../fonts/Nunito-600.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../fonts/Nunito-700.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../fonts/Nunito-800.ttf) format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url(../fonts/Caveat-400.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url(../fonts/Caveat-700.ttf) format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --argila: #D98C7A;
  --argila-esc: #B86F5E;
  --leite: #FFF3E6;
  --salvia: #7FA88B;
  --tinta: #24384A;
  --terra: #C2462A;
  --ambar: #E3A44B;
  --fundo: var(--leite);
  --texto: var(--tinta);
  --cartao: #FFFFFF;
  --linha: #F0DCCB;
  --btn: var(--argila);
  --btn-txt: #FFFFFF;
  --btn-sec: #F6E2D3;
  --btn-sec-txt: var(--tinta);
  --suave: #5B6B78;
  --corpo: 20px;
  --toque: 64px;
  --doca: 148px;
}
body.noite {
  --fundo: #1E1A1A;
  --texto: #EADBCF;
  --cartao: #2A2323;
  --linha: #3A3030;
  --btn: #8E5F56;
  --btn-txt: #F5E6DA;
  --btn-sec: #3A2E2C;
  --btn-sec-txt: #EADBCF;
  --suave: #B8A69A;
  --corpo: 22px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: var(--corpo);
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
body.com-doca { padding-bottom: calc(var(--doca) + env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }
h1, h2, h3, .marca, .resumo-titulo, .btn-registro { font-family: 'Fredoka', 'Nunito', sans-serif; }
h2 { font-size: 1.3em; margin: .4em 0; font-weight: 600; }
h3 { font-size: 1.1em; margin: .3em 0; font-weight: 600; }
img.ilustra { width: 100%; height: auto; border-radius: 20px; display: block; background: var(--linha); }

/* Botões */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--toque); padding: 12px 20px;
  border: 0; border-radius: 20px;
  font: 700 var(--corpo) 'Nunito', sans-serif; text-decoration: none; text-align: center;
  cursor: pointer;
}
.btn-principal { background: var(--btn); color: var(--btn-txt); }
.btn-sec { background: var(--btn-sec); color: var(--btn-sec-txt); }
.btn:active, .btn-registro:active, .tab:active { transform: scale(.98); }
.btn-icone {
  min-width: var(--toque); min-height: var(--toque); border: 0; border-radius: 50%;
  background: transparent; color: var(--texto); font-size: 28px; cursor: pointer;
}
.zona-polegar { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

/* Telas de entrada */
.tela-cheia {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}
.capa { width: 70%; max-width: 320px; height: auto; align-self: center; border-radius: 28px; margin-bottom: 8px; }
.marca { font-size: 2em; margin: .2em 0; color: var(--argila-esc); font-weight: 700; }
body.noite .marca { color: var(--argila); }
.lead { margin: 0 0 12px; }
.lead-peq { margin: 0 0 12px; }
.rotulo { font-weight: 700; display: block; }
.campo {
  width: 100%; min-height: var(--toque); padding: 10px 16px;
  border: 2px solid var(--linha); border-radius: 16px;
  background: var(--cartao); color: var(--texto); font: 600 var(--corpo) 'Nunito', sans-serif;
}
.erro { color: var(--terra); font-weight: 700; margin: 0; }
.cartao { background: var(--cartao); border-radius: 20px; padding: 14px 18px; margin: 10px 0; }
.cartao h2 { margin-top: 0; font-size: 1.15em; }
.passos { margin: 0; padding-left: 1.3em; }
.passos li { margin: 4px 0; }
.nota { color: var(--suave); margin: 10px 0; }
.nota-peq { color: var(--suave); font-size: 18px; margin: 6px 0 0; }

/* Topo */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 4px;
}
.chip-dia {
  min-height: 48px; padding: 6px 16px; border: 0; border-radius: 999px;
  background: var(--btn-sec); color: var(--btn-sec-txt); font: 700 18px 'Nunito', sans-serif; cursor: pointer;
}
.topo-marca { font-family: 'Caveat', cursive; font-size: 28px; font-weight: 700; color: var(--argila-esc); }
body.noite .topo-marca { color: var(--argila); }

main { padding: 0 16px; }
.aba { padding-bottom: 12px; }
.titulo-aba { margin-top: 8px; }

/* Hoje: resumo em cima, botões na metade de baixo */
#app:not([hidden]) {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--doca));
  min-height: calc(100dvh - var(--doca) - env(safe-area-inset-bottom));
}
#app main { flex: 1; display: flex; flex-direction: column; }
/* botões descem para o polegar e ficam sempre à vista, logo acima da doca */
#aba-hoje { flex: 1; display: flex; flex-direction: column; padding-bottom: 0; }
#aba-hoje[hidden] { display: none !important; }
.resumo {
  border-radius: 22px; padding: 14px 18px; background: var(--cartao);
  border-left: 10px solid var(--suave);
}
.resumo-titulo { margin: 0; font-size: 1.35em; font-weight: 700; }
.resumo-porque { margin: 4px 0 0; font-weight: 700; }
.resumo-acao { margin: 4px 0 0; }
.resumo[data-estado="ok"] { border-left-color: var(--salvia); background: #E7F1EA; }
.resumo[data-estado="olho"] { border-left-color: var(--ambar); background: #FBEBD3; }
.resumo[data-estado="ligue"] { border-left-color: var(--terra); background: #F8DDD5; }
.resumo[data-estado="erro"] { border-left-color: var(--terra); }
.resumo[data-estado="ok"] .resumo-titulo { color: #3F6D4C; }
.resumo[data-estado="olho"] .resumo-titulo { color: #8A5A12; }
.resumo[data-estado="ligue"] .resumo-titulo { color: var(--terra); }
body.noite .resumo[data-estado="ok"] { background: #22302A; }
body.noite .resumo[data-estado="olho"] { background: #3A2E1E; }
body.noite .resumo[data-estado="ligue"] { background: #3E2420; }
body.noite .resumo[data-estado="ok"] .resumo-titulo { color: #9CC4A7; }
body.noite .resumo[data-estado="olho"] .resumo-titulo { color: #E8B870; }
body.noite .resumo[data-estado="ligue"] .resumo-titulo { color: #F08E76; }

.contadores { margin: 12px 0 0; }
.contador {
  display: grid; grid-template-columns: 6.2em 1fr auto; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--linha);
}
.contador-nome { font-weight: 700; }
.contador-num { font-weight: 800; min-width: 2.6em; text-align: right; }
.bolinhas { display: flex; flex-wrap: wrap; gap: 4px; }
.bola { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--argila); }
.bola.cheia { background: var(--argila); }
.bolinhas[data-tipo="xixi"] .bola { border-color: #6D9FB8; }
.bolinhas[data-tipo="xixi"] .bola.cheia { background: #6D9FB8; }
.bolinhas[data-tipo="coco"] .bola { border-color: #B08B5A; }
.bolinhas[data-tipo="coco"] .bola.cheia { background: #B08B5A; }
.bola-mais { font-weight: 800; font-size: 18px; color: var(--suave); }

.botoes-registro {
  margin-top: auto; padding: 12px 0; display: flex; flex-direction: column; gap: 12px;
  position: sticky; bottom: calc(var(--doca) + env(safe-area-inset-bottom)); z-index: 5;
  background: var(--fundo);
}
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-registro {
  min-height: 80px; border: 0; border-radius: 26px; cursor: pointer;
  font-size: 30px; font-weight: 600; color: #fff;
}
.reg-mamou { background: var(--argila); min-height: 92px; font-size: 34px; }
.reg-xixi { background: #6D9FB8; }
.reg-coco { background: #B08B5A; }
body.noite .reg-mamou { background: #8E5F56; color: #F5E6DA; }
body.noite .reg-xixi { background: #4E6B7A; color: #E6EEF2; }
body.noite .reg-coco { background: #75603F; color: #F2E8DA; }

.historico { margin-top: 4px; }
.historico summary { min-height: var(--toque); display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.lista-eventos { list-style: none; margin: 0; padding: 0; }
.lista-eventos li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--linha);
}
.lista-eventos .dia-sep { font-weight: 800; color: var(--suave); border: 0; padding-top: 12px; }
.btn-apagar {
  min-width: var(--toque); min-height: 48px; border: 0; border-radius: 14px;
  background: var(--btn-sec); color: var(--btn-sec-txt); font: 700 18px 'Nunito', sans-serif; cursor: pointer;
}

/* Pega, Dói, Normal */
.lista-acoes { padding-left: 1.2em; margin: 6px 0; }
.lista-acoes li { margin: 6px 0; }
.lista-acoes.ok li::marker { color: var(--salvia); }
.lista-acoes.ajuste li::marker { color: var(--terra); }
.sub { font-weight: 800; margin: 10px 0 0; }
.acao-curta { font-weight: 700; }
.fonte { color: var(--suave); font-size: 18px; margin: 8px 0; }
.navega-pega { flex-direction: row; align-items: center; }
.navega-pega .btn { flex: 1; }
.pega-pos { min-width: 4.5em; text-align: center; font-weight: 700; }

.doi-q { font-size: 1.2em; }
.doi-opcoes { display: flex; flex-direction: column; gap: 12px; }
.doi-res { border-radius: 20px; padding: 14px 18px; background: var(--cartao); border-left: 10px solid var(--salvia); }
.doi-res[data-nivel="olho"] { border-left-color: var(--ambar); }
.doi-res[data-nivel="ligue"] { border-left-color: var(--terra); }
.doi-res ul { padding-left: 1.2em; margin: 6px 0; }
.doi-res li { margin: 6px 0; }

.normal-item { background: var(--cartao); border-radius: 18px; margin: 10px 0; }
.normal-item summary {
  min-height: var(--toque); padding: 12px 16px; display: flex; align-items: center;
  font-weight: 700; cursor: pointer; list-style: none;
}
.normal-item summary::-webkit-details-marker { display: none; }
.normal-item summary::after { content: '+'; margin-left: auto; padding-left: 10px; font-size: 1.3em; color: var(--argila); }
.normal-item[open] summary::after { content: '–'; }
.normal-corpo { padding: 0 16px 12px; }
.normal-corpo p { margin: 4px 0; }

.previa img { width: 100%; border-radius: 16px; border: 1px solid var(--linha); }

/* Toast de desfazer */
.toast {
  /* o JS põe logo acima dos botões de registro, sem cobrir o cartão de estado */
  position: fixed; left: 12px; right: 12px;
  top: calc(50vh + env(safe-area-inset-top));
  background: var(--tinta); color: #FFF3E6; border-radius: 20px; padding: 10px 14px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 30;
}
body.noite .toast { background: #3A2E2C; }
.toast-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#toast-txt { font-weight: 700; }
.btn-toast {
  min-height: var(--toque); min-width: 120px; padding: 0 16px; border: 0; border-radius: 16px;
  background: #FFF3E6; color: var(--tinta); font: 800 var(--corpo) 'Nunito', sans-serif; cursor: pointer;
}
.toast-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.btn-lado {
  min-height: var(--toque); border: 2px solid #FFF3E6; border-radius: 16px; background: transparent;
  color: #FFF3E6; font: 700 19px 'Nunito', sans-serif; cursor: pointer;
}
.btn-lado.escolhido { background: var(--argila); border-color: var(--argila); }
.toast-barra { height: 5px; background: rgba(255,255,255,.2); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.toast-barra span { display: block; height: 100%; width: 100%; background: var(--argila); transform-origin: left; }

/* Doca: sempre no mesmo lugar */
.doca {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--fundo); border-top: 1px solid var(--linha);
  padding: 8px 10px calc(6px + env(safe-area-inset-bottom));
}
.btn-alerta {
  width: 100%; min-height: var(--toque); border: 0; border-radius: 18px;
  background: var(--terra); color: #fff; font: 800 var(--corpo) 'Nunito', sans-serif; cursor: pointer;
}
/* cada aba ocupa a largura do próprio rótulo; a sobra se divide por igual */
.abas { display: flex; gap: 4px; margin-top: 6px; }
.tab {
  flex: 1 1 auto; min-width: 0; white-space: nowrap;
  min-height: var(--toque); border: 0; border-radius: 14px; background: transparent;
  color: var(--suave); font: 700 17px 'Nunito', sans-serif; padding: 0 6px; cursor: pointer;
}
.tab.ativa { background: var(--btn-sec); color: var(--texto); }

/* Sobreposições */
.sobre {
  position: fixed; inset: 0; z-index: 40; background: rgba(20,16,16,.55);
  display: flex; align-items: flex-end;
}
.sobre-caixa {
  width: 100%; max-height: 100%; overflow-y: auto; background: var(--fundo);
  border-radius: 26px 26px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
}
.alerta-titulo { color: var(--terra); margin-top: 0; }
.bloco-alerta { border-radius: 18px; padding: 12px 16px; margin: 10px 0; background: var(--cartao); }
.bloco-alerta.urgente { border-left: 10px solid var(--terra); }
.bloco-alerta.hoje { border-left: 10px solid var(--ambar); }
.bloco-alerta ul { padding-left: 1.2em; margin: 6px 0; }
.bloco-alerta li { margin: 4px 0; }
.btn-alerta-ligar { background: var(--terra); color: #fff; }

/* Rodapé */
.rodape { text-align: center; padding: 24px 20px 20px; color: var(--suave); }
.selo {
  display: inline-block; font-family: 'Caveat', cursive; font-weight: 700; font-size: 30px;
  color: var(--argila-esc); border: 2px solid var(--argila); border-radius: 999px; padding: 0 18px;
}
body.noite .selo { color: var(--argila); }
.assin-frase { margin: 10px 0 4px; }
.assin { font-family: 'Caveat', cursive; font-size: 28px; margin: 0; color: var(--texto); }
.aviso { font-size: 18px; margin: 6px 0 0; }