/* Paleta da marca, a mesma dos apps (packages/ui-theme/src/colors.ts) */
:root {
   --ob: #ed5b1e;
   --ob-d: #c8470f;
   --ob-l: #fdede3;
   /* Navy, e não branco, sobre o laranja da marca */
   --ob-btn-txt: #081a33;
   /* Cores explícitas para o botão desabilitado, nunca opacity */
   --btn-off-bg: #e9ebef;
   --btn-off-txt: #5c6675;
   /* Token próprio para o trilho da chave desligada */
   --switch-off: #828b99;
   /* Tom do laranja quando ele é texto */
   --ob-txt: #a83a0c;
   --ob-hover: #f2713a;

   --navy: #0e2a4d;
   --navy-d: #081a33;
   --navy-l: #e7ecf2;
   --navy-fg: #0e2a4d;


   /* Tons de ok, err e warn escurecidos até cruzar o mínimo AA */
   --ok: #157050;
   --ok-b: #e4f5ec;
   --err: #c2261f;
   --err-b: #fbe7e5;
   --warn: #8f5e08;
   --warn-b: #fcf1dd;

   --bg: #f7f8fa;
   --surf: #ffffff;
   --bord: #eaebee;

   --txt: #15202e;
   /* #6b7685 sobre --bg dava 4,34:1, logo abaixo do mínimo AA - e esta é a cor de todo
     subtítulo, rótulo de formulário e texto de apoio (70+ elementos por página).
     Escurecido o mínimo necessário: 4,66:1 sobre --bg e 4,95:1 sobre --surf. */
   --txt2: #68717f;
   --txt3: #9aa3b0;

   --sidebar-w: 216px;
   --sidebar-w-collapsed: 60px;
}

/* Tema escuro: ob, ok, warn e err ganham tons próprios */
:root[data-theme="dark"] {
   --bg: #0b1622;
   --surf: #131f2e;
   --bord: #5a7298;
   --txt: #edf1f6;
   --txt2: #aab9cc;
   --txt3: #7a8da3;

   --ob-l: #2b1810;
   --navy-l: #1c3252;
   --navy: #16273c;
   --navy-fg: #a9c2e8;
   --ob: #f2762e;
   --ob-btn-txt: #081a33;
   /* No escuro o laranja como texto precisa ser claro */
   --ob-txt: #f2762e;
   --ob-hover: #f78c50;
   /* Par escuro do botão desabilitado */
   --btn-off-bg: #223047;
   --btn-off-txt: #aab9cc;
   /* Par escuro do trilho da chave desligada */
   --switch-off: #6b7685;

   --ok: #6fdda8;
   --ok-b: #143828;
   --warn: #f5c467;
   --warn-b: #3a2a0c;
   --err: #f4a199;
   --err-b: #3a1614;
}

* {
   box-sizing: border-box;
}

/* O display por classe ganha do atributo hidden, então ele é forçado aqui */
[hidden] {
   display: none !important;
}

body {
   margin: 0;
   /* Só fontes do sistema: a Inter era declarada sem @font-face e nunca carregou */
   font-family: "Segoe UI", system-ui, Arial, sans-serif;
   background: var(--bg);
   color: var(--txt);
}

