/* =============================================================================
   Design tokens — os oito grupos, claro e escuro EM PAR.
   Nenhum hex cru dentro de componente. Nunca.
   As cores de marca (--brand, --nutrition, --training e as rampas) NÃO estão
   aqui: vêm do CSS gerado por tenant em /storage/theme/{tenant}.{hash}.css.
   ========================================================================== */
:root {
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;

  --txt-xs: 12px; --txt-sm: 14px; --txt-md: 16px;
  --txt-lg: 18px; --txt-xl: 24px; --txt-2xl: 32px;
  --lh-apertado: 1.5; --lh-solto: 1.75;

  --raio-sm: 6px; --raio-md: 10px; --raio-lg: 16px; --raio-full: 999px;

  --elev-1: 0 1px 2px rgb(0 0 0 / .06);
  --elev-2: 0 4px 12px rgb(0 0 0 / .08);
  --elev-3: 0 12px 32px rgb(0 0 0 / .12);

  /* Movimento — tokens de modos/board/cto/movimento.md, copiados verbatim para
     não divergir da casa. ⚠️ Os nomes --ease-saida / --ease-entrada parecem
     invertidos NA FONTE (o comentário de lá diz que --ease-saida é a curva de
     ENTRADA). Mantidos como estão para haver uma régua só; vale corrigir no
     cérebro, não aqui. */
  --ease-saida:   cubic-bezier(0.22, 1, 0.36, 1);   /* elemento entrando */
  --ease-entrada: cubic-bezier(0.64, 0, 0.78, 0);   /* elemento saindo */
  --ease-estado:  cubic-bezier(0.65, 0, 0.35, 1);   /* troca de estado à vista */
  --dur-rapida: 150ms;  /* hover, foco, press */
  --dur-media:  220ms;  /* modal, dropdown, aba */
  --dur-lenta:  420ms;  /* entrada de hero, revelação */

  --ico-sm: 16px; --ico-md: 20px; --ico-lg: 24px;

  --z-base: 0; --z-sticky: 10; --z-nav: 20; --z-overlay: 40; --z-modal: 100; --z-toast: 1000;

  --on-warning: #14161A; /* texto sobre a faixa de aviso */
  /* Fallback de marca. O CSS por tenant sobrescreve tudo isto ao ser gerado.
     Existe porque, antes do primeiro "Salvar identidade", --brand não existiria e
     todo fundo colorido sumiria: botão viraria texto solto e o app pareceria
     quebrado. Interface nunca pode depender de um arquivo que talvez não exista. */
  --brand: #1F6F5C;      --on-brand: #FFFFFF;
  --brand-50: #EAF3F0;   --brand-100: #D2E6E0;  --brand-400: #3E9A83;
  --brand-800: #164F42;  --brand-900: #0F3830;
  --nutrition: #2E8B57;  --on-nutrition: #FFFFFF;
  --training: #B45309;   --on-training: #FFFFFF;

  --toque: 44px;         /* alvo mínimo */
  --toque-treino: 56px;  /* execução de treino: mão suada, academia */
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;              /* nunca 100vh */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--txt-md);        /* 16px: abaixo disso o iOS dá auto-zoom em input */
  line-height: var(--lh-apertado);
  color: var(--on-surface);
  background: var(--surface-2);
  overflow-x: hidden;              /* zero scroll horizontal */
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { line-height: 1.25; font-weight: 650; }
h1 { font-size: var(--txt-xl); }
h2 { font-size: var(--txt-lg); }
h3 { font-size: var(--txt-md); }
a { color: inherit; }

/* Figuras tabulares em tudo que é número comparável */
.num, td.num, .kpi-valor { font-variant-numeric: tabular-nums; }

/* Foco visível em tudo que é interativo. Nunca remover. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

/* Linha de base, não etapa final. Desliga o movimento PRESERVANDO o estado
   final — o layout não pode quebrar sem animação. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Piso global de ícone. Sem isto, qualquer SVG com viewBox e sem dimensão
   explícita cresce até ocupar o contêiner inteiro. */
