/* =====================================================================
   Vida no Azul — estilos base (tema escuro fixo, azul como destaque)
   Mobile-first: o desenho padrão é o do celular; telas maiores só centralizam.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Variáveis de design (cores, espaçamentos, raios)
   Mudar uma variável aqui muda o app inteiro.
   --------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Fundos, do mais escuro (página) ao mais claro (campos) */
  --fundo: #0b1220;
  --superficie: #111a2e;
  --superficie-2: #16213a;
  --borda: #23314f;
  --borda-forte: #33476f;            /* borda de um cartão sob o mouse */

  /* Textos */
  --texto: #e6edf7;
  --texto-suave: #9aa8c2;

  /* Azul de destaque (marca do app) */
  --azul: #3b82f6;
  --azul-forte: #2563eb;
  --azul-fundo: rgba(59, 130, 246, 0.14);

  /* Estados */
  --erro: #f87171;
  --erro-fundo: rgba(248, 113, 113, 0.12);
  --ok: #34d399;
  --ok-fundo: rgba(52, 211, 153, 0.12);

  /* Medidas */
  --raio: 14px;
  --raio-pequeno: 10px;
  --espaco: 16px;
  --largura-maxima: 640px;

  /* Fonte do sistema: carrega rápido e fica nativa em cada aparelho */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Movimento (usado em css/movimento.css e lido pelo JS do menu).
     As curvas prontas do CSS ("ease-out") são fracas: a animação parece lenta.
     Estas começam rápido e freiam no fim, como um objeto de verdade. */
  --curva-saida: cubic-bezier(0.23, 1, 0.32, 1);      /* algo que aparece ou some */
  --curva-movimento: cubic-bezier(0.77, 0, 0.175, 1); /* algo que anda pela tela */
  --duracao-toque: 120ms;  /* resposta ao toque: precisa ser quase instantânea */
  --duracao-curta: 180ms;  /* saídas (sumir é mais rápido que aparecer) */
  --duracao-media: 240ms;  /* entradas: telas, janelas, aviso */
  --deslocamento: 8px;     /* quanto um elemento "sobe" ao aparecer */
}

/* ---------------------------------------------------------------------
   2. Reset simples
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Tira o "flash" cinza do toque no celular: os botões têm a própria resposta (movimento.css) */
  -webkit-tap-highlight-color: transparent;
  /* Barra de rolagem discreta, nas cores do tema */
  scrollbar-color: var(--borda) transparent;
}

/* Texto selecionado no azul do app, em vez do azul padrão do sistema */
::selection { background: rgba(59, 130, 246, 0.35); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;                 /* altura real no celular (ignora a barra do navegador) */
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;                    /* 16px evita o zoom automático dos campos no iPhone */
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  /* No Mac, letra clara em fundo escuro fica "gorda" sem isto */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; }
/* Títulos que quebram linha ficam com as linhas de tamanho parecido (sem uma palavra sozinha embaixo) */
h1, h2 { text-wrap: balance; }
h1 { font-size: 1.5rem; line-height: 1.25; }
h2 { font-size: 1.15rem; line-height: 1.3; }

/* Foco visível para quem navega pelo teclado (acessibilidade) */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}

/* Remove o contorno do <main> ao receber foco por script (não é um controle) */
main:focus { outline: none; }

/* Texto só para leitores de tela */
.somente-leitor {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Link de "pular para o conteúdo": invisível até receber foco */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--azul-forte);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--raio-pequeno);
  z-index: 10;
}
.pular-para-conteudo:focus { left: 8px; }

/* ---------------------------------------------------------------------
   3. Topo do app
   --------------------------------------------------------------------- */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco);
  padding: 12px var(--espaco);
  padding-top: max(12px, env(safe-area-inset-top)); /* respeita o "notch" do celular */
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}

.topo__marca { display: flex; align-items: center; gap: 10px; }

.topo__ponto {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 4px var(--azul-fundo);
}

/* nowrap: no celular, o nome não quebra em duas linhas; quem encolhe é o e-mail (que ganha "…") */
.topo__nome { font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; }

.topo__usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }

.topo__email {
  color: var(--texto-suave);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28vw;
}

/* O atributo hidden precisa vencer o display:flex acima */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   4. Área principal
   --------------------------------------------------------------------- */
