/* Painel dos operadores: console de acompanhamento (inspirado no security-reports).
   Usa os mesmos tokens de style.css; nenhum componente inventa cor própria.
   O trilho lateral é sempre escuro (marca), nos dois temas; o resto segue o tema. */

:root {
  --trilho-bg: #572d21;           /* marrom do escritório */
  --trilho-texto: #ffffff;
  --trilho-texto-2: #ffe5c7;      /* creme: 9,6:1 sobre o trilho */
  --trilho-ativo: rgba(255, 255, 255, 0.14);
  --trilho-largura: 264px;
  --chip-novo-bg: #f8e6dc; --chip-novo: #843720;
  --chip-andamento-bg: #fbf1de; --chip-andamento: #7a4100;
  --chip-ok-bg: #e9f4ed; --chip-ok: #0a5530;
  --chip-fechado-bg: #f3e6d8; --chip-fechado: #5f4840;
  --perigo: #8f1a1a;
}
:root[data-theme="dark"] {
  --trilho-bg: #190e0b;
  --chip-novo-bg: rgba(255, 207, 158, 0.14); --chip-novo: #ffcf9e;
  --chip-andamento-bg: rgba(252, 211, 77, 0.12); --chip-andamento: #fcd34d;
  --chip-ok-bg: rgba(116, 230, 184, 0.12); --chip-ok: #74e6b8;
  --chip-fechado-bg: rgba(255, 255, 255, 0.08); --chip-fechado: #e6cfb9;
  --perigo: #fca5a5;
}

html { font-size: calc(17px * var(--escala)); }
body.painel { min-height: 100vh; }
.console { display: grid; grid-template-columns: var(--trilho-largura) minmax(0, 1fr); min-height: 100vh; }

