/* ============================================================
   IMPORTAR FONTE MODERNA DO GOOGLE
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   RESET E VARIÁVEIS GLOBAIS
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --verde:        #00c472;
  --verde-escuro: #00a85a;
  --verde-claro:  #e6fff4;
  --verde-glow:   rgba(0, 196, 114, 0.25);
  --azul:         #3b82f6;
  --laranja:      #f97316;
  --vermelho:     #ef4444;
  --dark:         #0f1923;
  --dark2:        #1a2535;
  --dark3:        #243044;
  --cinza-escuro: #1e293b;
  --cinza-medio:  #64748b;
  --cinza-claro:  #f1f5f9;
  --branco:       #ffffff;
  --sombra:       0 4px 24px rgba(0,0,0,0.07);
  --sombra-forte: 0 12px 40px rgba(0,0,0,0.13);
  --sombra-verde: 0 8px 24px rgba(0,196,114,0.3);
  --raio:         20px;
  --raio-pequeno: 12px;
  --fonte: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: clip;   /* clip não bloqueia scroll vertical no iOS */
  overflow-y: auto;
}

body {
  font-family: var(--fonte);
  background: var(--cinza-claro);
  color: var(--cinza-escuro);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* ============================================================
   SISTEMA DE TELAS — CORRIGIDO
   #tela-boas-vindas.ativa usa flex, o resto usa block
============================================================ */
.tela {
  display: none;
  min-height: 100vh;
  animation: fadeIn 0.5s cubic-bezier(0.4,0,0.2,1);
  overflow-x: clip;
  max-width: 100vw;
}

.tela.ativa { display: block; }

#tela-boas-vindas.ativa {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TELA DE BOAS-VINDAS — REDESIGN MODERNO
============================================================ */
/* ============================================================
   TELA DE AUTENTICAÇÃO
============================================================ */
#tela-auth {
  background: linear-gradient(160deg, #080f14 0%, #0f2235 100%);
  min-height: 100vh;
  display: none;
}
#tela-auth.ativa {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.auth-wrapper {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
}
.auth-logo-icon { font-size: 2.4rem; }
.auth-logo-nome { font-size: 1.9rem; font-weight: 900; color: #fff; letter-spacing: -1.5px; }

.auth-card {
  background: #fff;
  border-radius: 24px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.auth-card h2 { font-size: 1.35rem; font-weight: 800; color: var(--cinza-escuro); margin: 0; }
.auth-sub { font-size: 0.83rem; color: var(--cinza-medio); margin-top: -0.5rem; }

.auth-erro {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #dc2626;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  font-size: 0.83rem;
  line-height: 1.4;
}

.auth-link {
  text-align: center;
  font-size: 0.83rem;
  color: var(--cinza-medio);
  margin: 0;
}
.auth-btn-link {
  background: none;
  border: none;
  color: var(--verde-escuro);
  font-weight: 700;
  font-size: 0.83rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* Botão sair */
.btn-sair {
  background: none;
  border: 1px solid #e2e8f0;
  color: var(--cinza-medio);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  margin-top: 0.5rem;
  font-family: var(--fonte);
  transition: all 0.2s;
}
.btn-sair:hover { border-color: var(--vermelho); color: var(--vermelho); }

#tela-boas-vindas {
  background: #080f14;
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: none;
}

#tela-boas-vindas.ativa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Círculos decorativos de fundo */
.bv-bg-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.bv-circle1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,196,114,0.18) 0%, transparent 70%);
  top: -150px; left: -150px;
}
.bv-circle2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
  bottom: -100px; right: -100px;
}
.bv-circle3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,196,114,0.08) 0%, transparent 70%);
  top: 50%; right: -50px;
}

.bv-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--branco);
  max-width: 460px;
  width: 100%;
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 1;
  gap: 1.4rem;
}

/* Topo: logo + badge */
.bv-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.bv-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bv-logo-icone {
  font-size: 1.6rem;
  filter: drop-shadow(0 0 12px rgba(0,196,114,0.6));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.bv-logo-nome {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

.bv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(0,196,114,0.12);
  border: 1px solid rgba(0,196,114,0.35);
  color: var(--verde);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  letter-spacing: 0.04em;
}

/* Título central */
.bv-centro { display: flex; flex-direction: column; gap: 0.75rem; }

.bv-titulo {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -2px;
  color: #fff;
}

.bv-titulo-destaque {
  background: linear-gradient(90deg, var(--verde) 0%, #4ade80 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bv-subtitulo {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  font-weight: 400;
}

/* Botão principal */
.btn-comecar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.1rem 1.5rem;
  background: var(--verde);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  font-family: var(--fonte);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 40px rgba(0,196,114,0.4), 0 4px 16px rgba(0,196,114,0.3);
  letter-spacing: -0.2px;
}

.btn-comecar:hover {
  background: #00d97e;
  transform: translateY(-3px);
  box-shadow: 0 0 60px rgba(0,196,114,0.5), 0 8px 24px rgba(0,196,114,0.4);
}

.btn-comecar-seta {
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Stats */
.bv-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  width: 100%;
}

.bv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.bv-stat-num {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--verde);
  line-height: 1;
}

.bv-stat-txt {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  margin-top: 0.2rem;
  text-align: center;
  line-height: 1.3;
}

.bv-stat-div {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

/* ============================================================
   BANNER PERFIL SALVO
============================================================ */
.banner-perfil {
  background: rgba(0,196,114,0.1);
  border: 1.5px solid rgba(0,196,114,0.3);
  border-radius: var(--raio);
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.banner-perfil p { font-size: 0.95rem; margin-bottom: 1rem; opacity: 0.9; }

.banner-botoes { display: flex; flex-direction: column; gap: 0.6rem; }

.btn-link {
  background: none; border: none;
  color: rgba(255,255,255,0.5);
  font-size: 0.82rem; cursor: pointer;
  text-decoration: underline;
  font-family: var(--fonte); padding: 0.3rem;
}
.btn-link:hover { color: rgba(255,255,255,0.8); }

/* ============================================================
   CONTAINER E LAYOUT
============================================================ */
.container { max-width: 560px; margin: 0 auto; padding: 2rem 1.5rem; overflow-x: hidden; }
.container-largo { max-width: 860px; }

/* ============================================================
   BARRA DE PROGRESSO
============================================================ */
.progresso {
  height: 4px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progresso-barra {
  height: 100%;
  background: linear-gradient(90deg, var(--verde), var(--azul));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.passo-label { font-size: 0.78rem; color: var(--cinza-medio); margin-bottom: 1.5rem; font-weight: 500; }

/* ============================================================
   TÍTULOS
============================================================ */
.tela-titulo { font-size: 1.8rem; font-weight: 800; color: var(--cinza-escuro); margin-bottom: 0.4rem; letter-spacing: -0.5px; }
.tela-subtitulo { color: var(--cinza-medio); font-size: 0.92rem; margin-bottom: 2rem; line-height: 1.6; }

/* ============================================================
   FORMULÁRIO
============================================================ */
.formulario { display: flex; flex-direction: column; gap: 1.2rem; }

.campo { display: flex; flex-direction: column; gap: 0.4rem; }

.campo label { font-size: 0.85rem; font-weight: 600; color: var(--cinza-escuro); }

.campo input[type="text"],
.campo input[type="number"] {
  padding: 0.9rem 1.1rem;
  border: 2px solid #e2e8f0;
  border-radius: var(--raio-pequeno);
  font-size: 1rem;
  font-family: var(--fonte);
  color: var(--cinza-escuro);
  background: var(--branco);
  transition: all 0.2s;
  width: 100%;
}

.campo input:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 4px var(--verde-glow);
}

.campos-lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.opcoes-sexo { display: flex; gap: 0.75rem; }

.opcao-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 2px solid #e2e8f0;
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
  background: var(--branco);
}

.opcao-radio input[type="radio"] { accent-color: var(--verde); }
.opcao-radio:has(input:checked) { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); }

/* ============================================================
   CARDS DE OBJETIVO
============================================================ */
.cards-objetivo { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.8rem; }

.card-objetivo {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--branco);
  border: 2px solid #e2e8f0;
  border-radius: var(--raio);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--sombra);
}