svg { width: var(--ico-md); height: var(--ico-md); flex: none; vertical-align: -0.15em; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
.sidebar { display: none; }

.conteudo {
  padding: var(--esp-5) var(--esp-4);
  /* espaço para a bottom nav fixa + safe area do PWA instalado */
  padding-bottom: calc(var(--toque) + var(--esp-7) + env(safe-area-inset-bottom));
  max-width: 1100px; width: 100%; margin: 0 auto;
}

.topo {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  padding-top: calc(var(--esp-3) + env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topo h1 { font-size: var(--txt-lg); }
.topo .marca { display: flex; align-items: center; gap: var(--esp-2); font-weight: 700; }
.topo .ponto { width: 10px; height: 10px; border-radius: var(--raio-full); background: var(--brand); }

/* Bottom nav: no máximo 5 itens, ícone E rótulo */
.bottomnav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-nav);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a {
  min-height: var(--toque); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: var(--esp-2) var(--esp-1);
  font-size: var(--txt-xs); text-decoration: none; color: var(--on-surface-2);
  touch-action: manipulation;
}
.bottomnav a[aria-current="page"] { color: var(--brand); font-weight: 650; }
.bottomnav svg { width: var(--ico-lg); height: var(--ico-lg); }

@media (min-width: 1024px) {
  .app { grid-template-columns: 260px 1fr; }
  .bottomnav { display: none; }
  .sidebar {
    display: flex; flex-direction: column; gap: var(--esp-1);
    padding: var(--esp-5) var(--esp-3);
    background: var(--surface); border-right: 1px solid var(--border);
    position: sticky; top: 0; height: 100dvh;
  }
  .sidebar a {
    display: flex; align-items: center; gap: var(--esp-3);
    min-height: var(--toque); padding: 0 var(--esp-3);
    border-radius: var(--raio-md); text-decoration: none; color: var(--on-surface-2);
    transition: background var(--dur-rapida) var(--ease-saida);
  }
  .sidebar a:hover { background: var(--surface-2); }
  .sidebar a[aria-current="page"] { background: var(--brand-50); color: var(--brand-800); font-weight: 650; }
  .sidebar svg { width: var(--ico-md); height: var(--ico-md); flex: none; }
  .conteudo { padding: var(--esp-6) var(--esp-6) var(--esp-8); }
}

/* ── Cartão, listas ─────────────────────────────────────────────────────── */
.cartao {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--raio-lg); padding: var(--esp-5);
  box-shadow: var(--elev-1);
}
.cartao + .cartao { margin-top: var(--esp-5); }
/* Cabeçalho separado do conteúdo por linha: sem ela, título e primeira linha da
   lista se leem como se fossem o mesmo bloco. */
.cartao > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4); padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--border);
}
.cartao > header + .sub { margin-top: calc(var(--esp-3) * -1); margin-bottom: var(--esp-3); }
.cartao > header h2 { font-size: var(--txt-md); display: flex; align-items: center; gap: var(--esp-2); }
.cartao > header h2 svg { width: var(--ico-md); height: var(--ico-md); }
.sub { color: var(--on-surface-2); font-size: var(--txt-sm); }

.grade { display: grid; gap: var(--esp-5); grid-template-columns: 1fr; margin-top: var(--esp-5); }
/* auto-fit em vez de 1fr 1fr: com um cartão só, ele ocupa a linha inteira em vez
   de deixar metade da tela vazia — que era o buraco ao lado de "Pedidos de exclusão"
   quando o cartão de convites sumia. */
@media (min-width: 900px) { .grade-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } }

.kpi-valor { font-size: var(--txt-2xl); font-weight: 700; line-height: 1.1; margin-bottom: var(--esp-4); }