/* ------------------------------------------------------------------ trilho lateral */
.trilho {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 14px; background: var(--trilho-bg); color: var(--trilho-texto);
}
.trilho-marca { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 10px; color: var(--trilho-texto); text-decoration: none; font-weight: 800; font-size: 1.05rem; }
.trilho-marca img { width: auto; height: 34px; }
.trilho-marca span { display: flex; flex-direction: column; font-family: var(--font-titulo); font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.trilho-marca small { font-family: var(--font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--trilho-texto-2); }
.trilho-links { list-style: none; display: grid; gap: 4px; }
.trilho-links a, .trilho-conta {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; border-radius: 12px;
  color: var(--trilho-texto-2); text-decoration: none; font-weight: 600;
}
.trilho-links svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.trilho-links a:hover, .trilho-conta:hover { background: var(--trilho-ativo); color: var(--trilho-texto); }
.trilho-links a[aria-current="page"], .trilho-conta[aria-current="page"] { background: var(--trilho-ativo); color: var(--trilho-texto); box-shadow: inset 3px 0 0 #ffe5c7; }
.trilho a:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
.trilho-rodape { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 12px; }
.trilho-conta strong { display: block; color: var(--trilho-texto); font-size: 0.95rem; }
.trilho-papel { font-size: 0.85rem; }
.avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #ffe5c7; color: #572d21; font-weight: 800; font-size: 0.85rem; }

/* ------------------------------------------------------------------ barra superior e conteúdo */
.console-corpo { min-width: 0; display: flex; flex-direction: column; }
.barra-topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 24px;
  background: var(--nav-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.barra-titulo { font-weight: 800; flex: 1; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-acoes { display: flex; align-items: center; gap: 8px; }
.nav-menu-painel { display: none; }
.console-conteudo { padding: 28px clamp(16px, 3vw, 40px) 64px; outline: none; width: 100%; }
.pagina-titulo { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 12px; }
.btn-compacto { min-height: 48px; padding: 8px 20px; font-size: 0.95rem; width: auto; margin: 0; }
.btn-perigo { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 20px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--perigo); background: transparent; color: var(--perigo); font: 700 0.95rem var(--font); }
.btn-perigo:hover { background: var(--bad-bg); }
.eyebrow { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }

/* ------------------------------------------------------------------ visão geral */
.lead { border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); margin-bottom: 28px; }
.lead-frase { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.45; max-width: 60ch; }
.lead-sub { margin-top: 8px; color: var(--text-2); }
.painel-bloco { margin-bottom: 32px; }
.painel-bloco > h2 { margin-bottom: 14px; font-size: 1.2rem; }
.tiles { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); grid-auto-rows: 1fr; }
.tiles li { display: flex; }
/* Indicador único do painel (ui.js: indicador). Mesma altura, mesma borda e número sempre na mesma linha:
   rótulo no alto; número e subtexto embaixo, com o subtexto reservado mesmo quando vazio. */
.tile { position: relative; flex: 1; display: grid; grid-template-rows: 1fr auto auto; gap: 6px; min-height: 132px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); color: var(--text); text-decoration: none; box-shadow: var(--sombra-cartao); }
a.tile { padding-right: 34px; }
a.tile::after { content: "›"; position: absolute; top: 12px; right: 14px; font-size: 1.3rem; line-height: 1; color: var(--text-2); }
a.tile:hover { border-color: var(--primary); border-left-color: var(--primary); }
.tile-rotulo { color: var(--text-2); font-weight: 700; font-size: 0.9rem; align-self: start; }
.tile-valor { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-sub { min-height: 1.3em; color: var(--text-2); font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.tile-tendencia { font-size: 0.85rem; font-weight: 700; margin-left: 6px; }
.tile-tendencia.bom { color: var(--chip-ok); } .tile-tendencia.ruim { color: var(--chip-ruim); }
/* Tom: verde dentro da meta, âmbar atenção, vermelho fora/atrasado. Sem meta, sem cor. */
.tile-bom { border-left-color: var(--chip-ok); }
.tile-medio { border-left-color: var(--chip-andamento); }
.tile-ruim { border-left-color: var(--chip-ruim); }

/* ------------------------------------------------------------------ casos: recorte e lista/detalhe */
.recorte {
  display: grid; gap: 12px; align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px;
}
.recorte label { margin: 0 0 6px; font-size: 0.9rem; }
.recorte > div:first-child { grid-column: span 2; }
.recorte .btn-principal { justify-self: start; }
.recorte input, .recorte select { min-height: 48px; font-size: 0.95rem; }
.recorte-texto { color: var(--text-2); margin: 0 0 16px 4px; }
.dividido { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.lista-casos { list-style: none; display: grid; gap: 8px; max-height: calc(100vh - 230px); overflow-y: auto; padding: 2px; }
.item-caso { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.item-caso:hover { border-color: var(--primary); }
.item-caso.ativo { border: 2px solid var(--primary); background: var(--primary-suave); }
.item-linha { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; }
.item-linha strong { font-size: 1rem; }
.vazio { padding: 24px; color: var(--text-2); }
.chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.chip-novo { background: var(--chip-novo-bg); color: var(--chip-novo); }
.chip-andamento { background: var(--chip-andamento-bg); color: var(--chip-andamento); }
.chip-ok { background: var(--chip-ok-bg); color: var(--chip-ok); }
.chip-fechado { background: var(--chip-fechado-bg); color: var(--chip-fechado); }

.detalhe-caso { position: sticky; top: 84px; min-width: 0; padding: clamp(18px, 2.5vw, 28px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); max-height: calc(100vh - 110px); overflow-y: auto; }
.voltar-lista { display: none; min-height: 44px; align-items: center; font-weight: 700; }
.caso-cabecalho h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin: 4px 0; }
.caso-cabecalho .acoes { margin-top: 14px; }
.caso-acompanhamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; align-items: end; margin: 22px 0; padding: 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.caso-acompanhamento label { margin: 0 0 6px; font-size: 0.9rem; }
.caso-acompanhamento select { min-height: 48px; }
.caso-acompanhamento .status-salvar { grid-column: 1 / -1; margin: 0; }
.caso-acompanhamento .btn-principal { justify-self: start; }
.caso-bloco { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.caso-bloco h3 { margin-bottom: 10px; }
.respostas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px 20px; }
.respostas dt { font-size: 0.85rem; color: var(--text-2); font-weight: 700; }
.respostas dd { font-weight: 600; overflow-wrap: anywhere; }
.linha-tempo { list-style: none; display: grid; gap: 0; margin-top: 12px; }
.linha-tempo li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--line-strong); margin-left: 6px; }
.linha-tempo li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); }
.linha-tempo li:last-child { border-left-color: transparent; }
.linha-meta { font-size: 0.85rem; color: var(--text-2); font-weight: 700; margin-bottom: 2px; }
.nota-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
#form-nota textarea { min-height: 96px; }
#form-nota .btn-secundario { margin-top: 10px; }
.zona-perigo h3 { color: var(--perigo); }
.zona-perigo .btn-perigo { margin-top: 10px; }

