/*
 * Estilos globais, mobile-first: a base vale para o celular e as media queries
 * ampliam o layout em telas maiores. Sem fontes nem recursos externos (ver CSP em SecurityConfig).
 */

:root {
  color-scheme: light dark;

  --cor-fundo: #f6f7f9;
  --cor-superficie: #ffffff;
  --cor-texto: #1c2331;
  --cor-texto-suave: #4b5567;
  --cor-borda: #dce1e8;
  --cor-borda-campo: #7d8799;
  --cor-primaria: #1d5bbf;
  --cor-primaria-hover: #164a9c;
  --cor-sobre-primaria: #ffffff;
  --cor-aviso-fundo: #fff3d1;
  --cor-aviso-texto: #5a4100;
  --cor-erro-fundo: #fdecec;
  --cor-erro-borda: #e9a5a5;
  --cor-erro-texto: #8a1c1c;
  --cor-sucesso-fundo: #e8f6ee;
  --cor-sucesso-borda: #9fd3b4;
  --cor-sucesso-texto: #135c33;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --espaco: 1rem;
  --raio: 0.75rem;
  --largura-maxima: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #10141b;
    --cor-superficie: #181e28;
    --cor-texto: #e5e8ee;
    --cor-texto-suave: #a6afbf;
    --cor-borda: #2a3240;
    --cor-borda-campo: #6b7587;
    --cor-primaria: #7eb0ff;
    --cor-primaria-hover: #a9caff;
    --cor-sobre-primaria: #0b1220;
    --cor-aviso-fundo: #3b3115;
    --cor-aviso-texto: #f3d995;
    --cor-erro-fundo: #3a1a1c;
    --cor-erro-borda: #7a3a3e;
    --cor-erro-texto: #ffc2c2;
    --cor-sucesso-fundo: #13301f;
    --cor-sucesso-borda: #2f6b47;
    --cor-sucesso-texto: #b4ecc9;
  }
}

/* Base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  overflow-wrap: break-word;
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  line-height: 1.25;
}

h1 {
  margin: 0 0 var(--espaco);
  font-size: 1.75rem;
}

h2 {
  font-size: 1.25rem;
}

a {
  color: var(--cor-primaria);
}

a:hover {
  color: var(--cor-primaria-hover);
}

:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 2px;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

.container {
  width: 100%;
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--espaco);
}

/* Acessibilidade: atalho para o conteúdo, visível só quando recebe o foco pelo teclado. */
.pular-conteudo {
  position: absolute;
  top: 0;
  left: -100vw;
  padding: 0.5rem 1rem;
  background: var(--cor-superficie);
}

.pular-conteudo:focus {
  left: var(--espaco);
  z-index: 10;
}

/* Cabeçalho e rodapé */

.cabecalho {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

/* No celular, o menu desce para baixo do nome quando não cabe ao lado. */
.cabecalho__conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem var(--espaco);
  min-height: 3.5rem;
  padding-block: 0.5rem;
}

.cabecalho__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.cabecalho__acoes form {
  margin: 0;
}

.marca {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cor-texto);
  text-decoration: none;
}

.rodape {
  margin-top: calc(var(--espaco) * 3);
  padding-block: calc(var(--espaco) * 1.5);
  border-top: 1px solid var(--cor-borda);
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.rodape__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.rodape__links a {
  display: inline-block;
  padding-block: 0.25rem; /* alvo de toque mais confortável no celular */
  color: inherit;
}

.rodape__marca {
  margin-bottom: 0;
}

/* Componentes */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: var(--raio);
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover {
  background: var(--cor-primaria-hover);
  color: var(--cor-sobre-primaria);
}

.botao--secundario {
  border: 1px solid var(--cor-primaria);
  background: transparent;
  color: var(--cor-primaria);
}

.botao--secundario:hover {
  background: transparent;
  color: var(--cor-primaria-hover);
}

/* Botão com cara de link, para ações que precisam de POST (ex.: Sair) */
.botao-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cor-primaria);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.formulario {
  display: grid;
  gap: var(--espaco);
  margin-block: calc(var(--espaco) * 1.5);
}

.campo {
  display: grid;
  gap: 0.25rem;
}

.campo label {
  font-weight: 600;
}

/* 16px no mínimo: abaixo disso o iPhone dá zoom ao tocar no campo */
.campo input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 0.5rem;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-size: 1rem;
}

.campo__ajuda {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.opcao input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
}

.alerta {
  padding: 0.75rem var(--espaco);
  border: 1px solid;
  border-radius: var(--raio);
}

.alerta--erro {
  border-color: var(--cor-erro-borda);
  background: var(--cor-erro-fundo);
  color: var(--cor-erro-texto);
}

.alerta--sucesso {
  border-color: var(--cor-sucesso-borda);
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso-texto);
}

.dados {
  display: grid;
  gap: 0.75rem;
  margin: calc(var(--espaco) * 1.5) 0;
}

