/* ==========================================================================
   Design System — Sistema de Gestão de Eventos Sociais
   Padrão institucional: header grafite, linha dourada, fundo claro,
   cards brancos, botões bem definidos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Paleta institucional obrigatória:
     #333333 (grafite) · #BEA45A (dourado) · #D1D3D4 (cinza claro) · #808080 (cinza) */
  --cor-grafite-900: #262626;
  --cor-grafite-800: #333333;
  --cor-grafite-700: #404040;
  --cor-grafite-600: #4d4d4d;

  --cor-dourado-700: #bea45a;
  --cor-dourado-500: #bea45a;
  --cor-dourado-400: #bea45a;
  --cor-dourado-100: #f4efe1;

  --cor-cinza-500: #808080;
  --cor-cinza-300: #d1d3d4;

  --cor-fundo: #f4f5f6;
  --cor-superficie: #ffffff;
  --cor-borda: #d1d3d4;
  --cor-borda-forte: #bcbec0;

  --cor-texto: #333333;
  --cor-texto-suave: #808080;
  --cor-texto-fraco: #9b9d9f;
  --cor-texto-invertido: #f5f5f5;

  --cor-primaria: #333333;
  --cor-primaria-hover: #404040;
  --cor-acento: var(--cor-dourado-500);

  /* Estados */
  --cor-sucesso: #1e7e46;
  --cor-sucesso-fundo: #e3f3ea;
  --cor-alerta: #9a6b00;
  --cor-alerta-fundo: #fdf3d7;
  --cor-erro: #b3261e;
  --cor-erro-fundo: #fbe9e7;
  --cor-info: #175d9c;
  --cor-info-fundo: #e6f0fa;
  --cor-neutro: #5b6472;
  --cor-neutro-fundo: #eceef2;

  /* Tipografia */
  --fonte-base: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-md: 1rem;
  --texto-lg: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;

  /* Espaçamento */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  /* Forma */
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 14px;
  --sombra-card: 0 1px 3px rgba(22, 25, 29, 0.07), 0 1px 2px rgba(22, 25, 29, 0.05);
  --sombra-elevada: 0 8px 24px rgba(22, 25, 29, 0.14);

  --largura-conteudo: 1540px;
}

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fonte-base);
  font-size: var(--texto-md);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p {
  margin: 0;
}

a {
  color: var(--cor-info);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3. App shell
   -------------------------------------------------------------------------- */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-shell__main {
  flex: 1;
  width: 100%;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-6) var(--esp-5) var(--esp-7);
}

/* Rodapé quase invisível: sem faixa própria, só uma linha de assinatura. */
.app-shell__footer {
  padding: var(--esp-3) var(--esp-5);
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.2px;
  color: var(--cor-texto-fraco);
}

/* --------------------------------------------------------------------------
   4. Top header (grafite + linha dourada)
   -------------------------------------------------------------------------- */
.top-header {
  background: var(--cor-grafite-900);
  color: var(--cor-texto-invertido);
  border-bottom: 3px solid var(--cor-acento);
}

.top-header__inner {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-3) var(--esp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
}

.top-header__brand {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  color: inherit;
}

.top-header__brand:hover {
  text-decoration: none;
}

.top-header__emblema {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cor-grafite-700);
  border: 2px solid var(--cor-acento);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--cor-dourado-400);
  letter-spacing: 0.5px;
}

.top-header__titulo {
  font-size: var(--texto-md);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.top-header__subtitulo {
  font-size: var(--texto-xs);
  color: #c4c4c4;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.top-header__usuario {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  font-size: var(--texto-sm);
}

/* Sino de notificações no cabeçalho, com contador de não lidas. */
.top-header__sino {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--cor-texto-invertido);
}

.top-header__sino:hover {
  background: var(--cor-grafite-700);
  text-decoration: none;
  color: var(--cor-dourado-400);
}

.top-header__sino .ui-icon {
  width: 19px;
  height: 19px;
}

.top-header__sino-contador {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cor-acento);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.top-header__usuario-nome {
  color: #dddddd;
}

/* --------------------------------------------------------------------------
   5. Navbar
   -------------------------------------------------------------------------- */
.navbar {
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
  box-shadow: 0 1px 2px rgba(22, 25, 29, 0.04);
}

.navbar__inner {
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--esp-5);
  display: flex;
  gap: var(--esp-2);
  overflow-x: auto;
}

.navbar__link {
  display: inline-block;
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--cor-texto-suave);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.navbar__link:hover {
  color: var(--cor-texto);
  text-decoration: none;
}

.navbar__link--ativo {
  color: var(--cor-texto);
  border-bottom-color: var(--cor-acento);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. Breadcrumb e page header
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
  margin-bottom: var(--esp-4);
}

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

.breadcrumb__separador {
  color: var(--cor-borda-forte);
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  /* Centrado: a ação principal alinha com o bloco do título em vez de
     flutuar sozinha na borda de baixo. */
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  margin-bottom: var(--esp-5);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
}

.page-header__titulo {
  font-size: var(--texto-2xl);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.page-header__subtitulo {
  margin-top: var(--esp-1);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.page-header__acoes {
  display: flex;
  gap: var(--esp-3);
}

/* CTA do cabeçalho um pouco mais contido, para compor com o título. */
.page-header__acoes .btn {
  padding: 0.55rem 1.15rem;
  font-size: var(--texto-sm);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-card);
}

.card__corpo {
  padding: var(--esp-5);
}

.card__cabecalho {
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--cor-borda);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.card__titulo {
  font-size: var(--texto-lg);
  font-weight: 600;
}

/* Section card — seções numeradas de formulário */
.section-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-card);
  margin-bottom: var(--esp-5);
  overflow: hidden;
}

.section-card__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  background: #fafbfc;
  border-bottom: 1px solid var(--cor-borda);
}

.section-card__numero {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cor-acento);
  color: #ffffff;
  font-size: var(--texto-sm);
  font-weight: 700;
  display: grid;
  place-items: center;
}

.section-card__titulo {
  font-size: var(--texto-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--cor-dourado-700);
}

.section-card__subtitulo {
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.section-card__corpo {
  padding: var(--esp-5);
}

/* Ação no cabeçalho da seção (o toggle do bate-volta, o botão de datas):
   encosta na direita, deixando o título com o espaço que sobra. */
.section-card__acao { margin-left: auto; }

/* Summary card — indicadores do dashboard, no modelo do redesign:
   ícone em círculo, número grande e sparkline dos últimos 12 meses. */
.summary-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-card);
  padding: var(--esp-4) var(--esp-5);
}

.summary-card__topo {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
}

.summary-card__icone {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9eaec;
  color: var(--cor-grafite-600);
}

.summary-card__icone .ui-icon { width: 20px; height: 20px; }

.summary-card__metrica { flex: 1; min-width: 0; }

.summary-card__titulo {
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--cor-texto-suave);
}

.summary-card__valor {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: var(--esp-1);
  font-variant-numeric: tabular-nums;
}

/* Doze meses em barrinhas, ancoradas na base do número. A largura é fixa
   (12 barras × 5px + 11 folgas × 3px) para os quatro cartões alinharem. */
.summary-card__sparkline {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 3px;
  width: 93px;
  height: 44px;
  flex-shrink: 0;
  align-self: flex-end;
}

.summary-card__sparkline span {
  width: 5px;
  border-radius: 2px 2px 0 0;
  background: #b9bcc0;
}

