/* /assets/css/app.css — identidade visual do Coach IA
   O que é: folha de estilo única do app (tokens, telas de acesso e dashboard).
   Função: aplicar o Guia de Identidade Visual — fundo #0A0B10, azul #007AFF,
           neon green #CCFF00, Poppins, cards #161B22, glow no lugar de sombra preta.
   Ordem: carrega DEPOIS de motion.css, para poder sobrescrever. */

/* ===============================================================
   1. TOKENS DE MARCA
   =============================================================== */
:root {
  /* Cores do guia */
  --fundo:          #0A0B10;
  --fundo-fundo:    #06070C;
  --superficie:     #161B22;
  --superficie-alta:#1C2330;
  --azul:           #007AFF;
  --azul-claro:     #4DA6FF;
  --verde:          #CCFF00;
  --branco:         #FFFFFF;
  --cinza:          #8B949E;

  /* Estados (derivados, mantendo a família do azul) */
  --erro:           #FF5A5F;
  --atencao:        #FFB020;

  /* Superfícies e traços */
  --borda:          rgb(255 255 255 / 0.08);
  --borda-viva:     rgb(255 255 255 / 0.16);
  --vidro:          rgb(22 27 34 / 0.72);

  /* Glow no lugar de sombra preta */
  --glow-azul:      0 0 28px rgb(0 122 255 / 0.35);
  --glow-verde:     0 0 28px rgb(204 255 0 / 0.30);

  /* Geometria */
  --raio-p: 12px;
  --raio:   16px;
  --raio-g: 22px;

  /* Tipografia: Poppins em três papéis distintos */
  --fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Espaço */
  --gap:    1rem;
  --gap-g:  1.5rem;
  --largura-app: 1080px;
}

/* ===============================================================
   2. BASE
   =============================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--branco);
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
p  { margin: 0; }
a  { color: var(--azul-claro); text-decoration: none; }
img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Papel utilitário da tipografia: rótulo de dado */
.rotulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza);
}

.apoio { color: var(--cinza); font-size: 0.875rem; }
.verde { color: var(--verde); }
.azul  { color: var(--azul-claro); }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--verde);
  color: var(--fundo);
  padding: 0.75rem 1rem;
  font-weight: 600;
  z-index: 999;
}
.pular-para-conteudo:focus { left: 0; }

/* ===============================================================
   3. MARCA
   =============================================================== */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.marca__simbolo { flex: none; }
.marca__nome {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.marca__nome span { color: var(--verde); }
.marca__assinatura {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cinza);
}

/* ===============================================================
   4. ELEMENTO ASSINATURA — linha de batimento (ECG)
   Ambiente contínuo: a única animação em loop do projeto.
   =============================================================== */
.ecg { display: block; width: 100%; height: auto; overflow: visible; }
.ecg path {
  fill: none;
  stroke: var(--verde);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgb(204 255 0 / 0.55));
}
.js .ecg--vivo path {
  stroke-dasharray: 60 940;
  animation: ecg-correr 3.2s linear infinite;
}
@keyframes ecg-correr { to { stroke-dashoffset: -1000; } }

/* ===============================================================
   5. FUNDO DAS TELAS DE ACESSO
   =============================================================== */
.tela-auth {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 70% at 50% -10%, rgb(0 122 255 / 0.28), transparent 62%),
    radial-gradient(90% 50% at 50% 108%, rgb(204 255 0 / 0.06), transparent 70%),
    var(--fundo);
}
.tela-auth::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(75% 60% at 50% 25%, #000 30%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.auth {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.auth__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.75rem;
}
.auth__rodape {
  margin-top: auto;
  padding-top: 2rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--cinza);
}
.auth__ecg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ===============================================================
   6. CARTÃO DE VIDRO
   =============================================================== */
.cartao {
  background: var(--vidro);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 1.5rem 1.25rem;
}
.cartao__titulo { font-size: 1.5rem; }
.cartao__sub { margin-top: 0.375rem; color: var(--cinza); font-size: 0.9375rem; }

/* ===============================================================
   7. FORMULÁRIO
   =============================================================== */
.form { margin-top: 1.5rem; display: grid; gap: 1rem; }

.campo { position: relative; }

