/* ============================================================
   components.css — Central de Serviços (Botafogo)

   Componentes usam só tokens semânticos de tokens.css. Nenhum
   seletor de elemento bare (nada de `table {}`, `button {}`,
   `input {}`) — só classes explícitas. É isso que permite ligar
   este arquivo numa tela antiga sem mudar nada até alguém somar
   a classe nova no HTML (migração incremental, ver
   docs/design_notes.md). requer tokens.css carregado antes.
   ============================================================ */

/* ---------------------------------------------------------
   Tipografia — classes de opt-in para título e corpo
   --------------------------------------------------------- */

.fonte-titulo {
  font-family: var(--fonte-titulo);
  font-stretch: condensed;
  letter-spacing: -0.01em;
}

.fonte-corpo {
  font-family: var(--fonte-corpo);
}

.titulo-display,
.titulo-1,
.titulo-2,
.titulo-3 {
  font-family: var(--fonte-titulo);
  font-stretch: condensed;
  font-weight: var(--peso-preto);
  line-height: var(--linha-apertada);
  color: var(--texto);
  margin: 0;
  letter-spacing: -0.01em;
}

.titulo-display { font-size: var(--texto-display); }
.titulo-1 { font-size: var(--texto-3xl); }
.titulo-2 { font-size: var(--texto-2xl); font-weight: var(--peso-negrito); }
.titulo-3 {
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
}

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

.texto-mono-numero {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   Botão
   --------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-2);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  font-weight: var(--peso-semi);
  line-height: 1;
  padding: var(--espaco-3) var(--espaco-5);
  border-radius: var(--raio-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transicao-base), border-color var(--transicao-base),
    color var(--transicao-base), transform var(--transicao-rapida);
}

.botao:active {
  transform: translateY(1px);
}

.botao:focus-visible {
  outline: 2px solid var(--anel-foco);
  outline-offset: 2px;
}

.botao:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.botao-primario {
  background: var(--acento);
  color: var(--acento-texto);
}

.botao-primario:hover:not(:disabled) {
  background: var(--acento-hover);
}

.botao-secundario {
  background: transparent;
  border-color: var(--borda-forte);
  color: var(--texto);
}

.botao-secundario:hover:not(:disabled) {
  background: var(--superficie-alt);
}

.botao-perigo {
  background: transparent;
  border-color: var(--perigo);
  color: var(--perigo);
}

.botao-perigo:hover:not(:disabled) {
  background: color-mix(in srgb, var(--perigo) 12%, transparent);
}

.botao-pequeno {
  padding: var(--espaco-2) var(--espaco-3);
  font-size: var(--texto-sm);
}

/* ---------------------------------------------------------
   Campo de formulário
   --------------------------------------------------------- */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-4);
}

.campo-rotulo {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-fraco);
}

.campo-rotulo .campo-obrigatorio {
  color: var(--perigo);
  margin-left: var(--espaco-1);
}

/* .entrada cobre input, select e textarea igualmente */
.entrada {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: var(--espaco-3) var(--espaco-4);
  transition: border-color var(--transicao-base), box-shadow var(--transicao-base);
  width: 100%;
}

.entrada::placeholder {
  color: var(--texto-fraco);
}

.entrada:focus-visible,
.entrada:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent);
}

textarea.entrada {
  min-height: 6rem;
  resize: vertical;
}

.campo-ajuda {
  font-size: var(--texto-xs);
  color: var(--texto-fraco);
}

.campo-erro-texto {
  font-size: var(--texto-xs);
  color: var(--perigo);
}

.campo-erro-texto:empty {
  display: none;
}

/* ---------------------------------------------------------
   Card
   --------------------------------------------------------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  padding: var(--espaco-6);
}

.cartao-titulo {
  font-family: var(--fonte-titulo);
  font-stretch: condensed;
  font-size: var(--texto-lg);
  font-weight: var(--peso-negrito);
  color: var(--texto);
  margin: 0 0 var(--espaco-3);
}

/* ---------------------------------------------------------
   Tabela
   --------------------------------------------------------- */