a {
   color: var(--ob-txt);
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

/* Sidebar retrátil */
.shell {
   display: flex;
   min-height: 100vh;
}

.sidebar {
   width: var(--sidebar-w);
   flex-shrink: 0;
   background: var(--navy-d);
   color: #fff;
   display: flex;
   flex-direction: column;
   position: sticky;
   top: 0;
   height: 100vh;
   overflow-x: hidden;
   transition: width 0.16s ease;
}

html.sidebar-collapsed .sidebar {
   width: var(--sidebar-w-collapsed);
}

.sidebar .brand {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 16px 14px;
   font-weight: 600;
   font-size: 13.5px;
   white-space: nowrap;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   margin-bottom: 6px;
}

.sidebar .brand .dot {
   width: 26px;
   height: 26px;
   border-radius: 999px;
   background: var(--ob);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.sidebar .brand .dot svg {
   width: 15px;
   height: 15px;
}

html.sidebar-collapsed .sidebar .brand-text {
   display: none;
}

/* Bloco do botão de retrair e esticar, no topo da sidebar */
.sidebar .topo {
   padding: 4px 8px;
}

.sidebar .espaco-icone {
   height: 18px;
}

.sidebar nav {
   flex: 1;
   padding: 4px 8px;
   display: flex;
   flex-direction: column;
   gap: 2px;
   overflow-y: auto;
}

.sidebar nav a,
.sidebar .navbtn {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 11px;
   border-radius: 8px;
   color: rgba(255, 255, 255, 0.78);
   font-size: 13px;
   font-weight: 500;
   white-space: nowrap;
   background: none;
   border: none;
   width: 100%;
   text-align: left;
   cursor: pointer;
   font-family: inherit;
}

.sidebar nav a:hover,
.sidebar .navbtn:hover {
   background: rgba(255, 255, 255, 0.08);
   color: #fff;
   text-decoration: none;
}

/* Suporte fica no rodapé da sidebar, fora do <nav>, e também acende */
.sidebar nav a.ativo,
.sidebar .navbtn.ativo {
   background: var(--ob);
   color: var(--ob-btn-txt);
}

.sidebar svg {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   stroke-width: 1.8;
}

.sidebar .label {
   overflow: hidden;
   text-overflow: ellipsis;
}

html.sidebar-collapsed .sidebar .label {
   display: none;
}

.sidebar .rodape {
   padding: 8px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   flex-direction: column;
   gap: 2px;
}

/* Troca de ícone e de texto por atributo no <html>, sem JS */
[data-icon-light] {
   display: inline-flex;
   align-items: center;
}

[data-icon-dark] {
   display: none;
   align-items: center;
}

html[data-theme="dark"] [data-icon-light] {
   display: none;
}

html[data-theme="dark"] [data-icon-dark] {
   display: inline-flex;
}

[data-icon-expanded] {
   display: inline-flex;
   align-items: center;
}

[data-icon-collapsed] {
   display: none;
   align-items: center;
}

html.sidebar-collapsed [data-icon-expanded] {
   display: none;
}

html.sidebar-collapsed [data-icon-collapsed] {
   display: inline-flex;
}

.main {
   flex: 1;
   min-width: 0;
}

/* 1500px e não 960: com a barra lateral, 960 deixava sobra vazia */
.container {
   max-width: 1500px;
   margin: 0 auto;
   padding: 26px 20px 60px;
}

/* Faixa de aviso do acesso de suporte ao painel de um cliente */
.faixa-suporte {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   flex-wrap: wrap;
   background: var(--ob);
   color: var(--ob-btn-txt);
   padding: 9px 20px;
   font-size: 13px;
}

.faixa-suporte strong {
   font-weight: 700;
}

.faixa-suporte a {
   color: var(--ob-btn-txt);
   font-weight: 700;
   text-decoration: underline;
   white-space: nowrap;
}

/* Sair do acesso é um <button> em <form method=post>, estilizado como link */
.link-botao {
   background: none;
   border: none;
   padding: 0;
   font: inherit;
   color: var(--ob-btn-txt);
   font-weight: 700;
   text-decoration: underline;
   white-space: nowrap;
   cursor: pointer;
}

/* --ob-btn-txt é o azul do texto sobre botão laranja: no fundo escuro o link sumia */
:root[data-theme="dark"] .link-botao {
   color: var(--ob-txt);
}

h1 {
   font-size: 20px;
   margin: 0 0 4px;
}

h2 {
   font-size: 16px;
   margin: 0 0 12px;
}

.subtitulo {
   color: var(--txt2);
   font-size: 13px;
   margin-bottom: 20px;
}

.card {
   background: var(--surf);
   border: 1px solid var(--bord);
   border-radius: 10px;
   padding: 18px 20px;
   margin-bottom: 18px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13.5px;
}

th,
td {
   text-align: left;
   padding: 9px 8px;
   border-bottom: 1px solid var(--bord);
}

th {
   background: var(--navy-l);
   font-weight: 600;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.3px;
}

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

tbody tr:nth-child(even) td {
   background: rgba(127, 127, 127, 0.04);
}

.tabela-arejada td {
   height: 49px;
}

.badge {
   display: inline-block;
   padding: 2px 9px;
   border-radius: 999px;
   font-size: 11.5px;
   font-weight: 600;
   background: var(--navy-l);
   color: var(--navy-fg);
}

.badge.inativo {
   background: var(--err-b);
   color: var(--err);
}

/* Encerrada numa pesquisa não é erro: tom neutro */
.badge.neutro {
   background: var(--bord);
   color: var(--txt);
}

/* Uma classe para o verde que estava repetido em três lugares */
.badge.ok {
   background: var(--ok-b);
   color: var(--ok);
}

.badge.aviso {
   background: var(--warn-b);
   color: var(--warn);
}

/* Abas de página: a ativa levantada, com sublinhado que entra animado */
.abas {
   display: flex;
   gap: 2px;
   border-bottom: 1px solid var(--bord);
   margin-bottom: 18px;
   flex-wrap: wrap;
}

/* button entra junto de a: as abas de modal são <button> e parecem iguais */
.abas a,
.abas button,
.abas .desabilitada {
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 9px 14px 10px;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--txt2);
   border-radius: 8px 8px 0 0;
   margin-bottom: -1px;
   transition: color 0.16s ease, background-color 0.16s ease;
}

.abas button {
   background: none;
   border: 0;
   font-family: inherit;
   cursor: pointer;
}

.abas a svg,
.abas button svg,
.abas .desabilitada svg {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   stroke-width: 1.9;
   transition: transform 0.18s ease;
}

.abas a:hover,
.abas button:hover {
   color: var(--txt);
   background: var(--bg);
   text-decoration: none;
}

.abas a:hover svg,
.abas button:hover svg {
   transform: translateY(-1px);
}

/* Aba desabilitada: visível e inerte, com o motivo no title */
.abas .desabilitada {
   color: var(--txt3);
   cursor: not-allowed;
}

.abas .desabilitada svg {
   opacity: 0.6;
}

/* A barra vive em todas as abas, encolhida, e serve ao hover e ao ativo */
.abas a::after,
.abas button::after {
   content: "";
   position: absolute;
   left: 8px;
   right: 8px;
   bottom: 0;
   height: 2.5px;
   border-radius: 2px 2px 0 0;
   background: var(--txt3);
   transform: scaleX(0);
   transform-origin: center;
   transition: transform 0.18s ease;
}

.abas a:not(.ativa):hover::after,
.abas button:not(.ativa):hover::after {
   transform: scaleX(1);
}

.abas a.ativa,
.abas button.ativa {
   color: var(--navy-fg);
   font-weight: 600;
   background: var(--surf);
   box-shadow: inset 0 1px 0 var(--bord), inset 1px 0 0 var(--bord), inset -1px 0 0 var(--bord);
}

.abas a.ativa::after,
.abas button.ativa::after {
   background: var(--ob);
   animation: aba-sublinhado 320ms cubic-bezier(0.22, 0.9, 0.28, 1) both;
}

.abas a.ativa svg,
.abas button.ativa svg {
   color: var(--ob);
   animation: aba-icone 320ms cubic-bezier(0.22, 0.9, 0.28, 1) both;
}

@keyframes aba-sublinhado {
   0% {
      transform: scaleX(0);
      opacity: 0.3;
   }

   65% {
      transform: scaleX(1.06);
      opacity: 1;
   }

   100% {
      transform: scaleX(1);
      opacity: 1;
   }
}

@keyframes aba-icone {
   0% {
      transform: scale(0.8);
      opacity: 0;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

/* Quem pede menos movimento recebe o mesmo desenho, sem a entrada animada */
@media (prefers-reduced-motion: reduce) {

   .abas a,
   .abas button,
   .abas a svg,
   .abas button svg,
   .abas a::after,
   .abas button::after {
      transition: none;
   }

   .abas a.ativa::after,
   .abas button.ativa::after {
      animation: none;
      transform: scaleX(1);
   }

   .abas a.ativa svg,
   .abas button.ativa svg {
      animation: none;
   }
}

.btn {
   display: inline-block;
   background: var(--ob);
   color: var(--ob-btn-txt);
   border: none;
   border-radius: 7px;
   padding: 9px 16px;
   font-size: 13.5px;
   font-weight: 600;
   cursor: pointer;
   font-family: inherit;
}

.btn:hover {
   background: var(--ob-hover);
   color: var(--ob-btn-txt);
   text-decoration: none;
}

.btn.secundario {
   background: var(--navy-l);
   color: var(--navy-fg);
}

.btn.secundario:hover {
   background: var(--navy);
   color: #fff;
}

.btn.perigo {
   background: var(--err-b);
   color: var(--err);
}

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

.btn[disabled] {
   background: var(--btn-off-bg);
   color: var(--btn-off-txt);
   cursor: not-allowed;
}

.btn[disabled]:hover {
   background: var(--btn-off-bg);
   color: var(--btn-off-txt);
}

.btn-cadastro {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--surf);
   color: var(--txt);
   border: 1px solid var(--bord);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
   transition: all 0.2s ease;
}

.btn-cadastro:hover {
   border-color: var(--ob);
   box-shadow: 0 4px 12px rgba(237, 91, 30, 0.12);
   background: var(--surf);
   color: var(--txt);
}

.btn-cadastro span.texto-gradiente {
   background: linear-gradient(120deg, var(--txt) 0%, var(--ob) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   display: block;
   line-height: 1.2;
   padding-bottom: 2px;
}

.btn-cadastro svg {
   width: 20.7px;
   height: 20.7px;
   flex: none;
   color: var(--ob);
}

/* Botão principal de cadastro, maior que o .btn padrão */
.btn.grande {
   padding: 16px 30px;
   font-size: 16.5px;
   border-radius: 10px;
}

/* Chip de exportação: selo colorido por formato ao lado do rótulo */
.chip-exportar {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 6px 14px 6px 6px;
   border-radius: 10px;
   border: 1px solid var(--bord);
   background: var(--surf);
   color: var(--txt);
   font-size: 13.5px;
   font-weight: 600;
   font-family: inherit;
   text-decoration: none;
   cursor: pointer;
   transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.chip-exportar:hover {
   text-decoration: none;
   border-color: var(--chip-cor, var(--ob));
   transform: translateY(-1px);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.chip-exportar-icone {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   flex-shrink: 0;
   border-radius: 8px;
   background: var(--chip-cor, var(--ob));
   color: #fff;
}

.chip-exportar-icone svg {
   width: 17px;
   height: 17px;
}

/* Cores fixas: é selo decorativo com ícone branco, não texto sobre a página */
.chip-exportar.chip-csv {
   --chip-cor: #15803d;
}

.chip-exportar.chip-pdf {
   --chip-cor: #c0392b;
}

/* Importar não é formato, é a ação oposta: cor e ícone próprios */
.chip-exportar.chip-importar {
   --chip-cor: #2568cf;
}

/* Versão compacta do mesmo chip, para a fileira de ações secundárias */
.chip-exportar.chip-compacta {
   gap: 5px;
   padding: 4px 9px 4px 4px;
   border-radius: 7px;
   font-size: 11.5px;
}

.chip-exportar.chip-compacta .chip-exportar-icone {
   width: 17px;
   height: 17px;
   border-radius: 5px;
}

.chip-exportar.chip-compacta .chip-exportar-icone svg {
   width: 10px;
   height: 10px;
}

/* Chip apagado: a exportação existe na tela mas não tem o que exportar agora */
.chip-exportar.desabilitado {
   --chip-cor: var(--btn-off-txt);
   background: var(--btn-off-bg);
   color: var(--btn-off-txt);
   cursor: not-allowed;
}

.chip-exportar.desabilitado:hover {
   border-color: var(--bord);
   transform: none;
   box-shadow: none;
}

/* Cabeçalho de listagem: título e abas à esquerda, ação à direita, sobre a mesma linha */
.cabecalho-lista {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   border-bottom: 1px solid var(--bord);
   /* O respiro depois da linha mora aqui, não no que vem a seguir */
   margin-bottom: 18px;
}

/* flex: 1 1 320px para o botão não cair abaixo da faixa de abas */
.cabecalho-lista-titulo {
   flex: 1 1 320px;
   min-width: 0;
}

.cabecalho-lista-titulo h1 {
   font-size: 28px;
   font-weight: 500;
   letter-spacing: -0.5px;
   margin-bottom: 2px;
   background: linear-gradient(120deg, var(--txt) 0%, var(--ob) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   width: fit-content;
}

.cabecalho-lista .subtitulo {
   margin-bottom: 14px;
}

/* As abas perdem borda e margem próprias; em tela estreita a faixa rola */
.cabecalho-lista .abas {
   border-bottom: none;
   margin-bottom: 0;
   flex-wrap: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: thin;
}

.cabecalho-lista .abas>* {
   flex-shrink: 0;
   white-space: nowrap;
}

/* A coluna da ação principal, com o mesmo respiro do outro lado da linha */
.cabecalho-lista-acao {
   display: flex;
   align-items: flex-end;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 18px;
}

/* Linha das ações secundárias da listagem, alinhada à direita */
.acoes-lista {
   display: flex;
   justify-content: flex-end;
   gap: 6px;
   flex-wrap: wrap;
   margin: 0 0 22px;
}

label {
   display: block;
   font-size: 12.5px;
   font-weight: 600;
   color: var(--txt2);
   margin: 12px 0 6px;
}

/* Excluir por tipo em vez de listar: campo novo já nasce coberto */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]),
select,
textarea {
   width: 100%;
   padding: 9px 10px;
   border: 1px solid var(--bord);
   border-radius: 7px;
   font-size: 14px;
   background: var(--surf);
   color: var(--txt);
   font-family: inherit;
}

/* Campo em readonly precisa parecer travado */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"])[readonly],
textarea[readonly],
select[data-travado] {
   background: var(--btn-off-bg);
   color: var(--txt2);
   cursor: not-allowed;
}

/* Bairro em lista fechada travado pelo "mesmo endereço": o valor segue indo no envio */
select[data-travado] {
   pointer-events: none;
}

/* Sem estilo próprio o input de cor herda 27px do navegador */
input[type="color"] {
   width: 44px;
   height: 38px;
   padding: 2px;
   border: 1px solid var(--bord);
   border-radius: 7px;
   background: var(--surf);
   cursor: pointer;
   flex-shrink: 0;
}

.alerta {
   padding: 10px 14px;
   border-radius: 8px;
   font-size: 13px;
   margin-bottom: 16px;
}

.alerta.erro {
   background: var(--err-b);
   color: var(--err);
}

.alerta.sucesso {
   background: var(--ok-b);
   color: var(--ok);
}

/* Aviso informativo, para um estado normal não vir como erro */
.alerta.info {
   background: var(--navy-l);
   color: var(--navy-fg);
}

.form-linha {
   display: flex;
   gap: 12px;
}

.form-linha>div {
   flex: 1;
}

/* O layout da tela de login mora em apps/web/assets/login.css */



/* Tela Demandas: cartões de status e tabela clicável */
:root {
   --gold: #f2a93b;
}

.stat-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 12px;
   margin-bottom: 18px;
}

.stat-card {
   display: block;
   border-radius: 10px;
   padding: 16px 18px;
   color: #fff;
   text-decoration: none;
   border: 2px solid transparent;
   transition: transform 0.1s ease;
}

.stat-card:hover {
   text-decoration: none;
   transform: translateY(-1px);
}

/* currentColor, e não branco fixo, para a borda aparecer nos cartões claros */
.stat-card.ativo {
   border-color: currentColor;
}

.stat-card .valor {
   font-size: 30px;
   font-weight: 700;
   line-height: 1.1;
}

/* Sem opacity sobre texto: era o último ponto de opacidade dos dois painéis */
.stat-card .rotulo {
   font-size: 13px;
   font-weight: 600;
   margin-top: 4px;
}

.stat-card.todas {
   background: var(--navy);
}

/* Mesma família de cor do badge que este cartão representa */
.stat-card.aberto {
   background: var(--navy-l);
}

.stat-card.andamento {
   background: var(--gold);
   color: #3a2a0c;
}

.stat-card.andamento .rotulo {
   color: #3a2a0c;
}

.stat-card.concluido {
   background: var(--ok);
}

.stat-card.arquivado {
   background: var(--txt3);
}

/* Fundo claro pede texto escuro; .aberto usa --navy-fg, que acompanha o tema */
.stat-card.aberto,
.stat-card.aberto .rotulo {
   color: var(--navy-fg);
}

.stat-card.arquivado,
.stat-card.arquivado .rotulo {
   color: #081a33;
}

:root[data-theme="dark"] .stat-card.concluido,
:root[data-theme="dark"] .stat-card.concluido .rotulo {
   color: #081a33;
}

/* A regra segue o próprio data-href, que é o que torna a linha clicável */
tr[data-href] {
   cursor: pointer;
}

tr[data-href]:hover td,
tbody tr[data-href]:hover td {
   background: var(--bg);
}

/* A primeira célula é um <a> real; a classe só evita que pareça link azul */
.link-linha {
   color: inherit;
   text-decoration: none;
   display: block;
}

.link-linha:hover {
   text-decoration: underline;
}

.badge-status,
.badge-prioridade {
   display: inline-block;
   padding: 3px 10px;
   border-radius: 999px;
   font-size: 11px;
   font-weight: 600;
   white-space: nowrap;
}

.badge-status.ABERTO {
   background: var(--navy-l);
   color: var(--navy-fg);
}

.badge-status.EM_ANALISE {
   background: var(--warn-b);
   color: var(--warn);
}

.badge-status.ENCAMINHADO {
   background: #fbecd2;
   color: #8a6413;
}

.badge-status.EM_EXECUCAO {
   background: var(--ob-l);
   color: var(--ob-txt);
}

.badge-status.CONCLUIDO {
   background: var(--ok-b);
   color: var(--ok);
}

/* Achado 21.2: --txt2 sobre --bord reprovava nos dois temas */
.badge-status.ARQUIVADO {
   background: var(--bord);
   color: var(--txt);
}

/* No escuro --bord é claro demais para fundo de badge */
:root[data-theme="dark"] .badge-status.ARQUIVADO,
:root[data-theme="dark"] .badge.neutro {
   background: #2a3a4f;
}

:root[data-theme="dark"] .badge-status.ENCAMINHADO {
   background: #3a2f10;
   color: var(--gold);
}

/* Status de chamado: domínio diferente, cores reaproveitadas por semelhança */
.badge-status.ATRIBUIDO {
   background: var(--ob-l);
   color: var(--ob-txt);
}

.badge-status.PENDENTE {
   background: var(--warn-b);
   color: var(--warn);
}

.badge-status.FINALIZADO {
   background: var(--ok-b);
   color: var(--ok);
}

.badge-status.CANCELADO {
   background: var(--bord);
   color: var(--txt2);
}

/* Prioridade e status se distinguem pela forma, não pela cor */
.badge-prioridade {
   background: transparent;
   border: 1px solid currentColor;
}

.badge-prioridade.BAIXA {
   color: var(--txt);
}

.badge-prioridade.NORMAL {
   color: var(--navy-fg);
}

.badge-prioridade.ALTA {
   color: var(--warn);
}

.badge-prioridade.URGENTE {
   color: var(--err);
}

/* Nota do atendimento: radio escondido + estrela clicavel, na ordem inversa do DOM */
.nota-estrelas {
   display: inline-flex;
   flex-direction: row-reverse;
   gap: 4px;
   position: relative;
}

.nota-estrelas input {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

.nota-estrelas label {
   font-size: 28px;
   line-height: 1;
   color: var(--bord);
   cursor: pointer;
   margin: 0;
   transition: color .12s;
}

.nota-estrelas label:hover,
.nota-estrelas label:hover~label,
.nota-estrelas input:checked~label {
   color: var(--warn);
}

.nota-estrelas input:focus-visible+label {
   outline: 2px solid var(--ob);
   outline-offset: 2px;
   border-radius: 3px;
}

.nota-lida {
   color: var(--warn);
   font-size: 16px;
   letter-spacing: 2px;
}

.link-anexo {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.link-anexo svg {
   width: 14px;
   height: 14px;
   flex: none;
}

.filtro-barra {
   display: flex;
   align-items: flex-end;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 16px;
}

.filtro-barra>div {
   min-width: 0;
}

.chip-filtro-ativo {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--navy-l);
   color: var(--navy-fg);
   padding: 4px 10px;
   border-radius: 999px;
   font-size: 12.5px;
   font-weight: 600;
   text-decoration: none;
   margin-left: 8px;
}

/* Modal: o overlay não cobre a barra lateral, e quem rola é a caixa */
.modal-fundo {
   display: none;
   position: fixed;
   top: 0;
   left: var(--sidebar-w);
   right: 0;
   bottom: 0;
   background: rgba(8, 26, 51, 0.55);
   align-items: center;
   justify-content: center;
   padding: 20px;
   z-index: 50;
}

html.sidebar-collapsed .modal-fundo {
   left: var(--sidebar-w-collapsed);
}

.modal-fundo.aberto {
   display: flex;
}

/* 1300px × 86vh, para os dois tipos de modal */
.modal-caixa {
   position: relative;
   background: var(--surf);
   border-radius: 12px;
   padding: 24px;
   max-width: 1300px;
   width: 100%;
   max-height: 86vh;
   overflow-y: auto;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal-padrao {
   width: 100%;
   max-width: 1300px;
   height: 86vh;
   max-height: 86vh;
}

.modal-tela-cheia {
   max-width: 98%;
   width: 100%;
   height: 96vh;
   max-height: 96vh;
   display: flex;
   flex-direction: column;
}

.modal-tela-cheia>form,
.modal-tela-cheia>div[data-painel] {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 4px;
   margin: -4px;
}

.simulador-word-container {
   background: var(--bg);
   padding: 32px 16px;
   border-radius: 8px;
   border: 1px solid var(--bord);
   display: flex;
   justify-content: center;
   margin-top: 8px;
   margin-bottom: 24px;
}

.simulador-word-papel {
   --altura-pagina: 1100px;
   --faixa-topo: 168px;
   --faixa-lateral: 126px;
   --faixa-rodape: 136px;
   background-color: #fff;
   background-image:
      repeating-linear-gradient(to bottom,
         transparent 0,
         transparent calc(var(--altura-pagina) - 1px),
         var(--bord) calc(var(--altura-pagina) - 1px),
         var(--bord) var(--altura-pagina)),
      var(--arte-timbrado, none);
   background-repeat: repeat-y, repeat-y;
   background-position: top center, top center;
   background-size: auto, 100% var(--altura-pagina);
   background-origin: border-box, border-box;
   width: 100%;
   max-width: 850px;
   min-height: var(--altura-folha, 1100px);
   height: auto;
   padding: var(--faixa-topo) var(--faixa-lateral) var(--faixa-rodape) !important;
   border: 1px solid var(--bord) !important;
   border-radius: 2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.15);
   display: block;
   position: relative;
}

.folha-faixa-morta {
   float: right;
   clear: both;
   width: 100%;
   pointer-events: none;
   user-select: none;
}

.simulador-word-textarea {
   background: transparent;
   border: none;
   resize: none;
   flex: 1;
   font-family: Arial, sans-serif;
   font-size: 12pt;
   line-height: 1.6;
   color: var(--txt);
}

.simulador-word-textarea:focus {
   outline: none;
}

/* Estilos do TinyMCE para parecer com Word nativo */
.simulador-word-quill {
   min-height: 200px;
   font-family: Arial, sans-serif;
   font-size: 12pt;
   color: #000;
   outline: none;
   padding: 0;
}

.simulador-word-quill p {
   margin-bottom: 8px;
}

.simulador-word-assinatura {
   text-align: center;
   margin-top: 40px;
   font-family: Arial, sans-serif;
   font-size: 12pt;
   color: #000;
}

.layout-gerador-documento {
   display: flex;
   gap: 32px;
   align-items: flex-start;
}

.gerador-coluna-esq {
   flex: 0 0 320px;
   position: sticky;
   top: 4px;
   /* Matches the padding of the scrolling container */
}

.gerador-coluna-dir {
   flex: 1;
   min-width: 0;
}

@media (max-width: 900px) {
   .layout-gerador-documento {
      flex-direction: column;
   }

   .gerador-coluna-esq {
      flex: none;
      width: 100%;
      position: static;
   }
}

.modal-banner {
   aspect-ratio: 1024 / 205;
   min-height: 120px;
   max-height: 240px;
   margin: -24px -24px 24px -24px;
   border-radius: 12px 12px 0 0;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-color: var(--bord);
}

/* O × é a única saída do modal desde 09/09/2026, e por isso é um alvo de 40px */
.modal-fechar {
   position: absolute;
   top: 12px;
   right: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   padding: 0 0 7px 0;
   border-radius: 999px;
   font-size: 30px;
   line-height: 1;
   color: var(--txt);
   background: var(--bg);
   border: 1px solid var(--bord);
   font-family: inherit;
   cursor: pointer;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Hover invertido, --txt no fundo e --surf no texto, em vez de uma cor fixa */
.modal-fechar:hover,
.modal-fechar:focus-visible {
   color: var(--surf);
   background: var(--txt);
   border-color: var(--txt);
   text-decoration: none;
}

/* Sem isto o <h2> do modal de cadastro encosta no × */
.modal-caixa>h2 {
   margin-bottom: 14px;
   padding-right: 60px;
}

.modal-agenda-detalhe>h2 {
   text-align: center;
   text-transform: uppercase;
}

/* Barra de abas do modal com ação principal: abas à esquerda, ação à direita */
.barra-abas-modal {
   display: flex;
   align-items: flex-end;
   gap: 16px;
   flex-wrap: wrap;
   border-bottom: 1px solid var(--bord);
   margin-bottom: 14px;
}

/* As abas perdem borda e margem próprias; a linha é do bloco de fora */
.barra-abas-modal .abas {
   border-bottom: none;
   margin-bottom: 0;
}

/* margin-left: auto para a ação ficar à direita mesmo sem abas */
.barra-abas-modal-acao {
   margin-left: auto;
   margin-bottom: 8px;
}

/* Grade dos formulários do modal: cada campo declara quantas colunas ocupa */
.form-grade {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 0 12px;
}

.form-grade>* {
   grid-column: span 12;
   min-width: 0;
}

/* As 12 larguras existem todas: faltando uma, o campo tomava a linha em silêncio */
.form-grade .col-1 {
   grid-column: span 1;
}

.form-grade .col-2 {
   grid-column: span 2;
}

.form-grade .col-3 {
   grid-column: span 3;
}

.form-grade .col-4 {
   grid-column: span 4;
}

.form-grade .col-5 {
   grid-column: span 5;
}

.form-grade .col-6 {
   grid-column: span 6;
}

.form-grade .col-7 {
   grid-column: span 7;
}

.form-grade .col-8 {
   grid-column: span 8;
}

.form-grade .col-9 {
   grid-column: span 9;
}

.form-grade .col-10 {
   grid-column: span 10;
}

.form-grade .col-11 {
   grid-column: span 11;
}

/* Seção do formulário, a mesma divisão em passos do cadastro do app */
.form-secao {
   grid-column: span 12;
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px solid var(--bord);
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.3px;
   color: var(--txt2);
   margin-bottom: -6px;
}

.form-secao:first-child {
   margin-top: 0;
   padding-top: 0;
   border-top: none;
}

/* Campo de marcar: o label global é block e ficaria acima da caixinha */
.campo-marcar {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   margin: 12px 0 4px;
}

.campo-marcar input {
   margin-top: 2px;
   flex-shrink: 0;
}

.escopo-exclusao {
   border: 0;
   margin: 12px 0 0;
   padding: 10px 0 2px;
   border-top: 1px solid var(--err);
}

.escopo-exclusao legend {
   padding: 0 6px 0 0;
   font-size: 13px;
   font-weight: 700;
   color: var(--txt);
}

.escopo-exclusao .campo-marcar {
   margin: 6px 0 0;
}

.campo-marcar label {
   margin: 0;
   font-weight: 500;
   color: var(--txt);
   font-size: 13px;
}

.campo-marcar .ajuda {
   display: block;
   font-size: 11.5px;
   color: var(--txt2);
   font-weight: 400;
   margin-top: 2px;
}

/* A autorização da LGPD é a única marcação que não pode passar despercebida */
.campo-marcar.destaque-lgpd {
   background: var(--warn-b);
   border: 1px solid var(--warn);
   border-radius: 8px;
   padding: 10px;
   margin-top: 10px;
}

.campo-marcar.destaque-lgpd label {
   color: var(--warn);
}

/* Chavinha liga/desliga: o input real fica por cima, transparente */
.chave {
   position: relative;
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
}

.chave input {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   opacity: 0;
   cursor: pointer;
   z-index: 1;
}

.chave .trilho {
   display: inline-block;
   position: relative;
   width: 38px;
   height: 22px;
   border-radius: 999px;
   background: var(--switch-off);
   transition: background 0.16s ease;
}

.chave .trilho::after {
   content: "";
   position: absolute;
   top: 2px;
   left: 2px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   /* Branco fixo nos dois temas: o botão anda entre o cinza e o laranja */
   background: #fff;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
   transition: transform 0.16s ease;
}

.chave input:checked+.trilho {
   background: var(--ob);
}

.chave input:checked+.trilho::after {
   transform: translateX(16px);
}

.chave input:focus-visible+.trilho {
   outline: 2px solid var(--ob);
   outline-offset: 2px;
}

.chave input:disabled {
   cursor: default;
}

/* Cor explícita no lugar de opacity, que escapa da medição */
.chave input:disabled+.trilho {
   background: var(--btn-off-bg);
}

.chave input:disabled:checked+.trilho {
   background: var(--btn-off-txt);
}

/* Texto de apoio de um campo (resultado da consulta de CPF, dica do autocomplete). */
.ajuda {
   display: block;
   font-size: 11.5px;
   color: var(--txt2);
   margin-top: 4px;
}

/* Ação secundária dentro do formulário: <button> estilizado como link */
.link-inline {
   display: inline-block;
   background: none;
   border: none;
   padding: 4px 0;
   margin-top: 2px;
   font: inherit;
   font-size: 12.5px;
   font-weight: 600;
   color: var(--ob);
   cursor: pointer;
}

.link-inline:hover {
   text-decoration: underline;
}

/* Cartão de esse CPF já tem cadastro */
.cartao-eleitor {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   background: var(--navy-l);
   border-radius: 8px;
   padding: 10px 12px;
   margin-top: 10px;
   font-size: 13.5px;
   color: var(--txt);
}

.cartao-eleitor .ajuda {
   display: inline;
   margin: 0;
}

/* No modal de cadastro quem rola são só os campos */
.modal-cadastro {
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.modal-cadastro>form {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
}

.modal-cadastro .form-grade {
   flex: 1 1 auto;
   min-height: 0;
   align-content: start;
   overflow-y: auto;
   /* espaço pro contorno de foco dos campos não ser cortado pela rolagem */
   padding: 4px 6px 4px 4px;

   /* Sombra de rolagem: avisa que ainda há campo abaixo, sem JS */
   background:
      linear-gradient(var(--surf) 30%, rgba(255, 255, 255, 0)) top / 100% 26px no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0), var(--surf) 70%) bottom / 100% 26px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(8, 26, 51, 0.16), rgba(8, 26, 51, 0)) top / 100% 11px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(8, 26, 51, 0.16), rgba(8, 26, 51, 0)) bottom / 100% 11px no-repeat scroll;
}

.modal-acoes {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   flex-shrink: 0;
   margin-top: 16px;
   padding-top: 14px;
   border-top: 1px solid var(--bord);
}

.detalhes-lista {
   border: 1px solid var(--bord);
   border-radius: 12px;
   padding: 6px;
   background: var(--bg);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.detalhe-linha {
   display: flex;
   gap: 16px;
   padding: 10px 16px;
   font-size: 14px;
   align-items: flex-start;
   border-radius: 8px;
}

.detalhe-linha:nth-child(even) {
   background: var(--surf);
}

.detalhe-linha .rotulo {
   width: 140px;
   flex-shrink: 0;
   color: var(--txt2);
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 6px;
}

.detalhe-linha .rotulo svg {
   width: 16px;
   height: 16px;
   opacity: 0.7;
}

.detalhe-linha .valor {
   color: var(--txt);
   flex: 1;
   min-width: 0;
   line-height: 1.5;
}

/* ===== Estado vazio ("nenhum resultado") ===== */
.estado-vazio {
   text-align: center;
   color: var(--txt2);
   font-size: 13.5px;
   padding: 40px 20px;
}

.estado-vazio strong {
   display: block;
   color: var(--txt);
   font-size: 14.5px;
   margin-bottom: 4px;
}

/* Agenda: lista do dia à esquerda, calendário do mês à direita */
.agenda-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 340px;
   gap: 20px;
   align-items: start;
}

/* Sem capitalize: em português ele maiusculiza toda palavra */
.agenda-dia-cabecalho {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
}

.agenda-dia-titulo {
   font-size: 22px;
   margin: 0 0 2px;
}

.agenda-navegacao {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 10px 0 18px;
}

.agenda-navegacao .btn {
   padding: 6px 12px;
}

.agenda-item {
   display: flex;
   gap: 18px;
   padding: 16px 0;
   border-top: 1px solid var(--bord);
}

.agenda-item:first-of-type {
   border-top: none;
}

.agenda-item .hora {
   width: 108px;
   flex-shrink: 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   border-right: 1px solid var(--bord);
   padding-right: 18px;
}

.agenda-item .hora .h {
   font-size: 26px;
   font-weight: 500;
   color: var(--txt);
   line-height: 1;
   margin-bottom: 8px;
   letter-spacing: -0.5px;
}

.agenda-item .hora .linha-sep {
   width: 40px;
   height: 3px;
   background: var(--bord);
   border-radius: 3px;
   margin-bottom: 8px;
}

.agenda-item .hora .d {
   font-size: 11px;
   font-weight: 700;
   color: var(--txt2);
   text-transform: uppercase;
   margin-top: 2px;
   letter-spacing: 0.5px;
}

.agenda-item .titulo {
   font-size: 15px;
   font-weight: 700;
   color: var(--txt);
   margin: 0 0 4px;
   text-transform: uppercase;
}

.agenda-item .descricao {
   font-size: 13px;
   color: var(--txt2);
   margin: 4px 0 0;
}

.agenda-item .local {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 12.5px;
   color: var(--ob);
}

.agenda-item .local svg {
   width: 14px;
   height: 14px;
}

/* Calendário do mês - grade de 7 colunas, uma célula por dia. */
.agenda-calendario .cabecalho {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   margin-bottom: 12px;
}

.agenda-calendario .mes {
   font-size: 15px;
   font-weight: 600;
}

.agenda-calendario .seta {
   width: 34px;
   height: 34px;
   border-radius: 8px;
   border: none;
   background: var(--navy-d);
   color: #fff;
   font-size: 15px;
   line-height: 1;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.agenda-calendario .seta:hover {
   background: var(--navy);
   text-decoration: none;
   color: #fff;
}

.agenda-calendario .grade {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
}

.agenda-calendario .dia-semana {
   text-align: center;
   font-size: 11px;
   font-weight: 700;
   color: var(--txt2);
   padding: 4px 0 8px;
   text-transform: lowercase;
}

.agenda-calendario .dia {
   aspect-ratio: 1 / 1;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   font-size: 13px;
   color: var(--txt);
   text-decoration: none;
}

.agenda-calendario .dia:hover {
   background: var(--bg);
   text-decoration: none;
}

/* Os dias dos meses vizinhos são links, não decoração: --txt2 passa no contraste */
.agenda-calendario .dia.fora {
   color: var(--txt2);
}

/* Dia com compromisso: o destaque é o sinal principal da tela */
.agenda-calendario .dia.tem-evento {
   background: var(--ok-b);
   color: var(--ok);
   font-weight: 700;
}

.agenda-calendario .dia.hoje {
   box-shadow: inset 0 0 0 1px var(--ob);
}

.agenda-calendario .dia.escolhido {
   background: var(--ob);
   color: var(--ob-btn-txt);
   font-weight: 700;
}

/* Hoje sendo o dia escolhido, o contorno volta por dentro */
.agenda-calendario .dia.escolhido.hoje {
   box-shadow: inset 0 0 0 2px var(--ob-btn-txt);
}

.agenda-calendario .ir-para {
   display: flex;
   gap: 8px;
   margin-top: 14px;
}

.agenda-calendario .ir-para input {
   flex: 1;
}

.agenda-legenda {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 12px;
   font-size: 11.5px;
   color: var(--txt2);
}

.agenda-legenda span {
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.agenda-legenda i {
   width: 11px;
   height: 11px;
   border-radius: 3px;
   display: inline-block;
}

@media (max-width: 1100px) {
   .agenda-layout {
      grid-template-columns: minmax(0, 1fr);
   }

   .agenda-calendario {
      max-width: 340px;
   }
}

/* Foco visível para navegação por teclado, num :focus-visible genérico */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navbtn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.abas a:focus-visible,
[tabindex]:focus-visible {
   outline: 2px solid var(--ob);
   outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="range"]):focus-visible,
select:focus-visible,
textarea:focus-visible,
.combo-gatilho:focus-visible {
   outline-offset: -1px;
}

.sidebar a:focus-visible,
.sidebar .navbtn:focus-visible {
   outline-color: #fff;
   outline-offset: -2px;
}

/* Anel suspenso enquanto o foco tiver sido posto por código */
html.foco-por-codigo .modal-caixa:focus-visible,
html.foco-por-codigo .modal-fechar:focus-visible,
html.foco-por-codigo .modal-caixa input:focus-visible,
html.foco-por-codigo .modal-caixa select:focus-visible,
html.foco-por-codigo .modal-caixa textarea:focus-visible,
/* Mesmo caso no diálogo de confirmação, que abre com foco no Confirmar */
html.foco-por-codigo .dialogo-caixa button:focus-visible {
   outline: none;
}

/* Mesma regra para o preenchimento do ×, não só para o anel */
html.foco-por-codigo .modal-fechar:focus-visible {
   color: var(--txt);
   background: var(--bg);
   border-color: var(--bord);
}

/* Responsivo: a equipe de campo usa celular e tablet no dia a dia */
@media (max-width: 860px) {

   .sidebar .brand-text,
   .sidebar .label {
      display: none;
   }

   .sidebar {
      width: var(--sidebar-w-collapsed);
   }

   /* No celular o overlay volta a cobrir a tela inteira */
   .modal-fundo {
      left: 0;
   }

   .container {
      padding: 18px 14px 50px;
   }

   .form-linha {
      flex-direction: column;
      gap: 0;
   }

   /* Cada campo do formulário ocupa a linha inteira */
   .form-grade>* {
      grid-column: span 12 !important;
   }

   .agenda-item {
      gap: 12px;
   }

   .agenda-item .hora {
      width: 70px;
   }

   .agenda-item .hora .h {
      font-size: 20px;
   }

   .filtro-barra {
      flex-direction: column;
      align-items: stretch;
   }

   .filtro-barra>div {
      width: 100%;
   }

   .filtro-barra.filtro-grade {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
   }

   .filtro-barra.filtro-grade>.filtro-compacto {
      flex: 1 1 calc(50% - 6px);
      min-width: 130px;
   }

   .detalhe-linha {
      flex-direction: column;
      gap: 2px;
   }

   .detalhe-linha .rotulo {
      width: auto;
   }

   /* A tabela continua sendo tabela; quem rola é o .card que a envolve */
   table {
      white-space: nowrap;
      width: max-content;
      min-width: 100%;
   }

   .card {
      overflow-x: auto;
   }

   /* Sombra de rolagem horizontal, só com CSS */
   .card {
      background:
         linear-gradient(to right, var(--surf) 30%, rgba(0, 0, 0, 0)) left center / 28px 100% no-repeat local,
         linear-gradient(to left, var(--surf) 30%, rgba(0, 0, 0, 0)) right center / 28px 100% no-repeat local,
         radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) left center / 12px 100% no-repeat scroll,
         radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) right center / 12px 100% no-repeat scroll;
   }

   .modal-caixa {
      max-width: 100%;
      padding: 18px;
   }

   .modal-padrao {
      max-width: 100%;
   }
}

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

/* Acessibilidade */

/* Pular para o conteúdo, fora da tela até receber foco */
.skip-link {
   position: absolute;
   left: -9999px;
   top: 0;
   z-index: 100;
   background: var(--ob);
   color: var(--ob-btn-txt);
   padding: 10px 16px;
   border-radius: 0 0 8px 0;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
}

.skip-link:focus {
   left: 0;
}

/* Oculta visualmente sem sair da árvore de acessibilidade */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* prefers-reduced-motion: a peça que faltava na lista de acessibilidade */
@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
   }
}