.campo input {
  width: 100%;
  height: 3.5rem;
  padding: 1.35rem 1rem 0.5rem;
  background: rgb(10 11 16 / 0.6);
  border: 1px solid var(--borda-viva);
  border-radius: var(--raio-p);
  color: var(--branco);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 180ms var(--mo-out), box-shadow 180ms var(--mo-out);
}
.campo input::placeholder { color: transparent; }

.campo label {
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  color: var(--cinza);
  font-size: 1rem;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 180ms var(--mo-out), color 180ms var(--mo-out);
}
.campo input:focus + label,
.campo input:not(:placeholder-shown) + label {
  transform: translateY(-0.7rem) scale(0.72);
}
.campo input:focus + label { color: var(--azul-claro); }

.campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: var(--glow-azul);
}
.campo input:-webkit-autofill {
  -webkit-text-fill-color: var(--branco);
  -webkit-box-shadow: 0 0 0 1000px #12161f inset;
}
.campo--erro input { border-color: var(--erro); }
.campo__dica { display: block; margin-top: 0.375rem; font-size: 0.75rem; color: var(--cinza); }
.campo__erro { display: block; margin-top: 0.375rem; font-size: 0.75rem; color: var(--erro); }

/* Botão de mostrar senha */
.campo__olho {
  position: absolute;
  right: 0.375rem;
  top: 0.375rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--cinza);
  cursor: pointer;
  transition: color 180ms var(--mo-out), transform 180ms var(--mo-out);
}
.campo__olho:hover { color: var(--branco); }
.campo__olho:active { transform: scale(0.92); }
.campo--olho input { padding-right: 3.25rem; }

/* Força da senha */
.forca { margin-top: 0.5rem; }
.forca__barras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.forca__barras i {
  height: 3px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.12);
  transform-origin: left;
  transition: background 260ms var(--mo-out);
}
.forca__texto { display: block; margin-top: 0.375rem; font-size: 0.75rem; color: var(--cinza); }
.forca[data-nivel="1"] i:nth-child(-n+1) { background: var(--erro); }
.forca[data-nivel="2"] i:nth-child(-n+2) { background: var(--atencao); }
.forca[data-nivel="3"] i:nth-child(-n+3) { background: var(--azul); }
.forca[data-nivel="4"] i { background: var(--verde); }

/* Checkbox */
.aceite {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: var(--cinza);
  line-height: 1.45;
}
.aceite input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--verde);
}