.tabela-dados {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
}

.tabela-dados thead th {
  text-align: left;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 1px solid var(--borda-forte);
}

.tabela-dados tbody td {
  padding: var(--espaco-3) var(--espaco-4);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
}

.tabela-dados tbody tr {
  transition: background-color var(--transicao-rapida);
}

.tabela-dados tbody tr:hover {
  background: var(--superficie-alt);
}

.tabela-dados tbody tr:last-child td {
  border-bottom: none;
}

.tabela-dados-clicavel tbody tr {
  cursor: pointer;
}

/* ---------------------------------------------------------
   Badge de estado do ticket (§7) e de prioridade (§9)

   O valor de --cor vem do enum via atributo data-* — o JS grava
   o literal do banco direto (ex.: dataset.estado = ticket.estado),
   sem tradução para nome de classe.
   --------------------------------------------------------- */

.badge-estado,
.badge-prioridade {
  --cor: var(--texto-fraco);
  display: inline-flex;
  align-items: center;
  font-family: var(--fonte-corpo);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-total);
  color: var(--cor);
  background: color-mix(in srgb, var(--cor) 16%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--cor) 45%, var(--superficie));
  white-space: nowrap;
}

.badge-estado[data-estado='novo'] { --cor: var(--estado-novo); }
.badge-estado[data-estado='triado'] { --cor: var(--estado-triado); }
.badge-estado[data-estado='atribuido'] { --cor: var(--estado-atribuido); }
.badge-estado[data-estado='em_atendimento'] { --cor: var(--estado-em-atendimento); }
.badge-estado[data-estado='aguardando'] { --cor: var(--estado-aguardando); }
.badge-estado[data-estado='resolvido'] { --cor: var(--estado-resolvido); }
.badge-estado[data-estado='fechado'] { --cor: var(--estado-fechado); }
.badge-estado[data-estado='cancelado'] { --cor: var(--estado-cancelado); }

/* requisicao_estado (docs/plano-modulo-compras.md §4) — mesma classe
   .badge-estado, mais seletores de [data-estado]. Reaproveita os tokens de
   TI por semelhança de papel (ex.: em_execucao ~ em_atendimento: único
   estado com trabalho em andamento), não por serem o mesmo domínio. */
.badge-estado[data-estado='submetida'] { --cor: var(--estado-triado); }
.badge-estado[data-estado='em_cotacao'] { --cor: var(--estado-atribuido); }
.badge-estado[data-estado='em_visita_tecnica'] { --cor: var(--estado-aguardando); }
.badge-estado[data-estado='em_analise'] { --cor: var(--estado-atribuido); }
.badge-estado[data-estado='em_aprovacao'] { --cor: var(--estado-aguardando); }
.badge-estado[data-estado='aprovada'] { --cor: var(--estado-resolvido); }
.badge-estado[data-estado='em_analise_juridica'] { --cor: var(--estado-aguardando); }
.badge-estado[data-estado='em_execucao'] { --cor: var(--estado-em-atendimento); }
.badge-estado[data-estado='recebida'] { --cor: var(--estado-resolvido); }
.badge-estado[data-estado='reprovada'] { --cor: var(--estado-cancelado); }
.badge-estado[data-estado='cancelada'] { --cor: var(--estado-cancelado); }

.badge-prioridade[data-prioridade='P1'] { --cor: var(--prioridade-p1); }
.badge-prioridade[data-prioridade='P2'] { --cor: var(--prioridade-p2); }
.badge-prioridade[data-prioridade='P3'] { --cor: var(--prioridade-p3); }
.badge-prioridade[data-prioridade='P4'] { --cor: var(--prioridade-p4); }

/* Marca de nota interna (mensagem.visibilidade = 'interna') */
.badge-interna {
  display: inline-flex;
  align-items: center;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--espaco-1) var(--espaco-3);
  border-radius: var(--raio-total);
  color: var(--dourado-700);
  background: color-mix(in srgb, var(--dourado-500) 16%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--dourado-500) 45%, var(--superficie));
}

[data-theme='dark'] .badge-interna {
  color: var(--dourado-400);
}

