/* Estilos da plataforma. Nenhuma cor e definida aqui: tudo sai dos tokens da marca
   em design/tokens.css. Ha teste recusando literal de cor neste arquivo. */

* { box-sizing: border-box; }

/* O atributo hidden vale display:none na folha do navegador, e qualquer regra de
   classe com display o vence por especificidade. Sem isto, o cabecalho com
   display:flex aparecia na tela de login — com botao de sair e tudo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--ai-font-sans);
  font-weight: var(--ai-fw-body);
  font-size: var(--ai-fs-md);
  color: var(--ai-text-primary);
  background: var(--ai-body-bg);
  /* Alinhamento sempre a esquerda: regra do manual de identidade. */
  text-align: left;
}

.mono { font-family: var(--ai-font-mono); font-size: var(--ai-fs-sm); }

/* --- cabecalho ---------------------------------------------------------- */

.cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.9rem 1.5rem;
  background: var(--ai-header-bg);
  border-bottom: 1px solid var(--ai-border-light);
}
.cabecalho__marca { display: flex; flex-direction: column; }
.cabecalho__titulo {
  font-weight: var(--ai-fw-title); font-size: var(--ai-fs-lg);
  color: var(--ai-brand-azul-texto);
}
.cabecalho__sub {
  font-family: var(--ai-font-mono); font-size: var(--ai-fs-xs);
  color: var(--ai-text-muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.cabecalho__direita { display: flex; align-items: center; gap: 0.75rem; }

/* --- estrutura ---------------------------------------------------------- */

main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
main.largo { max-width: 78rem; }

h1 {
  font-weight: var(--ai-fw-title); font-size: var(--ai-fs-2xl);
  color: var(--ai-brand-azul-texto); margin: 0 0 0.35rem;
}
h2 {
  font-weight: var(--ai-fw-title); font-size: var(--ai-fs-xl);
  color: var(--ai-brand-azul-texto); margin: 2rem 0 0.75rem;
}
.subtitulo { color: var(--ai-text-secondary); margin: 0 0 1.75rem; }

.cartao {
  background: var(--ai-card-bg);
  border: 1px solid var(--ai-border-light);
  border-radius: var(--ai-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--ai-shadow-sm);
}
.cartao + .cartao { margin-top: 1rem; }

.rotulo {
  display: block; font-family: var(--ai-font-mono); font-size: var(--ai-fs-xs);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ai-text-muted); margin-bottom: 0.4rem;
}

/* --- formulario --------------------------------------------------------- */

input[type="email"], select {
  width: 100%; padding: 0.7rem 0.85rem;
  font-family: var(--ai-font-sans); font-size: var(--ai-fs-md);
  color: var(--ai-text-primary);
  background: var(--ai-card-bg);
  border: 1px solid var(--ai-border-medium);
  border-radius: var(--ai-radius-sm);
}
input:focus-visible, select:focus-visible, button:focus-visible, .alt:focus-visible {
  outline: 2px solid var(--ai-focus-ring); outline-offset: 2px;
}

.botao {
  font-family: var(--ai-font-sans); font-weight: var(--ai-fw-label);
  font-size: var(--ai-fs-md); padding: 0.7rem 1.4rem;
  color: var(--ai-text-inverse); background: var(--ai-brand-gradient);
  border: 0; border-radius: var(--ai-radius-sm); cursor: pointer;
  transition: var(--ai-transition-fast);
}
.botao:hover { filter: brightness(1.08); }
.botao[disabled] { opacity: 0.5; cursor: not-allowed; filter: none; }
.botao--discreto {
  background: none; color: var(--ai-text-secondary);
  border: 1px solid var(--ai-border-medium);
}
.botao--perigo { background: var(--ai-danger); }

.erro-campo { color: var(--ai-danger-texto); font-size: var(--ai-fs-sm); margin-top: 0.5rem; }

/* --- lista de simulados ------------------------------------------------- */

.simulado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.etiqueta {
  font-family: var(--ai-font-mono); font-size: var(--ai-fs-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.25rem 0.6rem; border-radius: var(--ai-radius-xs);
}
.etiqueta--travado { background: var(--ai-hover); color: var(--ai-text-muted); }
.etiqueta--disponivel { background: var(--ai-success-soft); color: var(--ai-success-texto); }
.etiqueta--andamento { background: var(--ai-warning-soft); color: var(--ai-warning-texto); }
.etiqueta--encerrado { background: var(--ai-info-soft); color: var(--ai-info-texto); }

/* --- prova -------------------------------------------------------------- */

.prova { display: grid; grid-template-columns: 1fr 14rem; gap: 1.5rem; align-items: start; }
@media (max-width: 52rem) { .prova { grid-template-columns: 1fr; } }

.barra-prova {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem; margin-bottom: 1rem;
  background: var(--ai-card-bg);
  border: 1px solid var(--ai-border-light);
  border-radius: var(--ai-radius-md);
}
.cronometro {
  font-family: var(--ai-font-mono); font-size: var(--ai-fs-xl);
  font-weight: var(--ai-fw-title); color: var(--ai-brand-azul-texto);
}
.cronometro--aviso { color: var(--ai-warning-texto); }
.cronometro--esgotado { color: var(--ai-danger-texto); }

.enunciado { font-size: var(--ai-fs-lg); line-height: 1.55; margin: 0 0 1.25rem; }

.alt {
  display: flex; gap: 0.75rem; align-items: flex-start;
  width: 100%; text-align: left; cursor: pointer;
  padding: 0.85rem 1rem; margin-bottom: 0.6rem;
  font-family: var(--ai-font-sans); font-size: var(--ai-fs-md);
  color: var(--ai-text-primary); background: var(--ai-card-bg);
  border: 1px solid var(--ai-border-medium);
  border-radius: var(--ai-radius-sm);
  transition: var(--ai-transition-fast);
}
.alt:hover { background: var(--ai-hover); }
.alt[aria-pressed="true"] {
  border-color: var(--ai-brand-verde);
  background: var(--ai-success-soft);
}
.alt__letra {
  font-family: var(--ai-font-mono); font-weight: var(--ai-fw-label);
  color: var(--ai-text-muted); min-width: 1.25rem;
}
.alt[aria-pressed="true"] .alt__letra { color: var(--ai-success-texto); }

.grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
.grade__item {
  font-family: var(--ai-font-mono); font-size: var(--ai-fs-xs);
  padding: 0.4rem 0; cursor: pointer;
  color: var(--ai-text-secondary); background: var(--ai-card-bg);
  border: 1px solid var(--ai-border-light); border-radius: var(--ai-radius-xs);
}
.grade__item--respondida { background: var(--ai-success-soft); color: var(--ai-success-texto); }
.grade__item--marcada { border-color: var(--ai-warning); border-width: 2px; }
.grade__item--atual { outline: 2px solid var(--ai-brand-verde); outline-offset: 1px; }

.legenda { font-size: var(--ai-fs-xs); color: var(--ai-text-muted); margin-top: 0.75rem; }

/* --- resultado ---------------------------------------------------------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.kpi { padding: 1.1rem 1.25rem; border-radius: var(--ai-radius-md); background: var(--ai-hover); }
.kpi--destaque { background: var(--ai-brand-gradient); color: var(--ai-text-inverse); }
.kpi--destaque .rotulo { color: var(--ai-text-inverse); opacity: 0.85; }
.kpi__valor {
  font-family: var(--ai-font-mono); font-size: var(--ai-fs-2xl);
  font-weight: var(--ai-fw-title); line-height: 1.1;
}
.kpi__nota { font-size: var(--ai-fs-sm); color: var(--ai-text-muted); }
.kpi--destaque .kpi__nota { color: var(--ai-text-inverse); opacity: 0.85; }

.dominio { margin-bottom: 0.9rem; }
.dominio__topo { display: flex; justify-content: space-between; font-size: var(--ai-fs-sm); }
.dominio__trilho {
  height: 0.5rem; margin-top: 0.3rem; border-radius: var(--ai-radius-xs);
  background: var(--ai-border-light); overflow: hidden;
}
.dominio__barra { height: 100%; background: var(--ai-brand-gradient); }

.nota-leitura {
  padding: 0.85rem 1rem; margin: 1rem 0;
  font-size: var(--ai-fs-sm); color: var(--ai-info-texto);
  background: var(--ai-info-soft);
  border-left: 3px solid var(--ai-info);
  border-radius: var(--ai-radius-xs);
}

.revisao__item { padding: 1.1rem 0; border-top: 1px solid var(--ai-border-light); }
.revisao__alt {
  display: flex; gap: 0.6rem; padding: 0.5rem 0.65rem; margin-bottom: 0.3rem;
  font-size: var(--ai-fs-sm); border-radius: var(--ai-radius-xs);
}
.revisao__alt--correta { background: var(--ai-success-soft); color: var(--ai-success-texto); }
.revisao__alt--marcada-errada { background: var(--ai-danger-soft); color: var(--ai-danger-texto); }
.revisao__comentario { font-size: var(--ai-fs-sm); color: var(--ai-text-secondary); }
.revisao__explicacao {
  margin-top: 0.6rem; padding: 0.75rem 0.9rem;
  font-size: var(--ai-fs-sm); background: var(--ai-hover);
  border-radius: var(--ai-radius-xs);
}

.filtros { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filtro {
  font-family: var(--ai-font-mono); font-size: var(--ai-fs-xs);
  padding: 0.4rem 0.8rem; cursor: pointer;
  color: var(--ai-text-secondary); background: var(--ai-card-bg);
  border: 1px solid var(--ai-border-medium); border-radius: var(--ai-radius-xl);
}
.filtro[aria-pressed="true"] {
  color: var(--ai-text-inverse); background: var(--ai-brand-azul);
  border-color: var(--ai-brand-azul);
}

/* --- tabela do painel --------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: var(--ai-fs-sm); }
th {
  font-family: var(--ai-font-mono); font-size: var(--ai-fs-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ai-text-inverse); background: var(--ai-brand-verde);
  padding: 0.6rem 0.75rem; text-align: left;
}
td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--ai-border-light); }
tbody tr:nth-child(even) { background: var(--ai-hover); }
.tabela-rolavel { overflow-x: auto; }

/* --- aviso -------------------------------------------------------------- */

.aviso {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  padding: 0.75rem 1.25rem; font-size: var(--ai-fs-sm);
  color: var(--ai-text-inverse); background: var(--ai-brand-azul);
  border-radius: var(--ai-radius-sm); box-shadow: var(--ai-shadow-lg);
  max-width: 90vw;
}
.aviso--erro { background: var(--ai-danger); }

.grade-servicos { display: grid; gap: 0.35rem; }

.grade-servicos__linha {
  display: grid; grid-template-columns: 9rem repeat(3, 1fr); gap: 0.4rem;
  align-items: center;
}
/* Sem linha de cabecalho: cada botao ja carrega o proprio rotulo, e repetir os tres
   titulos acima so somava ruido — alem de sumir no celular, onde a coluna vira
   empilhada. */
.grade-servicos__linha { padding: 0.15rem 0.35rem; border-radius: var(--ai-radius-xs); }
.grade-servicos__linha .rotulo { margin: 0; }

/* O radio nativo continua ali, invisivel: e ele que da navegacao por setas,
   semantica de formulario e anuncio correto no leitor de tela. O visual e do
   label. Botao com aria-pressed daria o mesmo desenho e nada disso. */
.segmento { display: contents; }
.segmento input[type="radio"] {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
}
.segmento label {
  display: block; text-align: center; cursor: pointer;
  padding: 0.45rem 0.3rem;
  font-family: var(--ai-font-sans); font-size: var(--ai-fs-sm);
  color: var(--ai-text-secondary); background: var(--ai-card-bg);
  border: 1px solid var(--ai-border-medium); border-radius: var(--ai-radius-sm);
  transition: var(--ai-transition-fast);
}
.segmento label:hover { background: var(--ai-hover); }
.segmento input:checked + label {
  color: var(--ai-text-inverse); background: var(--ai-brand-gradient);
  border-color: var(--ai-brand-verde);
}
/* O foco precisa aparecer no label, porque o radio esta escondido: sem isto, quem
   navega por teclado nao sabe onde esta. */
.segmento input:focus-visible + label {
  outline: 2px solid var(--ai-focus-ring); outline-offset: 2px;
}

.grade-servicos__linha--falta {
  background: var(--ai-danger-soft);
}
.grade-servicos__linha--falta .rotulo { color: var(--ai-danger-texto); }

@media (max-width: 40rem) {
  .grade-servicos__linha { grid-template-columns: 1fr; gap: 0.25rem; }
  .segmento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
  .grade-servicos__linha { margin-bottom: 0.6rem; }
}

/* --- índice do guia ------------------------------------------------------ */

.indice { margin: 0; padding: 0; list-style: none; }
.indice li {
  padding: 0.35rem 0;
  font-size: var(--ai-fs-sm);
  border-bottom: 1px solid var(--ai-border-light);
}
.indice li:last-child { border-bottom: 0; }
.indice .mono { color: var(--ai-text-muted); margin-right: 0.5rem; }

/* --- abas ---------------------------------------------------------------- */

.abas {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.aba {
  display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start;
  flex: 1 1 9rem; cursor: pointer;
  padding: 0.65rem 0.9rem;
  font-family: var(--ai-font-sans);
  color: var(--ai-text-secondary); background: var(--ai-card-bg);
  border: 1px solid var(--ai-border-medium);
  border-radius: var(--ai-radius-sm);
  transition: var(--ai-transition-fast);
}
.aba:hover { background: var(--ai-hover); }
.aba[aria-selected="true"] {
  color: var(--ai-text-inverse); background: var(--ai-brand-gradient);
  border-color: var(--ai-brand-verde);
}
.aba__nome { font-size: var(--ai-fs-md); font-weight: var(--ai-fw-label); }
.aba__peso {
  font-family: var(--ai-font-mono); font-size: var(--ai-fs-xs);
  color: var(--ai-text-muted);
}
.aba[aria-selected="true"] .aba__peso { color: var(--ai-text-inverse); opacity: 0.85; }

.painel-aba__titulo {
  margin: 0 0 0.4rem;
  font-size: var(--ai-fs-lg); font-weight: var(--ai-fw-title);
  color: var(--ai-brand-azul-texto);
}
.painel-aba__sobre { margin: 0 0 0.6rem; color: var(--ai-text-secondary); }
/* O respiro do separador vem daqui, e nao de espaco no HTML: quebra de linha entre
   elementos colapsa, e o ponto colava nos dois lados. */
.separador { margin: 0 0.5rem; color: var(--ai-text-muted); }

.painel-aba__numeros {
  margin: 0 0 1rem; padding-bottom: 0.9rem;
  color: var(--ai-text-muted);
  border-bottom: 1px solid var(--ai-border-light);
}

/* --- formulário em linha -------------------------------------------------- */

.linha-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.linha-form input { flex: 1 1 16rem; width: auto; }
.entrada-texto {
  padding: 0.7rem 0.85rem;
  font-family: var(--ai-font-sans); font-size: var(--ai-fs-md);
  color: var(--ai-text-primary); background: var(--ai-card-bg);
  border: 1px solid var(--ai-border-medium); border-radius: var(--ai-radius-sm);
}