/* ============================================================
   GABARITO CAFÉ — css/componentes.css
   Peças reutilizáveis: botões, cartões, chips, campos, abas,
   toast (torradas), post-its, barras de progresso e navegação.
   ============================================================ */

/* ---------- Botões ---------- */
.botao {                            /* base de todo botão do app */
  display: inline-flex;             /* flex para centralizar ícone + texto */
  align-items: center;              /* centraliza na vertical */
  justify-content: center;          /* centraliza na horizontal */
  gap: 0.5rem;                      /* espaço entre ícone e texto */
  padding: 0.7rem 1.4rem;           /* área clicável generosa */
  border-radius: 999px;             /* pílula (cantos bem redondos) */
  font-weight: 800;                 /* texto firme */
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; /* reações suaves */
  white-space: nowrap;              /* rótulo não quebra em duas linhas */
}

.botao:hover { transform: translateY(-2px); }   /* botão "levita" no hover */
.botao:active { transform: translateY(0); }     /* afunda ao clicar */
.botao:disabled {
  opacity: 0.45;                    /* esmaece quando desabilitado */
  cursor: not-allowed;              /* cursor de bloqueado */
  transform: none;                  /* sem levitação */
}

.botao-primario {                   /* ação principal: café forte */
  background: linear-gradient(135deg, var(--cafe-medio), var(--cafe)); /* gradiente de café */
  color: #fff7ea;                   /* texto creme */
  box-shadow: 0 8px 18px rgba(111, 78, 55, 0.35); /* sombra marrom quentinha */
}
.botao-primario:hover { box-shadow: 0 12px 24px rgba(111, 78, 55, 0.45); } /* sombra cresce */

.botao-contorno {                   /* ação secundária: contorno de café */
  border: 2px solid var(--cafe);    /* borda café */
  color: var(--cafe);               /* texto café */
  background: transparent;          /* fundo vazado */
}
.botao-contorno:hover { background: rgba(111, 78, 55, 0.08); } /* preenche levemente */

.botao-fantasma {                   /* ação discreta, quase invisível */
  color: var(--marrom-suave);       /* texto apagado */
  padding: 0.5rem 0.9rem;           /* mais compacto */
}
.botao-fantasma:hover { color: var(--cafe); background: rgba(111, 78, 55, 0.08); } /* acorda no hover */