/* ---------------------------------------------------------
   Alerta (sucesso / erro)
   --------------------------------------------------------- */

.alerta {
  --cor: var(--texto-fraco);
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-2);
  font-size: var(--texto-sm);
  padding: var(--espaco-3) var(--espaco-4);
  border-radius: var(--raio-md);
  border: 1px solid color-mix(in srgb, var(--cor) 40%, var(--superficie));
  background: color-mix(in srgb, var(--cor) 10%, var(--superficie));
  color: var(--texto);
}

.alerta:empty {
  display: none;
}

.alerta-sucesso { --cor: var(--sucesso); }
.alerta-erro { --cor: var(--perigo); }

/* ---------------------------------------------------------
   Shell de layout + nav lateral compacta
   --------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: 15rem 1fr;
  min-height: 100vh;
  background: var(--bg);
}

.nav-lateral {
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-borda);
  padding: var(--espaco-5) var(--espaco-3);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
}

.nav-lateral-marca {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: 0 var(--espaco-2);
}

/* A logo (web/assets/img) tem preenchimento preto + traço/estrela brancos
   sobre fundo transparente. Testado sobre as cores reais de --bg e --nav-bg
   escuros: o preenchimento preto se funde ao fundo, mas o contorno branco
   interno e a estrela sozinhos já traçam o brasão inteiro — não precisa de
   chip claro nem de segunda versão pra funcionar nos dois temas. */
.nav-lateral-marca img {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}

.nav-lateral-marca-texto {
  font-family: var(--fonte-titulo);
  font-stretch: condensed;
  font-size: var(--texto-sm);
  font-weight: var(--peso-negrito);
  color: var(--nav-texto);
  line-height: var(--linha-compacta);
}

.nav-lateral-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.nav-lateral-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--espaco-3);
  padding: var(--espaco-2) var(--espaco-3);
  padding-left: calc(var(--espaco-3) + var(--nivel, 0) * var(--espaco-4));
  border-radius: var(--raio-md);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--nav-texto-fraco);
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  transition: background-color var(--transicao-rapida), color var(--transicao-rapida);
  cursor: pointer;
}

.nav-lateral-item:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}

.nav-lateral-item:hover {
  background: var(--nav-item-hover);
  color: var(--nav-texto);
}

.nav-lateral-item.ativo {
  background: var(--nav-item-ativo-bg);
  color: var(--nav-item-ativo-texto);
  border-left-color: var(--acento);
  font-weight: var(--peso-semi);
}

/* Cabeçalho de grupo expansível (§ nav.js — Fila, Admin, e o módulo raiz
   que os engloba). Mesmo visual de .nav-lateral-item; `--nivel` (custom
   property setada inline por nó, igual o item) empurra a indentação por
   profundidade de aninhamento, sem precisar de uma classe por nível. */
.nav-lateral-grupo-cabecalho {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--espaco-2);
  padding: var(--espaco-2) var(--espaco-3);
  padding-left: calc(var(--espaco-3) + var(--nivel, 0) * var(--espaco-4));
  border-radius: var(--raio-md);
  background: none;
  border: none;
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--nav-texto);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transicao-rapida);
}

.nav-lateral-grupo-cabecalho:hover {
  background: var(--nav-item-hover);
}

.nav-lateral-grupo-cabecalho:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}

.nav-lateral-grupo-seta {
  display: inline-block;
  width: 1em;
  flex-shrink: 0;
  color: var(--nav-texto-fraco);
  font-size: var(--texto-xs);
}

.nav-lateral-sublista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.nav-lateral-secao-titulo {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nav-texto-fraco);
  padding: 0 var(--espaco-3);
  margin: var(--espaco-2) 0 0;
}

