/* ==========================================================================
   Suporte Inteli — mesma identidade do admin da rede (tema Inteli v2, bi.grupointeli.com):
   Inter + Geist, azul Inteli, claro por padrão com botão de escuro, menu lateral com grupos.
   Tokens em HSL (os mesmos números do tema da rede) para o portal parecer parte do mesmo sistema.
   ========================================================================== */

:root {
  --bg: 210 20% 98%;
  --card: 0 0% 100%;
  --fg: 215 20% 9%;
  --fg-2: 215 16% 26%;
  --muted-fg: 215 14% 40%;
  --line: 214 22% 90%;
  --line-forte: 214 16% 72%;
  --muted: 210 18% 95%;
  --muted-2: 210 16% 90%;
  --lateral: 210 18% 96.5%;
  --primary: 217 91% 50%;
  --primary-botao: 217 91% 50%;
  --primary-hover: 217 91% 44%;
  --primary-fg: 0 0% 100%;
  --ok: 152 62% 29%;
  --alerta: 30 92% 34%;
  --laranja: 18 88% 40%;
  --erro: 0 72% 46%;
  --pausa: 217 91% 45%;
  --violeta: 262 56% 50%;
  --ambar-fundo: 38 92% 50%;
  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 1px 2px hsl(215 20% 9% / .04), 0 2px 6px -2px hsl(215 20% 9% / .05);
  --sombra-alta: 0 18px 44px -14px hsl(215 30% 10% / .32);
  --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-display: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --lateral-w: 256px;
  --z-barra: 30;
  --z-fundo: 40;
  --z-gaveta: 50;
  --z-pular: 60;
  color-scheme: light;
}
[data-tema="escuro"] {
  --bg: 0 0% 4%;
  --card: 0 0% 7%;
  --fg: 0 0% 97%;
  --fg-2: 0 0% 80%;
  --muted-fg: 0 0% 62%;
  --line: 0 0% 14%;
  --line-forte: 0 0% 27%;
  --muted: 0 0% 10.5%;
  --muted-2: 0 0% 15%;
  --lateral: 0 0% 6%;
  --primary: 217 91% 64%;
  --primary-botao: 217 91% 52%;
  --primary-hover: 217 91% 58%;
  --ok: 152 52% 54%;
  --alerta: 36 92% 62%;
  --laranja: 22 92% 64%;
  --erro: 0 82% 68%;
  --pausa: 217 91% 70%;
  --violeta: 262 80% 76%;
  --sombra: none;
  --sombra-alta: 0 18px 44px -14px hsl(0 0% 0% / .8);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 400 14px/1.55 var(--fonte); color: hsl(var(--fg)); background: hsl(var(--bg));
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: hsl(var(--primary) / .2); }
:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; color: hsl(var(--fg)); }
h1 { font: 700 24px/1.2 var(--fonte-display); letter-spacing: -.02em; }
h2 { font: 600 15px/1.35 var(--fonte); letter-spacing: -.005em; }
h3 { font: 600 14px/1.4 var(--fonte); }
p { margin: 0; }
code { font: 500 12.5px/1.4 ui-monospace, "SF Mono", Consolas, monospace; background: hsl(var(--muted)); border: 1px solid hsl(var(--line)); border-radius: 5px; padding: 1px 5px; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: hsl(var(--muted-fg)); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.pular { position: absolute; left: 12px; top: -60px; z-index: var(--z-pular); background: hsl(var(--primary-botao)); color: #fff; padding: 8px 12px; border-radius: 8px; }
.pular:focus { top: 12px; }
[data-tema="escuro"] .so-claro, :root:not([data-tema="escuro"]) .so-escuro { display: none; }

/* ---------------------------------------------------------------- marca */
.marca { display: flex; align-items: center; gap: 10px; color: hsl(var(--fg)); text-decoration: none !important; }
.marca-selo {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: hsl(var(--primary-botao)); color: #fff;
  box-shadow: 0 6px 14px -6px hsl(217 91% 45% / .7), inset 0 1px 0 hsl(0 0% 100% / .18);
}
.marca-selo .ic { width: 18px; height: 18px; }
.marca-txt { display: flex; flex-direction: column; line-height: 1.12; }
.marca-txt b { font: 700 16px/1.12 var(--fonte-display); letter-spacing: -.015em; }
.marca-txt small { font-size: 11.5px; font-weight: 500; color: hsl(var(--muted-fg)); }

/* ---------------------------------------------------------------- portal: menu lateral + conteúdo */
/* a grade fica num contêiner próprio, nunca no <body>: elemento injetado por extensão no <body> não entra nela */
.casca {
  display: grid; grid-template-columns: var(--lateral-w) minmax(0, 1fr); min-height: 100vh;
  /* a coluna do menu continua até o fim da página, mesmo quando o conteúdo é mais alto que a tela */
  background: linear-gradient(to right, hsl(var(--lateral)) 0 calc(var(--lateral-w) - 1px), hsl(var(--line)) calc(var(--lateral-w) - 1px) var(--lateral-w), hsl(var(--bg)) var(--lateral-w));
}
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px; padding: 20px 14px 14px;
  background: hsl(var(--lateral)); border-right: 1px solid hsl(var(--line));
}
.lateral > .marca { padding: 0 6px 2px; }
.menu { display: flex; flex-direction: column; gap: 20px; }
.grupo { display: grid; gap: 2px; }
.grupo-tit { padding: 0 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--muted-fg)); }
.menu a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--raio-p);
  color: hsl(var(--fg-2)); font-size: 13.5px; font-weight: 500; text-decoration: none !important;
  transition: background .15s, color .15s;
}
.menu a .ic { opacity: .75; }
.menu a:hover { background: hsl(var(--muted-2) / .75); color: hsl(var(--fg)); }
.menu a[aria-current="page"] { background: hsl(var(--primary-botao)); color: hsl(var(--primary-fg)); font-weight: 600; }
.menu a[aria-current="page"] .ic { opacity: 1; }
.contador {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: hsl(var(--primary) / .12); color: hsl(var(--primary));
}
.menu a[aria-current="page"] .contador { background: hsl(0 0% 100% / .22); color: #fff; }
.lateral-pe { margin-top: auto; padding-top: 12px; border-top: 1px solid hsl(var(--line)); display: grid; gap: 2px; }
.eu { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; min-width: 0; }
.eu > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.eu b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu small { font-size: 11.5px; color: hsl(var(--muted-fg)); }
.lateral-acao {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--raio-p);
  background: none; font: 500 13px/1.3 var(--fonte); color: hsl(var(--muted-fg)); text-align: left; cursor: pointer;
  text-decoration: none !important; transition: background .15s, color .15s;
}
.lateral-acao:hover { background: hsl(var(--muted-2) / .75); color: hsl(var(--fg)); }