/* Honeypot: invisível para gente, visível para robô */
.armadilha {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===============================================================
   8. BOTÕES
   =============================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.375rem;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
}
.btn--principal {
  background: var(--verde);
  color: var(--fundo);
  box-shadow: var(--glow-verde);
}
.btn--principal:hover { background: #d7ff33; }
.btn--secundario {
  background: transparent;
  border-color: var(--azul);
  color: var(--branco);
}
.btn--secundario:hover { background: rgb(0 122 255 / 0.12); }
.btn--bloco { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.link-forte { color: var(--verde); font-weight: 600; }

/* ===============================================================
   9. ALERTAS
   =============================================================== */
.alerta {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--borda);
  border-left-width: 3px;
  border-radius: var(--raio-p);
  background: rgb(255 255 255 / 0.03);
  font-size: 0.875rem;
  line-height: 1.45;
}
.alerta--erro    { border-left-color: var(--erro);    color: #ffd8d9; }
.alerta--sucesso { border-left-color: var(--verde);   color: #eaffb0; }
.alerta--aviso   { border-left-color: var(--azul);    color: #d6e9ff; }
.alerta svg { flex: none; margin-top: 0.1rem; }

/* ===============================================================
   10. DASHBOARD — estrutura
   =============================================================== */
.tela-app {
  background:
    radial-gradient(100% 40% at 50% 0%, rgb(0 122 255 / 0.14), transparent 60%),
    var(--fundo);
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
}

.app {
  width: 100%;
  max-width: var(--largura-app);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Barra superior */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: rgb(10 11 16 / 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topo__centro { text-align: center; line-height: 1; }
.icone-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 12px;
  color: var(--branco);
  cursor: pointer;
  position: relative;
  transition: transform 180ms var(--mo-out), background 180ms var(--mo-out);
}
.icone-btn:hover { background: rgb(255 255 255 / 0.06); }
.icone-btn:active { transform: scale(0.93); }
.icone-btn__ponto {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 8px var(--verde);
}

/* Saudação */
.saudacao {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem 0 1rem;
}
.avatar {
  width: 3.75rem;
  height: 3.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--verde);
  background: var(--superficie);
  color: var(--verde);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  box-shadow: var(--glow-verde);
}
.saudacao h1 { font-size: 1.375rem; }
.saudacao p { color: var(--cinza); font-size: 0.875rem; margin-top: 0.125rem; }

.sequencia {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}
.sequencia strong { font-size: 1.5rem; color: var(--verde); line-height: 1; }
.sequencia__chama {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(204 255 0 / 0.35);
  color: var(--verde);
  flex: none;
}

/* Painéis */
.painel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.125rem 1rem;
}
.painel + .painel, .painel + .metricas, .metricas + .painel { margin-top: 0.875rem; }
.painel__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.painel__link { font-size: 0.8125rem; font-weight: 500; }

/* ===============================================================
   11. DASHBOARD — anéis de métrica
   =============================================================== */
.metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
}
.metrica {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.875rem 0.625rem 1rem;
  text-align: center;
}
.metrica .rotulo {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.625rem;
  min-height: 2em;
}
.anel { position: relative; width: 100%; max-width: 7rem; margin: 0 auto; aspect-ratio: 1; }
.anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel__trilha { fill: none; stroke: rgb(255 255 255 / 0.07); stroke-width: 7; }
.anel__valor {
  fill: none;
  stroke: var(--cor, var(--verde));
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: calc(264 - 264 * var(--pct, 0) / 100);
  filter: drop-shadow(0 0 5px var(--cor, var(--verde)));
}
.js .anel__valor { animation: anel-encher 600ms var(--mo-out) both; }
@keyframes anel-encher { from { stroke-dashoffset: 264; } }

.anel__centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.1rem;
}
.anel__centro b { font-size: 1.125rem; font-weight: 700; line-height: 1; }
.anel__centro span { font-size: 0.6875rem; color: var(--cinza); }
.metrica__meta { margin-top: 0.75rem; font-size: 0.6875rem; color: var(--cinza); }
.metrica__meta b { font-weight: 600; color: var(--cor, var(--verde)); }

/* ===============================================================
   12. DASHBOARD — gráfico da semana
   =============================================================== */
.grafico { position: relative; }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico__linha {
  fill: none;
  stroke: var(--azul);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgb(0 122 255 / 0.6));
}
.js .grafico__linha {
  stroke-dasharray: 1200;
  animation: tracar 600ms var(--mo-out) both;
}
@keyframes tracar { from { stroke-dashoffset: 1200; } }
.grafico__grade { stroke: rgb(255 255 255 / 0.07); stroke-width: 1; stroke-dasharray: 3 5; }
.grafico__ponto { fill: var(--azul-claro); }
.grafico__dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--cinza);
  text-align: center;
  text-transform: uppercase;
}

/* ===============================================================
   13. DASHBOARD — resumo do dia
   =============================================================== */
.resumo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
.resumo__item { display: flex; align-items: center; gap: 0.625rem; }
.resumo__icone {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borda-viva);
  color: var(--cor, var(--verde));
}
.resumo__valor { font-size: 1.0625rem; font-weight: 700; line-height: 1.1; }
.resumo__valor small { font-size: 0.6875rem; font-weight: 500; color: var(--cinza); }
.resumo__rotulo { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cinza); }

/* ===============================================================
   14. DASHBOARD — card de insight (borda em gradiente azul → verde)
   =============================================================== */