/* Empurra usuário/sair pro rodapé do nav — .nav-lateral já é flex-column */
.nav-lateral-rodape {
  margin-top: auto;
  padding-top: var(--espaco-4);
  border-top: 1px solid var(--nav-borda);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.nav-lateral-usuario {
  font-size: var(--texto-xs);
  color: var(--nav-texto-fraco);
  line-height: var(--linha-compacta);
  margin: 0;
  padding: 0 var(--espaco-3);
}

.nav-lateral-usuario strong {
  color: var(--nav-texto);
  font-weight: var(--peso-medio);
}

/* .botao-secundario usa --texto/--borda-forte (tokens de superfície
   clara/escura conforme o tema da página). Dentro do nav — que é sempre
   escuro, nos dois temas — precisa dos tokens --nav-* pra não ficar sem
   contraste no tema claro. */
.nav-lateral .botao-secundario {
  color: var(--nav-texto);
  border-color: var(--nav-borda);
}

.nav-lateral .botao-secundario:hover:not(:disabled) {
  background: var(--nav-item-hover);
}

.conteudo-principal {
  padding: var(--espaco-8);
  overflow-x: auto;
}

/* ---------------------------------------------------------
   Alternador de tema
   --------------------------------------------------------- */

.botao-tema {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-total);
  padding: var(--espaco-2) var(--espaco-4);
  cursor: pointer;
  transition: background-color var(--transicao-base);
}

.botao-tema:hover {
  background: var(--superficie-alt);
}

.botao-tema:focus-visible {
  outline: 2px solid var(--anel-foco);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   Nav lateral — responsivo (mobile)

   Abaixo do ponto de quebra, `.nav-lateral` some da grade e vira gaveta
   (off-canvas): fixa, fora da tela por padrão, desliza pra dentro quando
   `.shell` ganha `.nav-aberto` (via nav.js). `.botao-menu-mobile` só
   existe nessa largura — no desktop a sidebar já está sempre visível, não
   precisa de botão pra abrir nada.

   Este bloco tem que vir DEPOIS de `.botao-tema` no arquivo: o botão
   combina as duas classes (`botao-tema botao-menu-mobile`), e as duas
   definem `display` com a mesma especificidade (uma classe só) — quem
   carrega por último no cascade é quem valia, então `.botao-menu-mobile`
   precisa vir depois pra `display: none` realmente esconder o botão no
   desktop (era exatamente o inverso antes, e o botão nunca soltava,
   sempre `inline-flex` de `.botao-tema` por cima). Ver docs/design_notes.md.
   --------------------------------------------------------- */

.botao-menu-mobile {
  display: none;
  position: fixed;
  top: var(--espaco-4);
  left: var(--espaco-4);
  z-index: 30;
  padding: var(--espaco-2) var(--espaco-3);
}

.nav-backdrop {
  display: none;
}

@media (max-width: 768px) {
  .shell {
    display: block;
  }

  .botao-menu-mobile {
    display: inline-flex;
  }

  .nav-lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(80vw, 18rem);
    z-index: 25;
    transform: translateX(-100%);
    transition: transform var(--transicao-lenta);
    box-shadow: var(--sombra-lg);
  }

  .shell.nav-aberto .nav-lateral {
    transform: translateX(0);
  }

  /* Com a gaveta aberta, o botão de abrir some — os dois disputavam o
     mesmo canto superior esquerdo com a marca do nav por baixo. Fechar
     continua por: tocar no backdrop, Esc, ou selecionar um item. */
  .shell.nav-aberto .botao-menu-mobile {
    display: none;
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transicao-base);
  }

  .shell.nav-aberto .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .conteudo-principal {
    padding: var(--espaco-16) var(--espaco-4) var(--espaco-8);
  }
}

/* ---------------------------------------------------------
   Listas de linha (categoria, grupo, usuário, feriado no admin)
   --------------------------------------------------------- */

.lista-linhas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-linhas > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-1);
  border-bottom: 1px solid var(--borda);
  font-size: var(--texto-sm);
}

.lista-linhas > li:last-child {
  border-bottom: none;
}

/* Lista de cards empilhados (usuário/papel — linha com cabeçalho +
   várias ações, não cabe no layout de duas colunas de .lista-linhas) */
.lista-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.lista-vertical > li.cartao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-2) var(--espaco-3);
}