.summary-card__variacao {
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

/* A seta diz a direção; a cor só entra quando a direção é boa ou má
   notícia de verdade — variação informativa fica em neutro. */
.summary-card__seta { font-weight: 700; }
.summary-card__variacao--alta { color: var(--cor-sucesso); }
.summary-card__variacao--baixa { color: var(--cor-erro); }
.summary-card__variacao--neutra { color: var(--cor-texto-suave); }

/* Cores por métrica: ícone e sparkline contam a mesma história. */
.summary-card--dourada .summary-card__icone { background: var(--cor-dourado-100); color: var(--cor-dourado-700); }
.summary-card--dourada .summary-card__sparkline span { background: #dcc48e; }
.summary-card--sucesso .summary-card__icone { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.summary-card--sucesso .summary-card__sparkline span { background: #a9d4ba; }
.summary-card--info .summary-card__icone { background: var(--cor-info-fundo); color: var(--cor-info); }
.summary-card--info .summary-card__sparkline span { background: #a9c6e2; }

/* O cartão que pede ação da DG hoje: contorno dourado e fundo âmbar suave. */
.summary-card--destaque {
  border: 1.5px solid var(--cor-dourado-500);
  background: #fdfaf2;
}

.summary-card--destaque .summary-card__valor { color: var(--cor-dourado-700); }

/* Cartão que leva à listagem já filtrada. */
.summary-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.summary-card--link:hover,
.summary-card--link:focus-visible {
  text-decoration: none;
  border-color: var(--cor-dourado-500);
  box-shadow: var(--sombra-elevada);
  transform: translateY(-1px);
}

.summary-card--link:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .summary-card--link { transition: none; }
  .summary-card--link:hover,
  .summary-card--link:focus-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   8. Status badge
   -------------------------------------------------------------------------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  background: var(--cor-neutro-fundo);
  color: var(--cor-neutro);
}

.status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Modificadores casam com os códigos de StatusSolicitacao em minúsculas. */
.status-badge--rascunho { background: var(--cor-neutro-fundo); color: var(--cor-neutro); }
.status-badge--enviada { background: var(--cor-info-fundo); color: var(--cor-info); }
.status-badge--em_analise { background: var(--cor-info-fundo); color: var(--cor-info); }
.status-badge--aguardando_despacho { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.status-badge--devolvida { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.status-badge--deferida_em_andamento { background: var(--cor-info-fundo); color: var(--cor-info); }
.status-badge--atendida { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.status-badge--nao_atendida { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.status-badge--cancelada { background: var(--cor-neutro-fundo); color: var(--cor-neutro); }
.status-badge--pendente,
.status-badge--aguardando_retorno { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.status-badge--em_andamento,
.status-badge--evento_agendado { background: var(--cor-info-fundo); color: var(--cor-info); }
.status-badge--nao_atender { background: var(--cor-erro-fundo); color: var(--cor-erro); }

/* --------------------------------------------------------------------------
   9. Formulários
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--esp-4) var(--esp-4);
}

.form-campo { grid-column: span 12; }
.form-campo--9 { grid-column: span 9; }
.form-campo--6 { grid-column: span 6; }
.form-campo--4 { grid-column: span 4; }
.form-campo--3 { grid-column: span 3; }

@media (max-width: 760px) {
  .form-campo--9,
  .form-campo--6,
  .form-campo--4,
  .form-campo--3 {
    grid-column: span 12;
  }
}

.form-label {
  display: block;
  font-size: var(--texto-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cor-grafite-600);
  margin-bottom: var(--esp-2);
}

.form-label__obrigatorio {
  color: var(--cor-erro);
}

.form-controle {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: var(--texto-sm);
  color: var(--cor-texto);
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-controle:focus {
  outline: none;
  border-color: var(--cor-acento);
  box-shadow: 0 0 0 3px rgba(190, 164, 90, 0.28);
}

.form-controle::placeholder {
  color: var(--cor-texto-fraco);
}

select.form-controle {
  appearance: none;
  background-image: none;
  padding-right: 2.25rem;
}

textarea.form-controle {
  resize: vertical;
  min-height: 96px;
}

.form-ajuda {
  margin-top: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

.form-erro {
  margin-top: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--cor-erro);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
}

.form-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--cor-grafite-800);
}

/* --------------------------------------------------------------------------
   10. Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: 0.6rem 1.25rem;
  font-family: inherit;
  font-size: var(--texto-sm);
  font-weight: 600;
  border-radius: var(--raio-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn--primario {
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
}

.btn--primario:hover {
  background: var(--cor-primaria-hover);
}

.btn--dourado {
  background: var(--cor-acento);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.btn--dourado:hover {
  background: var(--cor-dourado-700);
}

.btn--secundario {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-color: var(--cor-borda-forte);
}

.btn--secundario:hover {
  background: var(--cor-fundo);
}

.btn--perigo {
  background: var(--cor-erro);
  color: #fff;
}

.btn--fantasma {
  background: transparent;
  color: var(--cor-texto-invertido);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn--fantasma:hover {
  border-color: var(--cor-acento);
  color: var(--cor-dourado-400);
}

.btn--bloco {
  width: 100%;
}

/* Variante compacta para ações em linhas de tabela. */
.btn--compacto {
  padding: 0.3rem 0.75rem;
  font-size: var(--texto-xs);
}

/* Caixa alta marca a ação principal da página; repetida linha a linha numa
   tabela ela vira ruído, então o botão compacto volta à caixa normal. */
.btn--dourado.btn--compacto {
  text-transform: none;
  letter-spacing: normal;
}

/* Estado armado do confirmar em duas etapas (ações douradas). */
.btn--dourado.is-armado {
  background: var(--cor-grafite-800);
}

/* Largura fixa para Ativar/Inativar não desalinhar a coluna de ações. */
.btn--alternar-ativo {
  min-width: 5.25rem;
}

/* Perigo em contorno: menos peso visual dentro de tabelas. */
.btn--perigo-suave {
  background: var(--cor-superficie);
  color: var(--cor-erro);
  border-color: var(--cor-erro);
}

.btn--perigo-suave:hover {
  background: var(--cor-erro);
  color: #fff;
}

/* Estado armado da exclusão em duas etapas: pede o clique de confirmação. */
.btn--perigo-suave.is-armado {
  background: var(--cor-erro);
  color: #fff;
  border-color: var(--cor-erro);
}

/* --------------------------------------------------------------------------
   11. Tabelas
   -------------------------------------------------------------------------- */
.tabela-wrapper {
  overflow-x: auto;
}

/* Sombra na borda direita enquanto houver coluna escondida à direita:
   sem ela, no celular, a tabela parece terminar no meio. */
.tabela-wrapper {
  background:
    linear-gradient(to right, var(--cor-superficie) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--cor-superficie) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(22, 25, 29, 0.16), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(22, 25, 29, 0.16), transparent) right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.tabela-wrapper:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: -2px;
}

/* Cabeçalho clicável para ordenar a listagem. */
.tabela__ordenar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  color: inherit;
  text-decoration: none;
}

.tabela__ordenar:hover {
  color: var(--cor-texto);
  text-decoration: none;
}

.tabela__ordenar.is-ativa {
  color: var(--cor-dourado-700);
}

.tabela__seta {
  font-size: 0.7em;
  opacity: 0.45;
}

.tabela__ordenar.is-ativa .tabela__seta,
.tabela__ordenar:hover .tabela__seta {
  opacity: 1;
}

.lista-contagem {
  margin: 0;
  padding: 0 var(--esp-5) var(--esp-3);
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

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

.tabela th {
  text-align: left;
  padding: var(--esp-3) var(--esp-4);
  font-size: var(--texto-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cor-texto-suave);
  border-bottom: 2px solid var(--cor-borda);
  white-space: nowrap;
}

.tabela td {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
  vertical-align: middle;
}

.tabela tbody tr:hover {
  background: #fafbfc;
}

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

/* --------------------------------------------------------------------------
   12. Mensagens (django messages)
   -------------------------------------------------------------------------- */
.alertas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}

.alerta {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-md);
  font-size: var(--texto-sm);
  border: 1px solid transparent;
}

.alerta--success { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: #bfe3cd; }
.alerta--warning { background: var(--cor-alerta-fundo); color: var(--cor-alerta); border-color: #ecd9a0; }
.alerta--error { background: var(--cor-erro-fundo); color: var(--cor-erro); border-color: #f0c3be; }
.alerta--info { background: var(--cor-info-fundo); color: var(--cor-info); border-color: #bed6ec; }

/* --------------------------------------------------------------------------
   13. Tela de login (auth)
   -------------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #eceded;
}

.auth-shell__conteudo {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--esp-6) var(--esp-5);
  position: relative;
  overflow: hidden;
}

/* Marca d'água do brasão à direita: presença institucional sem competir
   com o card. O tom vem do próprio SVG colorido, lavado para o cinza. */
.auth-shell__marca {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(34vw, 460px);
  opacity: 0.05;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}

/* Chevrons decorativos à esquerda: um cinza de apoio e o filete dourado,
   apontando para o card (quadrados rotacionados com só duas bordas). */
.auth-shell__conteudo::before,
.auth-shell__conteudo::after {
  content: "";
  position: absolute;
  top: 50%;
  pointer-events: none;
}

.auth-shell__conteudo::before {
  left: -21rem;
  width: 26rem;
  height: 26rem;
  transform: translateY(-58%) rotate(45deg);
  border-top: 2.75rem solid #e4e5e5;
  border-right: 2.75rem solid #e4e5e5;
}

.auth-shell__conteudo::after {
  left: -16rem;
  width: 24rem;
  height: 24rem;
  transform: translateY(-42%) rotate(45deg);
  border-top: 2px solid var(--cor-dourado-500);
  border-right: 2px solid var(--cor-dourado-500);
  opacity: 0.75;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--cor-superficie);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-elevada);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.auth-card__corpo {
  padding: var(--esp-6) var(--esp-6) var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.auth-card__cabecalho {
  text-align: center;
}

.auth-card__brasao {
  width: 84px;
  height: auto;
  margin-bottom: var(--esp-3);
}

.auth-card__titulo {
  font-size: var(--texto-xl);
  font-weight: 700;
  color: var(--cor-texto);
}

.auth-card__subtitulo {
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

/* Alerta de credencial dentro do card, com o ícone alinhado à primeira linha. */
.auth-alerta {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-md);
  background: var(--cor-erro-fundo);
  border: 1px solid #f0c9c5;
  color: var(--cor-erro);
  font-size: var(--texto-sm);
}

.auth-alerta__icone { display: flex; padding-top: 2px; }
.auth-alerta__icone .ui-icon { width: 18px; height: 18px; }

/* Campo com ícone à esquerda (usuário, cadeado, e-mail). */
.campo-com-icone { position: relative; display: block; }

.campo-com-icone__icone {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  display: flex;
  color: var(--cor-texto-fraco);
  pointer-events: none;
}

.campo-com-icone__icone .ui-icon { width: 17px; height: 17px; }
.campo-com-icone .form-controle { padding-left: 2.5rem; }

.auth-card__lembrar {
  color: var(--cor-texto-suave);
  user-select: none;
}

.auth-card__entrar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  /* Como no modelo visual: a ação de acesso fala em caixa de frase. */
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--texto-md);
}

.auth-card__entrar .ui-icon { width: 18px; height: 18px; }

/* "Ambiente restrito e monitorado" entre dois fios, com o cadeado. */
.auth-card__restrito {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

.auth-card__restrito::before,
.auth-card__restrito::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--cor-borda);
}

.auth-card__restrito span { display: flex; color: var(--cor-texto-fraco); }
.auth-card__restrito .ui-icon { width: 15px; height: 15px; }

.auth-card__link {
  text-align: center;
  font-size: var(--texto-sm);
  font-weight: 600;
}

.auth-card__link a {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
}

.auth-card__link .ui-icon { width: 14px; height: 14px; }

.auth-card__rodape {
  padding: var(--esp-4) var(--esp-6);
  border-top: 1px solid var(--cor-borda);
  text-align: center;
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--cor-dourado-700);
}

.auth-card__ajuda {
  text-align: center;
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   14. Utilitários
   -------------------------------------------------------------------------- */
.grid-resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-4);
  margin-bottom: var(--esp-5);
}

@media (max-width: 1000px) {
  .grid-resumo { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid-resumo { grid-template-columns: 1fr; }
}

.acoes-formulario {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.texto-suave { color: var(--cor-texto-suave); }
.texto-centro { text-align: center; }
.mt-4 { margin-top: var(--esp-4); }
.mb-4 { margin-bottom: var(--esp-4); }

/* --------------------------------------------------------------------------
   15. Shell institucional compacto
   -------------------------------------------------------------------------- */
.top-header__inner { min-height: 100px; padding-top: 10px; padding-bottom: 10px; }
.top-header__identidade { display: inline-flex; align-items: center; gap: 10px; }
.top-header__brasao {
  width: 62.5px; height: 77.5px; display: block; object-fit: contain;
}
.top-header__sigla { font-size: 2rem; line-height: 1; color: #f4f4f4; letter-spacing: -1px; }
.top-header__divisor { width: 1px; height: 38px; background: rgba(255, 255, 255, 0.25); }
.top-header__produto { line-height: 1.25; }
.top-header__titulo { font-size: 1rem; font-weight: 650; }
.top-header__subtitulo { color: #eee; text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
.top-header__usuario-dados { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.top-header__usuario-dados strong { color: #fff; font-size: 0.75rem; text-transform: uppercase; }
.top-header__usuario-dados small { color: var(--cor-dourado-400); font-size: 0.625rem; text-transform: uppercase; }
.top-header__avatar {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: var(--cor-grafite-600); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.navbar__inner { align-items: stretch; min-height: 54px; }
.navbar__link { display: inline-flex; align-items: center; gap: 9px; padding: 0 18px; }
.navbar__icone { color: var(--cor-texto-suave); font-size: 1rem; }
.navbar__link--ativo .navbar__icone { color: var(--cor-dourado-700); }
.navbar__spacer { flex: 1; }
.navbar__acao,
.navbar__logout button {
  align-self: center; margin: 8px 0 8px 10px; padding: 7px 14px;
  border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
  background: #fff; color: var(--cor-texto); font: inherit; font-size: var(--texto-xs);
  font-weight: 600; cursor: pointer;
}
.navbar__logout { display: flex; }
.navbar__logout button { color: var(--cor-erro); margin-right: 0; }

/* --------------------------------------------------------------------------
   16. Solicitação com coluna lateral
   -------------------------------------------------------------------------- */
.solicitacao-intro {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); margin-bottom: var(--esp-5);
}
.solicitacao-intro .page-header { flex: 1; margin: 0; padding: 0; border: 0; }
.page-header__identificacao { display: flex; align-items: center; gap: var(--esp-4); }
.page-header__icone {
  width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center;
  border: 1px solid #dfcf9f; border-radius: var(--raio-md); background: #fbf8ef;
  color: var(--cor-dourado-700); font-size: 1.7rem;
}
.solicitacao-intro__acoes { display: flex; align-items: center; gap: var(--esp-3); }
/* A tela de roteiro usa a mesma grade: conteúdo + lateral fixa. */
.solicitacao-layout,
.editor-roteiro {
  display: grid; grid-template-columns: minmax(0, 1fr) 390px;
  gap: 20px; align-items: start;
}
.solicitacao-conteudo, .solicitacao-sidebar { min-width: 0; }
.app-shell__main:has(#form-solicitacao) { padding-bottom: 10px; }
.solicitacao-conteudo .section-card:last-child { margin-bottom: 0; }
.solicitacao-sidebar {
  position: sticky; top: 14px;
  height: calc(100vh - 28px); height: calc(100dvh - 28px);
  max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px);
  display: grid; grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 1fr);
  gap: 10px; overflow: hidden;
}
/* No resumo a lateral tem só timeline + ações: dimensiona pelo conteúdo
   (evita cortar etapas ou sobrar espaço) e rola a timeline se faltar tela. */
.solicitacao-sidebar--resumo {
  height: auto;
  grid-template-rows: minmax(0, 1fr) auto;
}
.solicitacao-sidebar--resumo .timeline { overflow-y: auto; }
.solicitacao-sidebar.is-stuck {
  position: fixed; top: 14px; left: var(--sidebar-left); width: var(--sidebar-width);
  transform: translateY(var(--sidebar-footer-shift, 0px));
}
.section-card { border-radius: 9px; margin-bottom: 12px; box-shadow: none; }
.section-card__cabecalho { padding: 11px 14px; background: #fff; }
.section-card__numero { width: 24px; height: 24px; background: #bea45a; font-size: 0.7rem; }
.section-card__titulo { color: #bea45a; font-size: 0.72rem; }
.section-card__corpo { padding: 13px 14px 15px; }
.form-grid { gap: 12px 14px; }
.form-grid--separado { margin-top: 13px; }
.form-label { margin-bottom: 5px; font-size: 0.66rem; letter-spacing: 0.25px; }
.form-controle {
  min-height: 38px; padding: 0.5rem 0.68rem; border-color: #d8dadd; font-size: 0.78rem;
}
.ui-icon { display: block; width: 1em; height: 1em; flex: 0 0 auto; }
.form-controle-wrapper { position: relative; }
.form-controle-wrapper .form-controle { display: block; }
.form-controle__icone {
  position: absolute; z-index: 1; top: 50%; right: 12px; transform: translateY(-50%);
  display: grid; place-items: center; color: #68717c; font-size: 1rem;
  pointer-events: none; transition: color 0.15s ease, transform 0.15s ease;
}
.form-controle-wrapper--select:hover .form-controle__icone,
.form-controle-wrapper--date:hover .form-controle__icone { color: var(--cor-dourado-700); }
.form-controle-wrapper--select:focus-within .form-controle__icone {
  color: var(--cor-dourado-700);
}
.form-controle-wrapper--select select:open + .form-controle__icone { transform: translateY(-50%) rotate(180deg); }
.form-controle-wrapper--select select { cursor: pointer; }
.form-controle-wrapper--select select:has(option[value=""]:checked) { color: #858b93; }
.form-controle-wrapper--select option { color: var(--cor-texto); background: #fff; }
.custom-select .custom-select__trigger { display: none; }
.custom-select.is-enhanced .custom-select__native {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.custom-select.is-enhanced .custom-select__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding-right: 42px; background: #fff; color: #858b93; text-align: left;
  cursor: pointer;
}
.custom-select__trigger.has-value { color: #000; }
.custom-select__menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; left: 0;
  max-height: 300px; overflow: hidden; padding: 6px;
  border: 1px solid #cfd3d7; border-radius: 8px; background: #fff;
  box-shadow: 0 14px 30px rgba(28, 31, 35, 0.16);
}
.custom-select__menu[hidden] { display: none; }
.custom-select__lista {
  max-height: 248px; display: grid; gap: 2px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #c8ccd1 transparent;
}
.custom-select.is-enhanced .custom-select__combobox {
  padding-right: 42px; background: #fff; color: var(--cor-texto);
}
.custom-select__combobox::placeholder { color: #858b93; }
.custom-select__vazio {
  margin: 0; padding: 18px 10px; color: var(--cor-texto-suave);
  font-size: 0.74rem; text-align: center;
}
.custom-select__opcao {
  width: 100%; min-height: 38px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 8px 10px;
  border: 0; border-radius: 6px; background: #fff; color: var(--cor-texto);
  font: inherit; font-size: 0.78rem; line-height: 1.3; text-align: left;
  cursor: pointer;
}
.custom-select__opcao[hidden] { display: none; }
.custom-select__opcao:hover,
.custom-select__opcao:focus-visible {
  outline: 0; background: #f7f3e8; color: #bea45a;
}
.custom-select__opcao.is-selected {
  background: #f4edd8; color: #bea45a; font-weight: 650;
}
.custom-select__check {
  flex: 0 0 auto; color: var(--cor-dourado-700); opacity: 0;
}
.custom-select__check .ui-icon { width: 15px; height: 15px; }
.custom-select__opcao.is-selected .custom-select__check { opacity: 1; }
.custom-select.is-open .custom-select__trigger {
  border-color: var(--cor-dourado-700);
  box-shadow: 0 0 0 3px rgba(190, 164, 90, 0.18);
}
.custom-select.is-open .custom-select__trigger .form-controle__icone {
  color: var(--cor-dourado-700); transform: translateY(-50%) rotate(180deg);
}
.custom-select.is-invalid .custom-select__trigger {
  border-color: var(--cor-erro); box-shadow: 0 0 0 3px rgba(190, 50, 50, 0.12);
}
.section-card:has(.custom-select.is-open) {
  position: relative; z-index: 20; overflow: visible;
}
.form-controle:hover:not(:disabled):not([readonly]) { border-color: #aeb4bb; }
.form-controle:focus {
  border-color: var(--cor-dourado-700);
  box-shadow: 0 0 0 3px rgba(190, 164, 90, 0.18);
}
.form-controle-wrapper--date .form-controle { padding-right: 42px; cursor: pointer; color-scheme: light; }
.form-controle-wrapper--date .form-controle::-webkit-calendar-picker-indicator {
  z-index: 2; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer;
}
.form-controle-wrapper--date:not(.is-enhanced) .custom-date__native::-webkit-calendar-picker-indicator {
  opacity: 1;
}
.form-controle-wrapper--date .form-controle__icone { font-size: 1.05rem; }
.custom-date .custom-date__trigger { display: none; }
.custom-date.is-enhanced .custom-date__native {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.custom-date.is-enhanced .custom-date__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: #fff; color: #858b93; text-align: left; cursor: pointer;
}
.custom-date__range-native { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.custom-date.is-enhanced .custom-date__range-native {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}
.custom-date__trigger.has-value { color: var(--cor-texto); }
.custom-date__calendar {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: min(300px, calc(100vw - 32px)); padding: 12px;
  border: 1px solid #cfd3d7; border-radius: 9px; background: #fff;
  box-shadow: 0 14px 30px rgba(28, 31, 35, 0.16);
}
.custom-date__calendar[hidden] { display: none; }
.custom-date__cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 38px; margin-bottom: 7px;
}
.custom-date__mes {
  color: var(--cor-texto); font-size: 0.82rem; font-weight: 700;
}
.custom-date__instrucao {
  display: block; margin-top: 2px; color: #7b8189; font-size: 0.62rem;
}
.custom-date__navegacao { display: flex; align-items: center; gap: 3px; }
.custom-date__navegacao button {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: #fff; color: #4f5660; cursor: pointer;
}
.custom-date__navegacao button:hover,
.custom-date__navegacao button:focus-visible {
  outline: 0; background: #f4edd8; color: #bea45a;
}
.custom-date__navegacao .ui-icon { width: 17px; height: 17px; }
/* Salto de ano: mesma área de clique, peso menor que o passo de mês. */
.custom-date__salto {
  width: 28px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}
.custom-date__semana,
.custom-date__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.custom-date__semana { margin-bottom: 3px; }
.custom-date__semana span {
  height: 28px; display: grid; place-items: center; color: #747b84;
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
}
.custom-date__dia {
  position: relative; min-width: 0; height: 32px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 6px; background: #fff;
  color: var(--cor-texto); font: inherit; font-size: 0.74rem; cursor: pointer;
}
.custom-date__dia:hover,
.custom-date__dia:focus-visible {
  outline: 0; border-color: #dfcf9f; background: #f7f3e8; color: #bea45a;
}
.custom-date__dia.is-outside { color: #a4a9af; }
.custom-date__dia.is-today { border-color: #bea45a; color: #bea45a; font-weight: 700; }
.custom-date__dia.is-selected {
  border-color: #bea45a; background: #bea45a; color: #fff; font-weight: 700;
}
.custom-date__dia.is-in-range {
  border-color: #eadfbf; border-radius: 3px; background: #f7f1df; color: #bea45a;
}
.custom-date__dia.is-range-start,
.custom-date__dia.is-range-end {
  border-color: #bea45a; border-radius: 6px; background: #bea45a; color: #fff;
  font-weight: 700;
}
.custom-date__rodape {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid #eceef0;
}
.custom-date__rodape button {
  min-height: 30px; padding: 4px 7px; border: 0; border-radius: 5px;
  background: #fff; color: #bea45a; font: inherit; font-size: 0.7rem;
  font-weight: 650; cursor: pointer;
}
.custom-date__rodape button:hover,
.custom-date__rodape button:focus-visible { outline: 0; background: #f4edd8; }

/* Calendário de várias datas: o gatilho é o próprio botão da página, e o
   número na quina do dia diz a ordem em que a data foi escolhida. */
.custom-date--multi { position: relative; display: inline-block; }

/* "Data 2 de 3 · Londrina → Maringá": para qual passo vai a próxima data. */
.custom-date__contexto {
  margin: 0 0 var(--esp-2);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--cor-dourado-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Acima do mapa: o Leaflet e os botões sobre ele usam z-index 500. */
.custom-date__calendar--multi {
  left: auto; right: 0; z-index: 900;
  width: min(320px, calc(100vw - 32px));
}

/* Hospedado dentro de um campo (as datas do bate-volta), o painel abre pela
   esquerda dele, como qualquer calendário de campo. */
.custom-date .custom-date__calendar--multi { left: 0; right: auto; }
.custom-date__dica {
  margin: 0 0 9px; color: var(--cor-texto-suave); font-size: 0.7rem;
}
.custom-date__rodape--multi { gap: 8px; }
.custom-date__rodape-acoes { display: flex; gap: 3px; }
.custom-date__contagem {
  color: var(--cor-texto-suave); font-size: 0.7rem; font-weight: 700;
}
/* No calendário de várias datas os dias do meio guardam o mesmo canto dos
   demais: aqui não há a faixa contínua que justifica o raio menor do
   componente de intervalo. */
.custom-date__calendar--multi .custom-date__dia.is-in-range { border-radius: 6px; }

.custom-date__dia[data-ordem]::after {
  content: attr(data-ordem);
  position: absolute; top: 1px; right: 3px;
  font-size: 0.55rem; font-weight: 700; line-height: 1;
}
.custom-date.is-open .custom-date__trigger {
  border-color: var(--cor-dourado-700);
  box-shadow: 0 0 0 3px rgba(190, 164, 90, 0.18);
}
.custom-date.is-open .custom-date__trigger .form-controle__icone { color: var(--cor-dourado-700); }
.custom-date.is-invalid .custom-date__trigger {
  border-color: var(--cor-erro); box-shadow: 0 0 0 3px rgba(190, 50, 50, 0.12);
}
.section-card:has(.custom-date.is-open) {
  position: relative; z-index: 20; overflow: visible;
}
.form-controle--somente-leitura { background: #f0f1f2; color: #656b73; }
textarea.form-controle { min-height: 68px; }
.form-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
/* Serviços sempre distribuídos em duas colunas de mesma largura. */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.chip-grid--compacto {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
}
.chip-grid--equipes {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}
.chip-grid--equipes .check-chip {
  min-width: 92px;
  flex: 1 1 0;
  white-space: nowrap;
}
.equipe-alocacao-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.equipe-alocacao-grid:has(> .equipe-alocacao:only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.equipe-alocacao-grid:has(> .equipe-alocacao:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.equipe-alocacao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: end;
}
.equipe-alocacao .check-chip {
  min-height: 42px;
}
.equipe-alocacao__quantidade label {
  display: block;
  margin-bottom: 3px;
  color: var(--cor-texto-suave);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}
.equipe-alocacao__quantidade .form-controle {
  min-height: 42px;
  padding-inline: 10px;
  text-align: center;
}
.equipe-alocacao__quantidade .form-controle:disabled {
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  opacity: 0.65;
}
.check-chip {
  position: relative; min-height: 36px; display: flex; align-items: center;
  justify-content: flex-start; gap: 8px; padding: 7px 11px; border: 1px solid var(--cor-borda);
  border-radius: 8px; background: var(--cor-superficie); color: var(--cor-texto);
  font-size: 0.72rem; font-weight: 600; line-height: 1.3; cursor: pointer; user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.check-chip input, .segmented-control input, .decision-option input {
  position: absolute; opacity: 0; pointer-events: none;
}
.check-chip span {
  width: 17px; height: 17px; flex: 0 0 17px; display: grid; place-items: center;
  border: 1.5px solid #aeb4bb; border-radius: 5px; background: #fff; color: #fff;
  font-size: 0.62rem; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.check-chip span .ui-icon {
  width: 11px; height: 11px; opacity: 0; transform: scale(0.65);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.check-chip:hover { border-color: #bea45a; background: #fffdf8; }
.check-chip:has(input:focus-visible) {
  border-color: #bea45a; box-shadow: 0 0 0 3px rgba(190, 164, 90, 0.18);
}
.check-chip:has(input:checked) { border-color: #bea45a; background: #fbf6e8; }
.check-chip:has(input:checked) span { border-color: #bea45a; background: #bea45a; }
.check-chip:has(input:checked) span .ui-icon { opacity: 1; transform: scale(1); }
.segmented-control {
  display: inline-grid; grid-template-columns: repeat(2, minmax(58px, 1fr));
  overflow: hidden; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
}
.segmented-control label span {
  display: block; padding: 8px 14px; background: #fff; text-align: center;
  font-size: 0.72rem; cursor: pointer;
}
.segmented-control label + label span { border-left: 1px solid var(--cor-borda); }
.segmented-control input:checked + span { background: #bea45a; color: #fff; font-weight: 700; }
.equipe-alocacao__nome {
  display: flex; align-items: center; min-height: 42px;
  padding: 0 14px; border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm); background: var(--cor-superficie);
  font-size: 0.82rem; font-weight: 600; color: var(--cor-texto);
}
.despacho-quantidades-ajuda { margin-bottom: 10px; font-size: 0.8rem; }

/* Encerramento em cartões, na mesma linguagem dos cards de decisão:
   confirmar (verde) e cancelamento do evento (roxo) lado a lado. */
.encerramento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--esp-4);
  align-items: stretch;
}

/* Cartões com a mesma altura e botões rentes à base. */
.encerramento-cartao--confirmar form { margin-top: auto; }
.encerramento-cartao--cancelar .form-controle { margin-top: auto; }

.encerramento-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5);
  border: 1px solid currentColor;
  border-radius: var(--raio-md);
}

.encerramento-cartao__icone { display: flex; }
.encerramento-cartao__icone .ui-icon { width: 22px; height: 22px; }
.encerramento-cartao strong { font-size: var(--texto-sm); }
.encerramento-cartao p { margin: 0; font-size: var(--texto-xs); color: var(--cor-texto-suave); }
.encerramento-cartao .form-controle { background: var(--cor-superficie); color: var(--cor-texto); }

.encerramento-cartao--confirmar { color: var(--cor-sucesso); background: #f2f9f5; }
.encerramento-cartao--confirmar strong { color: var(--cor-sucesso); }
.encerramento-cartao--cancelar { color: #7a4e96; background: #f7f2fb; }
.encerramento-cartao--cancelar strong { color: #7a4e96; }

.resumo-dg {
  margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px 28px;
}
.resumo-dg__item { display: grid; gap: 3px; }
.resumo-dg__item--largo { grid-column: 1 / -1; }
.resumo-dg dt {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cor-texto-suave);
}
.resumo-dg dd { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--cor-texto); }
/* Texto corrido (descrição, observações) respira e não vira peso de rótulo. */
.resumo-dg__texto-longo {
  font-weight: 400;
  line-height: 1.55;
  max-width: 70ch;
}

/* Aviso de devolução: o motivo do ajuste é a primeira coisa a ser lida. */
.aviso-devolucao {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: var(--esp-5);
  padding: 16px 20px;
  border: 1px solid var(--cor-alerta);
  border-left-width: 4px;
  border-radius: var(--raio-md);
  background: var(--cor-alerta-fundo);
}
.aviso-devolucao__icone { display: flex; color: var(--cor-alerta); padding-top: 2px; }
.aviso-devolucao__icone .ui-icon { width: 20px; height: 20px; }
.aviso-devolucao__texto { flex: 1; display: grid; gap: 4px; }
.aviso-devolucao__texto strong { color: var(--cor-alerta); }
.aviso-devolucao__texto p { margin: 0; color: var(--cor-texto); }
.aviso-devolucao__texto small { color: var(--cor-texto-suave); font-size: var(--texto-xs); }
.aviso-devolucao .btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .aviso-devolucao { flex-wrap: wrap; }
}

.anexos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.anexo-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm); background: #fff;
}
.anexo-item__icone {
  display: grid; place-items: center; flex: 0 0 38px; height: 38px;
  border-radius: var(--raio-sm); background: var(--cor-dourado-100);
  color: var(--cor-dourado-500);
}
.anexo-item__icone .ui-icon { width: 18px; height: 18px; }
.anexo-item__info { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.anexo-item__nome {
  font-size: 0.86rem; font-weight: 600; color: var(--cor-texto);
  overflow-wrap: anywhere;
}
.anexo-item__meta { font-size: 0.74rem; color: var(--cor-texto-suave); }
.anexo-item__acoes { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .anexo-item { flex-wrap: wrap; }
  .anexo-item__acoes { width: 100%; justify-content: flex-end; }
}

/* Cards de decisão: título colorido, ícone e a explicação de cada opção. */
.decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.decision-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--esp-4) var(--esp-3);
  border: 1px solid currentColor;
  border-radius: var(--raio-md);
  background: #fff;
  text-align: center;
  cursor: pointer;
}
/* Cada opção com o fundo tingido da sua cor, como no modelo. */
.decision-option--success { color: var(--cor-sucesso); background: #f2f9f5; }
.decision-option--danger { color: var(--cor-erro); background: #fdf4f3; }
.decision-option--cancel { color: #7a4e96; background: #f7f2fb; }
.decision-option--return { color: var(--cor-alerta); background: #fdf8ec; }
.decision-option__icone { display: grid; place-items: center; }
.decision-option__icone .ui-icon { width: 22px; height: 22px; }
.decision-option strong {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.decision-option small {
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--cor-texto-suave);
}
.decision-option:has(input:checked) {
  background: #fdfaf2;
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* Proposta do solicitante: caixas neutras que destacam o que veio dele. */
.equipe-alocacao--proposta {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  padding: var(--esp-2) var(--esp-3);
}
.side-card {
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--cor-borda); border-radius: 9px; background: #fff;
}
.side-card__cabecalho {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border-bottom: 1px solid var(--cor-borda);
}
.side-card__cabecalho h2 {
  color: #bea45a; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px;
}
.side-card__icone { color: #bea45a; font-size: 1rem; }
.resumo-lista {
  min-height: 0; flex: 1 1 auto; margin: 0; padding: 0 14px; overflow-y: hidden;
}
.resumo-lista > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  align-items: center; min-height: 32px; border-bottom: 1px solid #eceeef;
}
.resumo-lista > div:last-child { border-bottom: 0; }
.resumo-lista dt { color: var(--cor-texto-suave); font-size: 0.7rem; }
.resumo-lista dd {
  margin: 0; max-width: 210px; text-align: right; font-size: 0.7rem; font-weight: 700;
}
.timeline {
  min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column;
  margin: 0; padding: 14px 16px 6px; overflow-y: hidden; list-style: none;
}
/* Etapas com o respiro do modelo: cada informação em sua própria linha. */
.timeline__item {
  position: relative; display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding-bottom: 22px;
}

.timeline__item:last-child { padding-bottom: 10px; }
.timeline__item:not(:last-child)::after {
  content: ""; position: absolute; top: 28px; bottom: 2px; left: 12px;
  width: 2px; background: #d7dade;
}
.timeline__marcador {
  z-index: 1; width: 26px; height: 26px; display: grid; place-items: center;
  border: 2px solid #aeb4bb; border-radius: 50%; background: #fff;
  color: #fff; font-size: 0.65rem;
}
.timeline__marcador .ui-icon { width: 14px; height: 14px; stroke-width: 2.4; }
.timeline__item--concluido .timeline__marcador { border-color: var(--cor-sucesso); background: var(--cor-sucesso); }
.timeline__item--concluido::after { background: #8cc9a5; }
.timeline__item--atual .timeline__marcador {
  border-color: #bea45a; box-shadow: inset 0 0 0 4px #fff; background: #bea45a;
}
.timeline__item strong { display: block; font-size: 0.8rem; font-weight: 600; }
.timeline__item small {
  display: block; margin-top: 4px; color: var(--cor-texto-suave);
  font-size: 0.7rem; line-height: 1.45;
}
.timeline__estado { font-weight: 600; }
.timeline__item--concluido .timeline__estado { color: var(--cor-sucesso); }
.timeline__item--atual .timeline__estado { color: var(--cor-dourado-700); }
.timeline__etiqueta {
  padding: 3px 8px; border: 1px solid #bea45a; border-radius: 4px;
  color: #bea45a; font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
}
/* Etapas do preenchimento (lateral do formulário). */
.etapas {
  min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column;
  justify-content: space-between; margin: 0; padding: 10px 14px 12px;
  overflow-y: hidden; list-style: none;
}
.etapa { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.etapa__numero {
  width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center;
  border: 2px solid #aeb4bb; border-radius: 50%;
  color: var(--cor-texto-suave); font-size: 0.62rem; font-weight: 700;
}
.etapa strong { display: block; font-size: 0.72rem; font-weight: 600; }
.etapa__estado { display: block; margin-top: 1px; color: var(--cor-texto-suave); font-size: 0.62rem; font-weight: 600; }
.etapa--concluida .etapa__numero { border-color: var(--cor-acento); background: var(--cor-acento); color: #fff; }
.etapa--concluida .etapa__estado { color: var(--cor-dourado-700); }
.etapa--andamento .etapa__numero { border-color: var(--cor-acento); color: var(--cor-dourado-700); }
.etapa--andamento .etapa__estado { color: var(--cor-dourado-700); }

.checklist {
  min-height: 0; flex: 1 1 auto; margin: 0; padding: 7px 14px 9px;
  overflow-y: hidden; list-style: none;
}
.checklist li {
  min-height: 25px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; color: var(--cor-texto-suave); font-size: 0.7rem;
}
.checklist i {
  width: 18px; height: 18px; display: grid; place-items: center;
  border: 1px solid #aeb4bb; border-radius: 50%; font-style: normal;
}
.checklist li.is-complete { color: var(--cor-texto); }
.checklist li.is-complete i { border-color: var(--cor-sucesso); color: var(--cor-sucesso); }
.checklist li.is-complete i::before {
  content: ""; width: 7px; height: 4px; margin-top: -2px;
  border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
}

@media (max-width: 1180px) {
  .solicitacao-layout,
  .editor-roteiro { grid-template-columns: minmax(0, 1fr) 330px; }
  .navbar__link { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 980px) {
  .solicitacao-layout,
  .editor-roteiro { grid-template-columns: 1fr; }
  .solicitacao-sidebar, .solicitacao-sidebar.is-stuck {
    position: static; height: auto; max-height: none; overflow: visible;
    display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: none;
  }
  .solicitacao-sidebar .side-card:first-child { grid-column: 1 / -1; }
  .resumo-lista, .timeline, .checklist { overflow: visible; }
  .navbar__acao, .navbar__logout { display: none; }
}
@media (max-width: 760px) {
  .top-header__sigla, .top-header__divisor { display: none; }
  .top-header__usuario-dados { display: none; }
  .solicitacao-intro { align-items: flex-start; flex-direction: column; }
  .solicitacao-intro__acoes { width: 100%; flex-wrap: wrap; }
  .solicitacao-sidebar { display: flex; }
  .decision-grid { grid-template-columns: 1fr; }
  .page-header__icone { width: 48px; height: 48px; flex-basis: 48px; }
}

/* --------------------------------------------------------------------------
   Cadastros — cartões da página inicial (dourado no hover, como no modelo)
   -------------------------------------------------------------------------- */
.cadastro-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-5);
}
.cadastro-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--esp-5);
  align-items: center;
  padding: 30px 24px;
  border: 1px solid #edeff1;
  border-radius: 14px;
  background: #fff;
  color: var(--cor-texto);
  box-shadow: 0 1px 3px rgba(51, 51, 51, 0.05);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cadastro-card:hover, .cadastro-card:focus-visible {
  border-color: var(--cor-acento);
  background: #fdf9ef;
  box-shadow: 0 2px 10px rgba(190, 164, 90, 0.25);
  text-decoration: none;
}
.cadastro-card__icone {
  width: 72px; height: 72px; display: grid; place-items: center;
  border-radius: 20px; background: #f7f1e3; color: var(--cor-dourado-700);
}
.cadastro-card__icone .ui-icon { width: 34px; height: 34px; stroke-width: 1.6; }
.cadastro-card__info { display: grid; justify-items: start; gap: 6px; }
.cadastro-card__titulo { font-size: 0.95rem; font-weight: 600; }
.cadastro-card__valor { font-size: 2.5rem; font-weight: 700; line-height: 1.05; }
.cadastro-card__barra { width: 64px; height: 6px; margin-top: 4px; border-radius: 999px; }
.cadastro-card__seta { color: var(--cor-texto-suave); display: flex; }
.cadastro-card__seta .ui-icon { width: 22px; height: 22px; }
.cadastro-card:hover .cadastro-card__seta { color: var(--cor-dourado-700); }
@media (max-width: 1400px) { .cadastro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .cadastro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cadastro-grid { grid-template-columns: 1fr; } }

/* Formulário de cadastro em cartão único de largura total. */
.cadastro-form__cabecalho {
  margin-bottom: var(--esp-5);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
}
.cadastro-form__titulo { color: var(--cor-dourado-700); font-size: 1.05rem; font-weight: 700; }
.cadastro-form__intro { margin: 4px 0 0; color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.cadastro-form__nota {
  display: flex; align-items: center; gap: 8px;
  margin: var(--esp-4) 0 0; color: var(--cor-texto-suave); font-size: var(--texto-sm);
}
.cadastro-form__nota-icone { display: flex; color: var(--cor-dourado-700); }
.cadastro-form__nota-icone .ui-icon { width: 18px; height: 18px; }

/* Busca de largura contida (listas de cadastros, como no modelo). */
.lista-filtros__busca--curta { flex: 0 1 420px; }

/* Variante com rótulos visíveis acima dos campos (lista de usuários):
   alinha tudo pela base para o botão acompanhar os controles. */
.lista-filtros--rotulos { align-items: flex-end; }
.lista-filtros--rotulos > .form-campo:not(.lista-filtros__busca) { flex: 0 1 300px; }

/* --------------------------------------------------------------------------
   Usuários — lista e formulário
   -------------------------------------------------------------------------- */
.usuario-celula { display: flex; align-items: center; gap: 12px; }
.usuario-celula__dados { display: grid; }
.usuario-celula__dados small { color: var(--cor-texto-suave); font-size: 0.7rem; }

.usuario-avatar {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  border-radius: 50%; background: #d9c58c; color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px;
}
.usuario-avatar--super, .usuario-avatar--administrador { background: #333333; }
.usuario-avatar--gestor_dg { background: var(--cor-acento); }
.usuario-avatar--inativo { background: #c9cdd2; }

.perfil-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 6px;
  background: #eceef0; color: #4b4f54;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  white-space: nowrap;
}
.perfil-badge .ui-icon { width: 12px; height: 12px; }
.perfil-badge--super { background: #2f2a3d; color: #fff; }
.perfil-badge--super .ui-icon { color: #e7c565; }
.perfil-badge--gestor_dg { background: var(--cor-acento); color: #fff; }
.perfil-badge--administrador { background: #4b4f54; color: #fff; }

/* Cabeçalho do formulário com painel informativo à direita. */
.usuario-cabecalho {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: var(--esp-5); align-items: start;
}

.painel-dica {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border: 1px solid var(--cor-borda);
  border-radius: 10px; background: #fff;
}
.painel-dica strong { display: block; margin-bottom: 2px; font-size: var(--texto-sm); }
.painel-dica p, .painel-dica li { margin: 0; color: var(--cor-texto-suave); font-size: var(--texto-xs); line-height: 1.55; }
.painel-dica ul { margin: 4px 0 0; padding-left: 16px; display: grid; gap: 2px; }
.painel-dica__icone { display: flex; margin-top: 2px; color: var(--cor-dourado-700); }
.painel-dica__icone .ui-icon { width: 18px; height: 18px; }
.painel-dica--destaque { background: #faf6ea; border-color: #e6d9b4; }

/* Linha do formulário com campos à esquerda e painel de apoio à direita. */
.usuario-form__linha {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--esp-5); align-items: start; margin-top: var(--esp-4);
}
.usuario-form__linha:first-child { margin-top: 0; }

@media (max-width: 1100px) {
  .usuario-cabecalho, .usuario-form__linha { grid-template-columns: 1fr; }
}

/* Alterar senha — cartão estreito e centralizado, como no modelo. */
.senha-card { max-width: 720px; margin: 0 auto; }
.senha-card__acoes {
  display: flex; justify-content: flex-end; gap: var(--esp-3);
  padding: 14px 16px; border-top: 1px solid var(--cor-borda);
}
/* Coluna flex (não grid): .form-campo traz grid-column pensado no form-grid. */
.senha-corpo { display: flex; flex-direction: column; align-items: stretch; gap: var(--esp-4); }
.senha-corpo .requisitos-senha { margin-top: var(--esp-2); }
.senha-corpo .dica-seguranca { margin-top: 0; }
.forca-senha { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.forca-senha__rotulo { font-size: var(--texto-xs); font-weight: 600; }
.forca-senha__barras { display: flex; flex: 0 1 280px; gap: 6px; }
.forca-senha__barra { height: 5px; flex: 1; border-radius: 999px; background: #d8dbdf; transition: background 0.15s ease; }
.forca-senha__barra--fraca.is-ativa { background: #d64545; }
.forca-senha__barra--media.is-ativa { background: var(--cor-acento); }
.forca-senha__barra--forte.is-ativa { background: var(--cor-sucesso); }
.forca-senha__texto { font-size: var(--texto-xs); font-weight: 700; }
.forca-senha__texto[data-nivel="1"] { color: #d64545; }
.forca-senha__texto[data-nivel="2"] { color: var(--cor-dourado-700); }
.forca-senha__texto[data-nivel="3"] { color: var(--cor-sucesso); }

.requisitos-senha {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: var(--esp-5); padding: 14px 16px;
  border: 1px solid #e6d9b4; border-radius: 10px; background: #faf6ea;
}
.requisitos-senha strong { display: block; margin-bottom: 6px; color: var(--cor-dourado-700); font-size: var(--texto-sm); }
.requisitos-senha > div { flex: 1; }
.requisitos-senha__icone { display: flex; margin-top: 2px; color: var(--cor-dourado-700); }
.requisitos-senha__icone .ui-icon { width: 20px; height: 20px; }
.requisitos-senha__lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 24px; margin: 0; padding: 0; list-style: none;
}
.requisitos-senha__lista li {
  display: flex; align-items: center; gap: 8px;
  color: var(--cor-texto); font-size: var(--texto-xs);
}
.requisitos-senha__lista .ui-icon { width: 15px; height: 15px; color: #a8adb3; }
.requisitos-senha__lista li.is-ok .ui-icon { color: var(--cor-sucesso); }

.dica-seguranca {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: var(--esp-4); padding: 14px 16px;
  border: 1px solid #c9dcf2; border-radius: 10px; background: #eef4fb;
}
.dica-seguranca strong {
  display: block; margin-bottom: 2px; color: #2b6cb0;
  font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.dica-seguranca p { margin: 0; color: var(--cor-texto); font-size: var(--texto-xs); }
.dica-seguranca__icone { display: flex; margin-top: 2px; color: #2b6cb0; }
.dica-seguranca__icone .ui-icon { width: 20px; height: 20px; }

/* Contagem de registros no canto direito do cartão de filtros. */
.lista-filtros__contagem {
  margin-left: auto; align-self: center;
  color: var(--cor-texto-suave); font-size: var(--texto-sm); white-space: nowrap;
}

/* Coluna decorativa com ícone de documento (listas de cadastros). */
.tabela__col-icone { width: 40px; padding-right: 0; }
.tabela__icone-doc { display: flex; color: var(--cor-dourado-700); }
.tabela__icone-doc .ui-icon { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Listagem e detalhe de solicitações
   -------------------------------------------------------------------------- */
/* Chip somente leitura (detalhe): exibido como selecionado. */
.check-chip--estatico {
  cursor: default;
  border-color: var(--cor-acento);
  background: #fbf6e8;
}

.check-chip--estatico span {
  border-color: var(--cor-acento);
  background: var(--cor-acento);
}

.check-chip--estatico span .ui-icon {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   Página de detalhe da solicitação
   -------------------------------------------------------------------------- */

/* Variações dos summary cards da visão geral do detalhe. */
.summary-card__valor--texto {
  font-size: var(--texto-lg);
  line-height: 1.35;
  margin-top: var(--esp-2);
  font-weight: 700;
}

.summary-card__valor--badge {
  margin-top: var(--esp-3);
}

/* Grade de cards do detalhe (2 colunas + cards largos). */
.detalhe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-5);
}

.detalhe-card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.detalhe-card--largo {
  grid-column: 1 / -1;
}

.detalhe-card__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--cor-borda);
  background: #fafbfc;
}

.detalhe-card__icone {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  background: var(--cor-dourado-100);
  color: var(--cor-dourado-700);
  display: grid;
  place-items: center;
}

.detalhe-card__icone .ui-icon {
  width: 17px;
  height: 17px;
}

.detalhe-card__titulo {
  font-size: var(--texto-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--cor-dourado-700);
}

.detalhe-card__corpo {
  padding: var(--esp-3) var(--esp-5) var(--esp-5);
  flex: 1;
}

.detalhe-card__corpo--tabela {
  padding: 0;
}

.detalhe-card__rotulo {
  font-size: var(--texto-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cor-texto-suave);
  margin: var(--esp-3) 0;
}

/* Linhas rótulo/valor com divisórias, no padrão do painel de resumo. */
.linhas-dados {
  margin: 0;
}

.linhas-dados > div {
  display: grid;
  grid-template-columns: minmax(150px, 38%) 1fr;
  gap: var(--esp-4);
  padding: var(--esp-3) 0;
  border-bottom: 1px solid #eef0f2;
  align-items: baseline;
}

.linhas-dados > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

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

.linhas-dados dd {
  margin: 0;
  min-width: 0;
  font-size: var(--texto-sm);
  font-weight: 700;
  color: var(--cor-texto);
  overflow-wrap: break-word;
}

.linhas-dados--separado {
  margin-top: var(--esp-4);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--cor-borda);
}

@media (max-width: 1000px) {
  .detalhe-grid {
    grid-template-columns: 1fr;
  }
}

.tabela__acoes {
  white-space: nowrap;
}

.tabela__acoes-grupo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  border-top: 1px solid var(--cor-borda);
  font-size: var(--texto-sm);
}

.paginacao__links {
  display: flex;
  gap: var(--esp-4);
}

.lista-filtros__acoes {
  display: flex;
  align-items: flex-end;
}

/* Atalhos de fila da listagem: a tarefa de cada perfil em um clique. */
.fila-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-4);
}

/* Retângulo arredondado, como no modelo visual: sem pílula e sem cor por
   categoria — só a fila ativa fica preenchida em grafite. */
.fila-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0.42rem 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  font-weight: 500;
}

.fila-chip strong {
  color: var(--cor-texto);
}

.fila-chip:hover {
  text-decoration: none;
  border-color: var(--cor-acento);
  color: var(--cor-texto);
}

.fila-chip--ativa {
  background: var(--cor-grafite-800);
  border-color: var(--cor-grafite-800);
  color: #ffffff;
  font-weight: 600;
}

.fila-chip--ativa strong {
  color: #ffffff;
}

@media (max-width: 760px) {
  .linhas-dados > div { grid-template-columns: 1fr; gap: 2px; }
}

.summary-card--link {
  display: block;
  color: inherit;
}

.summary-card--link:hover {
  text-decoration: none;
  border-color: var(--cor-acento);
}

/* Central de notificações — cartões agrupados por dia, como no modelo. */
.notificacoes-filtros {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); flex-wrap: wrap;
  margin-bottom: var(--esp-4); padding: 12px 16px;
}
.notificacoes-filtros__chips { margin: 0; }

.notificacoes-grupo { margin: var(--esp-5) 0 var(--esp-3); font-size: 1rem; font-weight: 700; }
.notificacoes-grupo:first-of-type { margin-top: var(--esp-2); }

.notificacao-cartao {
  display: flex; align-items: center; gap: var(--esp-4);
  margin-bottom: var(--esp-3); padding: 16px 18px;
  border: 1px solid var(--cor-borda); border-radius: 12px; background: #fff;
  color: var(--cor-texto); text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.notificacao-cartao:hover, .notificacao-cartao:focus-visible {
  border-color: var(--cor-acento); text-decoration: none;
  box-shadow: 0 1px 6px rgba(190, 164, 90, 0.2);
}
.notificacao-cartao--nova { background: #fbf6e8; border-color: #e6d9b4; }

.notificacao-cartao__icone {
  width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--cor-borda);
  background: #f4f5f6; color: var(--cor-texto-suave);
}
.notificacao-cartao--nova .notificacao-cartao__icone {
  border-color: #e6d9b4; background: var(--cor-dourado-100); color: var(--cor-dourado-700);
}
.notificacao-cartao__icone .ui-icon { width: 22px; height: 22px; }

.notificacao-cartao__ponto {
  width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #c9cdd2;
}
.notificacao-cartao--nova .notificacao-cartao__ponto { background: var(--cor-acento); }

.notificacao-cartao__conteudo { display: grid; gap: 3px; min-width: 0; }
.notificacao-cartao__conteudo strong { font-size: var(--texto-md); }
.notificacao-cartao__mensagem { color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.notificacao-cartao__meta {
  display: flex; align-items: center; gap: 10px; margin-top: 3px;
  color: var(--cor-texto-suave); font-size: var(--texto-xs);
}
.notificacao-cartao__quando { display: inline-flex; align-items: center; gap: 6px; }
.notificacao-cartao__quando .ui-icon { width: 14px; height: 14px; }
.notificacao-cartao__divisor { color: var(--cor-borda); }
.notificacao-cartao__tag {
  padding: 3px 10px; border-radius: 999px;
  background: #eceef0; color: var(--cor-texto-suave); font-weight: 600;
}
.notificacao-cartao--nova .notificacao-cartao__tag { background: #f2e6c8; color: var(--cor-dourado-700); }
.notificacao-cartao__seta { display: flex; margin-left: auto; color: var(--cor-texto-suave); }

.notificacoes-vazio {
  display: grid; justify-items: center; gap: 6px;
  padding: var(--esp-7) var(--esp-5); text-align: center;
}
.notificacoes-vazio__icone {
  width: 88px; height: 88px; display: grid; place-items: center;
  margin-bottom: var(--esp-2); border-radius: 50%;
  background: #f0f1f3; color: #9aa0a6;
}
.notificacoes-vazio__icone .ui-icon { width: 36px; height: 36px; }
.notificacoes-vazio strong { font-size: 1.05rem; }
.notificacoes-vazio p { margin: 0; color: var(--cor-texto-suave); font-size: var(--texto-sm); }

.acao-inline {
  display: inline;
}

.acao-inline__botao {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--cor-info);
  cursor: pointer;
}

.acao-inline__botao:hover {
  text-decoration: underline;
}

/* Linha inteira clicável nas tabelas de atalho (dashboard): o hover deixa
   claro que a linha abre a solicitação. */
.tabela--clicavel tbody tr[data-linha-url] {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.tabela--clicavel tbody tr[data-linha-url]:hover { background: #faf6ec; }

.tabela--clicavel tbody tr[data-linha-url]:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: -2px;
}

.tabela--clicavel .tabela__abrir .ui-icon {
  transition: transform 0.12s ease;
}

.tabela--clicavel tbody tr[data-linha-url]:hover .tabela__abrir .ui-icon {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .tabela--clicavel tbody tr[data-linha-url],
  .tabela--clicavel .tabela__abrir .ui-icon { transition: none; }
  .tabela--clicavel tbody tr[data-linha-url]:hover .tabela__abrir .ui-icon { transform: none; }
}

/* Campo de senha com botão de revelar. */
.campo-senha { position: relative; display: block; }
.campo-senha .form-controle { padding-right: 2.75rem; }
.campo-senha__alternar {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-suave);
  cursor: pointer;
}
.campo-senha__alternar:hover { color: var(--cor-texto); background: var(--cor-fundo); }
.campo-senha__alternar:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 1px;
}
.campo-senha__alternar .ui-icon { width: 18px; height: 18px; }

/* Cartão de notificação inteiro clicável. */
.notificacao--clicavel { cursor: pointer; }
.notificacao--clicavel:hover { background: var(--cor-fundo); }

/* --------------------------------------------------------------------------
   Tabela como cartões no celular
   Uma tabela de 8 colunas em 375px empurra status e ações para fora da tela,
   e a rolagem lateral escondia justamente o que se vai ler. Cada linha vira
   um cartão com "rótulo: valor", usando o data-rotulo de cada célula.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .tabela--cartoes-no-celular,
  .tabela--cartoes-no-celular tbody,
  .tabela--cartoes-no-celular tr,
  .tabela--cartoes-no-celular td {
    display: block;
    width: auto;
  }

  .tabela--cartoes-no-celular thead {
    /* Escondido do olho, mantido para leitores de tela. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabela--cartoes-no-celular tbody tr {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    margin: 0 var(--esp-4) var(--esp-3);
    padding: var(--esp-2) 0;
    background: var(--cor-superficie);
  }

  .tabela--cartoes-no-celular tbody tr:hover { background: var(--cor-superficie); }

  .tabela--cartoes-no-celular td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 40%) 1fr;
    gap: var(--esp-3);
    align-items: baseline;
    padding: var(--esp-2) var(--esp-4);
    border: 0;
  }

  .tabela--cartoes-no-celular td::before {
    content: attr(data-rotulo);
    font-size: var(--texto-xs);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
  }

  /* O selo de status não quebra linha; quando não couber ao lado do rótulo,
     ele desce para a linha seguinte em vez de vazar a borda do cartão. */
  .tabela--cartoes-no-celular td[data-rotulo="Status"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-1) var(--esp-3);
  }

  /* A célula de ações ocupa a largura toda, abaixo dos dados. */
  .tabela--cartoes-no-celular td.tabela__acoes {
    display: block;
    border-top: 1px solid var(--cor-borda);
    margin-top: var(--esp-2);
    padding-top: var(--esp-3);
  }

  .tabela--cartoes-no-celular .tabela__acoes-grupo { flex-wrap: wrap; }

  /* Sem colunas escondidas, a sombra de rolagem lateral perde a função. */
  .tabela-wrapper:has(.tabela--cartoes-no-celular) {
    overflow-x: visible;
    background: none;
  }
}

/* --------------------------------------------------------------------------
   Dashboard — gráfico mensal e painel lado a lado (modelo do redesign)
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn--com-icone {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.btn--com-icone .ui-icon { width: 17px; height: 17px; }

.dashboard-paineis {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--esp-5);
}

/* Os dois cards têm a mesma altura (stretch do grid); a tabela ocupa o card
   inteiro distribuindo a folga entre as linhas — sem vazio no rodapé. */
.dashboard-paineis > .card {
  display: flex;
  flex-direction: column;
}

.dashboard-paineis .tabela-wrapper { flex: 1; }
.dashboard-paineis .tabela-wrapper .tabela { height: 100%; }

@media (max-width: 1024px) {
  .dashboard-paineis { grid-template-columns: 1fr; }
}

.grafico-card { display: flex; flex-direction: column; }

.grafico-card__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
}

.grafico-card__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-md);
  font-weight: 600;
}

.grafico-card__titulo .ui-icon { width: 18px; height: 18px; color: var(--cor-texto-suave); }

/* Seletor de período discreto, integrado ao cabeçalho do card. */
.grafico-card__periodo .form-campo { width: 185px; }

.grafico-card__periodo .form-controle {
  width: auto;
  padding: 0.3rem 1.9rem 0.3rem 0.7rem;
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
  border-color: transparent;
  background: var(--cor-fundo);
}

.grafico-card__periodo .form-controle:hover,
.grafico-card__periodo .form-controle:focus {
  border-color: var(--cor-borda);
  color: var(--cor-texto);
}

.grafico-barras {
  display: flex;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5) var(--esp-4);
  flex: 1;
}

/* Eixo Y: os ticks se distribuem pela altura útil das barras. */
.grafico-barras__eixo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 260px;
  padding-bottom: 1.5rem; /* compensa a linha dos rótulos dos meses */
  font-size: 0.68rem;
  color: var(--cor-texto-fraco);
  font-variant-numeric: tabular-nums;
}

.grafico-barras__area {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 260px;
  /* Linhas de grade suaves nos mesmos pontos dos ticks (0, 1/3, 2/3, teto),
     descontando a faixa dos rótulos dos meses na base. */
  background:
    linear-gradient(to bottom, rgba(51, 51, 51, 0.07) 1px, transparent 1px) top left / 100% calc((100% - 1.5rem) / 3) repeat-y;
  border-bottom: none;
}

.grafico-barras__coluna {
  flex: 1;
  min-width: 0;
  height: 100%; /* altura definida para o % da barra resolver */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--esp-2);
}

.grafico-barras__barra {
  width: min(100%, 18px);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--cor-dourado-500);
}

.grafico-barras__coluna:hover .grafico-barras__barra { background: var(--cor-dourado-700); }

.grafico-barras__rotulo {
  font-size: 0.68rem;
  color: var(--cor-texto-fraco);
  line-height: 1;
}

.grafico-card__rodape {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-3) var(--esp-5);
  border-top: 1px solid var(--cor-borda);
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

.grafico-card__rodape .ui-icon { width: 14px; height: 14px; }

/* Chevron no fim da linha clicável: mostra que a linha abre a solicitação. */
.tabela__abrir {
  width: 2rem;
  color: var(--cor-texto-fraco);
  text-align: right;
}

.tabela__abrir .ui-icon { width: 15px; height: 15px; }

.tabela--clicavel tbody tr:hover .tabela__abrir { color: var(--cor-dourado-700); }

/* --------------------------------------------------------------------------
   Menu do avatar no cabeçalho
   Alterar senha, acesso gestor e sair moram aqui; o topo fica só com a
   identidade e o sino, sem repetir ações na navbar.
   -------------------------------------------------------------------------- */
.menu-usuario { position: relative; }

.menu-usuario__gatilho {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: var(--raio-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: right;
}

.menu-usuario__gatilho:hover,
.menu-usuario__gatilho[aria-expanded="true"] {
  background: var(--cor-grafite-700);
}

.menu-usuario__gatilho:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
}

.menu-usuario__seta { display: flex; color: #9a9a9a; }
.menu-usuario__seta .ui-icon { width: 15px; height: 15px; }

.menu-usuario__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  padding: var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-elevada);
  z-index: 60;
}

.menu-usuario__menu a,
.menu-usuario__menu button {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  text-align: left;
  cursor: pointer;
}

.menu-usuario__menu a:hover,
.menu-usuario__menu button:hover {
  background: var(--cor-fundo);
  text-decoration: none;
}

.menu-usuario__menu .ui-icon { width: 16px; height: 16px; color: var(--cor-texto-suave); }

.menu-usuario__sair {
  margin-top: var(--esp-1);
  padding-top: var(--esp-1);
  border-top: 1px solid var(--cor-borda);
}

.menu-usuario__sair button { color: var(--cor-erro); }
.menu-usuario__sair button .ui-icon { color: var(--cor-erro); transform: scaleX(-1); }
.menu-usuario__sair button:hover { background: var(--cor-erro-fundo); }

/* Tabela mais respirada só nos atalhos do dashboard: linhas mais baixas
   para o painel não pesar mais que o gráfico ao lado. */
.tabela--compacta td { padding-top: 0.62rem; padding-bottom: 0.62rem; }

/* --------------------------------------------------------------------------
   Listagem de solicitações — modelo do redesign
   -------------------------------------------------------------------------- */

/* Barra de filtros em linha única, com labels flutuando sobre a borda. */
.lista-filtros-card { margin-bottom: var(--esp-4); }

.lista-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
}

.lista-filtros .form-campo { margin: 0; }
.lista-filtros__busca { flex: 1 1 260px; }
.lista-filtros > .form-campo:not(.lista-filtros__busca) { flex: 0 1 200px; }

.lista-filtros__avancados {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
}

.lista-filtros__avancados .ui-icon { width: 15px; height: 15px; }
.lista-filtros__avancados[aria-expanded="true"] .ui-icon:last-child { transform: rotate(180deg); }

.lista-filtros__painel {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px dashed var(--cor-borda);
}

/* O display da classe venceria o [hidden] do navegador sem esta regra. */
.lista-filtros__painel[hidden] { display: none; }

.lista-filtros__painel .form-campo { flex: 0 1 200px; }

/* Labels flutuando sobre a borda dos campos de filtro (modelo visual). */
.filtros-flutuantes .form-campo { position: relative; }

.filtros-flutuantes .form-label:not(.sr-only) {
  position: absolute;
  top: -0.5rem;
  left: 0.7rem;
  z-index: 2;
  margin: 0;
  padding: 0 0.3rem;
  background: var(--cor-superficie);
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  color: var(--cor-texto-suave);
}

/* Cabeçalho do card da tabela: contagem junto do título, ações à direita. */
.lista-cabecalho { align-items: center; }

.lista-cabecalho__contagem {
  margin-left: var(--esp-3);
  font-size: var(--texto-xs);
  font-weight: 400;
  color: var(--cor-texto-suave);
}

.lista-cabecalho__acoes { display: flex; gap: var(--esp-2); }
.lista-cabecalho__acoes .btn { font-size: var(--texto-xs); }

/* Menu flutuante genérico (kebab, colunas). */
.menu-flutuante { position: relative; display: inline-flex; }

.menu-flutuante__corpo {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  padding: var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-elevada);
  z-index: 40;
}

.menu-flutuante__corpo a,
.menu-flutuante__corpo button {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.menu-flutuante__corpo a:hover,
.menu-flutuante__corpo button:hover {
  background: var(--cor-fundo);
  text-decoration: none;
}

.menu-flutuante__corpo .ui-icon { width: 15px; height: 15px; color: var(--cor-texto-suave); }
.menu-flutuante__perigo { color: var(--cor-erro) !important; }
.menu-flutuante__perigo .ui-icon { color: var(--cor-erro) !important; }

.menu-flutuante__corpo--colunas { min-width: 210px; }
.menu-flutuante__corpo--colunas .form-check { padding: 0.35rem 0.5rem; cursor: pointer; }

.tabela__kebab { padding-left: 0.45rem; padding-right: 0.45rem; }
.tabela__kebab .ui-icon { width: 15px; height: 15px; }

/* Botões de ação da tabela: mesmo tamanho para todos, e cada ação com a
   cor da sua família — despacho dourado, confirmação verde, ajuste âmbar,
   leitura neutra. */
.btn--acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 7.75rem;
  border: 1px solid transparent;
}

.btn--acao .ui-icon { width: 14px; height: 14px; flex-shrink: 0; }

.btn--acao-despachar { background: var(--cor-acento); color: #fff; }
.btn--acao-despachar:hover { background: var(--cor-dourado-700); color: #fff; }

.btn--acao-confirmar { background: var(--cor-sucesso); color: #fff; }
.btn--acao-confirmar:hover { background: #17663a; color: #fff; }

.btn--acao-continuar { background: var(--cor-alerta); color: #fff; }
.btn--acao-continuar:hover { background: #7d5700; color: #fff; }

.btn--acao-detalhes {
  background: var(--cor-superficie);
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto-suave);
}

.btn--acao-detalhes:hover {
  border-color: var(--cor-grafite-600);
  color: var(--cor-texto);
  background: var(--cor-superficie);
}

/* Coluna escondida pelo seletor de colunas. */
.coluna-oculta { display: none !important; }

/* Setas de ordenação em ícone. */
.tabela__seta .ui-icon { width: 13px; height: 13px; vertical-align: -2px; }

/* Paginação numerada. */
.paginacao__paginas {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
}

.paginacao__numero,
.paginacao__passo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  justify-content: center;
  border-radius: var(--raio-sm);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}

.paginacao__passo .ui-icon { width: 14px; height: 14px; }

.paginacao__numero:hover,
.paginacao__passo:hover {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  text-decoration: none;
}

.paginacao__numero--atual {
  background: var(--cor-acento);
  color: #fff;
  font-weight: 700;
}

.paginacao__elipse { color: var(--cor-texto-fraco); padding: 0 0.2rem; }

/* Rodapé com cadeado e versão. */
.app-shell__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

.app-shell__footer-item {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
}

.app-shell__footer .ui-icon { width: 12px; height: 12px; }

@media (max-width: 767px) {
  .lista-filtros > .form-campo:not(.lista-filtros__busca) { flex: 1 1 100%; }
  .lista-cabecalho { flex-wrap: wrap; gap: var(--esp-2); }
  .paginacao__paginas { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Detalhe da solicitação — modelo do redesign
   -------------------------------------------------------------------------- */

/* Subtítulo com o selo de status ao lado. */
.page-header__subtitulo--com-selo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

/* Resumo em blocos temáticos, cada um com título e ícone próprios. */
.resumo-blocos { display: grid; gap: var(--esp-4); }

.resumo-bloco {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-4);
}

.resumo-bloco__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.resumo-bloco__titulo .ui-icon { width: 15px; height: 15px; }

/* Ações da solicitação na coluna lateral, abaixo do status: a primária em
   destaque e o par Editar/Voltar dividindo a linha, como no modelo. */
.side-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.side-acoes form { display: contents; }

.side-acoes__primaria {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.side-acoes__linha {
  display: flex;
  gap: var(--esp-2);
}

.side-acoes__linha .btn {
  flex: 1;
  justify-content: center;
  text-align: center;
}

/* Linhas extras da timeline (quem fez, quando e a observação). */
.timeline__conteudo { min-width: 0; }
.timeline__observacao {
  color: var(--cor-texto-fraco);
  overflow-wrap: break-word;
}

/* Chevron de recolher no cabeçalho da seção (Anexos). */
.section-card__cabecalho { position: relative; }

.section-card__recolher {
  position: absolute;
  right: var(--esp-4);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.section-card__recolher:hover { background: var(--cor-fundo); color: var(--cor-texto); }
.section-card__recolher .ui-icon { width: 17px; height: 17px; transition: transform 0.15s ease; }
/* Aberto aponta para cima; fechado, para baixo — como no modelo. */
.section-card__recolher[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }

/* Painel de anexos: estado e botões dentro da mesma caixa, como no modelo. */
.anexos-painel {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-4) var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.anexos-painel__info {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
}

.anexos-painel__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
}

.anexos-painel__icone .ui-icon { width: 20px; height: 20px; }
.anexos-painel__titulo { margin: 0; font-size: var(--texto-sm); color: var(--cor-texto-suave); }
.anexos-painel__ajuda { margin: 2px 0 0; font-size: var(--texto-xs); color: var(--cor-texto-fraco); }

/* Proposta do solicitante: caixas cinza com rótulo/valor, como no modelo. */
.proposta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-3);
}

.proposta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}

.proposta-item__campo { display: grid; gap: 3px; }
.proposta-item__campo--quantidade { width: 96px; }

.proposta-item__rotulo {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.proposta-item__valor { font-weight: 600; font-size: var(--texto-sm); }

/* A quantidade parece texto (como no modelo) e vira campo ao interagir. */
.proposta-item .form-controle {
  padding: 0.1rem 0.2rem;
  border-color: transparent;
  background: transparent;
  font-weight: 600;
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}

.proposta-item .form-controle:hover,
.proposta-item .form-controle:focus {
  border-color: var(--cor-borda-forte);
  background: var(--cor-superficie);
}

/* Divisor com chevron entre a proposta e a decisão, como no modelo. */
.despacho-divisor {
  display: flex;
  justify-content: center;
  margin: var(--esp-2) 0;
  border-top: 1px solid var(--cor-borda);
}

.despacho-divisor__botao {
  margin-top: -13px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--cor-borda);
  border-radius: 50%;
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.despacho-divisor__botao:hover { color: var(--cor-texto); border-color: var(--cor-borda-forte); }
.despacho-divisor__botao .ui-icon { width: 14px; height: 14px; transition: transform 0.15s ease; }
.despacho-divisor__botao[aria-expanded="false"] .ui-icon { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------
   Medidor de consumo — barra horizontal genérica (usada no módulo Coffee
   Break para capacidade dos lotes). Aditivo: não altera telas existentes.
   --------------------------------------------------------------------------- */

.medidor {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--cor-neutro-fundo);
  overflow: hidden;
}

.medidor__preenchido {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--cor-sucesso);
  transition: width 0.2s ease;
}

.medidor__preenchido--atencao { background: var(--cor-alerta); }
.medidor__preenchido--critico { background: var(--cor-erro); }

.medidor-legenda {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-2);
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   Portal de módulos (hub) — tela inicial entre o login e os módulos.
   Aditivo: não altera telas existentes.
   --------------------------------------------------------------------------- */

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
}

.portal-card {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-5);
}

.portal-card__cabecalho {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
}

.portal-card__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--cor-dourado-100, var(--cor-alerta-fundo));
  color: var(--cor-acento);
}

.portal-card__icone .ui-icon { width: 22px; height: 22px; }

.portal-card__titulo { font-size: 1.05rem; margin: 0; }

.portal-card__descricao {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  line-height: 1.45;
}

.portal-card__metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-2);
  margin: 0;
}

.portal-card__metrica {
  display: grid;
  gap: 2px;
  padding: var(--esp-3);
  border-radius: 10px;
  background: var(--cor-fundo);
  text-align: center;
}

.portal-card__metrica dd { margin: 0; font-size: 1.3rem; font-weight: 700; }

.portal-card__metrica dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.portal-card__metrica--destaque {
  background: var(--cor-alerta-fundo);
}

.portal-card__metrica--destaque dd { color: var(--cor-alerta); }

.portal-card__acoes { margin-top: auto; }

.portal-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  flex-wrap: wrap;
}

.portal-admin__texto {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}


/* Contexto do módulo na navbar: "Início / Nome do módulo". */
.navbar__contexto { color: var(--cor-texto-fraco); }

.navbar__modulo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-acento);
  white-space: nowrap;
  padding-right: var(--esp-2);
}

/* ---------------------------------------------------------------------------
   Editor de roteiro (módulo Viagens): o layout, os cartões numerados e a
   lateral vêm do design system (`.solicitacao-layout`, `.section-card`,
   `.side-card`); aqui ficam só as peças próprias desta tela.
   --------------------------------------------------------------------------- */

/* Densidade igual à da tela de solicitação: cartões mais juntos. */
.editor-roteiro__principal .section-card { margin-bottom: 12px; }
.editor-roteiro__principal .section-card:last-child { margin-bottom: 0; }

/* Um traço separa os blocos rotulados dentro da mesma seção. */
.editor-roteiro__principal .bloco-split + .bloco-split {
  border-top: 1px solid var(--cor-borda);
  margin-top: var(--esp-3);
  padding-top: var(--esp-4);
}

/* A barra de introdução ocupa a largura toda, acima das duas colunas. */
.editor-roteiro__topo { grid-column: 1 / -1; }

/* A lateral acompanha a rolagem, como na tela de solicitação. */
.editor-roteiro__lateral {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.editor-roteiro__principal {
  display: grid;
  gap: var(--esp-4);
  min-width: 0;
}

@media (max-width: 1100px) {
  .editor-roteiro { grid-template-columns: 1fr; }
  .editor-roteiro__lateral { position: static; }
}

/* Barra de ações do topo: o estado da gravação automática à esquerda dos
   botões, em texto discreto que muda de cor conforme o que aconteceu. */
.editor-roteiro__acoes { align-items: center; }

/* Aviso que vale para o roteiro inteiro (cancelado), acima das colunas. */
.editor-roteiro__aviso { grid-column: 1 / -1; margin-bottom: 0; }

/* A situação do roteiro fica ao lado do título, na mesma linha. */
.editor-roteiro__titulo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.editor-roteiro__titulo .page-header__titulo { margin: 0; }

/* Ciclo de vida, na lateral: cada ação é um formulário próprio. */
.acoes-roteiro {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
}

.acoes-roteiro form { display: grid; gap: var(--esp-2); }
.acoes-roteiro .btn { width: 100%; justify-content: center; }
.acoes-roteiro .form-campo { margin: 0; grid-column: auto; }

/* Composição gravada das diárias: aberta, mas dobrável — é conferência, e
   não o número que a tela existe para mostrar. */
.composicao {
  margin-top: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  overflow: hidden;
}

.composicao__resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--cor-fundo);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.composicao__resumo strong { color: var(--cor-texto); font-variant-numeric: tabular-nums; }
.composicao .tabela-wrapper { border-top: 1px solid var(--cor-borda); }

.autosave-status {
  margin: 0 var(--esp-2) 0 0;
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
  transition: color 0.2s ease;
}

.autosave-status[data-estado="salvando"] { color: var(--cor-info); }
.autosave-status[data-estado="salvo"] { color: var(--cor-sucesso); }
.autosave-status[data-estado="erro"] { color: var(--cor-erro); }

/* Cabeçalho de seção com mais de um controle à direita (chip + interruptor). */
.editor-roteiro__acoes-cabecalho {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Interruptor (bate-volta) --------------------------------------------- */

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--cor-texto-suave);
}

.interruptor__trilho {
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: var(--cor-borda);
  padding: 3px;
  transition: background 0.15s ease;
}

.interruptor__botao {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cor-superficie);
  transition: transform 0.15s ease;
}

.interruptor--ligado .interruptor__trilho { background: var(--cor-acento); }
.interruptor--ligado .interruptor__botao { transform: translateX(17px); }
.interruptor__rotulo { font-size: 0.82rem; white-space: nowrap; }

/* Blocos com rótulo à esquerda ----------------------------------------- */

.bloco-split {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--esp-4);
  padding-block: var(--esp-3);
}

.bloco-split:first-child { padding-top: 0; }
.bloco-split__rotulo strong { font-size: 0.86rem; }
.bloco-split__rotulo p { margin: 3px 0 0; font-size: 0.7rem; line-height: 1.35; }
.bloco-split__corpo { min-width: 0; }

/* "Sede › A › B": o percurso no lugar da descrição, assim que existe. */
.bloco-split__rotulo .percurso-previa {
  color: var(--cor-dourado-700);
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 820px) {
  .bloco-split { grid-template-columns: 1fr; }
}

/* Destinos -------------------------------------------------------------- */

.destinos { display: grid; gap: var(--esp-2); }

/* As duas linhas — sede e destino — dividem a MESMA grade de cinco colunas:
   alça, "+", estado, município e lixeira. A sede não tem botões, então os
   campos dela se esticam por cima dessas colunas; como a grade é a mesma, a
   divisão entre estado e município cai exatamente no mesmo ponto nas duas. */
.destino-row {
  display: grid;
  grid-template-columns: 16px 34px minmax(0, 34fr) minmax(0, 66fr) 34px;
  align-items: center;
  gap: var(--esp-2);
}

.destino-row[hidden] { display: none; }

/* Reordenar sem desenhar nada: a linha na mão apaga e a vizinha ABRE ESPAÇO
   para onde ela vai cair. O vão que se alarga já diz o lugar — sem fio, e
   some sozinho quando o ponteiro sai dali. São 4px sobre um vão de 8: dá
   para ler o destino do movimento sem sacudir a lista. */
.destino-row { transition: transform 140ms ease, opacity 140ms ease; }
.destino-row.is-dragging { cursor: grabbing; opacity: 0.4; }
.destino-row.is-drop-target.is-drop-before { transform: translateY(4px); }
.destino-row.is-drop-target.is-drop-after { transform: translateY(-4px); }

/* Durante o arraste, nada de seleção de texto pelo caminho. */
.is-arrastando-destino,
.is-arrastando-destino * { user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .destino-row { transition: none; }
}

.destino-row__alca {
  cursor: grab;
  color: var(--cor-texto-fraco);
  display: inline-flex;
  transition: color 0.15s ease;
}

.destino-row:hover .destino-row__alca { color: var(--cor-texto-suave); }

/* Com um destino só não há o que remover nem reordenar: os controles ficam
   no lugar (a grade não muda), só somem da vista. */
.destino-row--unica .destino-row__remover,
.destino-row--unica .destino-row__alca { visibility: hidden; }

/* Os dois botões da linha acompanham a altura do campo (38px), para a
   linha inteira ficar com um só alinhamento. */
.destino-row__adicionar,
.destino-row__remover {
  min-height: 38px;
  height: 38px;
  padding-inline: 0;
  justify-content: center;
}

/* Estado filtra município: estreito à esquerda, município ocupa o resto.
   A sede reserva a mesma largura da alça e do "+" dos destinos, para os
   campos das duas linhas começarem exatamente na mesma coluna. */
/* Nome de município é mais longo que o de estado: 34/66 na grade acima. */
.destino-row__estado,
.destino-row__campo { min-width: 0; }
.destino-row__estado .form-campo,
.destino-row__campo .form-campo { margin: 0; }


/* A sede ocupa a linha inteira: o estado toma também as colunas da alça e do
   "+", e o município a da lixeira. */
.destino-row--sede .destino-row__estado { grid-column: 1 / 4; }
.destino-row--sede .destino-row__campo { grid-column: 4 / 6; }

@media (max-width: 720px) {
  .destino-row { grid-template-columns: 16px 34px minmax(0, 1fr) 34px; }
  .destino-row__estado { grid-column: 3 / 5; }
  .destino-row__campo { grid-column: 1 / 5; }
  .destino-row--sede .destino-row__estado,
  .destino-row--sede .destino-row__campo { grid-column: 1 / 5; }
}

/* Métricas (rota e diárias) -------------------------------------------- */

.rota-metricas,
.diarias-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
  align-items: stretch;
}

/* Os três cartões dividem a linha inteira em partes iguais; o "por extenso"
   ocupa a linha seguinte. Com `auto-fit`, três cartões numa faixa que cabe
   quatro deixavam um vão à direita. */
.diarias-metricas {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--esp-3);
}

@media (max-width: 900px) {
  .diarias-metricas { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

.metrica {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: var(--esp-3) var(--esp-4);
  padding-right: calc(var(--esp-4) + 22px);
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
  background: var(--cor-superficie);
  min-width: 0;
}

/* O ícone senta no canto, discreto: identifica sem competir com o número. */
.metrica__icone {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-3);
  display: inline-flex;
  color: var(--cor-acento);
  opacity: 0.75;
}

.metrica__icone .ui-icon { width: 18px; height: 18px; }

/* O valor total das diárias é o número que a tela existe para mostrar. */
.metrica--destaque {
  background: var(--cor-dourado-100);
  border-color: color-mix(in srgb, var(--cor-acento) 55%, var(--cor-borda));
}

.metrica--destaque .metrica__rotulo { color: var(--cor-dourado-700); }
.metrica__valor--grande { font-size: 1.55rem; letter-spacing: -0.01em; }
.metrica--larga { grid-column: 1 / -1; }
.metrica__valor { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.metrica__rotulo {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.metrica__valor { font-size: 1.25rem; line-height: 1.25; }
.metrica__valor--texto { font-size: 0.9rem; font-weight: 500; }

.metrica__rotulo { color: var(--cor-acento); }

/* Mapa ------------------------------------------------------------------ */

.mapa { position: relative; }

.mapa__superficie {
  height: 360px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  overflow: hidden;
  z-index: 0;
  background: var(--cor-fundo);
}

/* Enquanto o servidor calcula: um véu sobre o mapa, com o giro no meio. */
.mapa__carregando {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cor-superficie) 72%, transparent);
  color: var(--cor-texto);
  font-size: 0.86rem;
  font-weight: 600;
}

.mapa__carregando[hidden] { display: none; }

.spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--cor-borda);
  border-top-color: var(--cor-acento);
  animation: girar 0.8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* Rótulos fixos dos municípios no mapa, na tipografia do sistema. */
.leaflet-tooltip.mapa__rotulo {
  padding: 2px 7px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: 6px;
  color: var(--cor-texto);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(22, 25, 29, 0.12);
}

.leaflet-tooltip.mapa__rotulo--sede {
  border-color: var(--cor-acento);
  color: var(--cor-dourado-700);
}

/* O percurso mudou depois do cálculo: aviso antes do mapa. */
.aviso-rota {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: 10px;
  background: var(--cor-alerta-fundo);
  color: var(--cor-alerta);
  font-size: 0.8rem;
  line-height: 1.4;
}

.aviso-rota[hidden] { display: none; }
.aviso-rota .ui-icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }

.mapa__acoes {
  position: absolute;
  top: var(--esp-3);
  right: var(--esp-3);
  z-index: 500;
  display: flex;
  gap: var(--esp-2);
}

/* Sobre o mapa, o botão secundário ganha fundo opaco; o dourado já o tem.
   `hidden` precisa vencer o display do `.btn`. */
.mapa__acoes .btn--secundario { background: var(--cor-superficie); }
.mapa__acoes .btn[hidden] { display: none; }
.mapa__erro { margin-top: var(--esp-2); }

/* Bate-volta e preenchimento de datas ---------------------------------- */

.bate-volta {
  margin-bottom: var(--esp-4);
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-fundo);
}

.bate-volta__resumo { margin: var(--esp-3) 0 0; font-size: 0.74rem; }

.bate-volta[hidden] { display: none; }

.bate-volta__periodo { max-width: 340px; margin-bottom: var(--esp-3); }
.bate-volta__periodo .form-campo { margin: 0; }

/* Ida numa linha, volta na outra — as colunas se alinham entre as duas.
   `relative` porque o calendário compartilhado das datas é ancorado aqui. */
.bate-volta__sentidos { position: relative; display: grid; gap: var(--esp-2); }

.bate-volta__sentido {
  display: grid;
  /* Rótulo fixo à esquerda; os três campos dividem em partes iguais o
     espaço que sobra, ocupando a largura inteira do painel. */
  grid-template-columns: 68px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--esp-3);
}

/* `.form-campo` traz `grid-column: span 12`, pensado para o form-grid de 12
   colunas; aqui cada campo ocupa uma coluna própria. */
.bate-volta__sentido .form-campo { margin: 0; grid-column: auto; }

.bate-volta__rotulo {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-acento);
}

/* Só a primeira linha mostra os rótulos dos campos; a segunda repete a
   mesma ordem e ficaria com quatro textos dizendo a mesma coisa. */
.bate-volta__sentido + .bate-volta__sentido .form-label { display: none; }

@media (max-width: 720px) {
  .bate-volta__sentido { grid-template-columns: 1fr; }
  .bate-volta__sentido + .bate-volta__sentido .form-label { display: block; }
}

.trechos__acoes {
  display: flex;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

/* Tabela de trechos ----------------------------------------------------- */

.trechos-tabela .form-campo { margin: 0; min-width: 150px; }

.trechos-tabela th {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

.trechos-tabela tbody tr { transition: background 0.12s ease; }
.trechos-tabela tbody tr:hover td { background: color-mix(in srgb, var(--cor-fundo) 70%, transparent); }

.trecho-linha__cidade { font-weight: 600; white-space: nowrap; }

/* "Retorno": a volta para a sede, marcada no próprio destino. */
.trecho-linha__tag {
  display: inline-block;
  margin-left: var(--esp-2);
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cor-dourado-100);
  color: var(--cor-dourado-700);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

.trecho-linha__tag[hidden] { display: none; }

.trecho-linha__total { font-variant-numeric: tabular-nums; }

/* De onde saiu o total: "viagem 02:30", em letra miúda embaixo. */
.trecho-linha__nota {
  display: block;
  font-size: 0.66rem;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

.trecho-linha__chegada { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Passos de 15 minutos do tempo adicional: os dois botões e o valor no meio,
   na altura da linha. */
.tempo-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.tempo-stepper .btn {
  min-height: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.tempo-stepper__valor {
  min-width: 44px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.trechos-vazio {
  margin: 0;
  padding: var(--esp-5);
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 1px dashed var(--cor-borda);
  border-radius: 12px;
  color: var(--cor-texto-suave);
  font-size: 0.82rem;
  text-align: center;
}

.trechos-vazio strong { color: var(--cor-texto); }
.trechos-vazio__icone { display: inline-flex; color: var(--cor-acento); margin-bottom: 2px; }
.trechos-vazio__icone .ui-icon { width: 26px; height: 26px; }

.trechos-vazio[hidden],
.tabela-wrapper[hidden] { display: none; }

.trecho-linha[hidden],
.trecho-linha__erros[hidden] { display: none; }



/* Etapas ---------------------------------------------------------------- */

/* Etapas do editor de roteiro. Nome próprio de propósito: `.etapa` já existe
   no design system com outro desenho, e a etapa concluída herdava dele um
   fundo dourado que brigava com a cor do texto. */

.etapas-roteiro {
  margin: 0;
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
  list-style: none;
  display: grid;
  gap: 2px;
}

.etapa-roteiro {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2);
  border-radius: 10px;
}

.etapa-roteiro__numero {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.etapa-roteiro__texto { flex: 1; min-width: 0; display: grid; gap: 1px; }
.etapa-roteiro__texto strong { font-size: 0.82rem; font-weight: 600; }
.etapa-roteiro__texto small { font-size: 0.7rem; color: var(--cor-texto-suave); }

.etapa-roteiro__marca { display: none; flex: 0 0 auto; color: var(--cor-sucesso); }
.etapa-roteiro__marca .ui-icon { width: 17px; height: 17px; }

/* Em preenchimento: a linha inteira ganha o fundo, e o número o contorno. */
.etapa-roteiro--ativa .etapa-roteiro__numero {
  border-color: var(--cor-acento);
  color: var(--cor-dourado-700);
}
.etapa-roteiro--ativa .etapa-roteiro__texto small { color: var(--cor-dourado-700); }

/* Concluída: número preenchido de verde com texto claro por cima — era aqui
   que o fundo herdado deixava o número ilegível. */
.etapa-roteiro--concluida .etapa-roteiro__numero {
  border-color: var(--cor-sucesso);
  background: var(--cor-sucesso);
  color: #fff;
}
.etapa-roteiro--concluida .etapa-roteiro__texto small { color: var(--cor-sucesso); }
.etapa-roteiro--concluida .etapa-roteiro__marca { display: inline-flex; }

/* Regras de cálculo ----------------------------------------------------- */

.regras {
  margin: 0;
  padding: var(--esp-3) var(--esp-4) var(--esp-3) var(--esp-5);
  display: grid;
  gap: var(--esp-2);
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
}

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

/* Correções transversais de acessibilidade e fluxos auditáveis. */
.resumo-erros {
  outline: none;
}

.resumo-erros:focus-visible {
  box-shadow: 0 0 0 3px var(--cor-erro-fundo), 0 0 0 5px var(--cor-erro);
}

.resumo-erros ul {
  margin: var(--esp-2) 0 0;
  padding-left: var(--esp-5);
}

.lista-filtros__buscar {
  align-self: end;
}

.detalhe-acoes-registro {
  margin-top: var(--esp-3);
}

.cancelamento-form {
  width: min(100%, 680px);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: var(--esp-2);
  align-items: end;
}

.cancelamento-form .form-label {
  grid-column: 1 / -1;
  margin: 0;
}

.historico-lista {
  display: grid;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.historico-lista li {
  position: relative;
  display: grid;
  gap: var(--esp-1);
  padding: 0 0 var(--esp-3) var(--esp-5);
  border-bottom: 1px solid var(--cor-borda);
}

.historico-lista li::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  left: 0;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--cor-acento);
}

.historico-lista li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.historico-lista span {
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
}

.historico-lista p {
  margin: 0;
}

.erro-pagina {
  min-height: 55vh;
  display: grid;
  grid-template-columns: auto minmax(0, 620px);
  justify-content: center;
  align-items: center;
  gap: var(--esp-6);
  padding: var(--esp-7) var(--esp-4);
}

.erro-pagina__codigo {
  color: var(--cor-dourado-700);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 800;
  line-height: 1;
}

.erro-pagina h1 {
  margin-top: 0;
}

.navbar__dica-mobile {
  display: none;
}

.tabela-scroll-hint {
  display: none;
  margin: 0 0 var(--esp-2);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  text-align: right;
}

.cadastro-multiplo {
  min-height: 13rem;
}

@media (max-width: 760px) {
  .tabela-scroll-hint:not([hidden]) {
    display: block;
  }

  form > .acoes-formulario,
  .cadastro-form .acoes-formulario {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-inline: calc(var(--esp-4) * -1);
    padding: var(--esp-3) var(--esp-4);
    background: color-mix(in srgb, var(--cor-superficie) 94%, transparent);
    border-top: 1px solid var(--cor-borda);
    box-shadow: 0 -4px 12px rgba(22, 25, 29, 0.08);
  }
}

@media (max-width: 760px) {
  .navbar__inner {
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .navbar__link {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .navbar__dica-mobile {
    position: sticky;
    right: 0;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 var(--esp-3);
    background: var(--cor-superficie);
    color: var(--cor-texto-suave);
    font-size: var(--texto-xs);
  }

  .cancelamento-form,
  .erro-pagina {
    grid-template-columns: 1fr;
  }

  .erro-pagina {
    align-content: center;
    text-align: center;
  }

  .erro-pagina .acoes-formulario {
    justify-content: center;
  }
}