/* em monitor largo o conteúdo se centraliza no espaço ao lado do menu, em vez de ficar espremido à esquerda */
.conteudo { min-width: 0; width: 100%; max-width: 1600px; margin-inline: auto; padding: 30px clamp(18px, 3.2vw, 48px) 28px; }
.rodape {
  display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 16px; border-top: 1px solid hsl(var(--line));
  font-size: 12.5px; color: hsl(var(--muted-fg));
}
.rodape b { color: hsl(var(--fg-2)); }

.barra-movel, .fundo-menu { display: none; }

/* ---------------------------------------------------------------- cabeçalho de página */
.cab, .cab-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cab .sub, .cab-pagina .sub { margin-top: 6px; font-size: 14px; color: hsl(var(--muted-fg)); max-width: 72ch; }
.cab .acoes, .cab-pagina .acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.migalha { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; font-weight: 500; color: hsl(var(--muted-fg)); }
.migalha:hover { color: hsl(var(--fg)); text-decoration: none; }
.migalha .ic { width: 15px; height: 15px; }
.sub { color: hsl(var(--muted-fg)); }

/* ---------------------------------------------------------------- avisos */
.aviso {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; padding: 11px 14px;
  border: 1px solid; border-radius: var(--raio-p); font-size: 13.5px; line-height: 1.5;
}
.aviso .ic { margin-top: 2px; }
.aviso-ok { background: hsl(var(--ok) / .08); border-color: hsl(var(--ok) / .26); color: hsl(var(--ok)); }
.aviso-erro { background: hsl(var(--erro) / .07); border-color: hsl(var(--erro) / .26); color: hsl(var(--erro)); }
.aviso-info { background: hsl(var(--pausa) / .07); border-color: hsl(var(--pausa) / .24); color: hsl(var(--pausa)); }
.aviso b { font-weight: 700; }

/* ---------------------------------------------------------------- blocos */
.caixa { background: hsl(var(--card)); border: 1px solid hsl(var(--line)); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); min-width: 0; }
.caixa > h2, .caixa-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.caixa-tit .ic { color: hsl(var(--muted-fg)); }
.caixa-tit .lado { margin-left: auto; font: 500 12px/1.3 var(--fonte); color: hsl(var(--muted-fg)); }
.caixa-destaque { border-color: hsl(var(--primary) / .45); box-shadow: 0 0 0 3px hsl(var(--primary) / .07); }
.caixa-destaque-ok { border-color: hsl(var(--ok) / .45); box-shadow: 0 0 0 3px hsl(var(--ok) / .07); }
.caixa-alerta { border-color: hsl(var(--erro) / .3); background: hsl(var(--erro) / .04); }
.caixa p + p { margin-top: 8px; }
.grade2 { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 24px; align-items: start; }
.pilha { display: grid; gap: 16px; align-content: start; min-width: 0; }
.vazio { display: grid; justify-items: center; gap: 6px; padding: 44px 24px; text-align: center; color: hsl(var(--muted-fg)); }
.vazio .ic { width: 28px; height: 28px; color: hsl(var(--muted-fg) / .7); margin-bottom: 4px; }
.vazio b { color: hsl(var(--fg)); font-size: 14.5px; }
.vazio .btn { margin-top: 10px; }

