/* ===========================================================
   Hidrate - agua.comreserva.com.br
   =========================================================== */

:root{
  --azul:#38bdf8;
  --azul-forte:#0ea5e9;
  --azul-escuro:#0369a1;
  --verde:#34d399;
  --vermelho:#fb7185;
  --amarelo:#fbbf24;

  --fundo:#0b1220;
  --fundo-2:#0f1a2e;
  --cartao:rgba(255,255,255,.055);
  --cartao-borda:rgba(255,255,255,.09);
  --texto:#eaf2ff;
  --texto-2:#93a4c0;
  --raio:18px;
  --raio-p:12px;
  --sombra:0 10px 30px rgba(0,0,0,.35);
  --seg:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  min-height:100dvh;
  background:var(--fundo);
  color:var(--texto);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(84px + var(--seg));
  overflow-x:hidden;
}
body.tela-cheia,body.tela-nfc{padding-bottom:24px}

/* ---------- Fundo animado ---------- */
.fundo{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(1200px 700px at 50% -10%,#12325a 0%,var(--fundo) 60%)}
.fundo span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.28;animation:flutua 18s ease-in-out infinite}
.fundo span:nth-child(1){width:320px;height:320px;background:#0ea5e9;top:-90px;left:-60px}
.fundo span:nth-child(2){width:260px;height:260px;background:#22d3ee;top:35%;right:-90px;animation-delay:-6s}
.fundo span:nth-child(3){width:300px;height:300px;background:#3b82f6;bottom:-120px;left:20%;animation-delay:-12s}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}

/* ---------- Estrutura ---------- */
.conteudo{max-width:560px;margin:0 auto;padding:14px 16px 8px;display:flex;flex-direction:column;gap:14px}
.caixa-centro{min-height:100dvh;display:flex;align-items:center;justify-content:center;width:100%}

.cartao{
  background:var(--cartao);
  border:1px solid var(--cartao-borda);
  border-radius:var(--raio);
  padding:18px 16px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--sombra);
}
.cartao-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cartao-topo h2,.titulo-secao{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:.2px;color:var(--texto)}
.cartao-topo h2{margin:0}

h1{font-size:22px;margin:0 0 4px}

/* ---------- Topo ---------- */
.topo{
  position:sticky;top:0;z-index:20;
  max-width:560px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;
  background:rgba(11,18,32,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.perfil-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.topo-nome{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.topo-nome small{color:var(--texto-2);font-size:12px}
.topo-nome strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid rgba(56,189,248,.5);background:#13233d;display:grid;place-items:center}
.avatar-txt{font-weight:700;font-size:14px;color:var(--azul);letter-spacing:.5px}
.avatar-g{width:92px;height:92px;font-size:28px;border-width:3px}

/* ---------- Menu inferior ---------- */
.menu{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;align-items:stretch;
  max-width:560px;margin:0 auto;
  padding:8px 6px calc(8px + var(--seg));
  background:rgba(11,18,32,.9);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(255,255,255,.07);
  border-radius:20px 20px 0 0;
}
.menu a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;border-radius:14px;text-decoration:none;
  color:var(--texto-2);font-size:11px;font-weight:600;transition:.18s;
}
.menu a.on{color:var(--azul);background:rgba(56,189,248,.12)}
.menu a:active{transform:scale(.94)}

/* ---------- Anel de progresso ---------- */
.painel-hoje{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:8px}
.anel-area{position:relative;width:230px;height:230px;display:grid;place-items:center}
.anel{width:100%;height:100%;transform:rotate(-90deg)}
.anel circle{fill:none;stroke-width:15;stroke-linecap:round}
.anel-fundo{stroke:rgba(255,255,255,.08)}
.anel-frente{stroke:var(--azul);
  filter:drop-shadow(0 0 12px rgba(56,189,248,.55));
  transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1)}
.anel-centro{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px}
.anel-valor{font-size:34px;font-weight:800;letter-spacing:-.5px}
.anel-meta{font-size:13px;color:var(--texto-2)}
.anel-pct{margin-top:6px;font-size:12px;font-weight:700;color:var(--azul);
  background:rgba(56,189,248,.12);padding:3px 10px;border-radius:999px}
.frase-motivo{margin:2px 0 6px;text-align:center;color:var(--texto-2);font-size:14px}
.frase-motivo strong{color:var(--texto)}

/* ---------- Botoes de adicionar ---------- */
.grade-add{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.btn-add{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:14px 6px;border:1px solid var(--cartao-borda);border-radius:var(--raio-p);
  background:var(--cartao);color:var(--texto);cursor:pointer;
  transition:.15s;font-family:inherit;-webkit-tap-highlight-color:transparent;
}
.btn-add:active{transform:scale(.95);background:rgba(56,189,248,.18);border-color:var(--azul)}
.btn-add.piscando{background:rgba(52,211,153,.22);border-color:var(--verde)}
.btn-add-emoji{font-size:20px;line-height:1}
.btn-add-ml{font-size:15px;font-weight:700}
.btn-add-rotulo{font-size:11px;color:var(--texto-2)}
.btn-add-outro{border-style:dashed}

/* ---------- Cartoes de resumo ---------- */
.cartoes-resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mini-cartao{
  background:var(--cartao);border:1px solid var(--cartao-borda);
  border-radius:var(--raio-p);padding:10px 6px;text-align:center;
  display:flex;flex-direction:column;gap:3px;
}
.mini-rotulo{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--texto-2);font-weight:700}
.mini-cartao strong{font-size:14px}
.mini-cartao strong small{font-size:10px;font-weight:600;color:var(--texto-2)}

/* ---------- Graficos ---------- */
.grafico{display:flex;align-items:flex-end;gap:6px;height:130px;margin-top:6px}
.barra-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0}
.barra-trilho{flex:1;width:100%;display:flex;align-items:flex-end;
  background:rgba(255,255,255,.045);border-radius:8px;overflow:hidden}
.barra{width:100%;border-radius:8px;background:linear-gradient(180deg,#7dd3fc,var(--azul-forte));
  min-height:3px;transition:height .5s ease}
.barra.meta-ok{background:linear-gradient(180deg,#6ee7b7,#10b981)}
.barra-rot{font-size:10px;color:var(--texto-2);font-weight:600;white-space:nowrap}
.grafico-12 .barra-rot,.grafico-14 .barra-rot{font-size:9px}

/* ---------- Listas ---------- */
.lista-registros{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lista-registros li{display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.035);border-radius:var(--raio-p);padding:9px 10px;
  animation:entra .28s ease}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.reg-icone{font-size:17px}
.reg-info{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.reg-info strong{font-size:15px}
.reg-info strong.negativo{color:var(--vermelho)}
.reg-info small{font-size:11px;color:var(--texto-2)}
.reg-excluir{border:0;background:rgba(251,113,133,.14);color:var(--vermelho);
  width:28px;height:28px;border-radius:9px;cursor:pointer;font-size:13px;flex:none;
  display:grid;place-items:center;font-family:inherit}
.reg-excluir:active{transform:scale(.9)}
.vazio{color:var(--texto-2);font-size:14px;text-align:center;padding:16px 0;margin:0}
.lista-simples{margin:0;padding-left:18px;color:var(--texto-2);font-size:14px}

/* ---------- Abas / navegacao ---------- */
.abas{display:flex;gap:6px;background:var(--cartao);border:1px solid var(--cartao-borda);
  padding:5px;border-radius:14px}
.abas a{flex:1;text-align:center;padding:9px;border-radius:10px;text-decoration:none;
  color:var(--texto-2);font-size:14px;font-weight:600}
.abas a.on{background:rgba(56,189,248,.16);color:var(--azul)}

.navegacao-mes{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.navegacao-mes strong{font-size:16px}
.botao-icone{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
  background:var(--cartao);border:1px solid var(--cartao-borda);color:var(--texto);
  text-decoration:none;font-size:18px;cursor:pointer;flex:none;font-family:inherit}
.botao-icone.desativado{opacity:.3}
.botao-icone:active{transform:scale(.92)}

.resumo-linha{display:flex;gap:8px;flex-wrap:wrap}
.resumo-linha>div{flex:1;min-width:80px;background:rgba(255,255,255,.035);
  border-radius:var(--raio-p);padding:10px;display:flex;flex-direction:column;gap:2px}
.resumo-linha strong{font-size:15px}
.resumo-linha strong small{font-size:10px;color:var(--texto-2)}

/* ---------- Lista de dias ---------- */
.lista-dias{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.dia-linha{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:var(--raio-p);
  text-decoration:none;color:inherit;transition:.15s}
.dia-linha:active{background:rgba(255,255,255,.05)}
.lista-dias li.aberto .dia-linha{background:rgba(56,189,248,.1)}
.dia-num{width:30px;text-align:center;font-weight:800;font-size:16px;color:var(--texto-2);flex:none}
.dia-info{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.dia-nome{font-size:12px;color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dia-trilho{height:7px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;display:block}
.dia-barra{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#7dd3fc,var(--azul-forte));transition:width .5s}
.dia-barra.meta-ok{background:linear-gradient(90deg,#6ee7b7,#10b981)}
.dia-total{font-size:13px;font-weight:700;white-space:nowrap;flex:none}
.dia-total.zero{color:var(--texto-2);font-weight:500}
.dia-total em{color:var(--verde);font-style:normal}
.dia-detalhe{padding:8px 8px 12px;border-left:2px solid rgba(56,189,248,.35);margin:2px 0 8px 22px}

.lista-meses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lista-meses a{display:flex;align-items:center;gap:10px;padding:11px 8px;border-radius:var(--raio-p);
  text-decoration:none;color:inherit}
.lista-meses a:active{background:rgba(255,255,255,.05)}
.mes-nome{flex:1;font-size:14px}
.mes-vals{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.mes-vals strong{font-size:14px}
.mes-vals small{font-size:11px;color:var(--texto-2)}
.seta{color:var(--texto-2);font-size:18px}

/* ---------- Usuarios (painel) ---------- */
.lista-usuarios{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lista-usuarios li{background:rgba(255,255,255,.035);border-radius:var(--raio-p);padding:12px;
  display:flex;flex-direction:column;gap:9px}
.lista-usuarios li.inativo{opacity:.55}
.us-topo{display:flex;align-items:center;gap:11px}
.us-info{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.us-info strong{font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.us-info small{font-size:12px;color:var(--texto-2);word-break:break-all}
.us-info small.cinza{opacity:.75}
.tag-adm{font-size:9px;text-transform:uppercase;letter-spacing:.5px;background:rgba(56,189,248,.2);
  color:var(--azul);padding:2px 6px;border-radius:6px;font-weight:800}
.tag-off{font-size:9px;text-transform:uppercase;background:rgba(251,113,133,.18);
  color:var(--vermelho);padding:2px 6px;border-radius:6px;font-weight:800}
.us-nums{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--texto-2)}
.us-nums strong{color:var(--texto);font-size:12px}
.us-acoes{display:flex;gap:8px}
.in-linha{display:inline-flex;gap:8px;align-items:center;margin:0}

/* ---------- Formularios ---------- */
.formulario{display:flex;flex-direction:column;gap:13px}
.formulario label{display:flex;flex-direction:column;gap:6px;font-size:13px;
  font-weight:600;color:var(--texto-2)}
.formulario input[type=text],.formulario input[type=email],.formulario input[type=password],
.formulario input[type=number],.formulario input[type=date],.formulario input[type=file],
.entrada-ml,input[type=date]{
  width:100%;padding:13px 14px;border-radius:var(--raio-p);
  border:1px solid var(--cartao-borda);background:rgba(255,255,255,.05);
  color:var(--texto);font-size:16px;font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
.formulario input:focus,.entrada-ml:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(56,189,248,.16)}
.formulario input:disabled{opacity:.55}
.formulario input[type=file]{padding:10px;font-size:13px}
.formulario input[type=date]{min-height:47px}
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.checagem{flex-direction:row!important;align-items:center;gap:9px!important;color:var(--texto)!important;
  font-weight:500!important;font-size:14px!important}
.checagem input{width:19px;height:19px;accent-color:var(--azul-forte);flex:none}
.campo-senha{position:relative;display:block}
.campo-senha input{padding-right:48px!important}
.ver-senha{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;font-size:17px;cursor:pointer;padding:8px;color:var(--texto-2)}
.ajuda{font-size:12px;color:var(--texto-2);font-weight:400;margin:0;line-height:1.5}
.ajuda.centro{text-align:center}
.centro{text-align:center}

/* ---------- Botoes ---------- */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;border-radius:14px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--azul),var(--azul-forte));
  color:#04121f;font-weight:800;font-size:15px;font-family:inherit;
  text-decoration:none;transition:.15s;-webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 18px rgba(14,165,233,.28);
}
.botao:active{transform:scale(.97)}
.botao:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.botao.bloco{width:100%;margin-top:4px}
.botao.fantasma{background:var(--cartao);border:1px solid var(--cartao-borda);
  color:var(--texto);box-shadow:none}
.botao.mini{padding:8px 13px;font-size:12.5px;border-radius:10px}
.botao.perigo{background:rgba(251,113,133,.16);color:var(--vermelho);box-shadow:none;
  border:1px solid rgba(251,113,133,.3)}
.botao.perigo-suave{background:var(--cartao);border:1px solid rgba(251,113,133,.3);
  color:var(--vermelho);box-shadow:none}
.botao.gigante{width:100%;padding:22px;font-size:19px;border-radius:18px}
.link-mais{font-size:12.5px;color:var(--azul);text-decoration:none;font-weight:600}
.voltar{color:var(--texto-2);text-decoration:none;font-size:13.5px;font-weight:600;padding:2px}
.etiqueta{font-size:11px;font-weight:800;background:rgba(56,189,248,.15);color:var(--azul);
  padding:3px 9px;border-radius:99px}
.bloco-codigo{display:block;background:rgba(0,0,0,.32);border:1px solid var(--cartao-borda);
  padding:11px 12px;border-radius:10px;font-size:12.5px;word-break:break-all;
  font-family:ui-monospace,Menlo,Consolas,monospace;color:#7dd3fc;margin:6px 0 12px}

/* ---------- Alertas ---------- */
.alerta{padding:12px 14px;border-radius:var(--raio-p);font-size:13.5px;font-weight:600;line-height:1.45}
.alerta-sucesso{background:rgba(52,211,153,.13);color:#6ee7b7;border:1px solid rgba(52,211,153,.28)}
.alerta-erro{background:rgba(251,113,133,.13);color:#fda4af;border:1px solid rgba(251,113,133,.28)}
.alerta-aviso{background:rgba(251,191,36,.12);color:#fcd34d;border:1px solid rgba(251,191,36,.28)}

/* ---------- Login ---------- */
.cartao-login{width:100%;max-width:380px;padding:30px 24px}
.marca{text-align:center;margin-bottom:22px}
.gota-grande{font-size:52px;display:block;animation:pinga 3s ease-in-out infinite}
@keyframes pinga{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.titulo-app{font-size:26px;margin:8px 0 2px;font-weight:800;letter-spacing:-.5px}

/* ---------- Tela NFC ---------- */
.tela-nfc .conteudo{gap:18px;padding-top:26px}
.nfc-topo{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.nfc-topo h1{font-size:25px;margin:6px 0 0}
.nfc-sub{margin:0;color:var(--texto-2);font-size:15px}
.nfc-sugestao{display:flex;flex-direction:column;gap:8px}
.nfc-botoes .grade-add{gap:11px}
.nfc-botoes .btn-add{padding:19px 6px}
.nfc-botoes .btn-add-emoji{font-size:25px}
.nfc-botoes .btn-add-ml{font-size:16px}
.nfc-status{display:flex;flex-direction:column;gap:11px;
  background:var(--cartao);border:1px solid var(--cartao-borda);
  border-radius:var(--raio);padding:16px}
.barra-meta{height:11px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.barra-meta-preenchida{height:100%;border-radius:99px;
  background:linear-gradient(90deg,#7dd3fc,var(--azul-forte));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.nfc-total{margin:0;text-align:center;font-size:15px}
.nfc-total strong{font-size:19px;color:var(--azul)}
.cinza{color:var(--texto-2);font-size:13px}

/* ---------- Foto ---------- */
.foto-editor{display:flex;align-items:center;gap:16px}
.foto-alvo{position:relative;cursor:pointer;flex:none;display:block}
.foto-cam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--azul-forte);display:grid;place-items:center;font-size:14px;
  border:3px solid var(--fundo)}
.foto-lado{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none}
.modal-fundo{position:absolute;inset:0;background:rgba(4,10,20,.72);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:aparece .2s}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.modal-caixa{position:relative;width:100%;max-width:360px;background:#101c31;
  border:1px solid var(--cartao-borda);border-radius:22px;padding:22px 20px;
  display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:sobe .26s cubic-bezier(.2,.9,.3,1)}
@keyframes sobe{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.modal-caixa h2{margin:0;font-size:17px;text-align:center}
.linha-ml{display:flex;align-items:center;gap:10px}
.entrada-ml{text-align:center;font-size:26px!important;font-weight:800;padding:12px 6px!important}
.passo{width:52px;height:52px;flex:none;border-radius:14px;border:1px solid var(--cartao-borda);
  background:rgba(255,255,255,.055);color:var(--texto);font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit}
.passo:active{transform:scale(.92);background:rgba(56,189,248,.2)}
.atalhos-ml{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.chip{padding:7px 13px;border-radius:99px;border:1px solid var(--cartao-borda);
  background:rgba(255,255,255,.05);color:var(--texto-2);font-size:12.5px;cursor:pointer;
  font-family:inherit;font-weight:600}
.chip:active,.chip.on{background:rgba(56,189,248,.2);color:var(--azul);border-color:var(--azul)}
.campo-data{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--texto-2)}
.modal-acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.modal-acoes .botao{width:100%;padding:13px}

/* ---------- Toast ---------- */
.aviso-flutuante{
  position:fixed;left:50%;bottom:calc(96px + var(--seg));transform:translateX(-50%) translateY(14px);
  z-index:80;background:#0f2740;border:1px solid rgba(56,189,248,.35);
  color:var(--texto);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:700;
  box-shadow:0 12px 34px rgba(0,0,0,.45);opacity:0;transition:.28s;pointer-events:none;
  display:flex;align-items:center;gap:10px;max-width:88vw;
}
.aviso-flutuante[hidden]{display:none}
.aviso-flutuante.aparecendo{opacity:1;transform:translateX(-50%) translateY(0)}
.aviso-flutuante.sucesso{border-color:rgba(52,211,153,.45);background:#0d2b26}
.aviso-flutuante.falha{border-color:rgba(251,113,133,.45);background:#2b1220}
.aviso-flutuante button{background:rgba(255,255,255,.1);border:0;color:var(--azul);
  font-weight:800;font-size:12.5px;padding:6px 11px;border-radius:9px;cursor:pointer;
  pointer-events:auto;font-family:inherit}
body.tela-nfc .aviso-flutuante{bottom:28px}

/* ---------- Gota animada ao registrar ---------- */
.gota-voando{position:fixed;z-index:70;font-size:26px;pointer-events:none;
  animation:cai .85s cubic-bezier(.4,0,.7,1) forwards}
@keyframes cai{0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-90px) scale(1.7)}}

/* ---------- Telas maiores ---------- */
@media (min-width:620px){
  .conteudo{padding:20px 20px 10px;gap:16px}
  .menu{border-radius:20px;bottom:14px;left:50%;transform:translateX(-50%);
    max-width:420px;border:1px solid rgba(255,255,255,.08)}
  body{padding-bottom:104px}
  .anel-area{width:250px;height:250px}
}

/* ===========================================================
   Calculadora, gráficos coloridos e IMC
   =========================================================== */

.titulo-hero{font-size:20px;margin:0 0 8px;font-weight:800;letter-spacing:-.3px}

/* ---------- Select ---------- */
.formulario select{
  width:100%;padding:13px 14px;border-radius:var(--raio-p);
  border:1px solid var(--cartao-borda);background:rgba(255,255,255,.05);
  color:var(--texto);font-size:16px;font-family:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%2393a4c0' d='M7 9 0 2l2-2 5 5 5-5 2 2z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
.formulario select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(56,189,248,.16)}
.formulario select option{background:#101c31;color:var(--texto)}

/* ---------- Donut do resultado ---------- */
.destaque-resultado{border-color:rgba(56,189,248,.32);
  background:linear-gradient(160deg,rgba(56,189,248,.13),rgba(255,255,255,.045))}
.donut-area{position:relative;width:220px;height:220px;margin:6px auto 4px;display:grid;place-items:center}
.donut{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:17;stroke-linecap:round}
.donut-fundo{stroke:rgba(255,255,255,.07)}
.donut-frente{stroke:url(#grad-agua);filter:drop-shadow(0 0 14px rgba(56,189,248,.5));
  animation:preenche 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes preenche{from{stroke-dashoffset:530}to{stroke-dashoffset:0}}
.donut-centro{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1px}
.donut-valor{font-size:46px;font-weight:800;letter-spacing:-1.5px;line-height:1;
  background:linear-gradient(135deg,#a5f3fc,#38bdf8);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.donut-unidade{font-size:12px;color:var(--texto-2);font-weight:600;margin-top:4px}
.donut-ml{font-size:12px;color:var(--azul);background:rgba(56,189,248,.14);
  padding:3px 11px;border-radius:99px;margin-top:7px;font-weight:700}

/* ---------- Fila de copos ---------- */
.copos-fila{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:10px 0 6px}
.copo{font-size:20px;animation:surge .4s backwards}
.copos-fila .copo:nth-child(1){animation-delay:.02s}
.copos-fila .copo:nth-child(2){animation-delay:.05s}
.copos-fila .copo:nth-child(3){animation-delay:.08s}
.copos-fila .copo:nth-child(4){animation-delay:.11s}
.copos-fila .copo:nth-child(5){animation-delay:.14s}
.copos-fila .copo:nth-child(n+6){animation-delay:.17s}
@keyframes surge{from{opacity:0;transform:translateY(8px) scale(.7)}to{opacity:1;transform:none}}
.copo-mais{font-size:12px;font-weight:800;color:var(--azul);align-self:center;
  background:rgba(56,189,248,.14);padding:3px 9px;border-radius:99px}

/* ---------- Barra composta ---------- */
.barra-composta{display:flex;height:34px;border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.05);margin:4px 0 14px}
.parte{display:grid;place-items:center;transition:width .7s cubic-bezier(.2,.8,.2,1);
  min-width:0;overflow:hidden}
.parte span{font-size:11.5px;font-weight:800;color:#04121f;white-space:nowrap}
.parte-base{background:linear-gradient(135deg,#7dd3fc,#0ea5e9)}
.parte-extra{background:linear-gradient(135deg,#c4b5fd,#8b5cf6)}

.legenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.legenda li{display:flex;align-items:center;gap:10px;font-size:13.5px}
.legenda li span{flex:1;line-height:1.35}
.legenda li small{color:var(--texto-2);font-size:11.5px}
.legenda li strong{font-size:14.5px;white-space:nowrap}
.legenda li.total{border-top:1px solid var(--cartao-borda);padding-top:10px;margin-top:2px}
.legenda li.total strong{color:var(--azul);font-size:16px}
.ponto{width:12px;height:12px;border-radius:4px;flex:none}
.p-base{background:linear-gradient(135deg,#7dd3fc,#0ea5e9)}
.p-extra{background:linear-gradient(135deg,#c4b5fd,#8b5cf6)}
.p-total{background:linear-gradient(135deg,#6ee7b7,#10b981)}

/* ---------- Régua de IMC ---------- */
.imc-topo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.imc-numero{font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1}
.imc-faixa{font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:99px}
.regua-imc{position:relative;height:14px;margin-bottom:7px}
.regua-fundo{position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,
    #60a5fa 0%, #60a5fa 14%,
    #34d399 14%, #34d399 40%,
    #fbbf24 40%, #fbbf24 60%,
    #fb923c 60%, #fb923c 80%,
    #f87171 80%, #fb7185 100%)}
.regua-marcador{position:absolute;top:-6px;transform:translateX(-50%);transition:left .7s cubic-bezier(.2,.8,.2,1)}
.regua-pino{display:block;width:18px;height:26px;border-radius:99px;
  border:3px solid var(--fundo);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.regua-rotulos{display:flex;justify-content:space-between;font-size:10px;color:var(--texto-2);
  font-weight:700;padding:0 2px}
.aviso-saude{background:rgba(251,191,36,.07);border-color:rgba(251,191,36,.22)}

/* ---------- Cores por nível de meta ---------- */
.barra.n-otimo,.dia-barra.n-otimo{background:linear-gradient(180deg,#6ee7b7,#10b981)}
.dia-barra.n-otimo{background:linear-gradient(90deg,#6ee7b7,#10b981)}
.barra.n-bom,.dia-barra.n-bom{background:linear-gradient(180deg,#7dd3fc,#0284c7)}
.dia-barra.n-bom{background:linear-gradient(90deg,#7dd3fc,#0284c7)}
.barra.n-medio,.dia-barra.n-medio{background:linear-gradient(180deg,#fcd34d,#f59e0b)}
.dia-barra.n-medio{background:linear-gradient(90deg,#fcd34d,#f59e0b)}
.barra.n-baixo,.dia-barra.n-baixo{background:linear-gradient(180deg,#fdba74,#f97316)}
.dia-barra.n-baixo{background:linear-gradient(90deg,#fdba74,#f97316)}
.barra.n-zero,.dia-barra.n-zero{background:rgba(148,163,184,.45)}

/* Anel do dia acompanha a cor do nível */
.anel-frente.n-otimo{stroke:#34d399;filter:drop-shadow(0 0 12px rgba(52,211,153,.55))}
.anel-frente.n-bom{stroke:#38bdf8;filter:drop-shadow(0 0 12px rgba(56,189,248,.55))}
.anel-frente.n-medio{stroke:#fbbf24;filter:drop-shadow(0 0 12px rgba(251,191,36,.5))}
.anel-frente.n-baixo{stroke:#fb923c;filter:drop-shadow(0 0 12px rgba(251,146,60,.5))}
.anel-frente.n-zero{stroke:#64748b;filter:none}
.anel-pct.n-otimo{color:#6ee7b7;background:rgba(52,211,153,.14)}
.anel-pct.n-medio{color:#fcd34d;background:rgba(251,191,36,.14)}
.anel-pct.n-baixo{color:#fdba74;background:rgba(251,146,60,.14)}
.anel-pct.n-zero{color:var(--texto-2);background:rgba(148,163,184,.12)}

/* ---------- Cartão de meta sugerida no painel do dia ---------- */
.dica-meta{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--raio-p);
  background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(56,189,248,.1));
  border:1px solid rgba(139,92,246,.28);text-decoration:none;color:inherit}
.dica-meta-emoji{font-size:24px;flex:none}
.dica-meta span{flex:1;font-size:13px;line-height:1.4}
.dica-meta strong{display:block;font-size:14px;margin-bottom:2px}
.dica-meta .seta{color:#c4b5fd;font-size:20px}

/* ---------- Menu com 5 itens ---------- */
.menu a span{font-size:10.5px}
@media (max-width:359px){.menu a span{font-size:9.5px}}