/* Estado vazio de listagem, o par de estado_vazio() em includes/ui.php */
.vazio {
   padding: 18px 20px;
   color: var(--txt2);
   font-size: 14px;
   margin: 0;
}

/* Falha de carregamento precisa ser distinta de lista vazia de verdade */
.vazio.erro {
   color: var(--err);
}

/* Container de importação do timbrado: a área de soltar é um <form> inteiro */
.importar-timbrado-topo {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 14px;
   flex-wrap: wrap;
   margin-bottom: 14px;
}

.importar-timbrado-titulo {
   min-width: 0;
}

.importar-timbrado-topo h2 {
   margin-bottom: 4px;
}

.importar-timbrado-legenda {
   color: var(--txt2);
   font-size: 13px;
   margin: 0;
   max-width: 62ch;
}

/* Área de soltar/escolher (estado "ainda não importou nada"). */
.importar-timbrado-area {
   display: block;
   text-align: center;
   padding: 30px 20px;
   border: 2px dashed var(--bord);
   border-radius: 10px;
   background: var(--bg);
   transition: border-color 0.15s ease, background 0.15s ease;
}

.importar-timbrado-area:hover,
.importar-timbrado-area.arrastando {
   border-color: var(--ob);
   background: var(--ob-l);
}

/* O input fica fora da vista mas continua focável pelo teclado */
.importar-timbrado-campo {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* O foco do input escondido aparece no rótulo, que é o que se enxerga */
.importar-timbrado-campo:focus-visible+.importar-timbrado-icone,
.importar-timbrado-campo:focus-visible~.importar-timbrado-chamada label,
.importar-timbrado-campo:focus-visible+label.chip-exportar {
   outline: 2px solid var(--ob);
   outline-offset: 2px;
   border-radius: 8px;
}

.importar-timbrado-icone {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: var(--navy-l);
   color: var(--navy-fg);
   margin-bottom: 10px;
}

.importar-timbrado-icone svg {
   width: 22px;
   height: 22px;
}

.importar-timbrado-chamada {
   font-size: 14.5px;
   font-weight: 600;
   color: var(--txt);
   margin: 0 0 6px;
}

/* O rótulo é o alvo de clique de verdade, e por isso parece link */
.importar-timbrado-chamada label {
   display: inline;
   font-size: inherit;
   font-weight: 700;
   color: var(--ob-txt);
   text-decoration: underline;
   cursor: pointer;
   margin: 0;
}

.importar-timbrado-ajuda {
   font-size: 12.5px;
   color: var(--txt2);
   margin: 0 auto;
   max-width: 52ch;
}

.importar-timbrado-ajuda+.importar-timbrado-ajuda {
   margin-top: 6px;
}

/* Estado "já importou": a folha em miniatura ao lado dos dados e das ações. */
.importar-timbrado-arte {
   display: flex;
   gap: 20px;
   align-items: flex-start;
}

/* Proporção de A4 em pé: a miniatura precisa parecer uma folha */
.importar-timbrado-folha {
   flex-shrink: 0;
   display: block;
   width: 190px;
   aspect-ratio: 1 / 1.414;
   border: 1px solid var(--bord);
   border-radius: 6px;
   overflow: hidden;
   background: #fff;
}

.importar-timbrado-folha img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}