/* ------------------------------------------------------------------ operadores, conta, login */
.grade-3 { display: grid; gap: 0 16px; grid-template-columns: 2fr 1.4fr 1.4fr auto; align-items: end; }
.grade-acao { padding-bottom: 2px; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.acoes-linha .btn-compacto { min-height: 44px; padding: 6px 14px; font-size: 0.85rem; }
.aviso-senha { border: 2px solid var(--accent); background: var(--ok-bg); border-radius: 16px; padding: 18px 20px; margin-bottom: 24px; }
.aviso-senha h2 { font-size: 1.15rem; margin-bottom: 6px; }
.senha-temporaria code { font-size: 1.3rem; letter-spacing: 0.04em; color: var(--text); user-select: all; }
.cartao-estreito { max-width: 560px; padding: clamp(18px, 3vw, 28px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.cartao-estreito .btn-principal { margin-top: 20px; }

@media (max-width: 1100px) {
  .dividido { grid-template-columns: 1fr; }
  .dividido.com-detalhe .lista-casos { display: none; }
  .dividido:not(.com-detalhe) .detalhe-caso { display: none; }
  .detalhe-caso { position: static; max-height: none; }
  .voltar-lista { display: inline-flex; }
  .lista-casos { max-height: none; }
  .grade-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  /* fechado: fora da tela E fora da árvore de acessibilidade/teclado (visibility) */
  .trilho { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); z-index: 30; transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility 0s .2s; }
  .trilho-aberto .trilho { transform: none; visibility: visible; transition: transform .2s; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45); }
  .nav-menu-painel { display: inline-grid; }
  .barra-topo { padding: 8px 12px; }
  .barra-acoes .btn-link { display: none; }
  .barra-topo { gap: 6px; }
  .barra-acoes { gap: 4px; }
  .barra-acoes .btn-compacto { padding: 8px 14px; }
}
@media (max-width: 400px) { .recorte > div:first-child { grid-column: auto; } }

/* login */
.entrar { max-width: 520px; margin: clamp(40px, 10vh, 96px) auto; }
.entrar h1 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); margin-bottom: 8px; }
.entrar .btn-principal { margin-top: 24px; }