.barra { height: 10px; border-radius: var(--raio-full); background: var(--surface-2); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.barra.alerta > i { background: var(--warning); }

.lista { list-style: none; padding: 0; display: flex; flex-direction: column; }
.lista > li { border-top: 1px solid var(--border); }
.lista > li:first-child { border-top: 0; }
.lista a, .lista .item {
  display: flex; align-items: center; gap: var(--esp-4);
  min-height: 60px; padding: var(--esp-4) 0;
  text-decoration: none; touch-action: manipulation;
  transition: background var(--dur-rapida) var(--ease-saida);
}
.lista a:hover { background: var(--surface-2); margin-inline: calc(var(--esp-3) * -1);
                 padding-inline: var(--esp-3); border-radius: var(--raio-md); }
.lista .nome { font-weight: 600; margin-bottom: 2px; }
.lista .meta { line-height: 1.45; }
/* Filho direto de .cresce empilha sozinho. Antes o template usava <br> junto com
   um .nome que já era display:block — dois quebra-linha, e a lista abria um vão
   estranho entre o nome e o detalhe. Quem empilha é o CSS, não o HTML. */
.lista .cresce > span, .item .cresce > span { display: block; }
.lista a > svg:last-child { color: var(--on-surface-2); }
.lista .meta { color: var(--on-surface-2); font-size: var(--txt-sm); }
.cresce { flex: 1 1 auto; min-width: 0; }
/* Nome longo quebra linha; não trunca. */
.quebra { overflow-wrap: anywhere; }

.avatar {
  width: 44px; height: 44px; flex: none; border-radius: var(--raio-full);
  display: grid; place-items: center; font-size: var(--txt-sm); font-weight: 700;
  background: var(--brand-100); color: var(--brand-800);
}

/* ── Selo: nunca só cor. Sempre ícone ou texto junto. ───────────────────── */
.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--esp-3); border-radius: var(--raio-full);
  font-size: var(--txt-xs); font-weight: 650; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--on-surface-2);
}
.selo svg { width: 14px; height: 14px; }
.selo-atencao { border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); }
.selo-erro    { border-color: color-mix(in srgb, var(--error) 40%, transparent);   color: var(--error); }
.selo-ok      { border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); }
.selo-nutricao { border-color: var(--nutrition); color: var(--nutrition); }
.selo-treino   { border-color: var(--training);  color: var(--training); }

/* ── Botões: um CTA primário por tela ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--toque); padding: 0 var(--esp-4);
  border-radius: var(--raio-md); border: 1px solid var(--border);
  background: var(--surface); color: var(--on-surface);
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-rapida) var(--ease-estado), background var(--dur-rapida) var(--ease-estado);
}
.btn:active { transform: scale(0.97); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.btn-primario { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.btn-largo { width: 100%; }

/* ── Formulários ────────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--esp-4); }
.campo label { font-size: var(--txt-sm); font-weight: 650; }
.campo .ajuda { font-size: var(--txt-xs); color: var(--on-surface-2); }
.campo input[type="text"], .campo input[type="email"], .campo input[type="password"], .campo select {
  min-height: var(--toque); padding: 0 var(--esp-3);
  font: inherit; font-size: var(--txt-md);
  border: 1px solid var(--border); border-radius: var(--raio-md);
  background: var(--surface); color: var(--on-surface); width: 100%;
}
.campo .erro-campo { font-size: var(--txt-sm); color: var(--error); }
.campo[data-erro] input { border-color: var(--error); }

.cor-linha { display: flex; align-items: center; gap: var(--esp-3); }
.cor-linha input[type="color"] {
  inline-size: var(--toque); block-size: var(--toque); padding: 0;
  border: 1px solid var(--border); border-radius: var(--raio-md); background: none; cursor: pointer;
}
.cor-linha input[type="text"] { max-width: 140px; text-transform: uppercase; font-variant-numeric: tabular-nums; }

.aviso {
  display: flex; gap: var(--esp-3); padding: var(--esp-3);
  border-radius: var(--raio-md); font-size: var(--txt-sm);
  border: 1px solid var(--border); background: var(--surface-2);
}
.aviso-erro { border-color: color-mix(in srgb, var(--error) 40%, transparent); color: var(--error); }
.aviso-ok   { border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.aviso svg { width: var(--ico-md); height: var(--ico-md); }
.aviso strong { display: flex; align-items: center; gap: var(--esp-2); }

/* ── Estado vazio: explica o próximo passo, nunca tela em branco ────────── */
.vazio { text-align: center; padding: var(--esp-6) var(--esp-4); color: var(--on-surface-2); }
.vazio svg { width: 40px; height: 40px; margin: 0 auto var(--esp-3); display: block; opacity: .6; }
.vazio h3 { color: var(--on-surface); margin-bottom: var(--esp-2); }