.dados dt {
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.dados dd {
  margin: 0;
  font-weight: 600;
}

.cartao {
  padding: var(--espaco) calc(var(--espaco) * 1.25);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
}

.aviso {
  padding: 0.75rem var(--espaco);
  border-radius: var(--raio);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
}

/* Página inicial */

.destaque {
  padding-block: calc(var(--espaco) * 2);
}

.destaque__texto {
  max-width: 40rem;
  font-size: 1.125rem;
  color: var(--cor-texto-suave);
}

.recursos {
  display: grid;
  gap: var(--espaco);
}

.recursos h2 {
  margin-top: 0;
  font-size: 1.125rem;
}

.recursos p {
  margin-bottom: 0;
  color: var(--cor-texto-suave);
}

/* Textos legais e erros */

.texto-legal {
  max-width: 46rem;
  padding-block: calc(var(--espaco) * 2);
}

.texto-legal h2 {
  margin-top: calc(var(--espaco) * 2);
}

.texto-legal__meta {
  font-size: 0.875rem;
  color: var(--cor-texto-suave);
}

.pagina-erro {
  padding-block: calc(var(--espaco) * 3);
}

/* Formulários curtos (login, senha, conta) */
.pagina-estreita {
  max-width: 28rem;
  padding-block: calc(var(--espaco) * 2);
}

.pagina {
  padding-block: calc(var(--espaco) * 1.5);
}

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

/* Some da tela, mas continua para leitores de tela. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.selo {
  display: inline-block;
  justify-self: start;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso-texto);
  font-size: 0.8125rem;
  font-weight: 600;
}

.campo select,
.topico__mover select {
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 0.5rem;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-size: 1rem;
}

/* Catálogo */

.busca {
  display: flex;
  gap: 0.5rem;
  margin-block: var(--espaco);
}

.busca input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 0.5rem;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  font-size: 1rem;
}

.lista-de-cartoes {
  display: grid;
  gap: 0.75rem;
  margin: var(--espaco) 0;
  padding: 0;
  list-style: none;
}

.lista-de-cartoes .cartao {
  display: grid;
  gap: 0.25rem;
}

.estorno {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cartao--link {
  color: var(--cor-texto);
  text-decoration: none;
}

.cartao--link:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-texto);
}

/* Cronograma */

.resumo-do-plano h1 {
  margin-bottom: 0.5rem;
  font-size: 1.375rem;
}

.progresso {
  margin-block: var(--espaco);
}

.progresso__rotulo {
  display: flex;
  justify-content: space-between;
  margin: 0 0 0.25rem;
}

.progresso progress {
  width: 100%;
  height: 0.75rem;
  accent-color: var(--cor-primaria);
}

.abas {
  display: flex;
  gap: 0.5rem;
  margin-block: var(--espaco);
  border-bottom: 1px solid var(--cor-borda);
}

.abas a {
  padding: 0.5rem 0.75rem;
  border-bottom: 3px solid transparent;
  color: var(--cor-texto-suave);
  font-weight: 600;
  text-decoration: none;
}

.abas a.abas__item--ativa {
  border-bottom-color: var(--cor-primaria);
  color: var(--cor-texto);
}

.bloco {
  margin-bottom: 0.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie);
}

.bloco summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: 3rem;
  padding: 0.75rem var(--espaco);
  cursor: pointer;
}

.bloco > :not(summary) {
  margin-inline: var(--espaco);
}

.bloco__titulo {
  font-weight: 700;
}

.bloco__detalhe,
.bloco__contagem {
  color: var(--cor-texto-suave);
  font-size: 0.875rem;
}

.bloco__contagem {
  margin-left: auto;
}

.bloco--revisao,
.bloco--extra {
  background: transparent;
}

.topicos {
  margin: 0;
  padding: 0 0 var(--espaco);
  list-style: none;
}

.topico {
  padding-block: 0.75rem;
  border-top: 1px solid var(--cor-borda);
}

.topico__titulo {
  margin: 0;
}

.topico--estudado .topico__titulo {
  color: var(--cor-texto-suave);
  text-decoration: line-through;
}

.topico__disciplina {
  margin: 0.125rem 0 0.5rem;
  color: var(--cor-texto-suave);
  font-size: 0.8125rem;
}

.topico__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.opcao--compacta {
  align-items: center;
  min-height: 2.75rem;
}

.opcao--compacta input {
  margin: 0;
}

.topico__mover {
  margin-left: auto;
}

.acoes-do-plano {
  display: grid;
  gap: 0.75rem;
  margin-block: calc(var(--espaco) * 2);
}

.acoes-do-plano form,
.acoes-do-plano .botao {
  width: 100%;
}

.acoes-do-plano form .botao {
  width: 100%;
}

/* Telas maiores */

@media (min-width: 48rem) {
  h1 {
    font-size: 2.25rem;
  }

  .recursos {
    grid-template-columns: repeat(3, 1fr);
  }

  .acoes-do-plano {
    display: flex;
    flex-wrap: wrap;
  }

  .acoes-do-plano form,
  .acoes-do-plano .botao,
  .acoes-do-plano form .botao {
    width: auto;
  }
}