.importar-timbrado-dados {
   flex: 1;
   min-width: 0;
}

.importar-timbrado-acoes {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 14px;
   align-items: center;
}

.importar-timbrado-troca {
   display: inline-flex;
}

.importar-timbrado-troca label {
   margin: 0;
}

@media (max-width: 860px) {
   .importar-timbrado-arte {
      flex-direction: column;
   }

   .importar-timbrado-folha {
      width: 100%;
      max-width: 260px;
      align-self: center;
   }
}

/* Endereço e e-mail são strings longas e furavam a borda no mobile */
.importar-timbrado-dados .valor {
   overflow-wrap: anywhere;
}

/* Dois blocos lado a lado, um por orientação de folha */
.importar-timbrado-orientacoes {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
}

.importar-timbrado-orientacao {
   display: flex;
   flex-direction: column;
   gap: 10px;
   min-width: 0;
   padding: 16px;
   border: 1px solid var(--bord);
   border-radius: 10px;
}

.importar-timbrado-orientacao-topo {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
}

.importar-timbrado-orientacao-topo h3 {
   margin: 0;
   font-size: 15px;
}

.importar-timbrado-orientacao .importar-timbrado-area {
   flex: 1;
}

.importar-timbrado-orientacao .importar-timbrado-arte {
   flex-direction: column;
   gap: 14px;
}