.card-objetivo:hover { border-color: var(--verde); transform: translateY(-3px); box-shadow: var(--sombra-forte); }
.card-objetivo.selecionado { border-color: var(--verde); background: var(--verde-claro); box-shadow: 0 0 0 4px var(--verde-glow); }

/* ============================================================
   CARDS DE SAÚDE
============================================================ */
.card-saude {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--branco);
  border: 2px solid #e2e8f0;
  border-radius: var(--raio);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--sombra);
}

.card-saude:hover { border-color: var(--verde); transform: translateY(-2px); }
.card-saude.selecionado { border-color: var(--verde); background: var(--verde-claro); box-shadow: 0 0 0 3px var(--verde-glow); }

.card-saude-texto { flex: 1; }
.card-check { font-size: 1rem; color: var(--verde); font-weight: 900; opacity: 0; flex-shrink: 0; align-self: center; transition: opacity 0.2s; }
.card-saude.selecionado .card-check { opacity: 1; }
.card-nenhuma { border-style: dashed; border-color: #cbd5e1; }
.card-nenhuma.selecionado { border-style: solid; }

.card-icone { font-size: 1.8rem; flex-shrink: 0; width: 2.2rem; text-align: center; }
.card-objetivo h3, .card-saude h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; }
.card-objetivo p, .card-saude p { font-size: 0.8rem; color: var(--cinza-medio); line-height: 1.4; }

.cards-saude { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.8rem; }
.card-nenhuma { grid-column: 1 / -1; }

@media (max-width: 540px) {
  .cards-saude { grid-template-columns: 1fr; }
  .card-nenhuma { grid-column: 1; }
}

/* ============================================================
   BOTÕES
============================================================ */
.btn-primario {
  display: block;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, var(--verde), var(--verde-escuro));
  color: var(--branco);
  border: none;
  border-radius: var(--raio-pequeno);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--fonte);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: var(--sombra-verde);
  letter-spacing: 0.01em;
}

.btn-primario:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,196,114,0.45); }
.btn-primario:active:not(:disabled) { transform: translateY(0); }
.btn-primario:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

.btn-secundario {
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--cinza-medio);
  border: 2px solid #e2e8f0;
  border-radius: var(--raio-pequeno);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--fonte);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secundario:hover { border-color: var(--cinza-medio); color: var(--cinza-escuro); }

/* ============================================================
   CABEÇALHO DO CARDÁPIO
============================================================ */
.cardapio-header {
  background: linear-gradient(135deg, #0f1923 0%, #0d2d1f 100%);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: space-between;
  align-items: flex-start;
  border: 1px solid rgba(0,196,114,0.2);
  position: relative;
  overflow: hidden;
}

.cardapio-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0,196,114,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.cardapio-saudacao span { font-size: 1.2rem; font-weight: 800; }
.cardapio-data { font-size: 0.82rem; color: var(--verde); margin-top: 0.2rem; font-weight: 600; }
.cardapio-saudacao p { font-size: 0.82rem; opacity: 0.6; margin-top: 0.2rem; }

.cardapio-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.meta-item {
  text-align: center;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.6rem 0.9rem;
  border-radius: var(--raio-pequeno);
  min-width: 70px;
}

.meta-numero { display: block; font-size: 1.3rem; font-weight: 800; color: var(--verde); }
.meta-label { font-size: 0.65rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
   ALERTA DE SAÚDE
============================================================ */
.alerta-saude {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #fffbeb;
  border: 1.5px solid #fbbf24;
  border-radius: var(--raio-pequeno);
  padding: 1rem;
  margin-bottom: 1.2rem;
}

.alerta-icone { font-size: 1.3rem; flex-shrink: 0; }
.alerta-saude strong { display: block; font-size: 0.92rem; margin-bottom: 0.2rem; color: #92400e; }
.alerta-saude p { font-size: 0.82rem; color: #78350f; line-height: 1.5; }
.escondido { display: none !important; }

/* ============================================================
   TRACKER DE ÁGUA
============================================================ */
.agua-tracker {
  background: linear-gradient(135deg, #1e3a5f, #1a4a7a);
  border-radius: var(--raio);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.2rem;
  color: #fff;
  border: 1px solid rgba(59,130,246,0.3);
}

.agua-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.agua-titulo { font-size: 0.92rem; font-weight: 700; }
.agua-header-right { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; opacity: 0.85; }

.btn-agua-zerar {
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  border-radius: 50%; width: 24px; height: 24px; cursor: pointer;
  font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.btn-agua-zerar:hover { background: rgba(255,255,255,0.3); }

.agua-barra-container {
  position: relative;
  background: rgba(255,255,255,0.15);
  border-radius: 99px;
  height: 30px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.agua-barra-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
  width: 0%;
}

.agua-barra-texto {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 600; gap: 0.3rem; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.agua-perc {
  background: rgba(0,0,0,0.2); padding: 0.1rem 0.4rem;
  border-radius: 99px; font-size: 0.72rem;
}

.agua-botoes { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.btn-agua {
  padding: 0.4rem 0.8rem;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 99px;
  color: #fff; font-size: 0.8rem; font-weight: 700;
  font-family: var(--fonte); cursor: pointer; transition: all 0.2s;
}
.btn-agua:hover { background: rgba(255,255,255,0.25); }
.btn-agua-destaque { background: rgba(59,130,246,0.4); border-color: rgba(59,130,246,0.6); }
.btn-agua-remover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); }
.btn-agua-ativo { transform: scale(1.08); background: rgba(255,255,255,0.4) !important; }

/* ============================================================
   ABAS
============================================================ */
.abas {
  display: flex;
  flex-wrap: wrap;       /* SEMPRE quebra para segunda linha se não couber */
  gap: 0.3rem;
  margin-bottom: 1.2rem;
  background: var(--branco);
  padding: 0.4rem;
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow-x: visible;   /* sem scroll lateral */
}

.aba {
  flex: 1 1 auto;        /* cresce e encolhe conforme o espaço */
  min-width: 0;          /* permite encolher abaixo do conteúdo */
  padding: 0.65rem 0.5rem;
  border: none;
  border-radius: var(--raio-pequeno);
  background: transparent;
  font-family: var(--fonte);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cinza-medio);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-align: center;
}

.aba.ativa {
  background: var(--cinza-escuro);
  color: var(--branco);
  box-shadow: 0 2px 8px rgba(30,41,59,0.3);
}

/* ============================================================
   CHECK-IN RESUMO
============================================================ */
.checkins-resumo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--branco);
  border-radius: var(--raio-pequeno);
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
  border-left: 4px solid var(--verde);
}

/* ============================================================
   LISTA DE REFEIÇÕES
============================================================ */
.lista-refeicoes { display: flex; flex-direction: column; gap: 0.75rem; }

.refeicao-card {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: all 0.2s;
  border: 1.5px solid #f1f5f9;
  border-left: 5px solid var(--cor-refeicao, var(--verde));
}

.refeicao-card:hover { box-shadow: var(--sombra-forte); border-color: #e2e8f0; }

.refeicao-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  background: var(--branco);
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--fonte);
  transition: background 0.2s;
}

.refeicao-header:hover { background: #f8fafc; }

.refeicao-icone {
  font-size: 1.6rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cor-refeicao, var(--verde)) 12%, transparent);
  border-radius: 12px;
  flex-shrink: 0;
}
.refeicao-info { flex: 1; }
.refeicao-nome { font-size: 0.95rem; font-weight: 700; color: var(--cinza-escuro); }
.refeicao-horario { font-size: 0.75rem; color: var(--cinza-medio); font-weight: 500; }

.refeicao-kcal {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--verde-escuro);
  background: var(--verde-claro);
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  border: 1px solid rgba(0,196,114,0.2);
}