.botao-sucesso { background: var(--verde); color: #fff; }   /* botão verde (acertou o caminho) */
.botao-perigo { background: var(--vermelho); color: #fff; } /* botão vermelho (sair etc.) */

.botao.pequeno { padding: 0.45rem 0.9rem; font-size: 0.85rem; } /* versão compacta */
.botao.grande { padding: 0.9rem 2rem; font-size: 1.05rem; }     /* versão gigante de CTA */

/* ---------- Cartões ---------- */
.cartao {                           /* caixinha branca padrão */
  background: var(--superficie);    /* fundo quase branco */
  border: 1px solid var(--borda);   /* borda delicada cor de palha */
  border-radius: var(--raio);       /* cantos arredondados */
  padding: 1.5rem;                  /* respiro interno */
  box-shadow: var(--sombra-suave);  /* sombra suave para flutuar */
}

.cartao.destaque {                  /* cartão com cara de "olha pra mim" */
  border: 2px solid var(--caramelo-claro); /* borda caramelo mais grossa */
  background: linear-gradient(180deg, #fffaf0, var(--superficie)); /* fundo levemente dourado */
}

/* ---------- Chips (etiquetas) ---------- */
.chip {                             /* etiqueta pequena tipo "pílula" */
  display: inline-flex;             /* centraliza conteúdo */
  align-items: center;              /* vertical */
  gap: 0.35rem;                     /* espaço entre ícone e texto */
  padding: 0.3rem 0.8rem;           /* compacto */
  border-radius: 999px;             /* pílula */
  background: var(--creme-escuro);  /* fundo creme escuro */
  border: 1px solid var(--borda);   /* borda fina */
  font-size: 0.82rem;               /* letra miúda */
  font-weight: 700;                 /* mas firme */
  color: var(--cafe-escuro);        /* texto escuro */
}

.chip.caramelo { background: #fbeedb; border-color: var(--caramelo-claro); color: #7a4f26; } /* chip destaque */
.chip.verde { background: var(--verde-claro); border-color: #bcd8c4; color: var(--verde); }   /* chip de acerto */
.chip.vermelho { background: var(--vermelho-claro); border-color: #ecc3bc; color: var(--vermelho); } /* chip de erro */
.chip.materia { background: var(--cafe); color: #fff7ea; border-color: var(--cafe); } /* chip de matéria, café sólido */

/* ---------- Campos de formulário ---------- */
.campo { margin-bottom: 1rem; }     /* espaço entre campos */

.campo label {                      /* rótulo do campo */
  display: block;                   /* fica acima do input */
  font-weight: 800;                 /* firme */
  font-size: 0.9rem;                /* discreto */
  margin-bottom: 0.35rem;           /* colado no input */
  color: var(--cafe-escuro);        /* escuro */
}

.campo input,
.campo textarea,
.campo select {                     /* a caixinha em si */
  width: 100%;                      /* ocupa a largura do cartão */
  padding: 0.7rem 1rem;             /* confortável para digitar */
  border: 2px solid var(--borda);   /* borda de palha */
  border-radius: var(--raio-pequeno); /* cantos médios */
  background: #fffefb;              /* quase branco */
  transition: border-color 0.15s ease, box-shadow 0.15s ease; /* reação ao foco */
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {               /* quando o campo está ativo */
  outline: none;                    /* tira o contorno padrão (usamos borda) */
  border-color: var(--caramelo);    /* borda caramelo */
  box-shadow: 0 0 0 4px rgba(201, 138, 94, 0.18); /* brilho suave em volta */
}

.campo textarea { min-height: 110px; resize: vertical; } /* área de texto com altura mínima */

/* ---------- Abas (trocador de formulários) ---------- */
.abas {                             /* trilho das abas */
  display: flex;                    /* abas lado a lado */
  gap: 0.4rem;                      /* respiro entre elas */
  background: var(--creme-escuro);  /* trilho creme */
  padding: 0.35rem;                 /* preenchimento interno do trilho */
  border-radius: 999px;             /* trilho em pílula */
  margin-bottom: 1.2rem;            /* espaço para o conteúdo abaixo */
}

.aba {                              /* cada aba */
  flex: 1;                          /* divide o espaço igualmente */
  padding: 0.55rem 1rem;            /* área clicável */
  border-radius: 999px;             /* pílula */
  font-weight: 800;                 /* firme */
  color: var(--marrom-suave);       /* apagada quando inativa */
  transition: all 0.15s ease;       /* transição suave */
}

.aba.ativa {                        /* aba selecionada */
  background: var(--superficie);    /* fundo branco destacado */
  color: var(--cafe);               /* texto café */
  box-shadow: 0 3px 8px rgba(61, 43, 31, 0.12); /* sombrinha */
}

/* ---------- Toast (torradas do café) ---------- */
.torradas {                         /* pilha de avisos no canto */
  position: fixed;                  /* fixo na tela */
  bottom: 1.2rem;                   /* colado embaixo */
  right: 1.2rem;                    /* no canto direito */
  display: flex;                    /* empilha com flex */
  flex-direction: column;           /* uma embaixo da outra */
  gap: 0.6rem;                      /* espaço entre avisos */
  z-index: 1000;                    /* acima de tudo */
}

.torrada {                          /* cada aviso */
  background: var(--cafe-escuro);   /* fundo marrom escuro */
  color: #fff7ea;                   /* texto creme */
  padding: 0.75rem 1.2rem;          /* respiro */
  border-radius: var(--raio-pequeno); /* cantos médios */
  box-shadow: var(--sombra-media);  /* sombra para flutuar */
  font-weight: 700;                 /* firme */
  max-width: 340px;                 /* não vira faixa */
  animation: aparecer 0.3s ease both; /* entra suave */
}

.torrada.sucesso { background: var(--verde); }    /* aviso verde de sucesso */
.torrada.erro { background: var(--vermelho); }    /* aviso vermelho de erro */

/* ---------- Post-it (dica do barista) ---------- */
.postit {                           /* bilhetinho amarelo de dica */
  background: var(--amarelo);       /* amarelo post-it */
  border-radius: 4px 14px 14px 14px; /* canto dobrado de verdade */
  padding: 0.9rem 1.1rem;           /* respiro */
  box-shadow: 0 6px 14px rgba(61, 43, 31, 0.16); /* sombra de papel */
  transform: rotate(-1deg);         /* levemente torto, feito à mão */
  font-family: 'Caveat', cursive;   /* letra de mão */
  font-size: 1.25rem;               /* tamanho de bilhete */
  line-height: 1.35;                /* apertado como bilhete */
  color: #5a4226;                   /* marrom de caneta */
  position: relative;               /* para o "fita" grudado em cima */
}

.postit::before {                   /* a fitinha adesiva no topo */
  content: '';                      /* precisa de conteúdo para existir */
  position: absolute;               /* sobrepõe o bilhete */
  top: -9px;                        /* transborda para cima */
  left: 50%;                        /* centralizada */
  transform: translateX(-50%) rotate(-3deg); /* centraliza e inclina */
  width: 70px;                      /* largura da fita */
  height: 18px;                     /* altura da fita */
  background: rgba(255, 255, 255, 0.55); /* fita translúcida */
  border-radius: 3px;               /* fita arredondadinha */
}

/* ---------- Barras de progresso ---------- */
.barra-progresso {                  /* trilho da barra */
  height: 10px;                     /* altura fininha */
  background: var(--creme-escuro);  /* trilho creme */
  border-radius: 999px;             /* trilho em pílula */
  overflow: hidden;                 /* corta o preenchimento nas pontas */
}

.barra-progresso > span {           /* preenchimento */
  display: block;                   /* ocupa espaço real */
  height: 100%;                     /* altura total do trilho */
  background: linear-gradient(90deg, var(--caramelo), var(--cafe-medio)); /* gradiente quente */
  border-radius: 999px;             /* pontas redondas */
  transition: width 0.4s ease;      /* cresce suave */
}

/* ---------- Navegação lateral ---------- */
.barra-lateral {                    /* painel esquerdo */
  width: 240px;                     /* largura fixa */
  background: linear-gradient(180deg, #3d2b1f, #2c1e15); /* gradiente de café escuro */
  color: #f5e9d7;                   /* texto creme */
  display: flex;                    /* coluna flexível */
  flex-direction: column;           /* empilha marca, menu e rodapé */
  padding: 1.4rem 1rem;             /* respiro */
  position: sticky;                 /* fica fixo ao rolar */
  top: 0;                           /* colado no topo */
  height: 100vh;                    /* altura da tela */
  height: 100dvh;                   /* TEAM_007: dvh respeita a barra de URL do celular */
}

.marca {                            /* logo + nome na lateral */
  display: flex;                    /* lado a lado */
  align-items: center;              /* centralizado */
  gap: 0.6rem;                      /* espaço entre logo e texto */
  font-family: 'Fraunces', serif;   /* serifa do nome */
  font-weight: 700;                 /* firme */
  font-size: 1.15rem;               /* tamanho de placa */
  margin-bottom: 1.6rem;            /* distância do menu */
}

.marca img { width: 42px; height: 42px; }  /* tamanho do logo na lateral */

.menu {                             /* lista de navegação */
  display: flex;                    /* coluna */
  flex-direction: column;           /* um item embaixo do outro */
  gap: 0.3rem;                      /* respiro pequeno */
  flex: 1;                          /* empurra o rodapé para baixo */
}

.item-menu {                        /* cada botão do menu */
  display: flex;                    /* ícone + texto alinhados */
  align-items: center;              /* vertical */
  gap: 0.65rem;                     /* espaço entre ícone e texto */
  padding: 0.7rem 1rem;             /* área clicável */
  border-radius: 12px;              /* cantos médios */
  color: #e8d9c4;                   /* creme apagado */
  font-weight: 700;                 /* firme */
  text-align: left;                 /* texto à esquerda */
  transition: all 0.15s ease;       /* reação suave */
  width: 100%;                      /* ocupa o painel */
}

.item-menu:hover { background: rgba(255, 255, 255, 0.08); } /* clareia no hover */

.item-menu.ativo {                  /* item da tela atual */
  background: var(--caramelo);      /* fundo caramelo */
  color: #2c1e15;                   /* texto escuro por cima */
}

.lateral-rodape {                   /* rodapé da lateral (perfil + sair) */
  border-top: 1px solid rgba(255, 255, 255, 0.12); /* filete separador */
  padding-top: 1rem;                /* respiro acima */
}

.perfil-nome { font-weight: 900; font-size: 0.95rem; }   /* nome do usuário */
.perfil-foco { font-size: 0.78rem; color: var(--caramelo-claro); margin-bottom: 0.5rem; } /* cargo focado */

/* ---------- Topo e rodapé do conteúdo ---------- */
.topo {                             /* cabeçalho da área de conteúdo */
  display: flex;                    /* título e saudação em pontas */
  align-items: flex-start;          /* alinhados no topo */
  justify-content: space-between;   /* um em cada ponta */
  gap: 1rem;                        /* respiro */
  margin-bottom: 1.4rem;            /* distância do conteúdo */
  flex-wrap: wrap;                  /* quebra em telas estreitas */
}

.topo-sub { color: var(--marrom-suave); font-size: 0.95rem; }  /* subtítulo do topo */

.topo-saudacao {                    /* frasquinha de boas-vindas */
  background: var(--superficie);    /* fundo claro */
  border: 1px solid var(--borda);   /* borda de palha */
  border-radius: 999px;             /* pílula */
  padding: 0.45rem 1rem;            /* compacto */
  font-family: 'Caveat', cursive;   /* letra de mão */
  font-size: 1.2rem;                /* tamanho de bilhete */
  color: var(--cafe-medio);         /* café com leite */
  box-shadow: var(--sombra-suave);  /* sombrinha */
}

.rodape {                           /* rodapé da área de conteúdo */
  margin-top: 3rem;                 /* distância do conteúdo */
  padding: 1.4rem 0;                /* respiro */
  text-align: center;               /* centralizado */
  color: var(--marrom-suave);       /* apagado */
  font-size: 0.9rem;                /* discreto */
}

.rodape a {                         /* link do rodapé (privacidade) */
  color: var(--cafe-medio);         /* mesma cor dos links do app */
}

/* ---------- Bloco de anúncio (AdSense) ---------- */
.anuncio {                          /* TEAM_002: espaço do anúncio */
  margin: 1.6rem 0 0;               /* respiro acima */
  text-align: center;               /* anúncio centralizado */
  min-height: 0;                    /* encolhe se o bloco ficar vazio */
}

.anuncio-rotulo {                   /* TEAM_002: selo "Publicidade" */
  display: block;                   /* linha própria */
  font-size: 0.7rem;                /* bem miúdo */
  letter-spacing: 0.08em;           /* espaçado */
  text-transform: uppercase;        /* caixa alta */
  color: var(--marrom-suave);       /* discreto */
  margin-bottom: 0.4rem;            /* colado no anúncio */
}

.link-privacidade {                 /* TEAM_002: link de privacidade na lateral */
  display: block;                   /* linha própria */
  margin-top: 0.6rem;               /* respiro */
  font-size: 0.75rem;               /* miúdo */
  color: var(--marrom-suave);       /* apagado */
  text-align: center;               /* centralizado */
}

/* ---------- Notas informativas ---------- */
.nota {                             /* aviso discreto em fundo creme */
  background: var(--creme-escuro);  /* fundo creme escuro */
  border-left: 4px solid var(--caramelo); /* filete caramelo na esquerda */
  border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0; /* cantos só à direita */
  padding: 0.8rem 1rem;             /* respiro */
  font-size: 0.9rem;                /* discreto */
  color: var(--cafe-escuro);        /* legível */
}

/* ---------- Estado vazio ---------- */
.vazio {                            /* caixa de "ainda não tem nada aqui" */
  text-align: center;               /* centralizado */
  padding: 3rem 1.5rem;             /* bem espaçado */
  color: var(--marrom-suave);       /* tom apagado */
}

.vazio .vazio-icone { font-size: 3rem; margin-bottom: 0.6rem; } /* emoji gigante */

/* ---------- Spinner (carregando) ---------- */
.girando {                          /* círculo girando */
  width: 34px;                      /* tamanho */
  height: 34px;                     /* tamanho */
  border: 4px solid var(--creme-escuro); /* anel claro */
  border-top-color: var(--cafe);    /* topo café (o giro aparece aqui) */
  border-radius: 50%;               /* círculo */
  animation: girar 0.8s linear infinite; /* gira sem parar */
  margin: 1rem auto;                /* centralizado */
}

@keyframes girar { to { transform: rotate(360deg); } }  /* volta completa */

/* ---------- Título de seção ---------- */
.titulo-secao {                     /* título com risquinho decorativo */
  display: flex;                    /* texto e risco na mesma linha */
  align-items: center;              /* centralizado */
  gap: 0.7rem;                      /* espaço entre texto e risco */
  margin: 1.8rem 0 1rem;            /* respiro */
}

.titulo-secao::after {              /* risquinho que completa a linha */
  content: '';                      /* elemento decorativo */
  flex: 1;                          /* estica até a borda */
  height: 2px;                      /* fininho */
  background: linear-gradient(90deg, var(--borda), transparent); /* some no fim */
}

/* ---------- Link de vídeo do YouTube ---------- */
.link-video {                       /* botão "assistir aula" */
  display: inline-flex;             /* ícone + texto */
  align-items: center;              /* vertical */
  gap: 0.5rem;                      /* espaço */
  background: #fff0f0;              /* fundo rosado suave (vermelho YouTube apagado) */
  color: #c4302b;                   /* vermelho do YouTube */
  border: 1.5px solid #f3c1bf;      /* borda rosada */
  border-radius: 999px;             /* pílula */
  padding: 0.55rem 1.1rem;          /* área clicável */
  font-weight: 800;                 /* firme */
  transition: all 0.15s ease;       /* reação suave */
}

.link-video:hover { background: #ffe3e2; transform: translateY(-2px); } /* acende no hover */

/* ---------- Lista de passos (como resolver) ---------- */
.passos {                           /* passo a passo numerado */
  list-style: none;                 /* tira os números padrão */
  display: flex;                    /* coluna */
  flex-direction: column;           /* empilha */
  gap: 0.45rem;                     /* respiro entre passos */
  padding-left: 0;                  /* sem recuo extra */
}

.passos li {                        /* cada passo */
  background: var(--creme-escuro);  /* fundo creme */
  border-radius: var(--raio-pequeno); /* cantos médios */
  padding: 0.55rem 0.9rem;          /* respiro */
  font-size: 0.92rem;               /* discreto */
}

.passos li::before {                /* número do passo na frente */
  content: counter(passo) 'º ';     /* usa o contador com ordinal */
  counter-increment: passo;         /* incrementa a cada item */
  font-weight: 900;                 /* número firme */
  color: var(--cafe);               /* número em café */
}

.passos { counter-reset: passo; }   /* zera o contador no início da lista */

/* ---------- Grid de estatísticas ---------- */
.grade-estatisticas {               /* fileira de cartõezinhos de número */
  display: grid;                    /* grade */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); /* se ajusta; TEAM_007: min() impede estouro em telas estreitas */
  gap: 1rem;                        /* respiro entre cartões */
}

.estatistica {                      /* cada cartãozinho */
  background: var(--superficie);    /* fundo claro */
  border: 1px solid var(--borda);   /* borda de palha */
  border-radius: var(--raio);       /* cantos padrão */
  padding: 1.1rem 1.2rem;           /* respiro */
  box-shadow: var(--sombra-suave);  /* sombrinha */
}

.estatistica .valor {               /* número grande */
  font-family: 'Fraunces', serif;   /* serifa de destaque */
  font-size: 1.9rem;                /* grande */
  font-weight: 900;                 /* pesado */
  color: var(--cafe);               /* café */
  line-height: 1.2;                 /* apertado */
}

.estatistica .rotulo { font-size: 0.82rem; color: var(--marrom-suave); font-weight: 700; } /* legendinha */

/* ---------- Controles: idioma (bandeiras) e tema ---------- */
.controles {                        /* fileira de controles */
  display: flex;                    /* itens lado a lado */
  align-items: center;              /* centralizados na vertical */
  gap: 0.5rem;                      /* respiro entre seletor e botão */
}

.seletor-idioma {                   /* pílula com as três bandeiras */
  display: flex;                    /* bandeiras lado a lado */
  gap: 0.25rem;                     /* respiro entre elas */
  padding: 0.25rem;                 /* preenchimento interno da pílula */
  border-radius: 999px;             /* pílula */
  background: var(--creme-escuro);  /* fundo creme (tema claro) */
  border: 1px solid var(--borda);   /* borda discreta */
}

.bandeira {                         /* botão de cada idioma */
  display: flex;                    /* centraliza a bandeira */
  align-items: center;              /* vertical */
  justify-content: center;          /* horizontal */
  padding: 0.2rem;                  /* respiro */
  border-radius: 999px;             /* cantos redondos */
  line-height: 0;                   /* sem espaço fantasma da imagem */
  transition: all 0.15s ease;       /* reação suave */
  opacity: 0.55;                    /* bandeira "apagada" quando inativa */
}

.bandeira img {                     /* a bandeira em si */
  width: 24px;                      /* largura */
  height: 17px;                     /* altura */
  border-radius: 3px;               /* cantinhos */
  display: block;                   /* sem espaço embaixo */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* sombrinha para destacar */
}

.bandeira:hover { opacity: 0.85; }  /* clareia no hover */

.bandeira.ativa {                   /* idioma escolhido */
  background: var(--superficie);    /* fundo destacado */
  opacity: 1;                       /* totalmente visível */
  box-shadow: 0 2px 6px rgba(61, 43, 31, 0.2); /* sombrinha */
}

.botao-tema {                       /* botão de trocar o tema */
  width: 40px;                      /* quadradinho */
  height: 40px;                     /* quadradinho */
  border-radius: 50%;               /* redondo */
  background: var(--creme-escuro);  /* fundo creme */
  border: 1px solid var(--borda);   /* borda discreta */
  font-size: 1.1rem;                /* tamanho do emoji */
  display: flex;                    /* centraliza o emoji */
  align-items: center;              /* vertical */
  justify-content: center;          /* horizontal */
  transition: all 0.15s ease;       /* reação suave */
}

.botao-tema:hover {                 /* ao passar o mouse */
  transform: translateY(-2px);      /* levita */
  border-color: var(--caramelo);    /* borda acende */
}

/* Controles flutuando no canto da tela de login */
.controles-login {                  /* posição no login */
  position: absolute;               /* sobrepõe o painel */
  top: 1.2rem;                      /* distância do topo */
  right: 1.2rem;                    /* distância da direita */
  z-index: 5;                       /* acima do cartão */
}

/* Controles dentro do menu lateral (fundo escuro) */
.controles-laterais {               /* posição no menu */
  margin-bottom: 0.8rem;            /* respiro antes do perfil */
  justify-content: space-between;   /* bandeiras de um lado, tema do outro */
}

.barra-lateral .seletor-idioma {    /* pílula do idioma no menu escuro */
  background: rgba(255, 255, 255, 0.1); /* fundo translúcido */
  border-color: rgba(255, 255, 255, 0.15); /* borda translúcida */
}

.barra-lateral .bandeira.ativa { background: rgba(255, 255, 255, 0.22); } /* ativa no escuro */

.barra-lateral .botao-tema {        /* botão de tema no menu escuro */
  background: rgba(255, 255, 255, 0.1); /* fundo translúcido */
  border-color: rgba(255, 255, 255, 0.15); /* borda translúcida */
}

/* ---------- Lista de dados (datas e números do edital) ---------- */
.lista-datas {                      /* lista de linhas rótulo → valor */
  display: flex;                    /* coluna */
  flex-direction: column;           /* empilha as linhas */
  gap: 0.4rem;                      /* respiro entre elas */
}

.linha-dado {                       /* cada linha de dado */
  display: flex;                    /* rótulo de um lado, valor do outro */
  justify-content: space-between;   /* separa nas pontas */
  gap: 1rem;                        /* respiro no meio */
  padding: 0.6rem 0.9rem;           /* respiro interno */
  background: var(--creme-escuro);  /* fundo creme */
  border-radius: var(--raio-pequeno); /* cantos médios */
}

.linha-dado.destaque {              /* linha importante (data da prova) */
  background: #fbeedb;              /* fundo dourado */
  border: 1px solid var(--caramelo-claro); /* borda caramelo */
}

.dado-rotulo {                      /* rótulo do dado */
  color: var(--marrom-suave);       /* tom apagado */
  font-weight: 700;                 /* firme */
  font-size: 0.88rem;               /* discreto */
}

.dado-valor {                       /* valor do dado */
  font-weight: 900;                 /* bem firme */
  color: var(--cafe-escuro);        /* escuro */
  white-space: nowrap;              /* não quebra no meio */
}

.lista-topicos {                    /* fileira de tópicos do edital */
  display: flex;                    /* flexível */
  flex-wrap: wrap;                  /* quebra quando enche */
  gap: 0.35rem;                     /* respiro */
  margin-top: 0.5rem;               /* separa do nome da matéria */
}

/* ---------- Tela de dicas ---------- */
.categoria-dicas {                  /* bloco de uma categoria de dicas */
  margin-bottom: 1.2rem;            /* respiro entre categorias */
}

.categoria-titulo {                 /* título da categoria */
  font-family: 'Fraunces', serif;   /* serifa artesanal */
  font-size: 1.25rem;               /* destaque */
  font-weight: 900;                 /* pesado */
  margin-bottom: 0.2rem;            /* perto das dicas */
}

.dica-item {                        /* cada dica */
  border-top: 1px dashed var(--borda); /* filete pontilhado */
  padding: 0.7rem 0;                /* respiro vertical */
}

.dica-item .dica-titulo { font-weight: 900; }             /* título da dica */
.dica-item .dica-texto { font-size: 0.9rem; margin: 0.15rem 0 0; } /* texto da dica */

/* ---------- Chips de múltipla escolha (filtro de matérias do simulado) ---------- */
.chips-escolha {                    /* fileira de chips que quebra linha */
  display: flex;                    /* flexível */
  flex-wrap: wrap;                  /* quebra quando enche */
  gap: 0.45rem;                     /* respiro entre os chips */
}

.chip-opcao {                       /* cada matéria clicável */
  display: inline-flex;             /* nome + número alinhados */
  align-items: center;              /* centraliza na vertical */
  gap: 0.4rem;                      /* espaço entre nome e número */
  padding: 0.45rem 0.85rem;         /* área clicável confortável */
  border-radius: 999px;             /* pílula */
  border: 2px solid var(--borda);   /* borda discreta quando desmarcado */
  background: var(--superficie);    /* fundo claro */
  color: var(--cafe-escuro);        /* texto escuro */
  font-weight: 700;                 /* firme */
  font-size: 0.88rem;               /* discreto */
  transition: all 0.15s ease;       /* reação suave */
}

.chip-opcao:hover { border-color: var(--caramelo); } /* acende no hover */

.chip-opcao:disabled {                /* TEAM_005: filtro ligado zerou a opção */
  opacity: 0.45;                      /* esmaecida */
  cursor: not-allowed;                /* cursor de bloqueado */
}
.chip-opcao:disabled:hover { border-color: var(--borda); } /* sem hover quando zerada */

.chip-opcao.ativa {                 /* matéria marcada */
  background: var(--cafe);          /* fundo café */
  border-color: var(--cafe);        /* borda café */
  color: #fff7ea;                   /* texto creme */
}

.chip-num {                         /* bolinha com a quantidade de questões */
  background: var(--creme-escuro);  /* fundo creme */
  border-radius: 999px;             /* pílula */
  padding: 0.05rem 0.45rem;         /* respiro pequeno */
  font-size: 0.75rem;               /* miúdo */
  font-weight: 900;                 /* firme */
}

.chip-opcao.ativa .chip-num {       /* número dentro do chip marcado */
  background: rgba(255, 255, 255, 0.22); /* fundo translúcido */
  color: #fff7ea;                   /* texto creme */
}

.linha-acoes {                      /* linha de botõezinhos de atalho */
  display: flex;                    /* lado a lado */
  flex-wrap: wrap;                  /* quebra se faltar espaço */
  gap: 0.4rem;                      /* respiro */
  align-items: center;              /* centraliza na vertical */
}

/* ---------- Modal da matéria (tópicos → explicação + vídeo) ---------- */

.materia-nome.clicavel {            /* nome de matéria que abre o modal */
  cursor: pointer;                  /* mãozinha */
  text-decoration: underline dotted var(--caramelo); /* sublinhado pontilhado discreto */
  text-underline-offset: 4px;       /* respiro entre texto e linha */
}

.materia-nome.clicavel:hover { color: var(--caramelo); } /* acende no hover */

.modal {                            /* véu escuro atrás do modal */
  position: fixed;                  /* cobre a tela toda */
  inset: 0;                         /* cola nos quatro cantos */
  background: rgba(61, 43, 31, 0.55); /* café escuro translúcido */
  display: flex;                    /* centraliza a caixa */
  align-items: center;              /* meio na vertical */
  justify-content: center;          /* meio na horizontal */
  padding: 1rem;                    /* respiro nas bordas */
  z-index: 60;                      /* por cima de tudo */
}

.modal-caixa {                      /* a cartolina do modal */
  position: relative;               /* âncora do botão fechar */
  background: var(--superficie);    /* fundo quase branco */
  border-radius: var(--raio);       /* cantos arredondados */
  box-shadow: var(--sombra-media);  /* sombra de elemento flutuante */
  width: min(560px, 100%);          /* largura máxima confortável */
  max-height: 80vh;                 /* não estoura a tela */
  max-height: 80dvh;                /* TEAM_007: dvh respeita a barra de URL do celular */
  overflow-y: auto;                 /* rola se ficar alto */
  padding: 1.4rem 1.3rem;           /* respiro interno */
}

.modal-fechar {                     /* o X de fechar */
  position: absolute;               /* flutua no canto */
  top: 0.7rem;                      /* distância do topo */
  right: 0.8rem;                    /* distância da direita */
  border: none;                     /* sem borda */
  background: transparent;          /* transparente */
  color: var(--marrom-suave);       /* marrom apagado */
  font-size: 1.15rem;               /* visível */
  cursor: pointer;                  /* mãozinha */
  line-height: 1;                   /* sem altura extra */
}

.modal-fechar:hover { color: var(--vermelho); } /* avermelha no hover */

.topico-item {                      /* tópico clicável dentro do modal */
  display: block;                   /* um por linha */
  width: 100%;                      /* linha inteira clicável */
  text-align: left;                 /* texto à esquerda */
  border: 2px solid var(--borda);   /* moldura leve */
  background: var(--creme);         /* fundo creme */
  color: var(--cafe-escuro);        /* texto escuro */
  border-radius: var(--raio-pequeno); /* cantos pequenos */
  padding: 0.55rem 0.7rem;          /* respiro interno */
  margin-bottom: 0.4rem;            /* espaço entre itens */
  font-size: 0.88rem;               /* leitura confortável */
  font-weight: 700;                 /* firme */
  cursor: pointer;                  /* mãozinha */
  transition: border-color 0.2s, transform 0.2s; /* animação suave */
}

.topico-item:hover {                /* tópico em destaque */
  border-color: var(--caramelo);    /* borda caramelo */
  transform: translateX(3px);       /* desliza levemente */
}

/* TEAM_003: tópico clicável (chip ou texto) + explicação direta no modal */
.chip-topico {                      /* chip de tópico que abre o modal */
  transition: border-color 0.15s, transform 0.15s; /* reação suave */
}

.chip-topico:hover {                /* avisa que o tópico é clicável */
  border-color: var(--caramelo);    /* borda caramelo */
  transform: translateY(-1px);      /* levanta levemente */
}

.topico-texto {                     /* nome de tópico clicável dentro de texto corrido */
  color: var(--cafe);               /* cor café de destaque */
  font-weight: 800;                 /* firme */
  padding: 0;                       /* sem respiro extra no meio da frase */
  text-decoration: underline dotted var(--caramelo); /* pontilhado = clicável (mesmo do nome da matéria) */
  text-underline-offset: 3px;       /* respiro da linha */
}

.topico-texto:hover { color: var(--caramelo); } /* acende no hover */

.topico-explicacao {                /* explicação do tópico aberto direto no modal */
  border-left: 3px solid var(--caramelo); /* mesma régua do detalhe da sanfona */
  padding: 0.2rem 0 0.2rem 0.8rem;  /* respiro só na esquerda */
  margin-bottom: 0.7rem;            /* separa do link "todos os tópicos" */
}

.topico-explicacao p { margin: 0 0 0.5rem; }        /* respiro entre blocos */
.topico-explicacao .link-video { margin-top: 0.2rem; } /* vídeo embaixo */

/* ---------- "Ver mais…" no plano de estudo ---------- */

.plano-corpo {                        /* corpo do item do plano, cortado em 2 linhas */
  display: -webkit-box;               /* caixa flexível antiga (exigida pelo clamp) */
  -webkit-box-orient: vertical;       /* empilha o conteúdo */
  -webkit-line-clamp: 2;              /* mostra só 2 linhas (webkit) */
  line-clamp: 2;                      /* TEAM_001: mesma regra na propriedade padrão */
  overflow: hidden;                   /* esconde o que passar */
}

.plano-corpo.aberto {                 /* item expandido */
  display: block;                     /* volta a ser bloco normal */
  -webkit-line-clamp: unset;          /* sem corte (webkit) */
  line-clamp: unset;                  /* TEAM_001: sem corte (padrão) */
  overflow: visible;                  /* mostra tudo */
}

.ver-mais {                           /* o botão "Ver mais…" */
  border: none;                       /* sem borda */
  background: transparent;            /* transparente */
  color: var(--cafe);                 /* cor café */
  font-size: 0.8rem;                  /* miúdo */
  font-weight: 900;                   /* firme */
  cursor: pointer;                    /* mãozinha */
  padding: 0.15rem 0;                 /* respiro fino */
  text-decoration: underline dotted var(--caramelo); /* sublinhado pontilhado */
  text-underline-offset: 3px;         /* respiro da linha */
}

.ver-mais:hover { color: var(--caramelo); } /* acende no hover */

.tema-extra { display: none; }            /* TEAM_001: tópicos além do 3º ficam recolhidos */
.cartao.aberto .tema-extra { display: block; } /* TEAM_001: o "Ver mais…" revela o restante */
.tema-ver-mais { display: inline-block; margin-top: 0.5rem; } /* TEAM_001: respiro do botão */

/* TEAM_004: box de matéria clicável — clique abre o modal da matéria */
.tema-cartao {                            /* cartão de matéria na tela de temas */
  cursor: pointer;                        /* mãozinha no box inteiro */
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; /* animação suave */
}

.tema-cartao:hover {                      /* avisa que o box é clicável */
  border-color: var(--caramelo);          /* borda caramelo */
  box-shadow: var(--sombra-media);        /* sombra de elemento flutuante */
  transform: translateY(-2px);            /* sobe levemente */
}

.tema-cartao:focus-visible {              /* foco por teclado (tabindex=0) */
  outline: 3px solid var(--caramelo);     /* contorno caramelo */
  outline-offset: 2px;                    /* respiro do contorno */
}

/* ---------- Botão "Instalar app" (PWA) ---------- */

.btn-instalar {                            /* TEAM_002: botão de instalação do app */
  width: 100%;                             /* ocupa a largura toda, como os vizinhos */
  margin-top: 0.6rem;                      /* respiro acima do botão */
}

/* ---------- Revisão: lembretes "lembrar em" e sino no menu ---------- */

.lembrete-chip {                           /* TEAM_002: checkbox em forma de pílula */
  display: inline-flex;                    /* caixinha + texto alinhados */
  align-items: center;                     /* centraliza na vertical */
  gap: 0.4rem;                             /* respiro entre a caixinha e o texto */
  padding: 0.45rem 0.85rem;                /* área clicável confortável */
  border-radius: 999px;                    /* pílula */
  border: 2px solid var(--borda);          /* borda discreta quando desmarcado */
  background: var(--superficie);           /* fundo claro */
  color: var(--cafe-escuro);               /* texto escuro */
  font-weight: 700;                        /* firme */
  font-size: 0.88rem;                      /* discreto */
  cursor: pointer;                         /* mãozinha */
  transition: all 0.15s ease;              /* reação suave */
}

.lembrete-chip:hover { border-color: var(--caramelo); } /* TEAM_002: acende no hover */

.lembrete-chip.ativa {                     /* TEAM_002: prazo agendado */
  background: var(--cafe);                 /* fundo café */
  border-color: var(--cafe);               /* borda café */
  color: #fff7ea;                          /* texto creme */
}

.lembrete-chip input { accent-color: var(--cafe); } /* TEAM_002: caixinha no tom café */

.item-menu.aviso::after {                  /* TEAM_002: sino de lembrete vencido no menu */
  content: '🔔';                           /* sininho chamativo */
  margin-left: auto;                       /* empurra para a ponta direita do item */
}

/* Marca-texto virtual */
mark.grifo-virtual {
  background: #fef08a;
  color: #1e293b;
  padding: 0.1em 0.3em;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}