.importar-timbrado-orientacao .importar-timbrado-dados {
   width: 100%;
}

.orientacao-retrato .importar-timbrado-folha {
   width: 150px;
}

.orientacao-paisagem .importar-timbrado-folha {
   width: 240px;
   aspect-ratio: 1.414 / 1;
}

@media (max-width: 860px) {
   .importar-timbrado-orientacoes {
      grid-template-columns: 1fr;
   }
}

/* A aba Excluir é a única da barra que se pinta antes de ser clicada */
.abas button.aba-perigo {
   color: var(--err);
}

.abas button.aba-perigo svg {
   color: var(--err);
}

.abas button.aba-perigo:hover {
   color: var(--err);
   background: var(--err-b);
}

.abas button.aba-perigo::after {
   background: var(--err);
}

.abas button.aba-perigo.ativa {
   color: var(--err);
}

.abas button.aba-perigo.ativa::after {
   background: var(--err);
}

.abas button.aba-perigo.ativa svg {
   color: var(--err);
}

/* Bloco vermelho fechado: a moldura inteira faz o modal parecer outro lugar */
.painel-perigo {
   background: var(--err-b);
   border: 1px solid var(--err);
   border-radius: 10px;
   padding: 14px 16px;
   margin-bottom: 4px;
}

.painel-perigo-topo {
   display: flex;
   align-items: center;
   gap: 9px;
   color: var(--err);
   font-size: 15px;
   margin-bottom: 8px;
}

.painel-perigo-topo svg {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
}

.painel-perigo p {
   font-size: 13px;
   color: var(--txt);
   margin: 0 0 8px;
   line-height: 1.5;
}

.painel-perigo p:last-of-type {
   margin-bottom: 0;
}

/* A caixa Entendi herda o vermelho do bloco: é ela que destrava o botão */
.painel-perigo .campo-marcar {
   margin: 12px 0 0;
}

.painel-perigo .campo-marcar label {
   color: var(--err);
   font-weight: 600;
}

/* O botão vermelho leva ícone, ao contrário dos outros .btn do produto */
.btn.perigo {
   display: inline-flex;
   align-items: center;
   gap: 7px;
}

.btn.perigo svg {
   width: 16px;
   height: 16px;
   stroke-width: 2;
}

/* Tela inicial do gabinete: capa, KPIs e gráficos; as cores estão no README */
:root {
   --g-aberto: #2f6fb5;
   --g-andamento: #c47f12;
   --g-concluido: #0b7d55;
   --g-arquivado: #8a95a5;
   /* Paleta categórica das roscas: a ordem é fixa, e a ordem é o mecanismo */
   --g-cat1: #c1441a;
   --g-cat2: #2f6fb5;
   --g-cat3: #a87a0e;
   --g-cat4: #6d4aa6;
   --g-cat5: #0b7d55;
   /* Trilho do medidor: passo mais claro da mesma rampa do preenchimento */
   --g-trilho-ok: #dcefe7;
   /* Tons de texto sobre o navy da capa, em tokens literais */
   --capa-txt: #ffffff;
   --capa-txt2: #b8c6db;
   --capa-txt3: #8fa3c0;
}

:root[data-theme="dark"] {
   --g-aberto: #4a86c4;
   --g-andamento: #c2871c;
   --g-concluido: #2f9b74;
   --g-arquivado: #a9b3c0;
   --g-cat1: #dd6a3a;
   --g-cat2: #4a86c4;
   --g-cat3: #c2871c;
   --g-cat4: #9479cf;
   --g-cat5: #2f9b74;
   --g-trilho-ok: #17372c;
}

/* ===== Capa ===== */
.inicio-capa {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
   background: linear-gradient(120deg, #0e2a4d 0%, #081a33 100%);
   border-radius: 12px;
   padding: 24px 26px;
   margin-bottom: 18px;
}

/* O brilho é preso à capa e recortado por ela */
.inicio-capa::before {
   content: "";
   position: absolute;
   top: -120px;
   right: -60px;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(237, 91, 30, 0.28) 0%, rgba(237, 91, 30, 0) 70%);
   pointer-events: none;
}