.insight {
  position: relative;
  border-radius: var(--raio);
  padding: 1px;
  background: linear-gradient(120deg, var(--azul), var(--verde));
  margin-top: 0.875rem;
}
.insight__interno {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  border-radius: calc(var(--raio) - 1px);
  background: var(--superficie);
  padding: 1.125rem 1rem;
}
.insight__marca {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(10 11 16 / 0.8);
  border: 1px solid var(--borda-viva);
}
.insight h3 { font-size: 0.9375rem; color: var(--verde); }
.insight p { margin-top: 0.25rem; font-size: 0.875rem; color: #c9d1d9; }

/* ===============================================================
   15. DASHBOARD — área do administrador
   =============================================================== */
.admin { margin-top: 1.75rem; }
.admin__cabecalho { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; }
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
  border: 1px solid var(--azul);
  color: var(--azul-claro);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
.numero {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem;
}
.numero b { display: block; font-size: 1.75rem; line-height: 1.1; }
.numero .rotulo { margin-top: 0.25rem; display: block; }

.tabela { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tabela th {
  text-align: left;
  padding: 0 0 0.625rem;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cinza);
  font-weight: 600;
}
.tabela td { padding: 0.625rem 0; border-top: 1px solid var(--borda); vertical-align: middle; }
.tabela td:last-child, .tabela th:last-child { text-align: right; }
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===============================================================
   16. DASHBOARD — navegação inferior
   =============================================================== */
.nav-inferior {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: 30rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 0.5rem 0.25rem;
  background: rgb(22 27 34 / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--borda);
  border-radius: 1.375rem;
}
.nav-inferior a,
.nav-inferior button,
.nav-inferior span {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0;
  background: none;
  border: 0;
  color: var(--cinza);
  font-family: inherit;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms var(--mo-out), transform 180ms var(--mo-out);
}
.nav-inferior a:active, .nav-inferior button:active { transform: scale(0.94); }
.nav-inferior .ativo { color: var(--verde); }
.nav-inferior__acao {
  width: 3.25rem;
  height: 3.25rem;
  display: grid !important;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: var(--verde);
  color: var(--fundo);
  box-shadow: var(--glow-verde);
}

/* ===============================================================
   17. MENU DA CONTA (details/summary — sem JS)
   =============================================================== */
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }

.menu__painel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  width: min(17rem, calc(100vw - 2rem));
  padding: 1rem;
  background: rgb(22 27 34 / 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--borda-viva);
  border-radius: var(--raio);
  box-shadow: 0 18px 40px -18px #000;
  transform-origin: top left;
}
.js .menu[open] .menu__painel { animation: menu-abrir 180ms var(--mo-out) both; }
@keyframes menu-abrir {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
}
.menu__nome { margin-top: 0.5rem; font-weight: 600; }
.menu__email { word-break: break-all; }
.menu__item {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  color: var(--branco);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.menu__item:hover { background: rgb(255 255 255 / 0.08); }
.menu__item--sair { color: var(--verde); }

/* Divisor de batimento no fim do conteúdo */
.ecg-divisor { margin: 2rem 0 0.5rem; opacity: 0.35; }
.ecg-divisor .ecg path { stroke-width: 1.6; }

/* Itens de navegação que entram numa próxima etapa */
.nav-inferior [aria-disabled="true"] { opacity: 0.45; cursor: default; }
.nav-inferior [aria-disabled="true"]:active { transform: none; }

/* ===============================================================
   18. RESPONSIVO
   =============================================================== */
@media (min-width: 30rem) {
  .metrica .rotulo { font-size: 0.625rem; }
  .anel__centro b { font-size: 1.375rem; }
}

@media (min-width: 48rem) {
  .app { padding: 0 1.5rem; }
  .saudacao { grid-template-columns: auto 1fr auto; padding: 1.75rem 0 1.25rem; }
  .saudacao h1 { font-size: 1.75rem; }
  .sequencia { grid-column: auto; }
  .metricas { gap: 1rem; }
  .metrica { padding: 1.25rem 1rem 1.375rem; }
  .resumo { grid-template-columns: repeat(4, 1fr); }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .painel { padding: 1.5rem; }
  .painel + .painel, .painel + .metricas, .metricas + .painel, .insight { margin-top: 1rem; }
}

@media (min-width: 64rem) {
  .colunas { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; align-items: start; }
  .colunas > * + * { margin-top: 0; }
}

/* Toque confortável: nada de hover grudado no celular */
@media (hover: none) {
  .mo-lift:hover { transform: none; box-shadow: none; }
}

/* ===============================================================
   19. FORMULÁRIOS DE APLICAÇÃO (perfil e painel do motor)
   Rótulo em cima do campo: numa tela de ajustes, o rótulo flutuante
   atrapalha — a pessoa precisa ver todos os nomes de uma vez.
   =============================================================== */
.form-app { display: block; }

/* Espaço uniforme entre os blocos. Antes isso dependia de .painel + .painel,
   e o primeiro bloco de dentro do <form> ficava colado no card acima. */
.form-app > .painel,
.painel--solto { margin-top: 0.875rem; }

.linha { margin-top: 0.75rem; }
.linha + .linha { margin-top: 1rem; }

/* Dentro de um grid, quem separa é o gap. Margem em item de grid empurra
   a caixa e desalinha a dupla — some com ela. */
.dupla > .linha,
.dupla > .linha + .linha { margin-top: 0; }

.linha > label,
.rotulo-campo {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cinza);
}