/* ── Entrada (login) ────────────────────────────────────────────────────── */
.entrada { min-height: 100dvh; display: grid; place-items: center; padding: var(--esp-5) var(--esp-4); }
.entrada .caixa { width: 100%; max-width: 380px; }
.entrada .marca-grande {
  display: flex; align-items: center; justify-content: center; gap: var(--esp-2);
  font-size: var(--txt-2xl); font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--esp-2);
}
.entrada .marca-grande .ponto { width: 12px; height: 12px; border-radius: var(--raio-full); background: var(--brand); }
.entrada .tagline { text-align: center; color: var(--on-surface-2); margin-bottom: var(--esp-5); }

.faixa-impersonacao {
  position: sticky; top: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  background: var(--warning); color: var(--on-warning); font-size: var(--txt-sm); font-weight: 650;
}
.faixa-impersonacao a { color: inherit; }

to { opacity: 1; transform: none; } }

/* ── Plano alimentar ────────────────────────────────────────────────────── */
.refeicao > header h2 { gap: var(--esp-3); }
.refeicao .hora {
  font-size: var(--txt-sm); font-weight: 700; color: var(--nutrition);
  background: var(--surface-2); border-radius: var(--raio-sm);
  padding: 2px var(--esp-2);
}
.lista.itens > li { padding: 0; }
.lista.itens .item { align-items: flex-start; }
.lista.itens .meta { display: block; }

/* Substituições: <details> nativo — sem JS, acessível por teclado, e continua
   funcionando se o script falhar. É o recurso mais usado do módulo. */
.trocas { margin: 0 0 var(--esp-3); }
.trocas > summary {
  display: flex; align-items: center; gap: var(--esp-2);
  min-height: var(--toque); padding: var(--esp-2) 0;
  font-size: var(--txt-sm); font-weight: 650; color: var(--nutrition);
  cursor: pointer; list-style: none; touch-action: manipulation;
}
.trocas > summary::-webkit-details-marker { display: none; }
.trocas > summary .giro { transition: transform var(--dur-rapida) var(--ease-saida); }
.trocas[open] > summary .giro { transform: rotate(90deg); }
.trocas > .lista {
  margin-left: var(--esp-4);
  padding-left: var(--esp-4);
  border-left: 2px solid var(--border);
}
.trocas > .lista .item { min-height: 48px; padding: var(--esp-2) 0; }

/* Macros: rosca só faria sentido com três categorias, e três números lado a lado
   se leem mais rápido que uma rosca num celular. */
.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); margin-top: var(--esp-5); }
.macro {
  text-align: center; padding: var(--esp-3) var(--esp-2);
  border-radius: var(--raio-md); background: var(--surface-2);
  border-top: 3px solid var(--border);
}
.macro-proteina { border-top-color: var(--nutrition); }
.macro-carbo    { border-top-color: var(--brand); }
.macro-gordura  { border-top-color: var(--training); }
.macro-pct    { display: block; font-size: var(--txt-lg); font-weight: 700; }
.macro-valor  { display: block; font-size: var(--txt-sm); color: var(--on-surface-2); }
.macro-rotulo { display: block; font-size: var(--txt-xs); color: var(--on-surface-2); margin-top: 2px; }

.kpi-linha { font-size: var(--txt-lg); font-weight: 700; }
.saudacao { margin-bottom: var(--esp-5); }
.saudacao h2 { font-size: var(--txt-xl); }