.refeicao-seta { color: var(--cinza-medio); font-size: 0.75rem; transition: transform 0.3s; }
.refeicao-card.aberto .refeicao-seta { transform: rotate(180deg); }

.refeicao-conteudo {
  display: none;
  padding: 0 1.2rem 1.2rem;
  border-top: 1px solid #f1f5f9;
}

.refeicao-card.aberto .refeicao-conteudo { display: block; animation: fadeIn 0.3s ease; }

.alerta-alimento {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fef2f2;
  border-left: 3px solid var(--vermelho);
  padding: 0.6rem 0.8rem;
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
  font-size: 0.8rem;
  color: #991b1b;
  margin: 0.75rem 0;
}

.lista-alimentos {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.item-alimento {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid #f8fafc;
  font-size: 0.88rem;
  border-radius: 8px;
}

.item-alimento:last-child { border-bottom: none; }

.item-principal { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.item-nome { color: var(--cinza-escuro); font-weight: 500; }
.item-quantidade { font-weight: 700; color: var(--verde-escuro); font-size: 0.82rem; }
.item-alerta { color: var(--vermelho); font-size: 0.72rem; font-weight: 600; }
.item-clicavel { cursor: pointer; transition: background 0.2s; }
.item-clicavel:hover { background: #f8fafc; }
.item-trocar { font-size: 0.72rem; margin-left: 0.4rem; opacity: 0.4; transition: opacity 0.2s; }
.item-clicavel:hover .item-trocar { opacity: 1; }

.macros-refeicao { display: flex; gap: 0.4rem; margin-top: 1rem; flex-wrap: wrap; }

.macro-badge { font-size: 0.72rem; padding: 0.25rem 0.6rem; border-radius: 99px; font-weight: 600; }
.macro-badge.proteina { background: #eff6ff; color: #1d4ed8; }
.macro-badge.carbo    { background: #fffbeb; color: #b45309; }
.macro-badge.gordura  { background: #fff7ed; color: #c2410c; }

/* ============================================================
   CHECK-IN BOTÕES
============================================================ */
.checkin-btn {
  padding: 0.28rem 0.65rem;
  background: var(--verde-claro);
  color: var(--verde-escuro);
  border: 1.5px solid rgba(0,196,114,0.3);
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--fonte);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}
.checkin-btn:hover { background: var(--verde); color: #fff; }

.checkin-feito {
  padding: 0.28rem 0.65rem;
  background: #f0fdf4;
  color: #16a34a;
  border: 1.5px solid #86efac;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.refeicao-feita .refeicao-header { background: #f0fdf4; }
.refeicao-feita .refeicao-nome { text-decoration: line-through; opacity: 0.5; }

/* ============================================================
   SUBSTITUIÇÕES
============================================================ */
.painel-substituicao {
  background: #f8fffe;
  border: 1.5px solid #a7f3d0;
  border-radius: var(--raio-pequeno);
  padding: 0.75rem;
  margin-top: 0.5rem;
  animation: fadeIn 0.25s ease;
}

.sub-titulo {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.4rem;
  font-size: 0.8rem; color: var(--cinza-escuro);
  margin-bottom: 0.6rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid #d1fae5;
}

.sub-grupo {
  font-size: 0.7rem; background: var(--verde-claro);
  color: var(--verde-escuro); padding: 0.15rem 0.5rem;
  border-radius: 99px; font-weight: 700;
}

.sub-lista { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }

.sub-item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 0.2rem 0.75rem; padding: 0.6rem 0.75rem;
  border-radius: 8px; cursor: pointer; transition: all 0.2s;
  background: var(--branco); border: 1.5px solid #f1f5f9;
}

.sub-item:hover { background: var(--verde-claro); border-color: var(--verde); transform: translateX(4px); }
.sub-item-alerta { border-color: #fecaca; }
.sub-nome { font-size: 0.85rem; font-weight: 600; color: var(--cinza-escuro); }
.sub-quantidade { font-size: 0.8rem; font-weight: 700; color: var(--verde-escuro); text-align: right; }
.sub-macros { font-size: 0.7rem; color: var(--cinza-medio); grid-column: 1 / -1; }
.sub-aviso { font-size: 0.7rem; color: var(--vermelho); font-weight: 600; grid-column: 1 / -1; }

/* ============================================================
   INGREDIENTES
============================================================ */
.ingredientes-form {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 1.5rem;
  box-shadow: var(--sombra);
  margin-bottom: 1.2rem;
  border: 1.5px solid #f1f5f9;
}

.ingredientes-form h3 { font-size: 1.05rem; margin-bottom: 0.3rem; font-weight: 700; }
.ingredientes-form p { font-size: 0.85rem; color: var(--cinza-medio); margin-bottom: 1.2rem; }

.ingredientes-input-area { display: flex; gap: 0.6rem; margin-bottom: 1rem; }

.ingredientes-input-area input {
  flex: 1; padding: 0.8rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: var(--raio-pequeno);
  font-size: 0.92rem; font-family: var(--fonte);
  transition: border-color 0.2s;
}
.ingredientes-input-area input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-glow); }

.ingredientes-input-area button {
  padding: 0.8rem 1.2rem;
  background: var(--verde); color: var(--branco);
  border: none; border-radius: var(--raio-pequeno);
  font-weight: 700; font-family: var(--fonte);
  cursor: pointer; white-space: nowrap; transition: background 0.2s;
}
.ingredientes-input-area button:hover { background: var(--verde-escuro); }

.tags-ingredientes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; min-height: 2rem; }

.tag-ingrediente {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--verde-claro); color: var(--verde-escuro);
  border: 1.5px solid rgba(0,196,114,0.2);
  padding: 0.3rem 0.7rem; border-radius: 99px;
  font-size: 0.82rem; font-weight: 600;
}
.tag-ingrediente button {
  background: none; border: none; color: var(--verde-escuro);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; opacity: 0.6;
}
.tag-ingrediente button:hover { opacity: 1; }

/* ============================================================
   FILTRO DE REFEIÇÃO
============================================================ */
.filtro-refeicao { margin-bottom: 1rem; }
.filtro-label { font-size: 0.82rem; font-weight: 600; color: var(--cinza-escuro); margin-bottom: 0.5rem; display: block; }
.filtro-refeicao-opcoes { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.filtro-refeicao-btn {
  padding: 0.35rem 0.75rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 99px; background: var(--branco);
  font-family: var(--fonte); font-size: 0.78rem;
  font-weight: 600; color: var(--cinza-medio);
  cursor: pointer; transition: all 0.2s;
}
.filtro-refeicao-btn:hover { border-color: var(--verde); color: var(--verde-escuro); }
.filtro-refeicao-btn.ativo { background: var(--cinza-escuro); color: var(--branco); border-color: var(--cinza-escuro); }

.receita-refeicao-tag {
  font-size: 0.7rem; background: #eff6ff; color: #1d4ed8;
  padding: 0.15rem 0.5rem; border-radius: 99px; font-weight: 600;
}

/* ============================================================
   RECEITAS
============================================================ */
.resultado-receitas { display: flex; flex-direction: column; gap: 0.75rem; }

.receita-card {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.2rem;
  border-left: 4px solid var(--verde);
  border-top: 1.5px solid #f1f5f9;
  border-right: 1.5px solid #f1f5f9;
  border-bottom: 1.5px solid #f1f5f9;
}

.receita-titulo {
  font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

.receita-correspondencia {
  font-size: 0.72rem; background: var(--verde-claro);
  color: var(--verde-escuro); padding: 0.2rem 0.5rem;
  border-radius: 99px; font-weight: 700;
}

.receita-ingredientes { font-size: 0.82rem; color: var(--cinza-medio); margin-bottom: 0.75rem; }

.receita-modo {
  font-size: 0.85rem; color: var(--cinza-escuro);
  line-height: 1.6; background: #f8fafc;
  padding: 0.75rem; border-radius: var(--raio-pequeno);
}

.receita-alerta { margin-top: 0.75rem; font-size: 0.8rem; color: var(--vermelho); font-weight: 600; }

/* ============================================================
   PLANO SEMANAL
============================================================ */
.semana-wrapper { display: flex; flex-direction: column; gap: 0.75rem; }

.dia-card {
  background: var(--branco); border-radius: var(--raio);
  box-shadow: var(--sombra); overflow: hidden;
  border: 1.5px solid #f1f5f9;
}

.dia-hoje { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-glow); }

.dia-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.2rem; width: 100%;
  background: var(--branco); border: none;
  font-family: var(--fonte); cursor: pointer;
  text-align: left; transition: background 0.2s;
}
.dia-header:hover { background: #f8fafc; }
.dia-hoje .dia-header { background: var(--verde-claro); }

.dia-info { display: flex; flex-direction: column; flex: 1; }
.dia-nome { font-size: 0.95rem; font-weight: 700; color: var(--cinza-escuro); }
.dia-hoje .dia-nome { color: var(--verde-escuro); }
.dia-data { font-size: 0.75rem; color: var(--cinza-medio); }

.dia-resumo { display: flex; gap: 0.25rem; font-size: 1.1rem; }

.dia-conteudo {
  padding: 0.75rem 1.2rem 1.2rem;
  border-top: 1px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 0.75rem;
}

.dia-refeicao-nome { font-size: 0.85rem; font-weight: 700; color: var(--cinza-escuro); margin-bottom: 0.3rem; display: block; }

.dia-refeicao-itens { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.dia-refeicao-itens li {
  font-size: 0.8rem; color: var(--cinza-medio);
  display: flex; justify-content: space-between;
  padding: 0.2rem 0; border-bottom: 1px solid #f8fafc;
}
.dia-refeicao-itens li small { font-weight: 600; color: var(--verde-escuro); font-size: 0.72rem; }

.btn-lista-compras {
  margin-top: 0.5rem;
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 4px 12px rgba(249,115,22,0.4);
}

.lista-compras-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem; padding-top: 1.5rem;
}
.lista-compras-header h3 { font-size: 1.05rem; font-weight: 700; }

.btn-imprimir {
  padding: 0.5rem 1rem; background: var(--cinza-claro);
  border: 1.5px solid #e2e8f0; border-radius: var(--raio-pequeno);
  font-family: var(--fonte); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.btn-imprimir:hover { border-color: var(--cinza-medio); }

.compra-categoria { margin-bottom: 1.2rem; }
.compra-categoria h4 {
  font-size: 0.9rem; font-weight: 700; color: var(--cinza-escuro);
  margin-bottom: 0.5rem; padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--verde-claro);
}

.compra-lista { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.compra-item label {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem; border-radius: 8px; cursor: pointer;
  font-size: 0.85rem; transition: background 0.2s;
}
.compra-item label:hover { background: var(--verde-claro); }
.compra-item input[type=checkbox] { accent-color: var(--verde); width: 16px; height: 16px; flex-shrink: 0; }
.compra-item small { color: var(--cinza-medio); font-size: 0.72rem; margin-left: auto; }

/* ============================================================
   PROGRESSO / GRÁFICO
============================================================ */
.progresso-wrapper { display: flex; flex-direction: column; gap: 1rem; }

.progresso-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

.prog-card {
  background: var(--branco); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1rem; text-align: center;
  display: flex; flex-direction: column; gap: 0.3rem;
  border: 1.5px solid #f1f5f9;
}

.prog-numero { font-size: 1.4rem; font-weight: 800; color: var(--cinza-escuro); }
.prog-numero.verde { color: var(--verde-escuro); }
.prog-numero.vermelho { color: var(--vermelho); }
.prog-label { font-size: 0.72rem; color: var(--cinza-medio); font-weight: 500; }

.tendencia-box {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--branco); border: 2px solid;
  border-radius: var(--raio-pequeno); padding: 0.75rem 1rem;
  font-size: 0.85rem; font-weight: 600; box-shadow: var(--sombra);
}
.tendencia-icone { font-size: 1.3rem; font-weight: 900; }

.grafico-wrapper {
  background: var(--branco); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1rem;
  border: 1.5px solid #f1f5f9;
}
.grafico-canvas { width: 100%; height: 200px; display: block; }

.registrar-peso {
  background: var(--branco); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1.2rem;
  border: 1.5px solid #f1f5f9;
}
.registrar-peso h4 { font-size: 0.92rem; margin-bottom: 0.75rem; font-weight: 700; }

.registrar-peso-form { display: flex; align-items: center; gap: 0.5rem; }
.registrar-peso-form input {
  width: 100px; padding: 0.65rem 0.85rem;
  border: 2px solid #e2e8f0; border-radius: var(--raio-pequeno);
  font-size: 1rem; font-family: var(--fonte); transition: border-color 0.2s;
}
.registrar-peso-form input:focus { outline: none; border-color: var(--verde); }
.registrar-peso-form span { font-size: 0.88rem; color: var(--cinza-medio); font-weight: 600; }
.registrar-peso-form button {
  padding: 0.65rem 1.2rem; background: var(--verde);
  color: #fff; border: none; border-radius: var(--raio-pequeno);
  font-weight: 700; font-family: var(--fonte); cursor: pointer; transition: all 0.2s;
}
.registrar-peso-form button:hover { background: var(--verde-escuro); }

.historico-tabela {
  background: var(--branco); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1.2rem;
  border: 1.5px solid #f1f5f9;
}
.historico-tabela h4 { font-size: 0.92rem; margin-bottom: 0.75rem; font-weight: 700; }
.historico-scroll { overflow-x: auto; }
.historico-tabela table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.historico-tabela th { text-align: left; padding: 0.5rem; color: var(--cinza-medio); font-size: 0.75rem; border-bottom: 2px solid #f1f5f9; }
.historico-tabela td { padding: 0.5rem; border-bottom: 1px solid #f8fafc; }
.historico-tabela .verde { color: var(--verde-escuro); font-weight: 700; }
.historico-tabela .vermelho { color: var(--vermelho); font-weight: 700; }

/* ============================================================
   BACKUP
============================================================ */
.backup-secao { border: 2px dashed rgba(0,196,114,0.3); background: rgba(0,196,114,0.04); }

.backup-botoes {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.btn-backup-exportar,
.btn-backup-importar {
  flex: 1;
  min-width: 140px;
  padding: 0.75rem 1rem;
  border-radius: var(--raio-pequeno);
  font-family: var(--fonte);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  border: none;
}

.btn-backup-exportar {
  background: var(--verde-principal);
  color: #fff;
}
.btn-backup-exportar:hover { background: var(--verde-escuro); }

.btn-backup-importar {
  background: var(--cinza-claro);
  color: var(--texto-principal);
  display: block;
}
.btn-backup-importar:hover { background: #e2e8f0; }

.backup-aviso {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--cinza-medio);
  background: rgba(234,179,8,0.1);
  border-left: 3px solid #eab308;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}

/* ============================================================
   RODAPÉ
============================================================ */
.rodape-cardapio { text-align: center; margin-top: 2rem; padding-bottom: 2rem; }

/* ============================================================
   RESPONSIVIDADE — CELULAR
============================================================ */
@media (max-width: 480px) {
  .bv-titulo { font-size: 2.4rem; }
  .campos-lado-a-lado { grid-template-columns: 1fr; }
  .cardapio-header { flex-direction: column; }
  .cardapio-meta { width: 100%; justify-content: space-between; }
  .meta-item { flex: 1; }
  .tela-titulo { font-size: 1.5rem; }
  .abas { gap: 0.2rem; }
  .aba { font-size: 0.7rem; padding: 0.55rem 0.3rem; }
  .progresso-cards { grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
  .prog-numero { font-size: 1.2rem; }
}

/* ============================================================
   TELA DE CARREGAMENTO
============================================================ */
#tela-calculando {
  background: linear-gradient(145deg, #080f14, #0a1f14);
  display: none;
}
#tela-calculando.ativa {
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-wrapper {
  text-align: center;
  color: #fff;
  padding: 2rem 1.5rem;
  max-width: 380px;
  width: 100%;
}
.calc-emoji {
  font-size: 3.5rem;
  margin-bottom: 1.2rem;
  display: block;
  animation: pulseCalc 1.2s ease-in-out infinite;
}
@keyframes pulseCalc {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(0,196,114,0.4)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 20px rgba(0,196,114,0.8)); }
}
.calc-titulo {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  letter-spacing: -0.5px;
}
.calc-sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1.8rem;
}
.calc-barra {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.calc-barra-fill {
  height: 100%;
  background: linear-gradient(90deg, #00c472, #4ade80);
  border-radius: 99px;
  width: 0%;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.calc-passos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}
.calc-passo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.25);
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  transition: all 0.4s ease;
}
.calc-passo.ativo {
  color: rgba(255,255,255,0.9);
  background: rgba(0,196,114,0.12);
  border: 1px solid rgba(0,196,114,0.2);
}
.calc-passo.feito {
  color: #4ade80;
}
.calc-passo-icone {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: all 0.3s;
}
.calc-passo.feito .calc-passo-icone {
  background: #00c472;
  color: #fff;
  font-style: normal;
}

/* ============================================================
   PROGRESSO DO DIA
============================================================ */
.dia-progresso-wrapper {
  background: #fff;
  border-radius: var(--raio);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
  border: 1.5px solid #f1f5f9;
}
.dia-progresso-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
}
.dia-progresso-label { font-weight: 600; color: var(--cinza-escuro); }
.dia-progresso-count { font-weight: 800; color: var(--verde-escuro); font-size: 0.92rem; }
.dia-progresso-barra {
  height: 8px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.dia-progresso-fill {
  height: 100%;
  background: linear-gradient(90deg, #00c472, #4ade80);
  border-radius: 99px;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.dia-progresso-dots {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}
.prog-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e2e8f0;
  transition: all 0.3s;
  flex-shrink: 0;
}
.prog-dot.feito { background: var(--verde); transform: scale(1.2); }
.prog-dot.pendente { background: #e2e8f0; }

/* ============================================================
   CONFETE
============================================================ */
.confete-container {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confete-p {
  position: absolute;
  top: -20px;
  animation: confete-cair linear forwards;
}
@keyframes confete-cair {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ============================================================
   RECEITAS NOS CARDS DE ALIMENTO
============================================================ */
.btn-receita {
  margin-top: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: #fff7ed;
  border: 1.5px solid #fed7aa;
  border-radius: 99px;
  color: #c2410c;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--fonte);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-receita:hover { background: #ffedd5; }

.painel-receita {
  background: #fffbf5;
  border: 1.5px solid #fed7aa;
  border-radius: var(--raio-pequeno);
  padding: 1rem;
  margin-top: 0.5rem;
  animation: fadeIn 0.25s ease;
}
.receita-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.receita-nome-titulo { font-size: 0.9rem; font-weight: 700; color: #92400e; }
.receita-tempo { font-size: 0.75rem; background: #fed7aa; color: #92400e; padding: 0.2rem 0.5rem; border-radius: 99px; font-weight: 700; }
.receita-section { margin-bottom: 0.75rem; }
.receita-section strong { display: block; font-size: 0.8rem; margin-bottom: 0.4rem; color: var(--cinza-escuro); }
.receita-ingredientes-lista, .receita-preparo-lista {
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.receita-ingredientes-lista li, .receita-preparo-lista li { font-size: 0.82rem; color: var(--cinza-medio); line-height: 1.4; }
.receita-dica { background: #ecfdf5; border-left: 3px solid #00c472; padding: 0.5rem 0.75rem; border-radius: 0 8px 8px 0; font-size: 0.8rem; color: #065f46; }

/* ============================================================
   TRACKER DE ÁGUA COM ONDA
============================================================ */
.agua-onda-wrapper {
  position: relative;
  height: 36px;
  background: rgba(255,255,255,0.1);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.agua-nivel-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
  transition: height 0.8s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.agua-onda-svg {
  position: absolute;
  top: -8px; left: -10%;
  width: 120%;
  animation: ondaMove 2.5s ease-in-out infinite;
}
@keyframes ondaMove {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(-8%); }
}
.agua-texto-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  z-index: 2;
}

/* ============================================================
   MÓDULO SAÚDE
============================================================ */
.saude-secao {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
  border: 1.5px solid #f1f5f9;
  overflow: hidden;
  max-width: 100%;
  word-wrap: break-word;
}
.saude-secao-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.saude-secao-header h3 { font-size: 1rem; font-weight: 800; }
.saude-data-hoje { font-size: 0.78rem; color: var(--cinza-medio); }
.saude-descricao { font-size: 0.82rem; color: var(--cinza-medio); margin-bottom: 1rem; }
.saude-vazio { font-size: 0.85rem; color: var(--cinza-medio); text-align: center; padding: 1rem; }

.btn-saude-add {
  padding: 0.4rem 0.9rem;
  background: var(--verde-claro);
  color: var(--verde-escuro);
  border: 1.5px solid rgba(0,196,114,0.3);
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--fonte);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-saude-add:hover { background: var(--verde); color: #fff; }

/* Diário de sintomas */
.diario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.diario-campo-full { grid-column: 1 / -1; }
.diario-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--cinza-escuro); margin-bottom: 0.4rem; }

.emoji-scale {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.emoji-btn {
  padding: 0.35rem 0.6rem;
  background: #f1f5f9;
  border: 2px solid transparent;
  border-radius: 10px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--fonte);
  font-weight: 600;
  color: var(--cinza-medio);
}
.emoji-btn:hover { background: var(--verde-claro); border-color: var(--verde); }
.emoji-btn.ativo { background: var(--verde-claro); border-color: var(--verde); color: var(--verde-escuro); }

.diario-input-group { display: flex; align-items: center; gap: 0.5rem; }
.diario-input-group input { flex: 1; padding: 0.65rem 0.85rem; border: 2px solid #e2e8f0; border-radius: var(--raio-pequeno); font-size: 1rem; font-family: var(--fonte); }
.diario-input-group input:focus { outline: none; border-color: var(--verde); }
.diario-unidade { font-size: 0.82rem; color: var(--cinza-medio); font-weight: 600; white-space: nowrap; }
#diario-notas { width: 100%; padding: 0.75rem; border: 2px solid #e2e8f0; border-radius: var(--raio-pequeno); font-family: var(--fonte); font-size: 0.88rem; resize: vertical; }
#diario-notas:focus { outline: none; border-color: var(--verde); }

.historico-diario-wrapper { margin-top: 1rem; }
.historico-diario-wrapper h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 0.5rem; }
.diario-historico-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 0.3rem;
  font-size: 1rem;
}
.diario-hist-data { font-size: 0.75rem; font-weight: 700; color: var(--cinza-medio); min-width: 50px; }
.diario-hist-glicemia { font-size: 0.72rem; font-weight: 700; color: #dc2626; background: #fef2f2; padding: 0.1rem 0.4rem; border-radius: 99px; }
.diario-hist-nota { cursor: default; }

/* Exames */
.exames-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.exame-card { background: #f8fafc; border-radius: var(--raio-pequeno); padding: 0.75rem 0.9rem; border-left: 4px solid #e2e8f0; }
.exame-normal  { border-color: #10b981; background: #f0fdf4; }
.exame-atencao { border-color: #f59e0b; background: #fffbeb; }
.exame-alto    { border-color: #ef4444; background: #fef2f2; }
.exame-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.exame-nome { font-size: 0.88rem; font-weight: 700; }
.exame-valor-badge { font-size: 0.88rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 99px; }
.exame-badge-normal  { background: #dcfce7; color: #166534; }
.exame-badge-atencao { background: #fef3c7; color: #92400e; }
.exame-badge-alto    { background: #fee2e2; color: #991b1b; }
.exame-rodape { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.72rem; color: var(--cinza-medio); }
.exame-data { font-weight: 600; }
.exame-ref { margin-left: auto; }
.btn-exame-del { background: none; border: none; cursor: pointer; font-size: 0.85rem; opacity: 0.5; margin-left: 0.3rem; }
.btn-exame-del:hover { opacity: 1; }
.exame-dica { font-size: 0.72rem; color: var(--cinza-medio); margin-top: 0.4rem; font-style: italic; }

/* Medicamentos */
.remedios-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.remedio-card {
  background: #f8fafc;
  border-radius: var(--raio-pequeno);
  padding: 0.85rem 1rem;
  border-left: 4px solid #e2e8f0;
  border-top: 1.5px solid #f1f5f9;
  border-right: 1.5px solid #f1f5f9;
  border-bottom: 1.5px solid #f1f5f9;
}
.remedio-proximo { border-left-color: var(--azul); background: #eff6ff; }
.remedio-info { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.5rem; }
.remedio-icone { font-size: 1.4rem; }
.remedio-detalhe { display: flex; flex-direction: column; gap: 0.15rem; }
.remedio-nome { font-size: 0.92rem; font-weight: 700; }
.remedio-dose { font-size: 0.78rem; color: var(--cinza-medio); }
.remedio-obs-txt { font-size: 0.72rem; color: var(--cinza-medio); font-style: italic; }
.remedio-horarios { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.remedio-horario-badge {
  padding: 0.25rem 0.6rem;
  background: var(--cinza-claro);
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cinza-escuro);
  border: 1.5px solid #e2e8f0;
}
.badge-agora { background: var(--azul); color: #fff; border-color: var(--azul); animation: pulseCalc 1s infinite; }

.horarios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.horario-input { padding: 0.65rem; border: 2px solid #e2e8f0; border-radius: var(--raio-pequeno); font-size: 0.95rem; }
.horario-input:focus { outline: none; border-color: var(--verde); }

/* Modal Saúde */
.modal-saude {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
  padding: 1rem;
}
.modal-saude.escondido { display: none; }
.modal-saude-content {
  background: var(--branco);
  border-radius: var(--raio) var(--raio) 0 0;
  padding: 1.5rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  animation: slideUp 0.3s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-saude-header { display: flex; justify-content: space-between; align-items: center; }
.modal-saude-header h4 { font-size: 1.05rem; font-weight: 800; }
.modal-fechar { background: #f1f5f9; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }

/* Relatório PDF */
.btn-relatorio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  background: linear-gradient(135deg, #1e3a5f, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: var(--raio-pequeno);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--fonte);
  cursor: pointer;
  transition: all 0.25s;
  box-shadow: 0 4px 16px rgba(29,78,216,0.3);
}
.btn-relatorio:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(29,78,216,0.4); }

/* Alerta de remédio (popup) */
#alerta-remedio-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 300px;
}
.alerta-remedio-popup {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: linear-gradient(135deg, #1e3a5f, #1a4a7a);
  color: #fff;
  padding: 1rem;
  border-radius: var(--raio);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: slideDown 0.4s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid rgba(59,130,246,0.3);
}
@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.alerta-remedio-icone { font-size: 1.5rem; }
.alerta-remedio-texto { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.alerta-remedio-texto strong { font-size: 0.9rem; }
.alerta-remedio-texto span { font-size: 0.78rem; opacity: 0.8; }
.alerta-remedio-texto small { font-size: 0.72rem; opacity: 0.6; }
.alerta-remedio-popup > button { background: rgba(255,255,255,0.15); border: none; color: #fff; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 0.7rem; flex-shrink: 0; }

/* ============================================================
   OTIMIZAÇÃO MOBILE COMPLETA
   Baseado em iPhone 14 (390x844) e Android padrão (360x800)
============================================================ */

/* --- BASE GLOBAL MOBILE --- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  -webkit-tap-highlight-color: transparent;
}

/* Todos os botões e cards: touch-friendly */
button, .btn-primario, .btn-secundario, .aba, .emoji-btn,
.btn-agua, .btn-comecar, .checkin-btn, .checkin-feito,
.btn-saude-add, .filtro-refeicao-btn, .btn-receita,
.card-objetivo, .card-saude {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* Inputs: mínimo 16px para não dar zoom no iOS */
input, textarea, select {
  font-size: 16px !important;
  font-family: var(--fonte);
}

/* --- BREAKPOINT PRINCIPAL: até 768px --- */
@media (max-width: 768px) {

  /* Container */
  .container { padding: 1rem 1rem; }
  .container-largo { padding: 1rem 1rem; }

  /* Raios menores no mobile */
  :root {
    --raio: 16px;
    --raio-pequeno: 10px;
  }

  /* === BOAS-VINDAS === */
  #tela-boas-vindas { padding: 0; }

  .bv-hero {
    padding: 1.5rem 1.25rem;
    gap: 1.1rem;
    justify-content: center;
    min-height: 100dvh;
  }

  .bv-titulo { font-size: 2.2rem; letter-spacing: -1.5px; }
  .bv-subtitulo { font-size: 0.88rem; }
  .bv-logo-nome { font-size: 1rem; }

  .bv-stats {
    padding: 0.6rem 0.75rem;
  }
  .bv-stat-num { font-size: 1.1rem; }
  .bv-stat-txt { font-size: 0.6rem; }

  .btn-comecar {
    padding: 1rem 1.2rem;
    font-size: 1rem;
    border-radius: 14px;
  }

  /* === ABAS no mobile — tamanho reduzido === */
  .abas {
    gap: 0.25rem;
    padding: 0.35rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }

  .aba {
    padding: 0.55rem 0.6rem;
    font-size: 0.72rem;
  }

  /* === FORMULÁRIOS === */
  .tela-titulo { font-size: 1.4rem; }
  .tela-subtitulo { font-size: 0.85rem; margin-bottom: 1.5rem; }

  .campo label { font-size: 0.82rem; }
  .campo input[type="text"],
  .campo input[type="number"] {
    padding: 0.85rem 1rem;
    border-radius: 10px;
  }

  /* Todos os campos lado a lado viram 1 coluna no mobile */
  .campos-lado-a-lado { grid-template-columns: 1fr; gap: 0.75rem; }

  /* === CARDS DE OBJETIVO / SAÚDE === */
  .cards-objetivo { gap: 0.75rem; }
  .card-objetivo { padding: 1rem 1.1rem; gap: 0.75rem; }
  .card-objetivo h3 { font-size: 0.9rem; }
  .card-objetivo p { font-size: 0.75rem; }

  .cards-saude { grid-template-columns: 1fr; gap: 0.6rem; }
  .card-nenhuma { grid-column: 1; }
  .card-saude { padding: 0.85rem 1rem; }

  /* Botão "Gerar cardápio" fixo no rodapé — sempre visível */
  #btn-continuar-saude {
    position: sticky;
    bottom: 1rem;
    z-index: 50;
    box-shadow: 0 4px 20px rgba(0,196,114,0.45);
    margin-top: 1rem;
  }

  /* === CABEÇALHO DO CARDÁPIO === */
  .cardapio-header {
    padding: 1.1rem;
    border-radius: var(--raio);
    gap: 0.85rem;
    flex-direction: column;
  }

  .cardapio-saudacao span { font-size: 1.05rem; }
  .cardapio-data { font-size: 0.75rem; }
  .cardapio-saudacao p { font-size: 0.75rem; }

  .cardapio-meta {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
  }

  .meta-item { padding: 0.5rem 0.4rem; min-width: 0; }
  .meta-numero { font-size: 1.1rem; }
  .meta-label { font-size: 0.58rem; }

  /* === TRACKER DE ÁGUA === */
  .agua-tracker { padding: 1rem 1.1rem; border-radius: var(--raio); }
  .agua-titulo { font-size: 0.85rem; }
  .agua-header-right { font-size: 0.75rem; }

  .agua-botoes { gap: 0.35rem; }
  .btn-agua { padding: 0.45rem 0.7rem; font-size: 0.78rem; }

  /* === BARRA DE PROGRESSO DO DIA === */
  .dia-progresso-wrapper { padding: 0.85rem 1rem; border-radius: var(--raio); }
  .dia-progresso-label { font-size: 0.8rem; }
  .prog-dot { width: 7px; height: 7px; }

  /* === CARDS DE REFEIÇÃO === */
  .refeicao-card { border-radius: var(--raio); }

  .refeicao-header { padding: 0.9rem 1rem; gap: 0.6rem; }
  .refeicao-icone {
    width: 38px; height: 38px; font-size: 1.4rem; border-radius: 10px;
  }
  .refeicao-nome { font-size: 0.88rem; }
  .refeicao-horario { font-size: 0.7rem; }
  .refeicao-kcal { font-size: 0.7rem; padding: 0.2rem 0.5rem; }

  .checkin-btn, .checkin-feito {
    padding: 0.28rem 0.55rem;
    font-size: 0.68rem;
  }

  .refeicao-conteudo { padding: 0 1rem 1rem; }

  .item-alimento { padding: 0.45rem 0.3rem; }
  .item-nome { font-size: 0.84rem; }
  .item-quantidade { font-size: 0.78rem; }

  .macros-refeicao { gap: 0.3rem; margin-top: 0.75rem; }
  .macro-badge { font-size: 0.68rem; padding: 0.2rem 0.5rem; }

  /* === SUBSTITUIÇÕES === */
  .painel-substituicao { padding: 0.65rem; }
  .sub-nome { font-size: 0.82rem; }
  .sub-quantidade { font-size: 0.78rem; }
  .sub-macros { font-size: 0.67rem; }

  /* === RECEITAS === */
  .painel-receita { padding: 0.85rem; }
  .receita-nome-titulo { font-size: 0.85rem; }
  .receita-ingredientes-lista li, .receita-preparo-lista li { font-size: 0.8rem; }
  .receita-dica { font-size: 0.77rem; }

  /* === ALERTA DE SAÚDE === */
  .alerta-saude { padding: 0.85rem; }
  .alerta-saude strong { font-size: 0.88rem; }
  .alerta-saude p { font-size: 0.78rem; }

  /* === PROGRESSO === */
  .progresso-cards { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .prog-card { padding: 0.75rem 0.5rem; }
  .prog-numero { font-size: 1.1rem; }
  .prog-label { font-size: 0.65rem; }

  .grafico-wrapper { padding: 0.85rem; }

  .registrar-peso { padding: 1rem; }
  .registrar-peso-form input { width: 90px; }
  .registrar-peso-form button { padding: 0.6rem 1rem; font-size: 0.88rem; }

  .historico-tabela { padding: 1rem; }
  .historico-tabela td, .historico-tabela th { padding: 0.4rem 0.3rem; font-size: 0.78rem; }

  /* === PLANO SEMANAL === */
  .dia-header { padding: 0.85rem 1rem; }
  .dia-nome { font-size: 0.88rem; }
  .dia-data { font-size: 0.7rem; }
  .dia-conteudo { padding: 0.6rem 1rem 1rem; }
  .dia-refeicao-nome { font-size: 0.8rem; }
  .dia-refeicao-itens li { font-size: 0.75rem; }

  .compra-categoria h4 { font-size: 0.85rem; }
  .compra-item label { font-size: 0.82rem; padding: 0.45rem; }

  /* === INGREDIENTES === */
  .ingredientes-form { padding: 1.1rem; }
  .ingredientes-input-area { gap: 0.5rem; }
  .ingredientes-input-area input { font-size: 0.9rem; padding: 0.75rem 0.85rem; }
  .ingredientes-input-area button { padding: 0.75rem 1rem; font-size: 0.85rem; }

  .filtro-refeicao-opcoes { gap: 0.3rem; }
  .filtro-refeicao-btn { padding: 0.3rem 0.65rem; font-size: 0.72rem; }

  /* === MÓDULO SAÚDE === */
  .saude-secao { padding: 1rem 1.1rem; border-radius: var(--raio); }
  .saude-secao-header h3 { font-size: 0.92rem; }

  /* Diário grid → 1 coluna */
  .diario-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .diario-campo-full { grid-column: 1; }

  .emoji-scale { gap: 0.25rem; flex-wrap: wrap; }
  .emoji-btn { padding: 0.3rem 0.5rem; font-size: 0.78rem; border-radius: 8px; }

  /* Horários de remédio → 2 colunas */
  .horarios-grid { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .horario-input { padding: 0.6rem; font-size: 0.9rem; }

  /* Modal → full bottom sheet */
  .modal-saude {
    align-items: flex-end;
    padding: 0;
  }
  .modal-saude-content {
    border-radius: var(--raio) var(--raio) 0 0;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    max-height: 92vh;
  }

  /* Exames */
  .exame-card { padding: 0.65rem 0.85rem; }
  .exame-nome { font-size: 0.82rem; }
  .exame-valor-badge { font-size: 0.82rem; }
  .exame-rodape { font-size: 0.68rem; }
  .exame-dica { font-size: 0.7rem; }

  /* Remédios */
  .remedio-card { padding: 0.75rem 0.9rem; }
  .remedio-nome { font-size: 0.88rem; }
  .remedio-dose { font-size: 0.75rem; }
  .remedio-horario-badge { font-size: 0.72rem; padding: 0.2rem 0.5rem; }

  /* Botão relatório */
  .btn-relatorio { padding: 0.9rem; font-size: 0.92rem; }

  /* Alerta remédio popup */
  #alerta-remedio-container {
    top: auto;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    right: 0.75rem;
    left: 0.75rem;
    max-width: 100%;
  }
  .alerta-remedio-popup { padding: 0.9rem; }

  /* === BARRA DE PROGRESSO (steps do cadastro) === */
  .passo-label { font-size: 0.75rem; }

  /* === TELA DE CALCULANDO === */
  .calc-wrapper { padding: 1.5rem 1.25rem; }
  .calc-emoji { font-size: 3rem; margin-bottom: 1rem; }
  .calc-titulo { font-size: 1.35rem; }
  .calc-sub { font-size: 0.82rem; margin-bottom: 1.5rem; }
  .calc-passo { font-size: 0.82rem; padding: 0.5rem 0.75rem; }

  /* === BOTÃO PRIMÁRIO === */
  .btn-primario { padding: 0.95rem; font-size: 0.96rem; border-radius: 12px; }
  .btn-secundario { padding: 0.7rem 1.2rem; font-size: 0.85rem; }

  /* Previne scroll horizontal global sem bloquear scroll vertical */
  html { overflow-x: clip; overflow-y: auto; max-width: 100vw; }
  body { overflow-x: hidden; max-width: 100vw; }
}

/* --- BREAKPOINT PEQUENO: até 380px (iPhone SE, Galaxy A) --- */
@media (max-width: 380px) {
  .bv-titulo { font-size: 1.9rem; }
  .bv-logo-nome { font-size: 0.9rem; }
  .bv-badge { font-size: 0.65rem; padding: 0.3rem 0.65rem; }

  .cardapio-meta { grid-template-columns: repeat(2, 1fr); }

  .progresso-cards { grid-template-columns: 1fr 1fr; }

  .aba { padding: 0.5rem 0.6rem; font-size: 0.68rem; }

  .abas { gap: 0.2rem; padding: 0.3rem; }

  .meta-item { padding: 0.4rem 0.3rem; }
  .meta-numero { font-size: 1rem; }

  .refeicao-header { padding: 0.8rem 0.85rem; gap: 0.5rem; }
  .refeicao-icone { width: 34px; height: 34px; font-size: 1.2rem; }
  .refeicao-nome { font-size: 0.82rem; }

  .checkin-btn, .checkin-feito { font-size: 0.65rem; padding: 0.25rem 0.45rem; }
}

/* --- SAFE AREA para iPhone com notch/Dynamic Island --- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #tela-boas-vindas .bv-hero { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  #tela-cardapio .container { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
  .abas { padding-top: calc(0.35rem + env(safe-area-inset-top)); }
}

/* --- LANDSCAPE MOBILE --- */
@media (max-width: 768px) and (orientation: landscape) {
  #tela-boas-vindas .bv-hero { min-height: auto; padding: 1rem 1.5rem; }
  .bv-titulo { font-size: 1.8rem; }
  .calc-wrapper { padding: 1rem 1.5rem; }
}

/* --- FOCUS VISIBLE: melhor acessibilidade no mobile --- */
@media (hover: none) {
  .btn-primario:hover { transform: none; box-shadow: var(--sombra-verde); }
  .btn-comecar:hover { transform: none; }
  .card-objetivo:hover { transform: none; }
  .card-saude:hover { transform: none; }
  .sub-item:hover { transform: none; }
}

/* --- PRINT (relatório PDF) --- */
@media print {
  body { background: white; }
  .tela { display: none !important; }
  #tela-cardapio { display: none !important; }
}