/* ------------------------------------------------------------------ minha conta, senha e duas etapas */
.conta-pagina { max-width: 600px; margin-inline: auto; }
.conta-cabeca { display: grid; justify-items: center; text-align: center; gap: 6px; margin: 8px 0 28px; }
.conta-cabeca .pagina-titulo { margin: 8px 0 0; }
.avatar-grande { width: 80px; height: 80px; font-size: 1.6rem; }
.conta-opcoes { list-style: none; display: grid; gap: 12px; }
.conta-opcao { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); color: var(--text); text-decoration: none; }
.conta-opcao:hover { border-color: var(--primary); }
.conta-opcao strong { display: block; font-size: 1.05rem; }
.conta-opcao .texto-2 { display: block; font-size: 0.95rem; }
.conta-icone { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--primary-suave); color: var(--primary); }
.conta-icone svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.conta-icone-grande { width: 64px; height: 64px; border-radius: 18px; margin-inline: auto; }
.conta-icone-grande svg { width: 34px; height: 34px; }
.conta-icone-ok { background: var(--ok-bg); color: var(--accent); }
.voltar { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: 8px; font-weight: 700; }
.cartao-centro { text-align: center; padding: clamp(22px, 4vw, 40px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-cartao); }
.cartao-centro .pagina-titulo { margin: 16px 0 8px; }
.cartao-centro > .texto-2 { max-width: 46ch; margin-inline: auto; }
.form-centro { text-align: left; max-width: 420px; margin: 24px auto 0; }
.form-centro .btn-principal { width: 100%; margin-top: 20px; }
.forca { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
.forca span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--danger); transition: width .2s; }
.forca span[data-nivel="ok"] { background: var(--warn); }
.forca span[data-nivel="forte"] { background: var(--accent); }
.mostrar-senha { margin-top: 14px; }
.passos { list-style: none; display: grid; gap: 12px; text-align: left; max-width: 440px; margin: 24px auto 0; }
.passos li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.passos li > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-btn); color: var(--on-primary); font-weight: 800; }
.acoes-centro { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.acoes-centro .btn-principal, .acoes-centro .btn-secundario { width: auto; margin: 0; }
.qr-caixa { width: min(260px, 100%); margin: 24px auto 8px; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.qr-caixa svg { display: block; width: 100%; height: auto; }
.chave-manual { max-width: 420px; margin: 8px auto 0; }
.chave-manual summary { min-height: 48px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--primary); }
.chave { display: inline-block; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 1.05rem; letter-spacing: 0.05em; word-break: break-all; user-select: all; }
.campo-codigo { width: 100%; min-width: 0; min-height: 64px; padding: 10px 12px; box-sizing: border-box; font-size: 1.7rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .campo-codigo { font-size: 1.4rem; letter-spacing: 0.15em; } }
.form-desativar { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 28px; }
.form-desativar .btn-perigo { width: 100%; justify-content: center; margin-top: 16px; }
.codigos-recuperacao { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 420px; margin: 24px auto 0; }
.codigos-recuperacao code { display: block; padding: 10px; border-radius: 10px; background: var(--surface-2); font-size: 1.05rem; letter-spacing: 0.04em; user-select: all; }
@media (max-width: 420px) { .codigos-recuperacao { grid-template-columns: 1fr; } .conta-opcao { grid-template-columns: auto 1fr; } .conta-opcao .chip { grid-column: 2; justify-self: start; } }

/* aviso fixo enquanto a verificação em duas etapas não estiver ativada */
.aviso-mfa { position: sticky; top: 72px; z-index: 9; box-shadow: var(--sombra-cartao); display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 16px clamp(16px, 3vw, 40px) 0; padding: 14px 18px; border-radius: 16px; background: var(--warn-bg); border: 2px solid var(--warn); color: var(--text); }
.aviso-mfa[hidden] { display: none; }
.aviso-mfa svg { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-mfa p { flex: 1 1 260px; margin: 0; }
.aviso-mfa .btn-link { width: auto; }
@media (max-width: 600px) { .aviso-mfa { top: 68px; padding: 12px 14px; } .aviso-mfa p { font-size: 0.95rem; } }

/* ------------------------------------------------------------------ pré-visualização do parecer */
.parecer-visor { display: grid; gap: 20px; margin-top: 20px; align-items: start; }
@media (min-width: 1000px) { .parecer-visor { grid-template-columns: 17rem minmax(0, 1fr); } .parecer-lado { position: sticky; top: 88px; } }
.parecer-lado .caso-bloco { display: grid; gap: 12px; }
.parecer-lado .btn-principal, .parecer-lado .btn-secundario { width: 100%; justify-content: center; }
.parecer-folhas { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.parecer-ferramentas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.parecer-zoom { display: flex; align-items: center; gap: 8px; }
.parecer-zoom span { min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.parecer-moldura { position: relative; background: #efe2d4; }
.parecer-moldura iframe { display: block; width: 100%; height: calc(100vh - 13rem); min-height: 480px; border: 0; }
.parecer-carregando { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(239, 226, 212, 0.92); color: #45291f; font-weight: 600; }
#principal h1 + .texto-2 { margin-top: 10px; }
.voltar { margin-bottom: 16px; }

/* ------------------------------------------------------------------ gestão: prazos (SLA) */
:root { --chip-ruim-bg: #fbeaea; --chip-ruim: #8f1a1a; }
:root[data-theme="dark"] { --chip-ruim-bg: rgba(252, 165, 165, 0.12); --chip-ruim: #fca5a5; }
.selo-prazo { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.selo-ok { background: var(--chip-ok-bg); color: var(--chip-ok); }
.selo-atencao { background: var(--chip-andamento-bg); color: var(--chip-andamento); }
.selo-atrasado { background: var(--chip-ruim-bg); color: var(--chip-ruim); }
.selo-sem-prazo { background: var(--chip-fechado-bg); color: var(--chip-fechado); }
.texto-ruim { color: var(--chip-ruim); }
.caso-prazo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: var(--text-2); }

.pct { font-weight: 800; }
.pct-bom { color: var(--chip-ok); }
.pct-medio { color: var(--chip-andamento); }
.pct-ruim { color: var(--chip-ruim); }
.lista-atrasados { list-style: none; display: grid; gap: 8px; }
.lista-atrasados li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--chip-ruim); }
.lista-atrasados span { color: var(--text-2); }

/* ------------------------------------------------------------------ gestão: quadro (Kanban) */
.quadro { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(330px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 18px; margin-top: 16px; align-items: start; }
.coluna { --etapa: var(--primary); scroll-snap-align: start; display: flex; flex-direction: column; max-height: calc(100vh - 230px); min-height: 200px; background: var(--surface-2); border-radius: 16px; border: 2px solid transparent; border-top: 5px solid var(--etapa); overflow: hidden; }
.coluna.alvo { border-color: var(--primary); background: var(--primary-suave); }
.etapa-novo { --etapa: #b4532f; } .etapa-contato { --etapa: #c98a1b; } .etapa-documentos { --etapa: #a8741a; } .etapa-analise { --etapa: #7d4a6e; }
.etapa-administrativo { --etapa: #2f6f73; } .etapa-judicial { --etapa: #4a3f8f; } .etapa-concluido { --etapa: #1f7a4d; } .etapa-sem_direito { --etapa: #7b6c64; } .etapa-arquivado { --etapa: #9a8d86; }
.coluna-fechada { opacity: 0.95; }
.coluna-cabeca { padding: 12px 14px 8px; }
.coluna-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font); font-size: 1rem; font-weight: 800; margin: 0; }
.coluna-conta { min-width: 30px; text-align: center; padding: 1px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.coluna-atraso { margin: 4px 0 0; font-size: 0.82rem; font-weight: 800; color: var(--chip-ruim); }
.coluna-nota { margin: 4px 0 0; font-size: 0.82rem; color: var(--text-2); }
.coluna-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; }
.coluna-lista { list-style: none; display: grid; gap: 12px; }
.coluna-vazia { padding: 18px 8px; text-align: center; color: var(--text-2); font-size: 0.9rem; }
.coluna-mais { width: 100%; margin-top: 12px; justify-content: center; }
.cartao-caso { display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line); box-shadow: var(--sombra-cartao); cursor: grab; }
.cartao-caso:hover { border-color: var(--etapa); border-left-color: var(--etapa); }
.cartao-caso.arrastando { opacity: 0.5; }
.cartao-caso.prio-alta { border-left-color: var(--chip-andamento); }
.cartao-caso.prio-urgente, .cartao-atrasado { border-left-color: var(--chip-ruim); }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao-nome { font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.cartao-nome:hover { text-decoration: underline; }
.cartao-meta { color: var(--text-2); font-size: 0.85rem; line-height: 1.35; }
.cartao-caso .selo-prazo { justify-self: start; }
.cartao-proxima { font-size: 0.85rem; font-weight: 700; }
.cartao-proxima.vencida, .proxima-atual.vencida { color: var(--chip-ruim); }
.cartao-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--text-2); }
.cartao-resp { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); min-width: 0; }
.cartao-resp > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-mini { line-height: 1; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-suave); color: var(--primary); font-size: 0.72rem; font-weight: 800; border: 1px solid var(--line); }
.avatar-mini.vazio { background: transparent; border-style: dashed; color: var(--text-2); }
.cartao-mover { min-height: 44px; font-size: 0.85rem; padding: 6px 10px; }

/* ------------------------------------------------------------------ gestão: próxima ação e linha do tempo */
.form-proxima { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 720px) { .form-proxima { grid-template-columns: 1fr 12rem; } .form-proxima .acoes, .form-proxima .status-salvar { grid-column: 1 / -1; } }
.proxima-atual { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.evento { border-left: 3px solid var(--line-strong); padding-left: 12px; }
.evento-rotulo { font-weight: 800; color: var(--text); }
.evento-situacao { border-left-color: var(--primary); }
.evento-anotacao { border-left-color: var(--chip-ok); }
.evento-proxima { border-left-color: var(--chip-andamento); }
.evento-parecer { border-left-color: var(--chip-novo); }

/* ---- prioridade e gráficos ------------------------------------------------------------------ */
.selo-prio { justify-self: start; display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; border: 1px solid currentColor; }
.selo-prio-urgente { background: var(--chip-ruim-bg, #fbe3e3); color: var(--chip-ruim); }
.selo-prio-alta { background: var(--chip-andamento-bg); color: var(--chip-andamento); }
.selo-prio-normal { background: var(--chip-fechado-bg); color: var(--chip-fechado); }
.item-caso { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.item-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.lista-itens { list-style: none; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grupo-titulo { margin: 16px 0 8px; font-size: 1.05rem; }
.barras { list-style: none; display: grid; gap: 10px; margin-top: 8px; }
.barra-linha { display: grid; grid-template-columns: minmax(90px, 190px) 1fr 3ch; align-items: center; gap: 12px; }
.barra-rotulo { font-weight: 600; overflow-wrap: anywhere; }
.barra-trilho { display: block; width: 100%; height: 18px; border-radius: 9px; overflow: hidden; }
.trilho-fundo { fill: var(--chip-fechado-bg); }
rect.seg-ok { fill: var(--chip-ok); } rect.seg-atencao { fill: var(--chip-andamento); } rect.seg-atrasado { fill: var(--chip-ruim); } rect.seg-neutro { fill: var(--primary); }
.barra-valor { font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; }
.seg { display: inline-block; min-width: 2px; }
.seg-ok { background: var(--chip-ok); } .seg-atencao { background: var(--chip-andamento); } .seg-atrasado { background: var(--chip-ruim); } .seg-neutro { background: var(--primary); }
.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 0; color: var(--text-2); font-size: 0.85rem; font-weight: 600; }
.legenda .seg { width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.grafico-linhas { margin: 0; }
.grafico-linhas svg { width: 100%; height: auto; max-height: 280px; }
.grafico-linhas .eixo { stroke: var(--line); stroke-width: 1; }
.grafico-linhas .eixo-txt { fill: var(--text-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico-linhas .serie { stroke-width: 2.5; }
.serie-ok, .ponto-ok { stroke: var(--chip-ok); fill: var(--chip-ok); } .serie-neutro, .ponto-neutro { stroke: var(--primary); fill: var(--primary); } .serie-atrasado, .ponto-atrasado { stroke: var(--chip-ruim); fill: var(--chip-ruim); }
.grafico-linhas .serie { fill: none; }
.grafico-tabela { margin-top: 8px; } .grafico-tabela summary { cursor: pointer; font-weight: 700; }
@media (max-width: 560px) { .barra-linha { grid-template-columns: 1fr 3ch; } .barra-rotulo { grid-column: 1 / -1; } .barra-trilho { grid-column: 1; } }
.codigo-caso { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-2); }
.caso-prio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.marcos { list-style: none; display: grid; gap: 8px; margin-bottom: 12px; }
.marco { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); }
.marco input[type="checkbox"] { width: 22px; height: 22px; }
.marco input[type="date"] { min-height: 40px; }
.marco-concluido { border-left-color: var(--chip-ok); } .marco-atrasado { border-left-color: var(--chip-ruim); } .marco-semana { border-left-color: var(--chip-andamento); }
.marco-concluido strong { text-decoration: line-through; text-decoration-thickness: 1px; }
.selo-marco { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; border: 1px solid currentColor; }
.selo-marco-concluido { background: var(--chip-ok-bg); color: var(--chip-ok); } .selo-marco-atrasado { background: var(--chip-ruim-bg, #fbe3e3); color: var(--chip-ruim); }
.selo-marco-semana { background: var(--chip-andamento-bg); color: var(--chip-andamento); } .selo-marco-ok, .selo-marco-sem-prazo { background: var(--chip-fechado-bg); color: var(--chip-fechado); }
.progresso { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; }
.marcos-linha { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.85rem; color: var(--text-2); }
.lista-projetos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.paginacao-texto { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.paginacao .desativado { opacity: 0.55; cursor: default; display: inline-flex; align-items: center; }
.coluna-lista-casos { min-width: 0; }

/* ---- lista de casos: busca, filtros, tabela, lote ------------------------------------------- */
.busca-casos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.busca-casos input { flex: 1 1 280px; min-height: 52px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.filtro-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
.filtro-chip:hover { border-color: var(--primary); }
.filtro-chip.ativo { background: var(--primary); border-color: var(--primary); color: var(--surface); }
.filtro-chip.ativo .filtro-conta { background: rgba(255, 255, 255, 0.22); color: inherit; }
.filtro-conta { min-width: 26px; text-align: center; padding: 0 8px; border-radius: 999px; background: var(--surface-2); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.filtros-rapidos .filtro-chip.rapido { border-style: dashed; }
.filtros-rapidos .filtro-chip.rapido.ativo { border-style: solid; }
.recorte-casos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.recorte-casos > div:first-child { grid-column: auto; }
.lote { position: sticky; top: 72px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; margin-bottom: 10px; border-radius: 14px; background: var(--primary-suave); border: 2px solid var(--primary); backdrop-filter: blur(8px); }
.lote[hidden] { display: none; }
.lote select { min-height: 48px; max-width: 260px; }
.lote-texto { margin: 0; }
.lote-confirma { flex-basis: 100%; margin: 0; font-weight: 700; color: var(--chip-andamento); }
.aviso-desfazer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin: 0 0 12px; border-radius: 12px; background: var(--chip-ok-bg); color: var(--chip-ok); font-weight: 700; }
.tabela-casos { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tabela-casos th, .tabela-casos td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tabela-casos thead th { background: var(--surface-2); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.tabela-casos tbody tr:last-child > * { border-bottom: 0; }
.tabela-casos .col-sel { width: 48px; }
.tabela-casos input[type="checkbox"] { width: 22px; height: 22px; }
.linha-caso { box-shadow: inset 5px 0 0 var(--line); }
.linha-caso.prio-alta { box-shadow: inset 5px 0 0 var(--chip-andamento); } .linha-caso.prio-urgente { box-shadow: inset 5px 0 0 var(--chip-ruim); }
.linha-caso:hover { background: var(--primary-suave); }
.caso-link { display: block; font-weight: 800; font-size: 1.05rem; color: var(--text); text-decoration: none; }
.caso-link:hover { text-decoration: underline; }
.caso-sub, .celula-sub { display: block; font-size: 0.85rem; margin-top: 2px; font-weight: 400; }
.tabela-casos th[scope="row"] { font-weight: 400; }
@media (max-width: 860px) {
  .tabela-casos, .tabela-casos tbody, .tabela-casos tr, .tabela-casos td, .tabela-casos th[scope="row"] { display: block; }
  .tabela-casos thead { display: none; }
  .tabela-casos { background: transparent; border: 0; }
  .linha-caso { position: relative; margin-bottom: 12px; padding: 6px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
  .tabela-casos th, .tabela-casos td { border: 0; padding: 6px 14px; }
  .tabela-casos td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
  .tabela-casos .col-sel { position: absolute; top: 4px; right: 4px; width: auto; }
  .tabela-casos th[scope="row"] { padding-right: 56px; }
}

/* ---- página do caso ------------------------------------------------------------------------- */
.caso-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.caso-nav-pos { margin-left: auto; color: var(--text-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.caso-nav .desativado { opacity: 0.55; display: inline-flex; align-items: center; }
.caso-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; }
.caso-topo .pagina-titulo { margin-bottom: 4px; }
.caso-contato { align-items: center; }
.aviso-duplicado { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--chip-andamento-bg); color: var(--chip-andamento); }
.aviso-duplicado a { color: inherit; font-weight: 800; }
.caso-indice { position: sticky; top: 64px; z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; margin: 14px 0 0; background: var(--bg, var(--surface-2)); border-bottom: 1px solid var(--line); }
.caso-indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 14px; border-radius: 999px; font-weight: 700; color: var(--text); text-decoration: none; }
.caso-indice a:hover { background: var(--primary-suave); }
.caso-bloco { scroll-margin-top: 130px; }
.resumo-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px 24px; }
.resumo-item { display: grid; gap: 4px; align-content: start; }
.resumo-largo { grid-column: 1 / -1; }
.resumo-rotulo { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); }
.contato-rapido { margin-top: 18px; display: grid; gap: 8px; }
.trilha { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.trilha-passo { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-weight: 700; font-size: 0.9rem; }
.trilha-passo.feito { background: var(--chip-ok-bg); color: var(--chip-ok); border-color: transparent; }
.trilha-passo.atual { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.trilha-passo.final:not(.atual) { border-style: dashed; }
.form-etapa { display: grid; gap: 12px; max-width: 640px; }
.form-etapa select { max-width: 360px; }
.aviso-mover { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--chip-andamento-bg); color: var(--chip-andamento); font-weight: 700; }
.aviso-mover[hidden] { display: none; }
.detalhe-tecnico { margin-top: 12px; } .detalhe-tecnico summary { cursor: pointer; font-weight: 700; }
/* caixas de seleção com alvo de 44 px, desenhadas para ficarem legíveis nesse tamanho */
.tabela-casos input[type="checkbox"], .marco input[type="checkbox"] { -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; border: 2px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer; }
.tabela-casos input[type="checkbox"]:checked, .marco input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.tabela-casos input[type="checkbox"]:checked::after, .marco input[type="checkbox"]:checked::after { content: "✓"; color: var(--surface); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.tabela-casos .col-sel { width: 64px; padding-right: 0; }
.tabela-casos .selo-prazo, .tabela-casos .selo-prio { white-space: normal; }
.tabela-casos td, .tabela-casos th { overflow-wrap: break-word; font-size: 0.92rem; }
.tabela-casos .caso-link { font-size: 1.02rem; }
.tabela-casos th:nth-child(2) { width: 30%; }
.tabela-casos .celula-sub { margin: 2px 0 4px; }

.tabela-casos thead th { white-space: normal; }

.caso-topo > div:first-child { flex: 1 1 420px; min-width: 0; }
.caso-topo .caso-contato { flex: 0 0 auto; min-width: 0; }
@media (max-width: 640px) {
  .caso-topo .caso-contato { flex: 1 1 100%; width: 100%; }
  .caso-contato .btn-compacto { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------ assistente de IA */
/* Tela de conversa: coluna central, mensagens que rolam e caixa de pergunta fixa embaixo */
.ia-chat { display: flex; flex-direction: column; gap: 12px; height: calc(100dvh - 64px - 28px - 36px); min-height: 520px; max-width: 880px; margin: 0 auto; }
.ia-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.ia-cabeca .pagina-titulo { margin: 0; }
.ia-contexto { margin: 0; }
.ia-escopo { border: 0; margin: 0; padding: 4px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; border-radius: 999px; background: var(--primary-suave); border: 1px solid var(--line); }
.ia-opcao { position: relative; display: inline-flex; flex: 0 0 auto; width: auto; margin: 0; }
.ia-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ia-opcao span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 18px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; color: var(--text); }
.ia-opcao input:checked + span { background: var(--surface); box-shadow: 0 1px 3px rgba(87, 45, 33, 0.25); color: var(--primary); }
.ia-opcao input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.ia-codigo { margin-left: 4px; }
.ia-codigo[hidden] { display: none; }
.ia-codigo input { width: 12.5em; min-height: 44px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.ia-privacidade { flex: none; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text-2); font-size: 0.9rem; }
.ia-privacidade summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 14px; font-weight: 700; color: var(--text); }
.ia-privacidade p { margin: 0; padding: 0 14px 14px; line-height: 1.55; }

.ia-painel { position: relative; flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; padding: 8px 4px 16px; }
.ia-mensagens { list-style: none; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 0; }
.ia-vazio { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 100%; padding: 24px 8px; text-align: center; }
.ia-vazio[hidden] { display: none; }
.ia-vazio-icone { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-btn); -webkit-mask: none; mask: none; position: relative; }
.ia-vazio-icone::after { content: ""; position: absolute; inset: 14px; background: var(--on-primary); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ia-vazio-titulo { margin: 8px 0 0; font-family: var(--font-titulo); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; color: var(--text); }
.ia-vazio-sub { margin: 0; color: var(--text-2); }
.ia-sugestoes { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 640px; margin: 14px 0 0; padding: 0; }
.ia-sugestao { width: 100%; min-height: 56px; padding: 10px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 0.95rem var(--font); text-align: left; cursor: pointer; }
.ia-sugestao:hover { border-color: var(--primary); background: var(--primary-suave); }

.ia-msg { display: flex; gap: 12px; min-width: 0; }
.ia-msg-operador { justify-content: flex-end; }
.ia-msg-operador .ia-texto { max-width: min(85%, 620px); padding: 12px 18px; border-radius: 22px 22px 6px 22px; background: var(--primary-suave); border: 1px solid var(--line); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.ia-msg-ia { align-items: flex-start; }
.ia-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-btn); color: var(--on-primary); }
.ia-avatar svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.ia-corpo { flex: 1; min-width: 0; padding-top: 4px; }
.ia-acoes { display: flex; gap: 6px; margin-top: 8px; }
.ia-acao { min-height: 44px; padding: 4px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--text-2); font: 600 0.85rem var(--font); cursor: pointer; }
.ia-acao:hover { background: var(--primary-suave); color: var(--text); }
.ia-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.ia-link { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--primary); color: var(--primary); font-weight: 700; text-decoration: none; }
.ia-link:hover { background: var(--primary-suave); }
.ia-pontos { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.ia-pontos i { width: 9px; height: 9px; border-radius: 50%; background: var(--text-2); animation: ia-pulso 1.2s infinite ease-in-out; }
.ia-pontos i:nth-child(2) { animation-delay: 0.15s; }
.ia-pontos i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ia-pulso { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ia-pontos i { animation: none; opacity: 0.7; } .ia-painel { scroll-behavior: auto; } }

/* markdown das respostas */
.md { line-height: 1.65; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 0.9em; }
.md strong { font-weight: 800; }
.md ul, .md ol { margin: 0 0 0.9em; padding-left: 1.5em; }
.md ul { list-style: disc; }
.md ol { list-style: decimal; }
.md li { margin: 0.3em 0; padding-left: 0.2em; }
.md li > ul, .md li > ol { margin: 0.3em 0 0.3em; }
.md-titulo { margin: 1.2em 0 0.5em; font-family: var(--font); font-weight: 800; line-height: 1.3; color: var(--text); }
h3.md-titulo { font-size: 1.15rem; }
h4.md-titulo { font-size: 1.05rem; }
h5.md-titulo, h6.md-titulo { font-size: 1rem; }
.md-codigo { padding: 0.12em 0.4em; border-radius: 6px; background: var(--primary-suave); border: 1px solid var(--line); font: 0.88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.md-bloco { margin: 0 0 0.9em; padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); overflow-x: auto; font: 0.88rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.md-bloco code { font: inherit; }
.md-citacao { margin: 0 0 0.9em; padding: 2px 0 2px 16px; border-left: 4px solid var(--primary); color: var(--text-2); }
.md-regua { margin: 1.2em 0; border: 0; border-top: 1px solid var(--line); }
.md-tabela { margin: 0 0 1em; overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.md-tabela:focus-visible, .md-bloco:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.md-tabela table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.md-tabela th, .md-tabela td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.md-tabela th { background: var(--primary-suave); color: var(--text); font-weight: 800; white-space: nowrap; }
.md-tabela tbody tr:last-child td { border-bottom: 0; }
.md-tabela tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--primary-suave) 45%, transparent); }
.md-tabela [data-alinho="center"] { text-align: center; }
.md-tabela [data-alinho="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.ia-codigo-chip { display: inline-block; padding: 1px 10px; border-radius: 999px; border: 1.5px solid var(--primary); color: var(--primary); font-weight: 700; font-size: 0.9em; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.ia-codigo-chip:hover { background: var(--primary-suave); }

/* caixa de pergunta */
.ia-form { margin: 0; }
.ia-caixa { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 26px; background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--sombra-cartao); }
.ia-caixa:focus-within { border-color: var(--primary); }
.ia-caixa textarea { flex: 1; min-height: 44px; max-height: 200px; margin: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; resize: none; font: 1rem/1.5 var(--font); color: var(--text); box-shadow: none; }
.ia-enviar { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--primary-btn); color: var(--on-primary); cursor: pointer; }
.ia-enviar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ia-enviar:disabled { opacity: 0.45; cursor: progress; }
.ia-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 4px; }
.ia-rodape .dica { margin: 0; }
.ia-form .status-salvar { margin: 4px 0 0; min-height: 0; }
.ia-form .status-salvar:empty { display: none; }
@media (max-width: 640px) {
  .ia-chat { height: calc(100dvh - 64px - 20px - 28px); min-height: 440px; }
  .ia-sugestoes { grid-template-columns: 1fr; }
  .ia-cabeca .pagina-titulo { display: none; }
  .ia-escopo { border-radius: 24px; width: 100%; flex-wrap: nowrap; }
  .ia-opcao { flex: 1 1 0; }
  .ia-opcao span { width: 100%; justify-content: center; padding-inline: 6px; font-size: 0.88rem; text-align: center; }
  .ia-chat { gap: 8px; }
  .ia-msg-operador .ia-texto { max-width: 92%; }
  .ia-avatar { display: none; }
  .md-tabela th, .md-tabela td { padding: 8px 8px; }
  .md-tabela table { font-size: 0.88rem; }
  .md-tabela th { white-space: normal; }
  .ia-msg { gap: 10px; }
  .ia-codigo input { width: 100%; }
  .ia-codigo { flex: 1 1 100%; margin: 0; }
}