.controle {
  width: 100%;
  height: 3.25rem;
  padding: 0.75rem 0.875rem;
  background: rgb(10 11 16 / 0.6);
  border: 1px solid var(--borda-viva);
  border-radius: var(--raio-p);
  color: var(--branco);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 180ms var(--mo-out), box-shadow 180ms var(--mo-out);
}
.controle:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: var(--glow-azul);
}
select.controle {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cinza) 50%),
                    linear-gradient(135deg, var(--cinza) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
textarea.controle { height: auto; min-height: 5.5rem; resize: vertical; line-height: 1.5; }
input[type="time"].controle,
input[type="number"].controle { color-scheme: dark; }

.dupla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.linha--larga { grid-column: 1 / -1; }

/* Dias da semana */
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.dia { position: relative; }
.dia input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.dia span {
  display: grid;
  place-items: center;
  height: 2.75rem;
  border: 1px solid var(--borda-viva);
  border-radius: var(--raio-p);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--cinza);
  transition: color 180ms var(--mo-out), border-color 180ms var(--mo-out), background 180ms var(--mo-out);
}
.dia input:checked + span {
  color: var(--fundo);
  background: var(--verde);
  border-color: var(--verde);
}
.dia input:focus-visible + span { outline: 2px solid var(--azul-claro); outline-offset: 2px; }

.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===============================================================
   20. PAINEL DO MOTOR
   =============================================================== */
.botoes { display: grid; gap: 0.5rem; }
.botoes .btn { width: 100%; min-height: 3rem; font-size: 0.9375rem; }

.divisor { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--borda); }

.saida {
  margin: 0;
  padding: 0.875rem;
  background: #06070C;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  color: #c9d1d9;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 20rem;
  overflow: auto;
}

.marca-gatilho {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--borda-viva);
  font-size: 0.6875rem;
  color: var(--cinza);
  white-space: nowrap;
}

.barra-peso {
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-bottom: 0.25rem;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.1);
  overflow: hidden;
}
.barra-peso i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 1%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--azul), var(--verde));
}

.btn-mini {
  padding: 0.35rem 0.625rem;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid var(--borda-viva);
  border-radius: 8px;
  color: var(--cinza);
  font-family: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
  transition: color 180ms var(--mo-out), border-color 180ms var(--mo-out);
}
.btn-mini:hover { color: var(--branco); border-color: var(--azul); }

/* Conversa (visualização do histórico no painel) */
.conversa { display: grid; gap: 0.625rem; }
.balao {
  max-width: 85%;
  padding: 0.625rem 0.875rem;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.45;
}
.balao p { margin: 0; }
.balao__pe { display: block; margin-top: 0.375rem; font-size: 0.625rem; color: var(--cinza); }
.balao--coach {
  justify-self: start;
  background: var(--superficie-alta);
  border: 1px solid var(--borda);
  border-bottom-left-radius: 4px;
}
.balao--pessoa {
  justify-self: end;
  background: rgb(204 255 0 / 0.12);
  border: 1px solid rgb(204 255 0 / 0.28);
  border-bottom-right-radius: 4px;
}

/* Card do próximo toque no dashboard */
.proximo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 0.875rem;
  padding: 1rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio);
}
.proximo__hora {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--azul-claro);
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .botoes { grid-template-columns: repeat(2, 1fr); }
  .dupla { gap: 1rem; }
}