.inicio-capa>* {
   position: relative;
}

.inicio-capa-sup {
   margin: 0 0 6px;
   font-size: 11.5px;
   font-weight: 600;
   letter-spacing: 0.6px;
   text-transform: uppercase;
   color: var(--capa-txt3);
}

.inicio-capa h1 {
   margin: 0;
   font-size: 24px;
   color: var(--capa-txt);
}

.inicio-capa-sub {
   margin: 8px 0 0;
   font-size: 13px;
   color: var(--capa-txt2);
}

.inicio-capa-data {
   text-align: right;
   font-size: 13px;
   color: var(--capa-txt2);
   line-height: 1.5;
}

.inicio-capa-data strong {
   display: block;
   color: var(--capa-txt);
   font-size: 15px;
}

/* Contagem de colunas explícita: 6, 3 e 2 dividem certo, auto-fit não */
.kpis {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 12px;
   margin-bottom: 18px;
}

/* Cartão claro com filete de cor no topo, não o bloco inteiro pintado */
.kpi {
   display: block;
   position: relative;
   background: var(--surf);
   border: 1px solid var(--bord);
   border-top: 3px solid var(--kpi-cor, var(--txt3));
   border-radius: 10px;
   padding: 14px 16px 15px;
   color: var(--txt);
   text-decoration: none;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
   transition: transform 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}

a.kpi:hover {
   text-decoration: none;
   transform: translateY(-1px);
   border-color: var(--kpi-cor, var(--txt3));
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.kpi-rot {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: var(--txt2);
}

/* Figuras proporcionais: em corpo grande, dígito tabular deixa 121 frouxo */
.kpi-val {
   display: block;
   font-size: 29px;
   font-weight: 700;
   line-height: 1.15;
   margin-top: 6px;
   color: var(--txt);
}

.kpi-val small {
   font-size: 14px;
   font-weight: 600;
   color: var(--txt2);
   margin-left: 3px;
}

/* O travessão de sem dado volta a ser pontuação, menor e no tom de apoio */
.kpi-val.vazio {
   font-size: 20px;
   color: var(--txt3);
}

.kpi-nota {
   display: block;
   font-size: 11.5px;
   color: var(--txt2);
   margin-top: 5px;
}

.kpi-medidor {
   display: block;
   height: 6px;
   border-radius: 999px;
   background: var(--g-trilho-ok);
   margin-top: 9px;
   overflow: hidden;
}

.kpi-medidor span {
   display: block;
   height: 100%;
   border-radius: 999px;
   background: var(--g-concluido);
}

/* Duas colunas fixas e stretch: quatro painéis pedem 2x2 */
.paineis {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
}

.paineis .card {
   margin-bottom: 0;
}

.card-sub {
   font-size: 12.5px;
   color: var(--txt2);
   margin: -8px 0 14px;
}

/* ===== Rosca (situação das demandas) ===== */
.g-rosca-bloco {
   display: flex;
   align-items: center;
   gap: 22px;
   flex-wrap: wrap;
}

.g-rosca {
   position: relative;
   flex-shrink: 0;
   width: 152px;
   height: 152px;
}

.g-rosca svg {
   display: block;
   width: 100%;
   height: 100%;
}

.g-rosca-centro {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   pointer-events: none;
}

.g-rosca-centro b {
   font-size: 27px;
   line-height: 1.1;
   color: var(--txt);
}

.g-rosca-centro span {
   font-size: 11.5px;
   color: var(--txt2);
   margin-top: 2px;
}

.g-legenda {
   flex: 1;
   min-width: 190px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.g-legenda li+li {
   border-top: 1px solid var(--bord);
}

.g-legenda a,
.g-legenda .g-legenda-linha {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 7px 0;
   color: var(--txt);
   text-decoration: none;
   font-size: 13.5px;
}

/* Só o rótulo acende no hover; número é dado e fica no tom de texto */
.g-legenda a:hover {
   text-decoration: none;
}

.g-legenda a:hover .g-legenda-rot {
   color: var(--ob-txt);
}

/* O ponto colorido ao lado carrega a identidade da fatia, não o texto */
.g-ponto {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   flex-shrink: 0;
   background: var(--g-cor, var(--txt3));
}

.g-legenda-rot {
   flex: 1;
   min-width: 0;
}

/* Realce: a fatia apontada fica como está e as outras recuam */
.g-rosca-bloco[data-realce] .g-arco {
   opacity: 0.28;
   transition: opacity 120ms ease;
}

.g-rosca-bloco[data-realce="0"] .g-arco[data-fatia="0"],
.g-rosca-bloco[data-realce="1"] .g-arco[data-fatia="1"],
.g-rosca-bloco[data-realce="2"] .g-arco[data-fatia="2"],
.g-rosca-bloco[data-realce="3"] .g-arco[data-fatia="3"],
.g-rosca-bloco[data-realce="4"] .g-arco[data-fatia="4"] {
   opacity: 1;
}

/* Aqui a opacity é sobre forma, não sobre texto nem controle */
.g-rosca-bloco .g-legenda li:hover {
   background: var(--bg);
   border-radius: 6px;
}

/* ===== Um responsável só: o número é o gráfico ===== */
.g-destaque {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 6px 0 2px;
}

.g-iniciais.grande {
   width: 46px;
   height: 46px;
   font-size: 16px;
}

.g-destaque-val {
   display: block;
   font-size: 32px;
   font-weight: 700;
   line-height: 1.1;
   color: var(--txt);
}

.g-destaque-rot {
   display: block;
   font-size: 14px;
   font-weight: 600;
   color: var(--txt);
   margin-top: 2px;
}

.g-destaque-nota {
   display: block;
   font-size: 12px;
   color: var(--txt2);
   margin-top: 3px;
}

.g-legenda-val {
   font-weight: 700;
   font-variant-numeric: tabular-nums;
}

.g-legenda-pct {
   font-size: 12px;
   color: var(--txt2);
   font-variant-numeric: tabular-nums;
   min-width: 40px;
   text-align: right;
}

/* ===== Iniciais (cartão de um responsável só) ===== */
.g-iniciais {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--navy-l);
   color: var(--navy-fg);
   font-size: 11px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

/* ===== Cabeçalho de seção (fora do cartão) ===== */
.inicio-secao-topo {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   margin: 18px 0 12px;
}

.inicio-secao-topo h2 {
   margin: 0;
}

.inicio-secao-topo .card-sub {
   margin: 4px 0 0;
}

/* ===== Mapa resumido ===== */
.inicio-mapa {
   padding: 0;
   overflow: hidden;
}

.inicio-mapa-topo {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   padding: 16px 20px 14px;
   border-bottom: 1px solid var(--bord);
}

.inicio-mapa-topo h2 {
   margin: 0;
}

.inicio-mapa-topo .card-sub {
   margin: 3px 0 0;
}

#mapa-inicio {
   height: 340px;
   width: 100%;
}

/* O popup do Leaflet nasce branco por regra da própria biblioteca */
/* As camadas do Leaflet (z-index 400 a 1000) ficam presas ao mapa, abaixo dos modais */
.leaflet-container {
   isolation: isolate;
}

:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
   background: var(--surf);
   color: var(--txt);
}

/* 6 x ~170px + vãos não cabem mais no conteúdo (a barra lateral come 216px). */
@media (max-width: 1340px) {
   .kpis {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width: 980px) {
   .paineis {
      grid-template-columns: minmax(0, 1fr);
   }
}

/* No celular, três colunas deixariam o número maior que a caixa */
@media (max-width: 560px) {
   .kpis {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .kpi-val {
      font-size: 25px;
   }
}

@media (max-width: 860px) {
   .inicio-capa {
      padding: 18px;
   }

   .inicio-capa h1 {
      font-size: 20px;
   }

   .inicio-capa-data {
      text-align: left;
   }

   .g-rosca-bloco {
      gap: 16px;
   }

   #mapa-inicio {
      height: 280px;
   }
}

/* Diálogo de confirmação: cobre a barra lateral, ao contrário do modal */
.dialogo-fundo {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(8, 26, 51, 0.55);
   align-items: center;
   justify-content: center;
   padding: 20px;
   /* Acima de .modal-fundo: a confirmação de uma ação do modal vem por cima dele */
   z-index: 80;
}

.dialogo-fundo.aberto {
   display: flex;
}

.dialogo-caixa {
   background: var(--surf);
   border-radius: 14px;
   padding: 26px 26px 20px;
   width: 100%;
   max-width: 440px;
   text-align: center;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
   /* Entrada curta; prefers-reduced-motion desliga */
   animation: dialogo-entrar 0.16s ease-out;
}

@keyframes dialogo-entrar {
   from {
      transform: scale(0.9);
      opacity: 0;
   }

   to {
      transform: scale(1);
      opacity: 1;
   }
}

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

/* O ícone dá o tom antes de a frase ser lida */
.dialogo-icone {
   width: 72px;
   height: 72px;
   margin: 4px auto 16px;
   border-radius: 999px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--warn-b);
   color: var(--warn);
   border: 3px solid currentColor;
}

.dialogo-icone svg {
   width: 38px;
   height: 38px;
   stroke-width: 1.8;
}

.dialogo-fundo.perigo .dialogo-icone {
   background: var(--err-b);
   color: var(--err);
}

.dialogo-caixa h2 {
   font-size: 21px;
   margin: 0 0 8px;
   color: var(--txt);
}

.dialogo-texto {
   font-size: 14px;
   color: var(--txt2);
   margin: 0;
   line-height: 1.5;
   white-space: pre-wrap;
}

/* Confirmar à esquerda e Cancelar à direita, ao contrário do rodapé dos modais */
.dialogo-acoes {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-top: 22px;
}

.dialogo-acoes .btn {
   min-width: 120px;
   justify-content: center;
}

@media (max-width: 560px) {
   .dialogo-caixa {
      padding: 22px 18px 16px;
   }

   .dialogo-acoes {
      flex-direction: column-reverse;
   }

   .dialogo-acoes .btn {
      width: 100%;
   }
}

/* .alerta-acao marca o banner que o app.js move para dentro do modal */
.modal-caixa>.alerta-acao {
   margin-top: 0;
}

/* Seções de um modal de detalhe: cada bloco num cartão com título próprio */
.bloco-modal {
   background: var(--bg);
   border: 1px solid var(--bord);
   border-radius: 10px;
   padding: 14px 16px;
   margin-top: 14px;
}

/* Linha do tempo (Histórico de atendimento) */
.timeline {
   position: relative;
   padding-left: 24px;
   margin-top: 16px;
}