#app {
  flex: 1;
  width: 100%;
  max-width: var(--largura-maxima);
  margin: 0 auto;
  padding: 24px var(--espaco) 40px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

.carregando { color: var(--texto-suave); }

/* ---------------------------------------------------------------------
   5. Componentes
   --------------------------------------------------------------------- */

/* Cartão: caixa que agrupa um bloco de conteúdo */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
}

.pilha { display: flex; flex-direction: column; gap: var(--espaco); }

.texto-suave { color: var(--texto-suave); }

/* Botões */
.botao {
  font: inherit;
  font-weight: 600;
  min-height: 44px;                   /* alvo de toque confortável (mínimo recomendado) */
  padding: 0 18px;
  border-radius: var(--raio-pequeno);
  border: 1px solid transparent;
  cursor: pointer;
  /* As transições (cor e o "afundar" ao tocar) ficam juntas em movimento.css */
}
.botao:disabled { opacity: 0.6; cursor: not-allowed; }

.botao--primario {
  background: var(--azul-forte);
  color: #fff;
  /* Fio de luz na borda de cima: dá volume, como um botão físico */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.botao--discreto {
  background: transparent;
  color: var(--texto);
  border-color: var(--borda);
  min-height: 36px;
  padding: 0 12px;
}

/* Hover só para quem tem mouse. No celular, o toque "simula" um hover que
   fica grudado no botão depois de solto (ele continua aceso sem motivo). */
@media (hover: hover) and (pointer: fine) {
  .botao--primario:hover:not(:disabled) { background: var(--azul); }
  .botao--discreto:hover:not(:disabled) { background: var(--superficie-2); }
}

/* Campos de formulário */
.campo { display: flex; flex-direction: column; gap: 6px; }

.campo__rotulo { font-size: 0.9rem; color: var(--texto-suave); }

.campo__entrada {
  font: inherit;
  min-height: 46px;
  padding: 0 14px;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
}
.campo__entrada::placeholder { color: #5f6f8f; }
.campo__entrada:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px var(--azul-fundo); }

.campo__ajuda { font-size: 0.8rem; color: var(--texto-suave); }

/* Abas "Entrar" / "Criar conta" */
.abas {
  display: grid;
  /* minmax(0, 1fr): colunas SEMPRE iguais. Só "1fr" deixa uma coluna crescer para
     caber um texto longo, e o indicador deslizante (movimento.css) desalinha */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--superficie-2);
  border-radius: var(--raio-pequeno);
}
.aba {
  font: inherit;
  font-weight: 600;
  min-height: 40px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  /* Se ainda assim o nome não couber, termina em "…" em vez de vazar para a aba vizinha */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aba[aria-selected="true"] { background: var(--azul-fundo); color: var(--texto); }

/* Mensagens de erro / sucesso (anunciadas por leitores de tela via aria-live) */
.mensagem {
  padding: 10px 12px;
  border-radius: var(--raio-pequeno);
  font-size: 0.92rem;
}
.mensagem--erro { background: var(--erro-fundo); color: var(--erro); border: 1px solid rgba(248, 113, 113, 0.3); }
.mensagem--ok { background: var(--ok-fundo); color: var(--ok); border: 1px solid rgba(52, 211, 153, 0.3); }

/* Chips de área (Faculdade, Cursos...) — a cor vem da variável --cor-area */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  font-size: 0.9rem;
}
.chip::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--cor-area, var(--azul));
}

/* Tela de entrada: centraliza o cartão de login */
.tela-entrada { padding-top: 8vh; }
.tela-entrada__titulo { text-align: center; }

/* Marca grande do login: a mesma bolinha azul do topo, com um brilho em volta */
.tela-entrada__marca {
  align-self: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #60a5fa, var(--azul-forte) 70%);
  box-shadow: 0 0 0 8px var(--azul-fundo), 0 12px 40px rgba(37, 99, 235, 0.45);
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------------
   6. Respeita quem prefere menos animação (configuração do sistema)
   Menos movimento NÃO é zero movimento: os elementos continuam aparecendo
   com um "fade" suave (ajuda a perceber a mudança), só que sem se deslocar.
   O resto das regras está no fim de movimento.css.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --deslocamento: 0px; }
}