.lista-vertical > li.cartao > p {
  flex-basis: 100%;
  margin: 0 0 var(--espaco-1);
  font-size: var(--texto-sm);
}

/* ---------------------------------------------------------
   Timeline do ticket
   --------------------------------------------------------- */

.lista-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.item-timeline {
  position: relative;
  padding: 0 0 var(--espaco-4) var(--espaco-5);
  border-left: 2px solid var(--borda);
  font-size: var(--texto-sm);
  color: var(--texto);
}

.item-timeline::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.3em;
  width: 8px;
  height: 8px;
  border-radius: var(--raio-total);
  background: var(--borda-forte);
}

.item-timeline:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.item-timeline-quando {
  color: var(--texto-fraco);
  font-size: var(--texto-xs);
  margin-right: var(--espaco-2);
}

.item-timeline p {
  margin: 0;
}

/* ---------------------------------------------------------
   Mensagem (timeline de conversa do ticket)
   --------------------------------------------------------- */

.lista-mensagens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.item-mensagem {
  padding: var(--espaco-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  background: var(--superficie);
}

.item-mensagem--interna {
  background: color-mix(in srgb, var(--dourado-500) 8%, var(--superficie));
  border-color: color-mix(in srgb, var(--dourado-500) 35%, var(--superficie));
}

.item-mensagem-cabecalho {
  font-size: var(--texto-xs);
  color: var(--texto-fraco);
  margin: 0 0 var(--espaco-2);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}

.item-mensagem-corpo {
  margin: 0;
  color: var(--texto);
  white-space: pre-wrap;
}

/* ---------------------------------------------------------
   Anexo
   --------------------------------------------------------- */

.lista-anexos {
  list-style: none;
  margin: var(--espaco-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2);
}

.item-anexo {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  font-size: var(--texto-sm);
  color: var(--texto);
}

/* ---------------------------------------------------------
   Barra "serviço selecionado" / "voltar" — passo detalhe de
   abrir-chamado/meus-chamados/fila (§ padrão lista⇄detalhe)
   --------------------------------------------------------- */

.barra-selecao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-4);
  padding-bottom: var(--espaco-3);
  border-bottom: 1px solid var(--borda);
}

.barra-selecao p {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--texto-fraco);
}

/* ---------------------------------------------------------
   Linha "rótulo + controle" compacta — pra rótulo e botão ficarem
   vizinhos (diferente de .barra-selecao, que usa space-between e empurra
   o controle pra ponta oposta da largura toda). Admin/SLA (interruptor de
   alertas), reaproveitável em qualquer rótulo+botão/select curto.
   --------------------------------------------------------- */

.linha-controle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-3);
  margin-bottom: var(--espaco-2);
}

/* Item de linha de cotação/recebimento (módulo de Compras) mistura texto
   solto, .entrada e botão dentro de .linha-controle — sem isto, o
   `width: 100%` de .entrada disputa a linha inteira com os vizinhos em
   vez de dividir o espaço disponível como os outros itens flex. */
.linha-controle .entrada {
  width: auto;
  flex: 1 1 10rem;
}

.linha-controle p {
  margin: 0;
  font-weight: 600;
}

/* ---------------------------------------------------------
   Splash de login — logo grande centralizada
   --------------------------------------------------------- */

.login-cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-5);
  text-align: center;
  max-width: 24rem;
  width: 100%;
  margin: 0 auto;
}

.login-logo {
  width: 6rem;
  height: 6rem;
}

.login-cartao .botao {
  width: 100%;
}

.login-cartao .alerta {
  width: 100%;
  text-align: left;
}

/* ---------------------------------------------------------
   Card de serviço do catálogo (portal — escolha de serviço)
   --------------------------------------------------------- */

.cartao-servico {
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  padding: var(--espaco-4);
  margin-bottom: var(--espaco-3);
  background: var(--superficie);
  transition: border-color var(--transicao-base), box-shadow var(--transicao-base);
}

.cartao-servico:hover {
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-sm);
}

.cartao-servico-descricao {
  margin: var(--espaco-2) 0 0;
  color: var(--texto-fraco);
  font-size: var(--texto-sm);
}