.timeline-item {
   position: relative;
   padding-bottom: 24px;
}

.timeline-item:last-child {
   padding-bottom: 0;
}

/* Círculo centrado a 6px da borda; um trecho de linha liga cada um ao seguinte, nenhum sai do último */
.timeline-item::before {
   content: '';
   position: absolute;
   left: -24px;
   top: 3px;
   width: 12px;
   height: 12px;
   box-sizing: border-box;
   border-radius: 50%;
   background: var(--surf);
   border: 2px solid var(--txt3);
}

.timeline-item:not(:last-child)::after {
   content: '';
   position: absolute;
   left: -19px;
   top: 15px;
   bottom: -3px;
   width: 2px;
   background: var(--bord);
}

.painel-demanda {
   display: flex;
   flex-direction: column;
}

.colunas-demanda {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   grid-auto-rows: minmax(0, 1fr);
   gap: 0 14px;
   align-items: stretch;
   flex: 1 1 auto;
   min-height: 440px;
}

.colunas-demanda .coluna-demanda {
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
}

.colunas-demanda .coluna-esquerda {
   grid-column: span 2;
}

.colunas-demanda .coluna-historico {
   grid-column: span 2;
}

.colunas-demanda .bloco-modal {
   min-height: 0;
   overflow-y: auto;
}

.colunas-demanda .coluna-esquerda>.bloco-modal:first-of-type,
.colunas-demanda .coluna-historico>.bloco-modal {
   flex: 1 1 auto;
}

.colunas-demanda .coluna-esquerda>.bloco-modal:last-of-type {
   flex: 0 0 auto;
}

@media (max-width: 1100px) {
   .painel-demanda {
      display: block;
   }

   .colunas-demanda {
      display: block;
      min-height: 0;
   }

   .colunas-demanda .coluna-demanda {
      display: block;
   }

   .colunas-demanda .bloco-modal {
      max-height: none;
      overflow-y: visible;
   }

}

.bloco-modal>h3 {
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--txt2);
   margin: 0 0 10px;
   display: flex;
   align-items: center;
   gap: 8px;
}

/* A contagem do bloco responde se vale a pena rolar, antes de rolar */
.bloco-modal-contagem {
   background: var(--bord);
   color: var(--txt);
   border-radius: 999px;
   padding: 1px 8px;
   font-size: 11.5px;
   letter-spacing: 0;
}

.bloco-modal-vazio {
   font-size: 12.5px;
   color: var(--txt2);
   margin: 0;
}

/* A última linha da ficha perde a borda, para não sobrar um risco solto */
.bloco-modal .detalhe-linha:last-of-type {
   border-bottom: none;
   padding-bottom: 0;
}

/* Registrar atendimento: 70% o formulário, 30% a saída da demanda */
.atendimento-e-saida {
   display: flex;
   gap: 14px;
   align-items: stretch;
}

.atendimento-e-saida .atendimento-form {
   flex: 1 1 70%;
   min-width: 0;
}

.atendimento-e-saida .atendimento-saida {
   flex: 0 0 auto;
   min-width: 30%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding-left: 14px;
   border-left: 1px solid var(--bord);
}

.atendimento-saida .btn {
   width: 100%;
   justify-content: center;
   white-space: nowrap;
}

/* Abaixo do breakpoint dos painéis o botão vira uma faixa embaixo do formulário */
@media (max-width: 860px) {
   .atendimento-e-saida {
      display: block;
   }

   .atendimento-e-saida .atendimento-saida {
      padding-left: 0;
      border-left: none;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--bord);
   }
}

/* .detalhes-lista já era uma caixa própria; dentro do cartão vira só a lista */
.bloco-modal .detalhes-lista {
   border: none;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
   padding: 0;
}

.modal-cadastro>form:has(> .bloco-modal) {
   overflow-y: auto;
}

.modal-cadastro>form>.bloco-modal {
   flex: 0 0 auto;
   margin-top: 0;
}

.modal-cadastro>form>.bloco-modal+.bloco-modal {
   margin-top: 14px;
}

.modal-cadastro>form>.bloco-modal:last-of-type {
   margin-bottom: 16px;
}

.modal-cadastro>form:has(> .bloco-modal)>.modal-acoes {
   position: sticky;
   bottom: 0;
   z-index: 1;
   margin-top: auto;
   background: var(--surf);
   box-shadow: 0 8px 0 var(--surf);
}

.campo-curto {
   max-width: 267px;
}

.modal-cadastro .bloco-modal .form-grade {
   flex: none;
   min-height: 0;
   overflow-y: visible;
   padding: 0;
   background: none;
}

.bloco-modal .tabela-chamados {
   margin: 0;
}

.tabela-chamados .badge-status {
   text-transform: uppercase;
   font-weight: 700;
}

/* Dentro do cartão o formulário encosta nas bordas se mantiver a margem de tela. */
.bloco-modal form {
   margin: 0;
}

.modal-caixa.modal-visor-pdf {
   overflow: hidden;
}

.modal-visor-pdf>[data-painel]:not([hidden]) {
   min-height: 0;
}

