/**
 * Reset + tipografia base — Modo Cliente (FRONT-002)
 * Depende de tokens.css já ter sido carregado antes.
 */
.cliente * ,
.cliente *::before,
.cliente *::after {
  box-sizing: border-box;
}

.cliente {
  font-family: var(--cliente-fonte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cliente h1, .cliente h2, .cliente h3, .cliente h4, .cliente p, .cliente ul, .cliente ol {
  margin: 0;
  padding: 0;
}

.cliente ul, .cliente ol {
  list-style: none;
}

.cliente button {
  font-family: inherit;
  cursor: pointer;
}

.cliente a {
  color: inherit;
  text-decoration: none;
}

.cliente img, .cliente svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/*
 * views/components/icon.php (mecanismo de ícone já existente, reutilizado
 * nesta sprint) não define stroke no próprio <svg> — cada contexto do
 * painel admin define ".seletor svg { stroke: currentColor }" caso a caso
 * em app.css. Em vez de repetir essa regra em cada seletor novo do cliente
 * (frágil — qualquer novo uso do ícone esquecido fica invisível, como
 * aconteceu com o botão de fechar do modal nesta sprint), um padrão global
 * aqui garante que todo ícone dentro de .cliente sempre tenha contorno
 * visível por padrão; casos que precisam de preenchimento (ex.: estrela
 * cheia) sobrescrevem fill/stroke pontualmente, como já feito em
 * components.css.
 */
.cliente svg {
  stroke: currentColor;
  /*
   * Padrão de tamanho para qualquer ícone "solto" (sem contexto próprio de
   * tamanho, ex.: um View::partial('icon', ...) chamado sem wrapper
   * dimensionado) — sem isso, um <svg> só com viewBox (sem width/height)
   * usa o tamanho padrão de elemento substituído do navegador (~300x150),
   * o que já produziu um ícone gigante e desproporcional nesta sprint
   * (chevron da tela de Perfil). Contextos mais específicos (nav, header,
   * botões, etc.) já sobrescrevem isso com sua própria regra e vencem por
   * especificidade — este é só o piso de segurança.
   */
  width: 20px;
  height: 20px;
}

/* Nenhum token longo (caminho de arquivo, URL, código) pode forçar rolagem
   horizontal da página — token sem espaço já causou esse bug real nesta
   sprint (ver FRONT-002_RELATORIO.md, "Divergências/limitações"). */
.cliente code, .cliente pre {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- Superfícies de tema ---------- */
/* RC-003-R1 — nenhuma página deste projeto declarava `color-scheme`
   (auditado em todo o CSS do cliente). Sem essa declaração, o navegador
   fica livre para aplicar SEU PRÓPRIO heurístico de modo escuro (ex.:
   Chrome/Edge "Adaptar sites ao tema do dispositivo") sobre controles de
   formulário nativos — pode repintar `<input>`/`<select>` com uma
   combinação de cores que o autor nunca escolheu, mesmo numa página
   claramente clara. Declarar explicitamente qual esquema cada tema É
   remove essa margem de heurística — sem isso, nada garantia que "cor
   de texto branca/quase invisível" relatado pela auditoria não viesse
   do próprio navegador, não do CSS deste projeto. */
.cliente--escuro {
  background: var(--cliente-fundo-escuro);
  color: var(--cliente-texto-claro-principal);
  color-scheme: dark;
}

.cliente--claro {
  background: var(--cliente-fundo-claro);
  color: var(--cliente-texto-escuro-principal);
  color-scheme: light;
}

/* ---------- Escala tipográfica ---------- */
.cliente-tp-display {
  font-size: var(--cliente-fs-display);
  font-weight: var(--cliente-fw-black);
  line-height: var(--cliente-lh-titulo);
}

.cliente-tp-titulo-pagina {
  font-size: var(--cliente-fs-titulo-pagina);
  font-weight: var(--cliente-fw-bold);
  line-height: var(--cliente-lh-titulo);
}

.cliente-tp-titulo-secao {
  font-size: var(--cliente-fs-titulo-secao);
  font-weight: var(--cliente-fw-bold);
}

.cliente-tp-titulo-card {
  font-size: var(--cliente-fs-titulo-card);
  font-weight: var(--cliente-fw-bold);
}

.cliente-tp-corpo {
  font-size: var(--cliente-fs-corpo);
  font-weight: var(--cliente-fw-regular);
  line-height: var(--cliente-lh-corpo);
}

.cliente-tp-corpo-pequeno {
  font-size: var(--cliente-fs-corpo-pequeno);
  line-height: var(--cliente-lh-corpo);
}

.cliente-tp-legenda {
  font-size: var(--cliente-fs-legenda);
  line-height: var(--cliente-lh-legenda);
}

.cliente--escuro .cliente-tp-legenda,
.cliente--escuro .cliente-tp-corpo-pequeno {
  color: var(--cliente-texto-claro-secundario);
}

.cliente--claro .cliente-tp-legenda,
.cliente--claro .cliente-tp-corpo-pequeno {
  color: var(--cliente-texto-escuro-secundario);
}

.cliente-tp-valor {
  font-size: var(--cliente-fs-valor);
  font-weight: var(--cliente-fw-black);
  font-variant-numeric: tabular-nums;
}

/* ---------- Foco visível (acessibilidade) ---------- */
.cliente a:focus-visible,
.cliente button:focus-visible,
.cliente input:focus-visible,
.cliente select:focus-visible,
.cliente textarea:focus-visible,
.cliente [tabindex]:focus-visible {
  outline: 2px solid var(--cliente-azul-claro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Utilitário de "somente leitor de tela" — para textos acessíveis que não
   devem aparecer visualmente (ex.: "Nível de habilidade: 4 de 5"). */
.cliente-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* FRONT-009 — skip link: fora da tela até receber foco por teclado, então
   aparece fixo no topo. Primeiro elemento focável de toda página do Modo
   Cliente (ver views/layouts/cliente.php). */
.cliente-skip-link {
  position: absolute;
  top: -100px;
  left: var(--cliente-space-3);
  z-index: var(--cliente-z-toast);
  background: var(--cliente-verde);
  color: #fff;
  padding: var(--cliente-space-2) var(--cliente-space-4);
  border-radius: 8px;
  font-weight: var(--cliente-fw-bold);
  font-size: 13px;
  text-decoration: none;
  transition: top .15s ease;
}

.cliente-skip-link:focus {
  top: var(--cliente-space-3);
}