/* ---------------------------------------------------------------- botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px;
  border: 1px solid transparent; border-radius: var(--raio-p); cursor: pointer; white-space: nowrap;
  font: 600 13.5px/1 var(--fonte); text-decoration: none !important;
  background: hsl(var(--primary-botao)); color: hsl(var(--primary-fg));
  box-shadow: 0 1px 2px hsl(217 91% 25% / .22), inset 0 1px 0 hsl(0 0% 100% / .14);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.btn:hover { background: hsl(var(--primary-hover)); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.enviando { opacity: .6; cursor: progress; }
.btn-sec { background: hsl(var(--card)); color: hsl(var(--fg)); border-color: hsl(var(--line-forte)); box-shadow: 0 1px 2px hsl(215 20% 9% / .05); }
.btn-sec:hover { background: hsl(var(--muted)); }
.btn-perigo { background: hsl(var(--card)); color: hsl(var(--erro)); border-color: hsl(var(--erro) / .38); box-shadow: none; }
.btn-perigo:hover { background: hsl(var(--erro) / .07); }
.btn-peq { height: 32px; padding: 0 11px; font-size: 12.5px; }
.btn-bloco { width: 100%; }
.btn-icone { width: 38px; padding: 0; }
.botoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- formulários */
label, .rotulo, fieldset legend { display: block; margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 600; color: hsl(var(--fg-2)); }
.campo { margin-bottom: 18px; }
.campo small, .ajuda { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; color: hsl(var(--muted-fg)); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number],
input[type=url], input[type=month], input[type=tel], select, textarea {
  width: 100%; height: 40px; padding: 0 12px; font: 400 14px/1.4 var(--fonte); color: hsl(var(--fg));
  background: hsl(var(--card)); border: 1px solid hsl(var(--line-forte)); border-radius: var(--raio-p);
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8798' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
}
input:hover, select:hover, textarea:hover { border-color: hsl(var(--muted-fg) / .75); }
input:focus, select:focus, textarea:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .16); }
::placeholder { color: hsl(var(--muted-fg)); opacity: 1; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: hsl(var(--primary-botao)); flex: none; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
fieldset legend { margin-bottom: 8px; }
.linha { display: flex; gap: 0 14px; flex-wrap: wrap; }
.linha > * { flex: 1; min-width: 180px; }
.marcar { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; font-weight: 500; color: hsl(var(--fg-2)); cursor: pointer; }
.marcar + .marcar { margin-top: 8px; }
.form-pe { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }

/* cartões de escolha (tipo, urgência) */
.opcoes-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.urgencias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opcao {
  position: relative; display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 13px 14px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--line-forte)); border-radius: var(--raio);
  font-weight: 400; color: hsl(var(--fg-2)); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.opcao:hover { border-color: hsl(var(--muted-fg) / .7); }