.modal-visor-pdf>div[data-painel="ver"]:not([hidden]) {
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

/* A ficha não rola: o scroll fica só no PDF */
.ficha-propositura {
   flex: 0 1 auto;
   min-height: 0;
   overflow-y: auto;
}

/* O bloco do documento fica por último e come TODA a altura que sobrar. */
.bloco-documento {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
   margin-top: 14px;
}

.bloco-documento>h3 {
   margin: 0 0 8px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.02em;
   color: var(--txt2);
}

/* O visor é o do próprio navegador; a moldura separa o fundo escuro do leitor */
.visor-pdf {
   flex: 1 1 auto;
   min-height: 0;
   width: 100%;
   border: 1px solid var(--bord);
   border-radius: 8px;
   background: var(--bg);
}

/* Documentos: a ficha à esquerda e o leitor à direita, no desenho do gerador */
.layout-documento-visor {
   flex: 1 1 auto;
   min-height: 0;
   align-items: stretch;
}

.layout-documento-visor .gerador-coluna-esq {
   position: static;
   overflow-y: auto;
}

/* Em 320px não cabe rótulo e valor lado a lado: a ficha empilha */
.layout-documento-visor .detalhe-linha {
   flex-direction: column;
   gap: 2px;
}

.layout-documento-visor .gerador-coluna-dir {
   display: flex;
   flex-direction: column;
   min-height: 0;
}

/* A rodinha fica por cima do iframe até o PDF pintar */
.visor-pdf-caixa {
   position: relative;
   display: flex;
   flex: 1 1 auto;
   min-height: 0;
}

.visor-pdf-carregando {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   border: 1px solid var(--bord);
   border-radius: 8px;
   background: var(--bg);
   color: var(--txt2);
   font-size: 12.5px;
}

.visor-pdf-carregando[hidden] {
   display: none;
}

.rodinha {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 3px solid var(--bord);
   border-top-color: var(--ob);
   animation: rodinha-girar 0.8s linear infinite;
}

.rodinha-mini {
   width: 14px;
   height: 14px;
   border-width: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
   .rodinha {
      animation-duration: 2.4s;
   }
}

/* Anexos de uma demanda: grade que se adapta, de 1 a 4 arquivos */
.galeria-midias {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

/* Altura fixa e object-fit: cover, para a fileira de miniaturas alinhar */
.midia-demanda {
   height: 140px;
   max-width: 220px;
   object-fit: cover;
   border-radius: 8px;
   border: 1px solid var(--bord);
   background: var(--bg);
   display: block;
}

/* O vídeo não recorta: cover cortaria a barra de reprodução */
video.midia-demanda {
   object-fit: contain;
   max-width: 280px;
}

/* Aba travada: continua na barra, apagada, com o motivo no title */
.abas button.aba-travada,
.abas button.aba-travada:hover {
   color: var(--txt2);
   opacity: 0.45;
   cursor: not-allowed;
   pointer-events: none;
   background: transparent;
}

.abas button.aba-travada svg {
   color: var(--txt2);
}

.abas button.aba-travada::after {
   transform: scaleX(0);
   background: transparent;
}

/* Campo de busca com largura de conforto, e não flex: 1 */
.filtro-barra .campo-busca {
   flex: 0 1 320px;
   min-width: 180px;
}

.filtro-barra>.filtro-compacto {
   flex: 0 1 160px;
   min-width: 120px;
}

/* Barra cujo campo é um combo: alinha pelo topo, senão o painel aberto derruba o botão */
.filtro-barra.filtro-combo {
   align-items: flex-start;
}

.filtro-barra.filtro-combo>.filtro-combo-campo {
   flex: 1 1 260px;
}

.filtro-barra.filtro-combo .btn-limpar {
   align-self: flex-start;
}

/* Limpar é um <a> para a URL sem parâmetro: limpar filtro é navegação */
.filtro-barra .btn-limpar {
   align-self: flex-end;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 9px 14px;
   border-radius: 8px;
   border: 1px solid var(--bord);
   background: transparent;
   color: var(--txt2);
   font-size: 13px;
   font-weight: 600;
   line-height: 1.2;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
}

.filtro-barra .btn-limpar:hover {
   background: var(--bg);
   color: var(--txt);
   text-decoration: none;
}

.filtro-barra .btn-limpar svg {
   width: 14px;
   height: 14px;
}

/* Documentos: cartões por espécie e paginador numerado */

/* Os cartões de espécie não usam a paleta saturada de Demandas */
.cartoes-especie {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
   gap: 10px;
   margin-bottom: 18px;
}

.cartao-especie {
   display: flex;
   flex-direction: column;
   gap: 2px;
   padding: 12px 14px;
   border: 1px solid var(--bord);
   border-radius: 10px;
   background: var(--surf);
   color: var(--txt);
   text-decoration: none;
   transition: border-color 0.12s ease, transform 0.1s ease, background 0.12s ease;
}

.cartao-especie:hover {
   text-decoration: none;
   transform: translateY(-1px);
   border-color: var(--ob);
   background: var(--bg);
}

/* O selecionado é o card escuro, navy e não laranja */
.cartao-especie.ativo {
   background: var(--navy);
   border-color: var(--navy);
   color: #fff;
   box-shadow: inset 0 -3px 0 var(--ob);
}

/* No tema escuro o navy precisa de um tom mais claro que a superfície */
:root[data-theme="dark"] .cartao-especie.ativo {
   background: #24415f;
   border-color: #24415f;
}

.cartao-especie.ativo:hover {
   background: var(--navy);
   border-color: var(--navy);
}

/* Sobre o navy, branco rebaixado em vez de --txt2 */
.cartao-especie.ativo .prefixo,
.cartao-especie.ativo .rotulo {
   color: rgba(255, 255, 255, 0.82);
}

/* Zero sobre o navy precisa de outro valor que o do card claro */
.cartao-especie.ativo .valor.zero {
   color: rgba(255, 255, 255, 0.5);
}

.cartao-especie .prefixo {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 0.06em;
   color: var(--txt2);
}

.cartao-especie .valor {
   font-size: 24px;
   font-weight: 700;
   line-height: 1.15;
   font-variant-numeric: tabular-nums;
}

/* Zero apagado em --txt2: o número de 24px é texto grande e --txt3 reprova */
.cartao-especie .valor.zero {
   color: var(--txt2);
}

.cartao-especie .rotulo {
   font-size: 12px;
   font-weight: 600;
   color: var(--txt2);
   line-height: 1.25;
}

/* Todos os documentos não tem preenchimento próprio: o escuro só marca o filtro */

/* Paginador numerado, no lugar do Anterior e Próxima */
.paginador {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 16px;
}

.paginador-contagem {
   font-size: 12.5px;
   color: var(--txt2);
}

.paginador-so-paginas {
   justify-content: flex-end;
}

.paginador-paginas {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
}

.paginador-paginas a,
.paginador-paginas span {
   min-width: 34px;
   height: 34px;
   padding: 0 9px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   text-decoration: none;
   border: 1px solid transparent;
}

.paginador-paginas a {
   color: var(--txt2);
   border-color: var(--bord);
}

.paginador-paginas a:hover {
   background: var(--bg);
   color: var(--txt);
   text-decoration: none;
}

/* A página atual é <span> e não <a> */
.paginador-paginas .atual {
   background: var(--ob);
   border-color: var(--ob);
   color: #fff;
}

/* As reticências entre saltos de página: nem link, nem botão. */
.paginador-paginas .salto {
   color: var(--txt3);
   border: 0;
   min-width: 18px;
   padding: 0 2px;
}

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

   .paginador {
      justify-content: center;
   }

   .paginador-contagem {
      width: 100%;
      text-align: center;
   }
}

/* A coluna de mudar status vira controle fantasma: acende no hover e no foco */
.tabela-documentos td {
   vertical-align: middle;
}

/* O número ganha monoespaçado e dígito tabular, para as colunas alinharem */
.tabela-documentos .numero-documento {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 12.5px;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
}

/* A espécie por extenso fica em segundo plano: o prefixo já abre o número */
.tabela-documentos .especie {
   font-size: 12.5px;
   color: var(--txt2);
}

/* A ementa é o conteúdo: peso normal e cor cheia. */
.tabela-documentos .ementa {
   color: var(--txt);
}

/* A ementa sai em caixa alta por CSS, não no banco */
.texto-ementa {
   text-transform: uppercase;
}

.tabela-documentos .acao-status select {
   opacity: 0.45;
   transition: opacity 0.12s ease;
   font-size: 12px;
   padding: 5px 8px;
   max-width: 160px;
}

.tabela-documentos tr:hover .acao-status select,
.tabela-documentos .acao-status select:focus,
.tabela-documentos .acao-status select:hover {
   opacity: 1;
}

/* Sem hover (toque), o controle nunca acenderia: no celular ele já nasce opaco. */
@media (hover: none) {
   .tabela-documentos .acao-status select {
      opacity: 1;
   }
}

/* O reset do campo de busca mora aqui por causa da cascata */
@media (max-width: 860px) {
   .filtro-barra .campo-busca {
      flex: 0 0 auto;
   }
}

/* Também encerra: fundo claro dentro do bloco vermelho, com barra âmbar */
.painel-perigo .tambem-encerra {
   background: var(--surf);
   border-left: 3px solid var(--warn);
   border-radius: 0 7px 7px 0;
   padding: 9px 12px;
   margin: 0 0 8px;
   font-size: 13px;
   color: var(--txt);
   line-height: 1.5;
}

.painel-perigo .tambem-encerra strong {
   color: var(--warn);
}

.painel-perigo .tambem-encerra ul {
   margin: 5px 0 0;
   padding-left: 18px;
}

.painel-perigo .tambem-encerra li {
   margin-bottom: 3px;
}

.painel-perigo .tambem-encerra li:last-child {
   margin-bottom: 0;
}

/* Combo de pessoa agrupado por bairro: o painel é em fluxo, não absolute */
.combo {
   position: relative;
}

/* O gatilho imita um <select>, que é o mesmo papel na tela */
.combo-gatilho {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
   padding: 9px 10px;
   border: 1px solid var(--bord);
   border-radius: 7px;
   background: var(--surf);
   color: var(--txt);
   font-family: inherit;
   font-size: 14px;
   text-align: left;
   cursor: pointer;
}

.combo-gatilho:hover {
   border-color: var(--txt3);
}

.combo-gatilho-texto {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* Nada escolhido é texto de placeholder, não um valor */
.combo-gatilho-vazio .combo-gatilho-texto {
   color: var(--txt2);
}

.combo-gatilho-seta {
   flex: 0 0 auto;
   color: var(--txt2);
   transform: rotate(90deg);
   transition: transform 0.15s ease;
}

.combo-gatilho[aria-expanded="true"] .combo-gatilho-seta {
   transform: rotate(-90deg);
}

.combo-painel {
   margin-top: 6px;
   border: 1px solid var(--bord);
   border-radius: 8px;
   background: var(--surf);
   padding: 8px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.combo-busca {
   margin-bottom: 6px;
}

.combo-estado {
   margin: 0 0 6px;
   font-size: 11.5px;
   color: var(--txt2);
   line-height: 1.45;
}

.combo-estado[hidden] {
   display: none;
}

/* Teto de altura com rolagem própria: 300px cabem cerca de 8 linhas */
.combo-lista {
   max-height: 300px;
   overflow-y: auto;
}

.combo-grupo+.combo-grupo {
   margin-top: 2px;
}

/* A barra do bairro: o fundo e os cantos ficam nela, não no botão */
.combo-grupo-barra {
   display: flex;
   align-items: center;
   gap: 8px;
   padding-left: 8px;
   border-radius: 6px;
   background: var(--bg);
}

.combo-grupo-barra:hover {
   background: var(--navy-l);
}

/* Alvo de toque maior que os 13px do glifo, sem empurrar a linha para baixo. */
.combo-grupo-marcar {
   flex: 0 0 auto;
   width: 15px;
   height: 15px;
   margin: 0;
   cursor: pointer;
   accent-color: var(--ob);
}

/* O cabeçalho do bairro precisa parecer clicável e distinguir-se dos nomes */
.combo-grupo-titulo {
   display: flex;
   align-items: center;
   gap: 6px;
   flex: 1 1 auto;
   min-width: 0;
   padding: 7px 8px 7px 0;
   border: 0;
   border-radius: 6px;
   background: transparent;
   color: var(--txt);
   font-family: inherit;
   font-size: 12.5px;
   font-weight: 700;
   text-align: left;
   cursor: pointer;
}

.combo-grupo-nome {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* Fechado, a contagem é a única pista do tamanho do grupo */
.combo-grupo-contagem {
   flex: 0 0 auto;
   min-width: 20px;
   padding: 1px 6px;
   border-radius: 999px;
   background: var(--surf);
   color: var(--txt2);
   font-size: 11px;
   font-weight: 600;
   text-align: center;
}

.combo-grupo-seta {
   flex: 0 0 auto;
   color: var(--txt2);
   transition: transform 0.15s ease;
}

.combo-grupo-titulo[aria-expanded="true"] .combo-grupo-seta {
   transform: rotate(90deg);
}

.combo-grupo-itens {
   padding: 2px 0 2px 14px;
}

.combo-item {
   display: flex;
   align-items: center;
   gap: 8px;
   width: 100%;
   padding: 7px 8px;
   border: 0;
   border-radius: 6px;
   background: transparent;
   color: var(--txt);
   font-family: inherit;
   font-size: 13.5px;
   text-align: left;
   cursor: pointer;
}

.combo-item:hover {
   background: var(--bg);
}

.combo-item-nome {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* A escolha atual é marcada por fundo, peso e ✓, nunca só por cor */
.combo-item[aria-current="true"] {
   background: var(--ob-l);
   color: var(--ob-txt);
   font-weight: 600;
}

.combo-item[aria-current="true"]::after {
   content: "✓";
   flex: 0 0 auto;
   font-weight: 700;
}

/* Nenhuma fica fora dos grupos, no topo */
.combo-item-vazio {
   font-style: italic;
   color: var(--txt2);
   margin-bottom: 4px;
}

.combo-item-vazio[aria-current="true"] {
   font-style: normal;
}

.combo-nada {
   margin: 6px 4px;
   font-size: 12.5px;
   color: var(--txt2);
}

/* Modo múltiplo do combo, só em Adicionar apoiadores */

/* A linha vira <label> com checkbox nativo; o reset de largura é necessário */
.combo-item-marcavel {
   margin: 0;
   font-weight: 400;
   color: var(--txt);
}

.combo-item-marcavel input[type="checkbox"] {
   flex: 0 0 auto;
   margin: 0;
   cursor: pointer;
   accent-color: var(--ob);
}

/* Marcada ganha fundo e peso, não só a caixinha */
.combo-item-marcavel.marcada {
   background: var(--ob-l);
}

.combo-item-marcavel.marcada .combo-item-nome {
   color: var(--ob-txt);
   font-weight: 600;
}

/* "2/11" na pílula do bairro: fechado, é o que avisa que há escolha sua lá dentro. */
.combo-grupo-contagem.com-marcados {
   background: var(--ob);
   color: var(--ob-btn-txt);
}

/* Fichas do que já foi marcado, para o estado fechado do combo */
.combo-fichas {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 8px;
}

.combo-ficha {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 3px 4px 3px 9px;
   border-radius: 999px;
   background: var(--ob-l);
   color: var(--ob-txt);
   font-size: 12px;
   font-weight: 600;
   max-width: 100%;
}

.combo-ficha-nome {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.combo-ficha-tirar {
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   color: inherit;
   font-family: inherit;
   font-size: 14px;
   line-height: 1;
   cursor: pointer;
}

.combo-ficha-tirar:hover {
   background: var(--ob);
   color: var(--ob-btn-txt);
}

/* Agenda: período de impressão e repetição */
.agenda-imprimir {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}

.agenda-imprimir label {
   margin: 0;
}

.agenda-imprimir select {
   width: auto;
   min-width: 120px;
}

.agenda-imprimir-intervalo {
   margin: 0;
}

.agenda-repeticao {
   border-top: 1px solid var(--bord);
   margin-top: 6px;
   padding-top: 10px;
}

.agenda-repeticao>[data-repeticao-ate] {
   margin-top: 8px;
}

.agenda-repeticao select {
   max-width: 420px;
}

.agenda-repeticao input[type="date"] {
   max-width: 200px;
}

.modal-trocar-senha { width: 100%; max-width: 480px; }