.opcao input { margin-top: 2px; }
.opcao:has(input:checked) { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); background: hsl(var(--primary) / .04); }
.opcao:has(input:focus-visible) { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.opcao-txt { display: grid; gap: 3px; min-width: 0; }
.opcao-tit { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: hsl(var(--fg)); }
.opcao-txt small { font-size: 12.5px; line-height: 1.45; color: hsl(var(--muted-fg)); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.urg-critico .ponto { color: hsl(var(--erro)); }
.urg-alto .ponto { color: hsl(var(--laranja)); }
.urg-medio .ponto { color: hsl(var(--ambar-fundo)); }
.urg-baixo .ponto { color: hsl(var(--muted-fg)); }
.urg-prazos { display: flex; gap: 4px 14px; flex-wrap: wrap; margin-top: 7px; padding-top: 8px; border-top: 1px dashed hsl(var(--line)); font-size: 12px; color: hsl(var(--muted-fg)); }
.urg-prazos strong { font-weight: 600; color: hsl(var(--fg-2)); }
.alerta-critico { display: none; margin: 12px 0 0; }
form:has(input[name=urgencia][value=critico]:checked) .alerta-critico { display: flex; }

/* área de anexos: o input cobre a área, então clicar e arrastar funcionam sem JS */
.anexar {
  position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; padding: 14px 16px;
  border: 1.5px dashed hsl(var(--line-forte)); border-radius: var(--raio); background: hsl(var(--muted) / .45);
  font-weight: 400; color: hsl(var(--fg-2)); cursor: pointer; transition: border-color .15s, background .15s;
}
.anexar:hover, .anexar.arrastando { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .05); }
.anexar:focus-within { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.anexar input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.anexar-icone { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 10px; background: hsl(var(--card)); border: 1px solid hsl(var(--line)); color: hsl(var(--primary)); }
.anexar-txt { display: grid; gap: 1px; }
.anexar-txt b { font-size: 13.5px; font-weight: 600; color: hsl(var(--fg)); }
.anexar-txt small { font-size: 12.5px; color: hsl(var(--muted-fg)); }
.anexar-lista { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.anexar-lista:empty { display: none; }
.anexar-lista li { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: hsl(var(--card)); border: 1px solid hsl(var(--line)); font-size: 12.5px; color: hsl(var(--fg-2)); }
.anexar-compacto { padding: 8px 12px; gap: 8px; background: none; border-width: 1px; }
.anexar-compacto .ic { color: hsl(var(--muted-fg)); }

/* passos ("como funciona") — sequência real, por isso numerada */
.passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; gap: 14px; }
.passos li { counter-increment: passo; display: grid; grid-template-columns: 26px 1fr; gap: 2px 11px; }
.passos li::before {
  content: counter(passo); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-size: 12.5px; font-weight: 700;
}
.passos b { font-size: 13.5px; font-weight: 600; color: hsl(var(--fg)); }
.passos span { font-size: 13px; line-height: 1.5; color: hsl(var(--muted-fg)); }

/* ---------------------------------------------------------------- selos */
.selo {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 999px;
  border: 1px solid transparent; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pri-critico { color: hsl(var(--erro)); background: hsl(var(--erro) / .09); border-color: hsl(var(--erro) / .24); }
.pri-alto { color: hsl(var(--laranja)); background: hsl(var(--laranja) / .09); border-color: hsl(var(--laranja) / .26); }
.pri-medio { color: hsl(var(--alerta)); background: hsl(var(--ambar-fundo) / .12); border-color: hsl(var(--ambar-fundo) / .32); }
.pri-baixo { color: hsl(var(--muted-fg)); background: hsl(var(--muted)); border-color: hsl(var(--line)); }
.st-novo { color: hsl(var(--primary)); background: hsl(var(--primary) / .08); border-color: hsl(var(--primary) / .22); }
.st-em_atendimento { color: hsl(var(--violeta)); background: hsl(var(--violeta) / .08); border-color: hsl(var(--violeta) / .22); }
.st-aguardando_cliente, .st-aguardando_orcamento { color: hsl(var(--alerta)); background: hsl(var(--ambar-fundo) / .12); border-color: hsl(var(--ambar-fundo) / .3); }
.st-resolvido { color: hsl(var(--ok)); background: hsl(var(--ok) / .09); border-color: hsl(var(--ok) / .24); }
.st-fechado, .st-cancelado { color: hsl(var(--muted-fg)); background: hsl(var(--muted)); border-color: hsl(var(--line)); }
.st-fechado::before, .st-cancelado::before { opacity: .55; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 600; background: hsl(var(--muted)); color: hsl(var(--muted-fg)); border: 1px dashed hsl(var(--line-forte)); white-space: nowrap; }
.sla { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sla .ic { width: 14px; height: 14px; }
.ch-meta .avatar-p { width: 18px; height: 18px; font-size: 8.5px; box-shadow: none; }
.sla-no_prazo, .sla-cumprido { color: hsl(var(--ok)); }
.sla-vencendo { color: hsl(var(--alerta)); }
.sla-atrasado { color: hsl(var(--erro)); }
.sla-pausado { color: hsl(var(--pausa)); }
.sla-aguardando { color: hsl(var(--muted-fg)); }

/* ---------------------------------------------------------------- relógios de prazo */
.prazos { display: grid; gap: 16px; }
.prazo { display: grid; gap: 6px; min-width: 0; color: hsl(var(--muted-fg)); }
.prazo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; min-width: 0; }
.prazo-nome { font-weight: 500; color: hsl(var(--fg-2)); white-space: nowrap; }
.prazo-estado { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; }
.prazo-estado span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prazo-estado .ic { width: 14px; height: 14px; align-self: center; }
.prazo-barra { height: 6px; border-radius: 999px; background: hsl(var(--muted-2)); overflow: hidden; }
.prazo-barra i { display: block; height: 100%; border-radius: inherit; background: currentColor; }
.prazo-data { font-size: 12px; color: hsl(var(--muted-fg)); }
.prazo-no_prazo, .prazo-cumprido { color: hsl(var(--ok)); }
.prazo-cumprido .prazo-barra i { opacity: .42; }
.prazo-vencendo { color: hsl(var(--alerta)); }
.prazo-vencendo .prazo-barra i { background: hsl(var(--ambar-fundo)); }
.prazo-atrasado { color: hsl(var(--erro)); }
.prazo-pausado { color: hsl(var(--pausa)); }
.prazo-pausado .prazo-barra i { background: repeating-linear-gradient(-45deg, currentColor 0 5px, transparent 5px 9px); opacity: .5; }
.prazo-aguardando { color: hsl(var(--muted-fg)); }
.prazo-compacto { gap: 5px; font-size: 12.5px; }
.prazo-compacto .prazo-nome { font-size: 12px; font-weight: 500; color: hsl(var(--muted-fg)); }
.prazo-nota { margin-top: 14px; padding-top: 12px; border-top: 1px solid hsl(var(--line)); font-size: 12.5px; color: hsl(var(--muted-fg)); }

/* ---------------------------------------------------------------- visões (filtros com contagem) */
.visoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 18px; }
.visao {
  display: grid; gap: 2px; padding: 12px 14px; border: 1px solid hsl(var(--line)); border-radius: var(--raio);
  background: hsl(var(--card)); color: hsl(var(--fg-2)); text-decoration: none !important; box-shadow: var(--sombra);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.visao:hover { border-color: hsl(var(--line-forte)); }
.visao-rot { font-size: 12.5px; font-weight: 500; color: hsl(var(--muted-fg)); }
.visao-n { font: 700 23px/1.15 var(--fonte-display); letter-spacing: -.02em; color: hsl(var(--fg)); font-variant-numeric: tabular-nums; }
.visao[aria-current="true"] { border-color: hsl(var(--primary)); box-shadow: 0 0 0 1px hsl(var(--primary)); background: hsl(var(--primary) / .035); }
.visao[aria-current="true"] .visao-rot { color: hsl(var(--primary)); font-weight: 600; }
.visao.risco .visao-n { color: hsl(var(--erro)); }
.visao.atencao .visao-n { color: hsl(var(--alerta)); }

/* ---------------------------------------------------------------- lista de chamados */
.lista { background: hsl(var(--card)); border: 1px solid hsl(var(--line)); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.lista-cab, .ch { display: grid; grid-template-columns: minmax(0, 1fr) 100px 172px 214px 84px; gap: 18px; align-items: center; padding: 0 18px; }
.lista-cab {
  height: 38px; background: hsl(var(--muted) / .7); border-bottom: 1px solid hsl(var(--line));
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-fg));
}
.lista-cab span:last-child { text-align: right; }
.ch { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid hsl(var(--line)); color: inherit; text-decoration: none !important; transition: background .12s; }
.ch:last-child { border-bottom: 0; }
.ch:hover { background: hsl(var(--muted) / .6); }
.ch:hover .ch-tit b { color: hsl(var(--primary)); }
.ch-tit { min-width: 0; display: grid; gap: 4px; }
.ch-tit b { font-size: 14px; font-weight: 600; color: hsl(var(--fg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s; }
.ch-id { margin-right: 7px; font-weight: 500; color: hsl(var(--muted-fg)); font-variant-numeric: tabular-nums; }
.ch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: hsl(var(--muted-fg)); min-width: 0; }
.ch-meta > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ch-meta .ic { width: 13px; height: 13px; }
.ch-quando { font-size: 12.5px; color: hsl(var(--muted-fg)); text-align: right; white-space: nowrap; }
.ch-pri, .ch-st { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------------------------------------------------------- chamado: cabeçalho, conversa, painéis */
.cab-chamado h1 { font-size: 25px; }
.cab-chamado h1 .ch-id { font-size: 21px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: hsl(var(--muted-fg)); }
.meta > span { display: inline-flex; align-items: center; gap: 6px; }
.meta .selos { gap: 6px; }

.conversa { position: relative; display: grid; gap: 16px; }
.conversa::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; border-radius: 2px; background: hsl(var(--line)); }
.msg { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; z-index: 1;
  font: 600 12.5px/1 var(--fonte); letter-spacing: .02em; color: hsl(var(--fg-2)); background: hsl(var(--muted-2));
  box-shadow: 0 0 0 4px hsl(var(--bg));
}
.avatar-equipe { background: hsl(var(--primary-botao)); color: #fff; }
.eu .avatar, .dl .avatar { box-shadow: none; }
.avatar-p { width: 24px; height: 24px; font-size: 10.5px; }
.balao { min-width: 0; padding: 13px 16px 15px; background: hsl(var(--card)); border: 1px solid hsl(var(--line)); border-radius: var(--raio); box-shadow: var(--sombra); }
.balao-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 7px; font-size: 13px; color: hsl(var(--muted-fg)); }
.balao-cab b { font-weight: 600; color: hsl(var(--fg)); }
.balao-cab time { margin-left: auto; font-size: 12.5px; white-space: nowrap; }
.papel { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: hsl(var(--muted)); color: hsl(var(--muted-fg)); }
.papel-equipe { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.papel-interna { background: hsl(var(--ambar-fundo) / .16); color: hsl(var(--alerta)); }
.papel .ic { width: 12px; height: 12px; }
.corpo { font-size: 14.5px; line-height: 1.62; color: hsl(var(--fg)); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-abertura .balao { border-color: hsl(var(--line-forte) / .7); }
.msg-interna .balao { background: hsl(var(--ambar-fundo) / .07); border-color: hsl(var(--ambar-fundo) / .38); }
.anexos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.anexo {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
  border: 1px solid hsl(var(--line)); background: hsl(var(--muted) / .6); font-size: 12.5px; font-weight: 500;
  color: hsl(var(--fg-2)); text-decoration: none !important; transition: border-color .15s, color .15s;
}
.anexo:hover { border-color: hsl(var(--primary) / .55); color: hsl(var(--primary)); }
.anexo .ic { width: 13px; height: 13px; }
.evento { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 13px; color: hsl(var(--muted-fg)); }
.evento-ponto { display: grid; place-items: center; position: relative; z-index: 1; }
.evento-ponto i { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--card)); border: 2px solid hsl(var(--line-forte)); box-shadow: 0 0 0 4px hsl(var(--bg)); }
.evento b { font-weight: 600; color: hsl(var(--fg-2)); }
.evento time { margin-right: 8px; font-variant-numeric: tabular-nums; }
.ev-ok .evento-ponto i { border-color: hsl(var(--ok)); background: hsl(var(--ok)); }
.ev-erro .evento-ponto i { border-color: hsl(var(--erro)); background: hsl(var(--erro)); }
.ev-pausa .evento-ponto i { border-color: hsl(var(--pausa)); }
.ev-destaque .evento-ponto i { border-color: hsl(var(--primary)); }

.compositor { margin-top: 20px; }
.compositor textarea { min-height: 112px; }
.compositor-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.compositor-pe .btn { margin-left: auto; }
.encerrado { margin-top: 20px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px dashed hsl(var(--line-forte)); border-radius: var(--raio); color: hsl(var(--muted-fg)); font-size: 13.5px; }

details.painel { background: hsl(var(--card)); border: 1px solid hsl(var(--line)); border-radius: var(--raio); box-shadow: var(--sombra); }
details.painel > summary {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--raio);
  font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; transition: background .15s;
}
details.painel > summary::-webkit-details-marker { display: none; }
details.painel > summary:hover { background: hsl(var(--muted) / .6); }
details.painel > summary > .ic:first-child { color: hsl(var(--muted-fg)); }
details.painel > summary .seta { margin-left: auto; color: hsl(var(--muted-fg)); transition: transform .2s ease-out; }
details.painel[open] > summary { border-bottom: 1px solid hsl(var(--line)); border-radius: var(--raio) var(--raio) 0 0; }
details.painel[open] > summary .seta { transform: rotate(180deg); }
details.painel > div { padding: 16px; }

.dl { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 11px 12px; margin: 0; font-size: 13.5px; }
.dl dt { color: hsl(var(--muted-fg)); }
.dl dd { margin: 0; font-weight: 500; color: hsl(var(--fg)); overflow-wrap: anywhere; }
.dl dd.com-avatar { display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- tabelas */
.tabela { background: hsl(var(--card)); border: 1px solid hsl(var(--line)); border-radius: var(--raio); overflow-x: auto; box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  padding: 11px 14px; text-align: left; white-space: nowrap; background: hsl(var(--muted) / .7); border-bottom: 1px solid hsl(var(--line));
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-fg));
}
td { padding: 12px 14px; border-bottom: 1px solid hsl(var(--line)); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: hsl(var(--muted) / .4); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela a.tit { font-weight: 600; color: hsl(var(--fg)); }
.tabela a.tit:hover { color: hsl(var(--primary)); }
.inativo td { opacity: .55; }

/* ---------------------------------------------------------------- indicadores, cotas, relatório */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 20px; }
.kpi { display: grid; gap: 4px; align-content: start; padding: 15px 16px; background: hsl(var(--card)); border: 1px solid hsl(var(--line)); border-radius: var(--raio); box-shadow: var(--sombra); }
.kpi dt { font-size: 12.5px; font-weight: 500; color: hsl(var(--muted-fg)); }
.kpi dd { margin: 0; font: 700 26px/1.15 var(--fonte-display); letter-spacing: -.02em; color: hsl(var(--fg)); font-variant-numeric: tabular-nums; }
.kpi dd small { font: 500 12.5px/1 var(--fonte); letter-spacing: 0; color: hsl(var(--muted-fg)); }
.kpi .barra { margin-top: 6px; }
.barra { height: 6px; border-radius: 999px; background: hsl(var(--muted-2)); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: inherit; background: hsl(var(--primary)); }
.barra-ok i { background: hsl(var(--ok)); }
.barra-alerta i { background: hsl(var(--ambar-fundo)); }
.barra-erro i { background: hsl(var(--erro)); }
.cel-barra { display: grid; grid-template-columns: 54px minmax(60px, 1fr); align-items: center; gap: 10px; }
.cel-barra .num { text-align: right; font-weight: 600; }
.lista-simples { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lista-simples li { display: grid; gap: 4px; }
.lista-simples .linha-rot { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.lista-simples .linha-rot b { font-variant-numeric: tabular-nums; }
.consumo { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid hsl(var(--line)); }
.consumo:last-child { border-bottom: 0; padding-bottom: 0; }
.consumo:first-of-type { padding-top: 0; }
.consumo a { font-weight: 600; color: hsl(var(--fg)); }
.consumo a:hover { color: hsl(var(--primary)); }

/* ---------------------------------------------------------------- administração */
.abas { display: flex; gap: 2px; margin-bottom: 22px; border-bottom: 1px solid hsl(var(--line)); overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas a {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; padding: 10px 12px; white-space: nowrap;
  border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 500; color: hsl(var(--muted-fg)); text-decoration: none !important;
}
.abas a:hover { color: hsl(var(--fg)); }
.abas a[aria-current="page"] { color: hsl(var(--primary)); border-color: hsl(var(--primary)); font-weight: 600; }
.chave {
  margin: 0 0 10px; padding: 11px 13px; border: 1px dashed hsl(var(--primary) / .5); border-radius: var(--raio-p);
  background: hsl(var(--primary) / .05); font: 500 13px/1.5 ui-monospace, "SF Mono", Consolas, monospace; word-break: break-all; color: hsl(var(--fg));
}

/* ---------------------------------------------------------------- páginas simples (erros, instalação, senha) */
.simples-centro { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.simples-miolo { width: 100%; max-width: 440px; }
.simples-marca { justify-content: center; margin-bottom: 22px; }
.login.caixa { padding: 28px; }
.login h1 { font-size: 22px; margin-bottom: 6px; }
.login .sub { margin-bottom: 20px; font-size: 13.5px; }
.app .login { max-width: 480px; }

/* ---------------------------------------------------------------- tela de entrada (duas colunas, como o BI) */
body.pagina-entrada { background: hsl(var(--card)); }
.entrada { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(400px, 1fr); min-height: 100vh; min-height: 100dvh; }
.entrada-hero {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(32px, 3.4vw, 64px) clamp(28px, 5vw, 112px); background: #0a1020; color: #fff;
}
.entrada-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(115% 75% at 10% 0%, hsl(217 91% 45% / .36) 0%, transparent 62%),
    radial-gradient(80% 60% at 100% 100%, hsl(217 91% 40% / .16) 0%, transparent 60%);
}
.entrada-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(hsl(0 0% 100% / .045) 1px, transparent 1px), linear-gradient(90deg, hsl(0 0% 100% / .045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(90% 70% at 25% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(90% 70% at 25% 30%, #000 0%, transparent 75%);
}
.entrada-hero > * { position: relative; z-index: 1; }
.entrada-hero .marca { color: #fff; }
.entrada-hero .marca-txt small { color: hsl(214 60% 86% / .6); }
.entrada-corpo { max-width: 38rem; }
.entrada-selo {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid hsl(217 91% 60% / .32); background: hsl(217 91% 60% / .1);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: #bfdbfe;
}
.entrada-selo i { width: 7px; height: 7px; border-radius: 50%; background: #60a5fa; }
.entrada-selo.online i { background: #4ade80; box-shadow: 0 0 0 0 hsl(142 70% 58% / .6); animation: pulso 2.2s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 hsl(142 70% 58% / .55); } 70% { box-shadow: 0 0 0 8px hsl(142 70% 58% / 0); } 100% { box-shadow: 0 0 0 0 hsl(142 70% 58% / 0); } }
.entrada-titulo { font: 700 clamp(2rem, 3.2vw, 3.6rem)/1.06 var(--fonte-display); letter-spacing: -.025em; color: #fff; }
.entrada-titulo em { font-style: normal; color: #60a5fa; }
.entrada-texto { margin-top: 18px; max-width: 30rem; font-size: 15px; line-height: 1.65; color: hsl(0 0% 100% / .7); }
.entrada-prazos { margin-top: 32px; max-width: 32rem; border: 1px solid hsl(0 0% 100% / .1); border-radius: 14px; background: hsl(0 0% 100% / .03); overflow: hidden; }
.entrada-prazos dl { margin: 0; }
.entrada-prazos dl > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 10px 16px; font-size: 13px; border-bottom: 1px solid hsl(0 0% 100% / .06); }
.entrada-prazos dl > div:last-child { border-bottom: 0; }
.entrada-prazos dt { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.entrada-prazos dd { margin: 0; color: hsl(0 0% 100% / .72); font-variant-numeric: tabular-nums; }
.entrada-prazos .cab-prazos { padding-top: 9px; padding-bottom: 9px; font-size: 11px; color: hsl(0 0% 100% / .45); }
.entrada-prazos .cab-prazos dt, .entrada-prazos .cab-prazos dd { color: hsl(0 0% 100% / .45); font-weight: 500; }
.entrada-prazos .ponto.p-critico { color: #f87171; }
.entrada-prazos .ponto.p-alto { color: #fb923c; }
.entrada-prazos .ponto.p-medio { color: #fbbf24; }
.entrada-prazos .ponto.p-baixo { color: #94a3b8; }
.entrada-pe { font-size: 12px; color: hsl(0 0% 100% / .45); }
.entrada-form { display: flex; align-items: center; justify-content: center; padding: 48px clamp(22px, 4vw, 56px); background: hsl(var(--card)); }
.entrada-caixa { width: 100%; max-width: 380px; }
.entrada-caixa h1 { font-size: 23px; }
.entrada-caixa .sub { margin: 8px 0 26px; font-size: 13.5px; line-height: 1.55; }
.campo-icone { position: relative; }
.campo-icone > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-fg)); pointer-events: none; }
.campo-icone input { height: 44px; padding-left: 38px; }
.campo-icone input[type=password], .campo-icone input[data-senha] { padding-right: 44px; }
.olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: none; color: hsl(var(--muted-fg)); cursor: pointer;
}
.olho:hover { color: hsl(var(--fg)); background: hsl(var(--muted)); }
html:not(.js) .olho { display: none; }
.entrada-caixa .btn { height: 44px; margin-top: 6px; }
.entrada-ajuda { margin-top: 22px; padding-top: 18px; border-top: 1px solid hsl(var(--line)); font-size: 12.5px; color: hsl(var(--muted-fg)); line-height: 1.55; }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1180px) {
  .lista-cab, .ch { grid-template-columns: minmax(0, 1fr) 100px 160px 196px; }
  .lista-cab span:last-child, .ch-quando { display: none; }
  .grade2 { grid-template-columns: minmax(0, 1fr) 312px; }
}
@media (max-width: 1040px) {
  .grade2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; background: hsl(var(--bg)); }
  .barra-movel {
    position: sticky; top: 0; z-index: var(--z-barra); display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: hsl(var(--card) / .9); border-bottom: 1px solid hsl(var(--line));
    -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px);
  }
  .barra-movel .marca { margin-right: auto; }
  .js .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-gaveta); width: min(300px, 86vw); height: auto;
    transform: translateX(-104%); visibility: hidden; box-shadow: var(--sombra-alta);
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .24s;
  }
  .js .menu-aberto .lateral { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
  .js .menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; z-index: var(--z-fundo); background: hsl(215 30% 8% / .45); }
  html:not(.js) .lateral { position: static; height: auto; }
  html:not(.js) [data-abre-menu] { display: none; }
  .conteudo { padding: 22px 16px 24px; }
  .entrada { grid-template-columns: 1fr; }
  .entrada-hero { gap: 22px; padding: 26px 22px 30px; }
  .entrada-titulo { font-size: 30px; }
  .entrada-texto, .entrada-prazos, .entrada-pe { display: none; }
  .entrada-selo { margin-bottom: 16px; }
  .entrada-form { align-items: flex-start; padding: 30px 20px 48px; }
}
@media (max-width: 760px) {
  .visoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .visao { padding: 10px 11px; }
  .visao-rot { font-size: 12px; line-height: 1.3; }
  .visao-n { font-size: 20px; }
  .lista-cab { display: none; }
  .ch { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tit tit" "pri st" "prazo prazo"; gap: 10px 12px; padding: 14px 16px; }
  .ch-tit { grid-area: tit; }
  .ch-tit b { white-space: normal; }
  .ch-pri { grid-area: pri; }
  .ch-st { grid-area: st; justify-content: flex-end; }
  .ch-prazo { grid-area: prazo; }
  .urgencias { grid-template-columns: 1fr; }
  .cab-chamado h1 { font-size: 21px; }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dt { margin-top: 8px; }
  .dl dt:first-child { margin-top: 0; }
  .compositor-pe .btn { margin-left: 0; width: 100%; }
  .rodape { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* aba Acessos e Sites do admin (2026-10-14) */
.txt-erro { color: hsl(var(--erro)); }
.filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filtros select { width: auto; min-width: 220px; }
.sites-grupo { margin: 0 0 14px; padding: 10px 12px; border: 1px solid hsl(var(--line)); border-radius: 10px; max-height: 260px; overflow: auto; }
.sites-grupo legend { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.sites-grupo .marcar + .marcar { margin-top: 6px; }