/* ═══════════════════════════════════════════════════════════════════════
   JustiTasks Web — mesma paleta e medidas do aplicativo do Mac.
   As cores saem de src/utils/constants.py; as medidas, de src/ui/dashboard.py.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --fundo:#F9FAFB; --cartao:#FFFFFF; --superficie2:#F3F4F6;
  --borda:#E5E7EB; --borda-soft:#F3F4F6;
  --texto:#111827; --texto-med:#4B5563; --texto-light:#9CA3AF;
  --azul:#2563EB; --azul-suave:#3B82F6;
  --verde:#059669; --amarelo:#CA8A04; --vermelho:#DC2626; --laranja:#EA580C;
  --verde-bg:#D1FAE5; --verde-txt:#065F46;
  --amarelo-bg:#FEF3C7; --amarelo-txt:#92400E;
  --vermelho-bg:#FEE2E2; --vermelho-txt:#991B1B;
}
*{box-sizing:border-box;margin:0;padding:0}
/* o atributo hidden tem de vencer o display:grid/flex das classes */
[hidden]{display:none !important}
body{
  height:100vh; overflow:hidden;   /* a página não rola: quem rola é o conteúdo */
  background:var(--fundo); color:var(--texto);
  /* mesma ordem de assets/styles.qss: no Mac cai em Helvetica Neue, no Windows em Segoe UI */
  font-family:"Segoe UI","Helvetica Neue","Inter",Helvetica,Arial,sans-serif;
  font-size:11px; display:flex; min-height:100vh;
}

/* ⚠️ Botão, campo e lista NÃO herdam a fonte do body — o navegador impõe Arial
   nos controles de formulário. Sem esta regra, todo botão e todo campo do site
   saíam com traço diferente do app (foi o que o usuário viu como "a fonte está
   diferente"). Correção central: vale para toda a plataforma de uma vez. */
button, input, select, textarea, optgroup, option{
  font-family:inherit;
}

/* ── Barra lateral ─────────────────────────────────────────────────────── */
.sidebar{
  width:200px; flex:0 0 200px; background:var(--cartao);
  border-right:1px solid var(--borda); display:flex; flex-direction:column;
  /* ⚠️ No app o menu fica SEMPRE visível enquanto a lista rola. Sem isto a
     barra estica junto com o conteúdo (uma lista de 121 tarefas tem 13.000px)
     e o menu sobe ao rolar a página — foi o defeito relatado. */
  position:sticky; top:0; align-self:flex-start; height:100vh;
}
.logo{padding:17px 14px; border-bottom:1px solid var(--borda); text-align:center}
/* 188px e margem 17px: os mesmos valores gravados em Configurações → Perfil */
.logo img{width:188px; max-width:100%; height:auto; display:block; margin:0 auto}
.nav{padding:4px 0; flex:1}
.nav a{
  display:flex; align-items:center; gap:11px;
  padding:11px 16px; color:var(--texto-med); text-decoration:none;
  font-size:10.5px; font-weight:400; border-left:3px solid transparent;
}
.nav a:hover{background:var(--superficie2); color:var(--texto)}
.nav a.ativo{background:#EFF6FF; color:var(--azul); border-left-color:var(--azul); font-weight:600}
.nav .ic{width:16px; height:16px; flex:0 0 16px}
.rodape-side{
  padding:12px; border-top:1px solid var(--borda); text-align:center;
  color:var(--texto-light); font-size:9px; line-height:1.5;
}

/* ── Área principal ────────────────────────────────────────────────────── */
.main{flex:1; padding:20px 24px 24px; overflow-y:auto; min-width:0; min-height:0}
.header{display:flex; align-items:center; margin-bottom:14px}
.header h1{font-size:18px; font-weight:700; color:var(--texto)}
.btn-novo{
  margin-left:auto; background:var(--azul); color:#fff; border:none;
  border-radius:6px; padding:8px 16px; font-size:10px; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.btn-novo:hover{background:var(--azul-suave)}

/* ── Linha 1: data + 5 cards ───────────────────────────────────────────── */
.linha-topo{display:flex; gap:12px; margin-bottom:16px; align-items:stretch}
.data-card{
  width:82px; flex:0 0 82px; height:110px; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.data-card .mes{
  background:var(--azul); color:#fff; font-size:10px; font-weight:600;
  width:100%; height:26px; line-height:26px; text-align:center;
  border-radius:6px 6px 0 0;
}
.data-card .dia{font-size:28px; font-weight:700; color:var(--texto); line-height:1.15}
.data-card .sem{font-size:8px; color:var(--texto-light); padding-bottom:6px}

.stat-card{
  /* ⚠️ Era `height:110px` FIXO, medida de quando o cartão de Tarefas tinha
     TRÊS fatias. Com a quarta ("sem prazo", 02/09/2026) o texto transbordava
     para FORA da moldura branca — "prazo" caía numa quinta linha, solto no
     fundo cinza. `min-height` mantém a altura do app quando cabe e deixa o
     cartão crescer o mínimo necessário quando não cabe. */
  flex:1 1 0; min-width:160px; min-height:110px; background:var(--cartao);
  border:1px solid var(--borda); border-radius:8px; padding:10px 12px;
  cursor:pointer; display:flex; flex-direction:column; gap:6px;
}
.stat-card:hover{border-color:var(--azul-suave)}
/* cards do topo: em janela média encolhem em vez de estourar a caixa
   (regra "nada mais largo que a caixa") — o mínimo de 160px do app só vale
   quando há espaço para os cinco */
@media (max-width: 1279px){
  .stat-card{min-width:0}
  .stat-card .titulo{font-size:9.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  /* ⚠️ Em 1024px o rótulo "sem prazo" encostava na borda do cartão (1px de
     transbordo, medido). O donut e o vão cedem 3px para a legenda — que é a
     informação, enquanto o círculo é enfeite. */
  .stat-card .corpo{gap:7px}
  .donut{width:42px; height:42px; flex:0 0 42px; font-size:12.5px}
  /* ⚠️ Cinco cartões numa linha de 950px davam 113px a cada um — e o rótulo
     quebrava palavra no meio. Em TRÊS por linha cada um recebe ~230px e o
     texto cabe inteiro. É a regra da compactação: em tela menor, reorganizar,
     não espremer. */
  .linha-topo{gap:9px; flex-wrap:wrap}
  .linha-topo .stat-card{flex:1 1 calc(33.333% - 40px); min-width:180px}
}
.stat-card .titulo{color:var(--texto-med); font-size:10px; font-weight:600; min-height:16px}
.stat-card .corpo{display:flex; gap:12px; align-items:center; flex:1}
.donut{
  width:50px; height:50px; flex:0 0 50px; border:3px solid var(--borda);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:var(--texto);
}
.legendas{display:flex; flex-direction:column; gap:2px; min-width:0}
/* ⚠️ Nem `nowrap` (empurra o texto para FORA do cartão: 16px em 950px) nem
   `overflow-wrap:anywhere` (quebra NO MEIO da palavra — "atrasa/das",
   "pende/ntes", medido em 950px). A quebra normal, entre palavras, é a certa;
   quem dá conta da altura é o `min-height` do cartão. E abaixo de 1280px os
   cartões passam a caber TRÊS por linha, para o rótulo caber inteiro. */
.legendas div{font-size:9px; line-height:1.35}
.legendas b{font-size:10px; font-weight:700}
.legendas span{color:var(--texto-light); font-size:9px}


/* ── Linha 2: estatísticas + mini calendário ───────────────────────────── */
.linha-stats{display:flex; gap:12px; margin-bottom:16px; align-items:stretch}
.painel{background:var(--cartao); border:1px solid var(--borda); border-radius:8px; padding:12px 14px}
.painel-stats{flex:3; min-width:0}
.painel-cal{flex:2; min-width:0}
.painel-cabec{display:flex; align-items:center; margin-bottom:10px}
.painel-cabec h2{font-size:11px; font-weight:700; color:var(--texto)}
.escopos{margin-left:auto; display:flex; gap:6px}
.escopos a, .escopos button{
  background:transparent; color:var(--texto-med); border:1px solid var(--borda);
  border-radius:6px; padding:3px 12px; font-size:8.5px; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.escopos a.on, .escopos button.on{background:var(--azul); color:#fff; border-color:var(--azul)}

.grupos{display:grid; grid-template-columns:1fr 1fr; gap:12px 26px}
.grupo .rotulo{color:var(--texto-med); font-size:10px; font-weight:600; margin-bottom:5px}
.blocos{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.bloco{
  border-radius:6px; padding:8px; text-align:center; min-height:62px;
  display:flex; flex-direction:column; justify-content:center;
}
.bloco .pct{font-size:14px; font-weight:700; line-height:1.2}
.bloco .lbl{font-size:8px; font-weight:500}
.bloco.verde{background:var(--verde-bg)} .bloco.verde *{color:var(--verde-txt)}
.bloco.amarelo{background:var(--amarelo-bg)} .bloco.amarelo *{color:var(--amarelo-txt)}
.bloco.vermelho{background:var(--vermelho-bg)} .bloco.vermelho *{color:var(--vermelho-txt)}

/* mini calendário */
.cal-mes{font-size:11px; font-weight:700; color:var(--texto); margin-bottom:8px}
.cal{width:100%; border-collapse:collapse}
.cal th{color:var(--texto-light); font-size:8.5px; font-weight:500; padding-bottom:4px}
.cal td{text-align:center; padding:1px}
.cal .d{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:22px; border-radius:11px; font-size:9px; font-weight:500;
  color:var(--texto-med);
}
.cal .hoje{background:var(--azul); color:#fff; font-weight:700}
.cal .fora{color:#D1D5DB}
.cal-link{display:block; text-align:right; margin-top:6px; color:var(--azul);
  font-size:9px; text-decoration:none}

/* ── Seções em carrossel ───────────────────────────────────────────────── */
.secao{background:var(--cartao); border:1px solid var(--borda); border-radius:8px; margin-bottom:16px}
.secao-cabec{display:flex; align-items:center; gap:8px; height:38px; padding:0 14px;
  border-bottom:1px solid var(--borda-soft)}
.secao-cabec h3{font-size:10px; font-weight:600; color:var(--texto)}
.secao-cabec .cnt{
  width:22px; height:22px; border-radius:11px; background:var(--borda-soft);
  color:var(--texto-med); font-size:8.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.secao-cabec a{margin-left:auto; color:var(--azul); font-size:9px; font-weight:500; text-decoration:none}
.faixa{display:flex; gap:10px; padding:12px 14px; overflow-x:auto}
.faixa::-webkit-scrollbar{height:6px}
.faixa::-webkit-scrollbar-thumb{background:var(--borda); border-radius:3px}
.vazio{
  padding:26px 14px; color:var(--texto-light); font-size:9.5px;
  border:1px dashed var(--borda); border-radius:6px; margin:12px 14px;
  text-align:center; max-width:340px;
}

/* card de tarefa do carrossel — 230×96 no app */
.card-t{
  width:230px; flex:0 0 230px; height:96px; background:var(--cartao);
  border:1px solid var(--borda); border-radius:6px; padding:9px 12px;
  cursor:pointer; display:flex; flex-direction:column; gap:4px;
  text-decoration:none; color:inherit;   /* o card é link, mas NÃO parece link */
}
.card-t *{text-decoration:none}
.card-t:hover{border-color:var(--azul-suave); background:#F9FAFB}
.card-t .topo{display:flex; align-items:center; gap:6px}
.card-t .alerta{width:11px; height:11px; flex:0 0 11px}   /* icon_alert(11) */
.card-t .origem{color:var(--texto-light); font-size:8px; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card-t .prazo{font-size:8px; font-weight:600}
.card-t .desc{
  color:var(--texto); font-size:9px; font-weight:500; line-height:1.34;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}

/* ═══════════════════════════════════════════════════════════════════════
   TELA DE TAREFAS — mesmas medidas e cores do app (src/ui/tarefas_view.py)
   ═══════════════════════════════════════════════════════════════════════ */
.btn-secundario{
  margin-left:auto; margin-right:8px; background:var(--cartao); color:var(--texto-med);
  border:1px solid var(--borda); border-radius:6px; padding:8px 16px;
  font-size:13px; font-weight:600; text-decoration:none;
}
.btn-secundario:hover{background:var(--superficie2); color:var(--texto)}
/* Cabeçalho de PROCESSOS: no app "Extrair Processos" e "Sincronizar Andamentos"
   usam _STYLE_BTN_SMALL — 9.5pt/500, altura 26px, raio 5, padding 5x12.
   São menores que os de Tarefas (Importar/Imprimir), que usam 10pt/7x14. */
.btn-secundario.pequeno{
  padding:5px 12px; font-size:9.5px; font-weight:500; border-radius:5px;
  min-height:26px; display:inline-flex; align-items:center; justify-content:center;
}
a.btn-novo{text-decoration:none; display:inline-block}
.header .btn-secundario + .btn-novo{margin-left:0}

/* abas: mesmo padrão do app (sublinhado azul no ativo) */
/* ⚠️ As abas QUEBRAM linha em vez de rolar de lado: em Configurações são seis
   e, com `overflow-x:auto`, "Backup" e "Sobre" ficavam fora da caixa em 1024px
   e no celular — contra a regra "nada mais largo que a caixa". */
.abas{display:flex; flex-wrap:wrap; background:var(--cartao);
  border-bottom:1px solid var(--borda);
  border-radius:8px 8px 0 0; margin-bottom:14px}
.abas a{
  padding:8px 24px; min-width:100px; text-align:center; text-decoration:none;
  flex:0 1 auto;
  color:var(--texto-med); font-size:10px; font-weight:600;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.abas a:hover{color:var(--texto)}
.abas a.on{color:var(--azul); border-bottom-color:var(--azul)}

/* filtros */
.filtros{margin-bottom:14px}
.linha-busca{display:flex; gap:10px; margin-bottom:10px}
.campo-busca{
  flex:1; display:flex; align-items:center; gap:8px; background:var(--cartao);
  border:1px solid var(--borda); border-radius:6px; padding:0 12px;
}
.campo-busca:focus-within{border-color:var(--azul)}
.campo-busca svg{width:16px; height:16px; flex:0 0 16px}
.campo-busca input{
  flex:1; border:none; outline:none; background:transparent; padding:8px 0;
  font-size:9.5px; font-family:inherit; color:var(--texto); min-width:0;
}
/* Botão que abre os filtros — some com os selects da tela até serem pedidos */
.btn-filtro{
  display:inline-flex; align-items:center; gap:7px; position:relative;
  background:var(--cartao); border:1px solid var(--borda); border-radius:6px;
  padding:8px 12px; font-size:9px; font-weight:500; color:var(--texto-med);
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.btn-filtro:hover{background:var(--superficie2); color:var(--texto)}
.btn-filtro svg{width:16px; height:16px}
.btn-filtro.aberto{color:var(--azul); border-color:#BFDBFE; background:#EFF6FF}
.btn-filtro .ponto{
  width:7px; height:7px; border-radius:50%; background:var(--azul);
  position:absolute; top:6px; right:7px;      /* avisa que há filtro aplicado */
}
.btn-limpar{
  background:var(--cartao); border:1px solid var(--borda); border-radius:6px;
  padding:8px 14px; font-size:9px; color:var(--texto-med); text-decoration:none;
  white-space:nowrap;
}
.btn-limpar:hover{background:var(--superficie2); color:var(--texto)}
/* ── Seletor de filtros (por cima da página) ───────────────────────────── */
.fundo-filtro{
  display:none; position:fixed; inset:0; z-index:50;
  background:rgba(17,24,39,.42);
}
body.filtro-aberto .fundo-filtro{display:block}
.seletor-filtro{
  display:none; position:fixed; z-index:51; top:50%; left:50%;
  transform:translate(-50%,-50%); width:min(420px, calc(100vw - 32px));
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  box-shadow:0 12px 40px rgba(17,24,39,.22); overflow:hidden;
}
body.filtro-aberto .seletor-filtro{display:block}
/* cabeçalho, corpo e rodapé com as MESMAS medidas dos diálogos do app
   (22/16/22/12 no topo; 22/12/22/14 no rodapé; título 14pt/700) */
.sf-cabec{
  display:flex; align-items:center; padding:16px 22px 12px;
  border-bottom:1px solid var(--borda);
}
.sf-cabec h3{font-size:14px; font-weight:700; color:var(--texto)}
.sf-fechar{
  margin-left:auto; width:30px; height:30px; border:none; background:transparent;
  border-radius:6px; cursor:pointer; color:var(--texto-med);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.sf-fechar:hover{background:var(--superficie2); color:var(--texto)}
.sf-fechar svg{width:17px; height:17px}
.sf-corpo{padding:14px 22px; display:flex; flex-direction:column; gap:10px}
.sf-acoes{
  display:flex; align-items:center; gap:10px; padding:12px 22px 14px;
  border-top:1px solid var(--borda); background:var(--cartao);
}
.sf-limpar{
  color:var(--texto-med); font-size:10px; text-decoration:none; padding:8px 4px;
}
.sf-limpar:hover{color:var(--texto)}
.sf-aplicar{
  margin-left:auto; background:var(--azul); color:#fff; border:none;
  border-radius:6px; padding:7px 18px; font-size:9.5px; font-weight:600;
  cursor:pointer; font-family:inherit;
}
.sf-aplicar:hover{background:var(--azul-suave)}
.sf-corpo select{
  flex:1; min-width:150px; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:6px 10px; font-size:9.5px; font-family:inherit;
  color:var(--texto-med); appearance:none;  /* sem a seta cinza — regra de UI */
}
.sf-corpo select:focus{outline:none; border-color:var(--azul)}

/* card de tarefa — 14/10/12/11 de margem e raio 10, como no app */
.lista{display:flex; flex-direction:column; gap:10px}
@media (max-width:900px){ .lista{gap:7px} }
/* O card é uma GRADE: assim as mesmas peças mudam de lugar no celular sem
   precisar duplicar nada no HTML.
     computador → meta / [urgência] título [ações] / prazo
     celular    → meta / [urgência] título / [ações] prazo      */
.card-tarefa{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  column-gap:8px; row-gap:5px;
  grid-template-areas:"meta meta meta" "prio titulo acoes" "base base base";
  background:var(--cartao); border:1px solid var(--borda); border-radius:10px;
  padding:10px 12px 11px 14px; overflow:hidden;
}
.card-tarefa:hover{border-color:#93C5FD; background:#FAFCFF}
.c-meta{grid-area:meta; color:var(--texto-med); font-size:8.5px; font-weight:500}
.btn-prio-form{grid-area:prio; display:flex}
.c-titulo{grid-area:titulo}
.c-rodape{display:contents}     /* no computador, cada peça vai para a sua área */
.c-acoes{grid-area:acoes}
.c-base{grid-area:base}
.btn-prio{
  width:26px; height:26px; border:none; background:transparent; border-radius:4px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.btn-prio:hover{background:#F1F5F9}
.btn-prio svg, .btn-prio .ico-png{width:18px; height:18px; flex:0 0 18px}
.c-titulo{
  color:var(--texto); font-size:10.5px; font-weight:600; text-decoration:none;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.c-titulo.riscado{text-decoration:line-through; color:var(--texto-light)}
.c-acoes{display:flex; align-items:center; gap:2px}
.c-acoes form{display:flex}
.ac{
  width:28px; height:28px; border:none; background:transparent; border-radius:6px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--texto-med); padding:0;
}
.ac:hover{background:var(--superficie2); color:var(--texto)}
.ac svg{width:16px; height:16px}
.ac.verde{color:var(--verde)} .ac.verde:hover{background:#D1FAE5}
.ac.vermelho{color:var(--vermelho)} .ac.vermelho:hover{background:#FEE2E2}
.c-base{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.c-base .prazo{font-size:9px; font-weight:600}
/* Pílula: cor e fundo vêm PRONTOS do servidor (estilo_pilula), com a mesma
   opacidade que o app usa em cada tela. Nunca escrever cor de fundo aqui. */
.pilula{
  font-size:8.5px; font-weight:600; padding:2px 12px; border-radius:11px;
  min-height:22px; display:inline-flex; align-items:center;   /* pílula redonda */
}
.badges{display:flex; align-items:center; gap:10px; margin-left:auto}
.bd{display:inline-flex; align-items:center; gap:4px; font-size:8.5px; font-weight:600}
.bd svg{width:14px; height:14px}
.bd.azul{color:#2563EB} .bd.roxo{color:#7C3AED} .bd.cinza{color:#6B7280}
.selo-concl{font-size:8.5px; font-weight:600}
.lista-vazia{
  padding:40px; text-align:center; color:var(--texto-light); font-size:11px;
  background:var(--cartao); border:1px dashed var(--borda); border-radius:10px;
}
.contagem{margin-top:12px; color:var(--texto-light); font-size:9px; text-align:right}

/* ═══════════════════════════════════════════════════════════════════════
   CELULAR — o MESMO menu lateral do app, apenas RECOLHÍVEL.
   Decisão do usuário (31/08/2026): manter a estética; o menu desliza da
   esquerda e o botão ☰ fica no canto superior ESQUERDO — do mesmo lado de onde
   o menu sai.
   ⚠️ O menu NÃO rola — igual ao app. Os 13 itens cabem na altura da tela.
   ⚠️ Nada pode estourar a largura: sem rolagem lateral em nenhuma tela.
   ═══════════════════════════════════════════════════════════════════════ */
.btn-menu{display:none}
.fundo-menu{display:none}

@media (max-width: 900px){
  body{display:block}

  /* Botão do menu — canto superior direito, sempre visível */
  .btn-menu{
    display:flex; position:fixed; top:10px; left:12px; z-index:40;
    width:42px; height:42px; align-items:center; justify-content:center;
    background:var(--cartao); color:var(--texto-med);
    border:1px solid var(--borda); border-radius:9px; cursor:pointer; padding:0;
    box-shadow:0 1px 3px rgba(17,24,39,.06);
  }
  .btn-menu svg{width:21px; height:21px}
  .btn-menu:active{background:var(--superficie2)}

  /* A barra lateral continua sendo a MESMA — só sai da tela quando fechada */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:45;
    width:214px; max-width:82vw; flex:none;
    transform:translateX(-102%); transition:transform .22s ease;
    box-shadow:0 0 0 rgba(17,24,39,0);
    overflow:visible;            /* não rola — como no app */
  }
  body.menu-aberto .sidebar{
    transform:translateX(0); box-shadow:2px 0 16px rgba(17,24,39,.18);
  }
  .fundo-menu{
    display:block; position:fixed; inset:0; z-index:44;
    background:rgba(17,24,39,.42); opacity:0; pointer-events:none;
    transition:opacity .22s ease;
  }
  body.menu-aberto .fundo-menu{opacity:1; pointer-events:auto}

  /* Itens um pouco mais compactos para os 13 caberem sem rolar */
  .logo{padding:14px 12px}
  .logo img{width:150px}
  .nav a{padding:7px 14px; min-height:33px; font-size:13px}
  .nav .ic{width:18px; height:18px; flex:0 0 18px}
  .rodape-side{padding:9px}

  /* Conteúdo ocupa a tela inteira; espaço à direita para o botão do menu */
  .main{padding:12px 12px 20px; width:100%}
  /* No celular o cabeçalho é o MESMO do computador: nome de um lado, botões do
     outro — nunca grudados. O h1 estica e empurra os botões para a direita. */
  .header{flex-wrap:nowrap; gap:8px; padding-left:46px}
  .header h1{font-size:20px; flex:1; min-width:0}
  .btn-novo{margin-left:auto; padding:7px 12px; font-size:11.5px; white-space:nowrap}
  .btn-secundario{padding:7px 10px; font-size:11.5px; white-space:nowrap}

  /* Painel */
  .linha-topo{flex-wrap:wrap; gap:8px; margin-bottom:12px}
  /* A data vira o SEXTO quadro, do mesmo tamanho dos outros: 6 cards em duas
     colunas = 3 linhas certinhas, sem a faixa larga ocupando uma linha só. */
  /* Data: MÊS em cima, dia e dia-da-semana embaixo — as mesmas três linhas do
     computador, só que no tamanho do quadro. */
  .data-card{
    flex:1 1 calc(50% - 4px); width:auto; min-width:0; height:auto;
    flex-direction:column; align-items:center; justify-content:center; gap:0;
    background:var(--cartao); border:1px solid var(--borda);
    border-radius:7px; padding:0 0 6px;
  }
  .data-card .mes{
    width:100%; height:22px; line-height:22px; font-size:11px;
    border-radius:6px 6px 0 0;
  }
  .data-card .dia{font-size:26px; line-height:1.2; margin-top:2px}
  .data-card .sem{padding:0; margin-left:0; font-size:9.5px; text-align:center}
  /* Quadros de quantitativo: DUAS colunas e bem mais baixos. Um card por
     linha, com o círculo grande, empurrava as estatísticas para fora da
     primeira tela — contra a regra do "compacto". */
  .stat-card{
    flex:1 1 calc(50% - 4px); min-width:0; height:auto;
    padding:7px 9px; gap:2px; border-radius:7px;
  }
  .stat-card .titulo{font-size:11.5px; min-height:0}
  .stat-card .corpo{gap:8px; align-items:center}
  .donut{width:34px; height:34px; flex:0 0 34px; font-size:11.5px; border-width:2px}
  .legendas{gap:0}
  .legendas div{font-size:10px; line-height:1.3}
  .legendas b{font-size:11px}
  .legendas span{font-size:10px}
  .linha-stats{flex-direction:column; gap:8px; margin-bottom:12px}
  /* Estatísticas em escala menor — os blocos de 62px de altura ocupavam meia
     tela cada grupo. Mantêm a cor e a leitura, em tamanho agradável. */
  .painel{padding:10px 11px}
  .painel-cabec{margin-bottom:8px}
  .painel-cabec h2{font-size:13px}
  .escopos a, .escopos button{padding:3px 10px; font-size:10.5px}
  .grupos{grid-template-columns:1fr 1fr; gap:9px 10px}
  .grupo .rotulo{font-size:11px; margin-bottom:4px}
  .blocos{gap:4px}
  .bloco{min-height:42px; padding:5px 4px; border-radius:5px}
  .bloco .pct{font-size:13px}
  .bloco .lbl{font-size:8.5px; line-height:1.2}
  .secao{margin-bottom:12px}
  .faixa{padding:10px 12px}
  .card-t{width:236px; flex:0 0 236px}
  .vazio{max-width:none; margin:10px 12px}

  /* Tarefas */
  .abas{border-radius:0; margin:0 -12px 12px; padding:0 6px}
  .abas a{min-width:auto; padding:9px 15px; font-size:12.5px}
  /* Busca, funil e "Limpar" numa LINHA SÓ (decisão do usuário) */
  .linha-busca{flex-wrap:nowrap; gap:7px; align-items:stretch}
  .campo-busca{flex:1 1 auto; min-width:0; padding:0 10px}
  .campo-busca input{font-size:12.5px}
  .btn-filtro{flex:0 0 auto; padding:0 11px}
  .btn-filtro .rot-filtro{display:none}
  .btn-limpar{flex:0 0 auto; padding:8px 11px; font-size:12px}
  .sf-corpo select{min-width:0; width:100%}
  /* COMPACTO: a grade muda de forma — as ações passam a dividir a última linha
     com o prazo, à ESQUERDA (lado do polegar). Economiza uma linha inteira por
     card, sem tirar nada da tela. */
  /* No celular a grade tem 2 colunas e o RODAPÉ vira uma linha só: as ações
     (à esquerda) dividem espaço com o prazo e o status. */
  .card-tarefa{
    padding:7px 9px 8px 10px; column-gap:6px; row-gap:3px;
    grid-template-columns:auto 1fr;
    grid-template-areas:"meta meta" "prio titulo" "base base";
  }
  .c-rodape{
    display:flex; grid-area:base; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .c-meta{font-size:9.5px}
  /* ⚠️ min-width:0 é o que deixa o texto quebrar dentro do card; sem isso a
     grade usa a largura do conteúdo e o card estoura a tela.
     2 linhas no máximo: o título inteiro fica no detalhe. */
  .c-titulo{
    white-space:normal; overflow:hidden; min-width:0; font-size:12px;
    overflow-wrap:anywhere; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .btn-prio{width:22px; height:22px}
  .btn-prio svg{width:15px; height:15px}
  .c-acoes{justify-content:flex-start; gap:0}
  .ac{width:26px; height:24px}
  .ac svg{width:15px; height:15px}
  .c-base{gap:6px; justify-content:flex-start}
  .c-base .prazo{font-size:10px}
  .pilula{font-size:9.5px; padding:1px 8px; min-height:18px}
  .pilula.selo{font-size:9px; min-height:16px; border-radius:8px}
  .pilula.selo.mini{font-size:8.5px; min-height:14px; border-radius:7px}
  .badges{margin-left:auto; width:auto; gap:6px}
  .bd{font-size:9.5px}
  .bd svg{width:12px; height:12px}
  .selo-concl{font-size:9.5px}
}

/* Telas bem estreitas (iPhone SE) — os quadros continuam em DUAS colunas
   (cabem: ~176px cada); só uma tela muito menor justificaria empilhar. */
@media (max-width: 400px){
  .abas a{padding:9px 12px}
  .header h1{font-size:19px}
  .legendas div{font-size:9.5px}
  .donut{width:32px; height:32px; flex:0 0 32px; font-size:11px}
}
@media (max-width: 330px){
  .stat-card{flex:1 0 100%}
}

/* Telas BAIXAS (janela curta no computador, celular deitado): comprime o menu
   o suficiente para os 13 itens caberem — o menu nunca rola, como no app. */
@media (max-height: 740px){
  .logo{padding:11px 12px}
  .logo img{width:150px}
  .nav a{padding:6px 16px; min-height:30px; font-size:13px}
  .nav .ic{width:17px; height:17px; flex:0 0 17px}
  .rodape-side{padding:8px; font-size:9.5px}
}

@media (max-width: 900px) and (max-height: 700px){
  .logo{padding:10px 12px}
  .logo img{width:132px}
  .nav a{padding:5px 14px; min-height:29px; font-size:12.5px}
  .nav .ic{width:17px; height:17px; flex:0 0 17px}
  .rodape-side{padding:7px; font-size:9.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
   DETALHE DA TAREFA — duas colunas (conteúdo + histórico), como no app
   ═══════════════════════════════════════════════════════════════════════ */
.det-barra{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px;
}
.voltar{color:var(--texto-med); font-size:10px; text-decoration:none; padding:8px 4px}
.voltar:hover{color:var(--texto)}
.det-barra form{display:flex}
.bt-acao{
  display:inline-flex; align-items:center; gap:6px; background:var(--cartao);
  color:var(--texto-med); border:1px solid var(--borda); border-radius:6px;
  padding:6px 12px; font-size:9.5px; font-weight:600; cursor:pointer;
  text-decoration:none; font-family:inherit;
}
.bt-acao:hover{background:var(--superficie2); color:var(--texto)}
.bt-acao svg{width:16px; height:16px}
.bt-acao.verde{color:var(--verde)} .bt-acao.verde:hover{background:#D1FAE5}
.bt-acao.vermelho{color:var(--vermelho)} .bt-acao.vermelho:hover{background:#FEE2E2}
.selo-topo{margin-left:auto}

.det-grade{display:flex; gap:14px; align-items:flex-start}
.det-col{
  flex:1 1 0; min-width:0; background:var(--cartao); border:1px solid var(--borda);
  border-radius:8px; padding:18px 20px;
}
.det-hist{
  flex:0 0 320px; background:var(--cartao); border:1px solid var(--borda);
  border-radius:8px; padding:14px 16px; max-height:calc(100vh - 120px); overflow-y:auto;
}
.det-titulo{
  font-size:15px; font-weight:700; line-height:1.35;
  padding-bottom:12px; margin-bottom:14px;
  border-bottom:1px solid var(--borda-soft);   /* a ÚNICA linha do app */
}
.det-titulo.riscado{text-decoration:line-through; color:var(--texto-light)}

.campos{
  display:grid; grid-template-columns:1fr 1fr; gap:7px 22px;
  padding-bottom:4px;          /* sem linha: o app não separa a grade do LINK */
}
/* cada coluna desce na vertical, como os dois QVBoxLayout do app */
.campos-col{display:flex; flex-direction:column; gap:8px; min-width:0}
.campo{display:flex; gap:8px; align-items:baseline; min-width:0}
.campo .rot{
  flex:0 0 auto; max-width:118px; min-width:62px; color:var(--texto-light);
  font-size:8.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px;
}
.campo .val{
  color:var(--texto); font-size:10px; font-weight:500; min-width:0;
  overflow-wrap:anywhere;      /* nº de processo não empurra a caixa */
}

/* seções sem régua entre elas — no app só o espaçamento as separa */
.secao-det{padding-top:0; margin-top:16px}
.secao-det:first-of-type{margin-top:12px}
.secao-det h2{
  color:var(--texto-light); font-size:9px; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; margin-bottom:8px;
}
/* ⚠️ a cor deste contador é definida MAIS ABAIXO (cinza, como no app) — aqui
   ficam só as medidas, para não haver duas cores brigando pelo mesmo elemento */
.secao-det h2 .cont{font-weight:700; margin-left:6px; text-transform:none}
.linha-vinc{
  display:flex; gap:10px; align-items:center; background:var(--cartao);
  border:1px solid var(--borda); border-radius:6px; padding:7px 10px; margin-bottom:5px;
}
.linha-vinc .rot{
  flex:0 0 84px; color:var(--texto-light); font-size:9px; font-weight:600;
  text-transform:uppercase; letter-spacing:.4px;
}
.linha-vinc span:last-child{font-size:10px; min-width:0; overflow-wrap:anywhere}

.barra{height:5px; background:var(--borda-soft); border-radius:3px; margin-bottom:9px}
.barra i{display:block; height:100%; background:var(--verde); border-radius:3px}
.item-sub{display:flex; align-items:center; gap:9px; padding:5px 0}
.item-sub form, .item-anx form{display:flex}
/* Anexo: no app é um cartão com fundo e borda (10px 6px 5px), o nome vem
   precedido de 📄, e as ações são botões REDONDOS de 24px com ícone de 14. */
.item-anx{
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
  background:var(--fundo); border:1px solid var(--borda); border-radius:6px;
  padding:5px 6px 5px 10px;
}
.item-anx:hover{background:var(--borda-soft)}
/* ⚠️ Estas duas estavam declaradas DUAS vezes no arquivo, e a segunda vencia
   sem o `flex:0 0 auto` do tamanho — resultado medido: "377 KB" espremido em
   28px e cortado. Agora é uma declaração só, com o nome quebrando em linhas
   (nome de arquivo precisa ser lido inteiro) e o tamanho intocável. */
.item-anx .nome{flex:1; min-width:0; font-size:9.5px; font-weight:500;
  color:var(--texto); overflow-wrap:anywhere}
.item-anx .nome::before{content:"📄"; margin-right:7px}
.item-anx .tam{color:var(--texto-light); font-size:8.5px; flex:0 0 auto;
  white-space:nowrap}
.item-anx .ac{width:24px; height:24px; border-radius:12px}
.item-anx .ac .ico-png, .item-anx .ac svg{width:14px; height:14px; flex:0 0 14px}
.item-anx .ac.azul{color:var(--azul)} .item-anx .ac.azul:hover{background:#DBEAFE}
.item-anx .ac.verde:hover{background:#D1FAE5}
.item-anx .ac.vermelho:hover{background:#FEE2E2}
.chk{
  width:20px; height:20px; flex:0 0 20px; border:1.6px solid var(--borda);
  border-radius:5px; background:var(--cartao); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--verde);
}
.chk.on{border-color:var(--verde); background:#ECFDF5}
.chk svg{width:14px; height:14px}
.item-sub span{flex:1; font-size:9.5px; min-width:0; overflow-wrap:anywhere}
.riscado{text-decoration:line-through; color:var(--texto-light)}
.dir{margin-left:auto}
.item-obs{
  background:var(--fundo); border:1px solid var(--borda); border-radius:7px;
  padding:9px 11px; margin-bottom:7px;
}
.obs-cab{display:flex; align-items:center; gap:9px; margin-bottom:4px}
/* Editar/excluir observação: no app são botões REDONDOS de 24px com o ícone
   em 14px (tarefa_detail:1009 e atendimento_detail:820) — menores que os
   ícones de ação do card, que têm 16px. */
.obs-cab .ac{width:24px; height:24px; border-radius:12px}
.obs-cab .ac .ico-png{width:14px; height:14px; flex:0 0 14px}
.obs-cab .ac:hover{background:#DBEAFE; color:var(--texto)}
.obs-cab .ac.vermelho:hover{background:#FEE2E2}
.obs-cab .dir{margin:0}
.obs-cab .dir:first-of-type{margin-left:auto}
.obs-cab b{font-size:9px; color:var(--texto)}
.obs-cab span{color:var(--texto-light); font-size:8.5px}
.obs-txt{font-size:9.5px; white-space:pre-wrap; overflow-wrap:anywhere}
.vazio-txt{color:var(--texto-light); font-size:9.5px; font-style:italic; padding:4px 0}
.linha-nova{display:flex; gap:8px; margin-top:9px}
.linha-nova input{
  flex:1; min-width:0; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:6px 10px; font-size:9.5px; font-family:inherit;
}
.linha-nova input:focus{outline:none; border-color:var(--azul)}
.bt-add{
  background:var(--azul); color:#fff; border:none; border-radius:6px;
  padding:6px 14px; font-size:9.5px; font-weight:600; cursor:pointer; font-family:inherit;
}
.bt-add:hover{background:var(--azul-suave)}
/* Atalhos de reagendamento: LayoutFluxo do app — quebram em linhas */
.fluxo{display:flex; flex-wrap:wrap; gap:5px}
/* ⚠️ SVG sem width/height ESTICA o botão: o "Reler partes" chegou a 73x77px.
   No app o ícone tem 14px e o botão 26px de altura (_STYLE_BTN_SMALL).
   ⚠️ Era declarado DUAS vezes (a segunda vencia com 9.5px em vez de 9px) —
   consolidado numa só, para quem for ajustar não mexer na que não vale. */
.bt-flu{
  display:inline-flex; align-items:center; gap:6px; min-height:26px;
  background:var(--cartao); color:var(--texto-med); border:1px solid var(--borda);
  border-radius:5px; padding:5px 10px; font-size:9.5px; font-weight:500;
  cursor:pointer; font-family:inherit;
}
.bt-flu:hover{background:var(--superficie2); color:var(--texto); border-color:#93C5FD}
.bt-flu svg, .bt-flu .ico-png{width:14px; height:14px; flex:0 0 14px}

.det-hist h2{
  color:var(--texto); font-size:11px; font-weight:700; text-transform:none;
  letter-spacing:0; margin-bottom:10px;
}
.det-hist h2 .cont{
  color:var(--texto-med); background:var(--borda-soft); border-radius:10px;
  padding:1px 8px; font-size:9px; margin-left:6px;
}
.ev{border-left:3px solid var(--borda); padding:2px 0 10px 10px; margin-bottom:8px}
.ev-cab{display:flex; align-items:baseline; gap:8px}
.ev-cab b{font-size:9px}
.ev-cab span{margin-left:auto; color:var(--texto-light); font-size:8.5px}
.ev-txt{font-size:9.5px; color:var(--texto); margin-top:2px; overflow-wrap:anywhere}
.ev-user{color:var(--texto-light); font-size:8.5px; font-style:italic; margin-top:2px}

@media (max-width: 900px){
  /* ⚠️ No celular o botão ☰ é fixo no canto superior ESQUERDO: a barra de
     ações precisa do mesmo recuo do detalhe, senão o primeiro botão ("Criar
     evento") fica ESCONDIDO embaixo dele (usuário, 02/09/2026). */
  .det-barra, .det-topo{padding-left:52px}
  .voltar{order:-1}
  /* o selo de situação fica no canto DIREITO também no celular */
  .selo-topo{margin-left:auto}
  .bt-acao{padding:7px 11px; font-size:12px}
  .det-grade{flex-direction:column}
  .det-col, .det-hist{flex:1 1 auto; width:100%; padding:14px}
  .det-hist{max-height:none}
  .campos{grid-template-columns:1fr; gap:6px}
  .det-titulo{font-size:16.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
   FORMULÁRIOS — grade proporcional, rótulo em cima (regra de UI do app:
   nada de coluna única com tudo da mesma largura).
   ═══════════════════════════════════════════════════════════════════════ */
.form-titulo{font-size:14px; font-weight:700; color:var(--texto)}
.form{
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:18px 20px;
}
.f-bloco{
  display:flex; flex-wrap:wrap; gap:12px 16px; padding-bottom:14px;
  margin-bottom:14px; border-bottom:1px solid var(--borda-soft);
}
.f-bloco:last-of-type{border-bottom:none; margin-bottom:4px}
.f-campo{flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:5px}
.f-campo.larga{flex:1 1 100%}
.f-campo.estreita{flex:0 1 150px}
/* rótulo de campo: 9.5pt, peso 500, cinza-médio — SEM caixa alta
   (tarefa_form._LABEL e rotinas_view._lbl; nenhum formulário do app usa uppercase) */
.f-campo > span, .f-campo > div > span, .f-campo span:first-child{
  color:var(--texto-med); font-size:9.5px; font-weight:500;
}
.f-campo input, .f-campo select, .f-campo textarea{
  background:var(--cartao); border:1px solid var(--borda); border-radius:6px;
  padding:7px 10px; font-size:10px; font-family:inherit; color:var(--texto);
  width:100%; min-width:0;
}
/* regra de UI: sem seta cinza nos campos de seleção e data */
.f-campo select{appearance:none}
.f-campo input[type="date"]::-webkit-calendar-picker-indicator,
.f-campo input[type="time"]::-webkit-calendar-picker-indicator{opacity:.35}
.f-campo input:focus, .f-campo select:focus, .f-campo textarea:focus{
  outline:none; border-color:var(--azul);
}
.f-campo textarea{resize:vertical; line-height:1.4}
/* ⚠️ Todos os campos com a MESMA altura. O <input type="date"> do navegador
   nasce 2px mais alto que um <select>, e era isso que deixava a linha
   "Situação · Data de Distribuição · Valor da Causa" fora do eixo. */
.f-campo input:not([type="checkbox"]):not([type="file"]),
.f-campo select{height:30px}
.f-campo textarea{height:auto}
/* numa linha que junta caixa de marcar e campo, o rótulo já está EM CIMA:
   a caixa alinha-se ao campo, sem o recuo que serve para os campos soltos */
.f-campo .linha-hora .f-check, .f-campo .linha-cep .f-check{padding-top:0}
.f-check{
  display:flex; align-items:center; gap:7px; font-size:9.5px; color:var(--texto-med);
  flex:0 0 auto; padding-top:18px;
}
.f-check input{width:16px; height:16px; accent-color:var(--azul)}
.f-acoes{display:flex; align-items:center; gap:10px; justify-content:flex-end; padding-top:6px}

@media (max-width: 900px){
  .form{padding:14px}
  .f-bloco{gap:10px}
  .f-campo{flex:1 1 100%}
  .f-campo.estreita{flex:1 1 calc(50% - 5px)}
  .f-check{padding-top:0; flex:1 1 100%}
  .f-acoes{flex-direction:column-reverse; align-items:stretch}
  .f-acoes .bt-acao, .f-acoes .sf-aplicar{text-align:center; justify-content:center}
  .form-titulo{font-size:16px}
}

/* ═══════════════════════════════════════════════════════════════════════
   AGENDA — lista agrupada por dia, com faixa de cor por tipo (como no app)
   ═══════════════════════════════════════════════════════════════════════ */
.ag-barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
/* os dois espaçadores encolhem primeiro: em janela estreita a barra continua
   numa linha só, como no app, em vez de jogar Lista/Calendário para baixo */
.ag-espaco{flex:1 1 0; min-width:0}
/* no computador a barra NUNCA quebra: como no app, tudo numa linha só */
@media (min-width: 901px){ .ag-barra{flex-wrap:nowrap} }
/* abaixo de ~1000px os dois segmentos não cabem ao lado dos botões: o
   Lista/Calendário desce, mas nada é cortado */
@media (max-width: 1050px) and (min-width: 901px){
  .ag-barra{flex-wrap:wrap}
  .ag-barra .segmentos:last-of-type{margin-left:auto}
}
@media (max-width: 1279px) and (min-width: 901px){
  .ag-barra{gap:7px}
  .ag-barra .bt-acao, .bt-reagendar, .ag-barra .btn-novo{padding:6px 10px}
  .segmentos a{padding:5px 10px}
  /* mês abreviado, para os dois segmentos caberem ao lado (o app faz o mesmo
     tipo de encolhimento; rótulo longo tem versão curta) */
  .ag-titulo .so-largo{display:none}
  .ag-titulo .so-estreito{display:inline}
  .ag-barra .btn-novo .so-largo{display:none}
  .ag-barra .btn-novo .so-estreito{display:inline}
}
/* Botão "Reagendar tarefas": azul claro com texto azul, como no app
   (agenda_view: #EFF6FF, texto #1D4ED8, borda #BFDBFE, 6px 14px, 9.5pt/600) */
.bt-reagendar{
  background:#EFF6FF; color:#1D4ED8; border:1px solid #BFDBFE; border-radius:6px;
  padding:6px 14px; font-size:9.5px; font-weight:600; cursor:pointer; font-family:inherit;
  white-space:nowrap;
}
.bt-reagendar:hover{background:#DBEAFE}
.segmentos{margin-left:0}
.ag-titulo{font-size:13px; font-weight:700; color:var(--texto)}
.nav-per{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:var(--cartao); border:1px solid var(--borda); border-radius:6px;
  color:var(--texto-med); text-decoration:none; font-size:13px; line-height:1;
}
.nav-per:hover{background:var(--superficie2); color:var(--texto)}
.segmentos{display:flex; gap:2px; margin-left:auto; background:var(--superficie2);
  border-radius:7px; padding:2px}
.segmentos a{
  padding:6px 14px; border-radius:6px; font-size:9.5px; font-weight:600;
  color:var(--texto-med); text-decoration:none;
}
.segmentos a.on{background:var(--cartao); color:var(--azul); box-shadow:0 1px 2px rgba(17,24,39,.08)}
.ag-dia{
  color:var(--texto-med); font-size:9px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; margin:14px 0 7px;
}
.ag-item{
  display:flex; align-items:center; gap:10px; background:var(--cartao);
  border:1px solid var(--borda); border-left:3px solid var(--azul);
  border-radius:8px; padding:9px 12px; margin-bottom:7px;
}
.ag-item:hover{border-color:#93C5FD}
/* ⚠️ O card da Agenda também abre por INTEIRO. O link cobria só o texto
   (1000x41 num card de 1082x61): sobravam o padding e a faixa lateral mortos.
   A pseudo-capa resolve sem mexer no layout — a pílula de status fica acima
   dela para não virar área de clique cega. */
.ag-item{position:relative}
.ag-conteudo{flex:1; min-width:0; text-decoration:none; color:inherit}
.ag-conteudo::after{content:""; position:absolute; inset:0; border-radius:inherit}
.ag-item .pilula{position:relative; z-index:2}
.ag-conteudo *{text-decoration:none}
.ag-topo{display:flex; align-items:center; gap:8px; margin-bottom:2px}
.ag-tipo{font-size:8px; font-weight:700; padding:1px 9px; border-radius:9px}
.ag-origem{color:var(--texto-med); font-size:9px}
.ag-titulo-item{font-size:10.5px; font-weight:600; color:var(--texto); overflow-wrap:anywhere}
.ag-base{display:flex; gap:10px; align-items:center; margin-top:2px;
  color:var(--texto-med); font-size:8.5px}
.ag-status{font-weight:600}

@media (max-width: 900px){
  .ag-barra{padding-left:52px; gap:7px}
  /* barra da Agenda no celular em DUAS linhas, não cinco:
     1ª = ‹ título ›   ·   2ª = Dia/Semana/Mês + Hoje + ações */
  .ag-barra{gap:6px; padding-left:46px; row-gap:7px}
  .ag-titulo{font-size:14px; flex:1 1 auto; min-width:0; text-align:center; order:2}
  .ag-barra .nav-per:first-of-type{order:1}
  .ag-barra .nav-per:nth-of-type(2){order:3}
  .ag-espaco{display:none}
  /* ⚠️ Cada grupo de segmentos pegava a linha inteira (`flex:1 1 100%`) e a
     barra voltava a ter CINCO linhas — o defeito que já tinha sido corrigido
     uma vez. Os dois dividem a mesma linha: Dia/Semana/Mês à esquerda,
     Lista/Calendário à direita. */
  .segmentos{margin-left:0; flex:1 1 calc(50% - 3px); justify-content:center; order:4}
  .segmentos a{flex:1; text-align:center; padding:6px 6px; font-size:10px}
  .ag-barra .bt-acao{order:5; flex:1 1 auto; justify-content:center; padding:6px 9px;
    font-size:10.5px; white-space:nowrap}
  /* o botão de reagendar também desce para a fileira de ações */
  .bt-reagendar{order:5; flex:1 1 auto; padding:6px 9px; font-size:10.5px}
  .ag-barra form{order:6; flex:1 1 auto}
  .ag-barra form .btn-novo{width:100%; padding:6px 9px; font-size:10.5px}
  .ag-item{flex-wrap:wrap; gap:7px}
  .ag-item .pilula{margin-left:auto}
}

.cnt-tela{color:var(--texto-light); font-size:10px; font-weight:600}
.local-ev{color:var(--texto-light); font-size:8.5px; margin-left:auto}
@media (max-width: 900px){ .local-ev{margin-left:0; width:100%} }

/* Seções do formulário (Observações, Subtarefas, Documentos, Vínculos) */
.f-secao{padding-top:14px; margin-bottom:14px; border-top:1px solid var(--borda-soft)}
.f-secao h2{
  color:var(--texto-med); font-size:9.5px; font-weight:500; letter-spacing:0;
  margin-bottom:8px;
}
.f-secao h2 .cont{color:var(--verde); font-weight:700; margin-left:6px}
.f-secao textarea{
  width:100%; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:7px 10px; font-size:10px; font-family:inherit;
  resize:vertical; line-height:1.4;
}
.f-secao textarea:focus{outline:none; border-color:var(--azul)}
.f-check.solo{padding:0 0 12px}
.f-bloco.sem-borda{border-bottom:none; padding-bottom:0; margin-bottom:0}
.dica{color:var(--texto-light); font-size:8.5px; font-style:italic; margin-top:6px}

/* ═══════════════════════════════════════════════════════════════════════
   ESCALA DE COMPACTAÇÃO — celular (regra do escritório, 31/08/2026).
   As peças DIMINUEM para caber bem; a hierarquia e as cores permanecem.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  /* Agenda */
  .ag-dia{font-size:9.5px; margin:10px 0 5px}
  .ag-item{padding:7px 9px; gap:7px; margin-bottom:6px}
  .ag-tipo{font-size:9px; padding:1px 7px}
  .ag-origem{font-size:10px}
  .ag-titulo-item{font-size:12px; line-height:1.3}
  .ag-base{font-size:10px; gap:7px; margin-top:1px}

  /* Detalhe */
  .det-col, .det-hist{padding:12px}
  .det-titulo{font-size:15px; margin-bottom:11px}
  .campo .rot{font-size:9.5px; min-width:58px}
  .campo .val{font-size:12px}
  .secao-det{padding-top:11px; margin-top:11px}
  .secao-det h2{font-size:9.5px; margin-bottom:6px}
  .linha-vinc{padding:6px 9px} .linha-vinc .rot{flex:0 0 70px; font-size:9px}
  .linha-vinc span:last-child{font-size:12px}
  .item-sub span, .item-anx .nome, .obs-txt{font-size:12px}
  .obs-cab b{font-size:11px} .obs-cab span{font-size:10px}
  .item-obs{padding:7px 9px; margin-bottom:6px}
  .linha-nova input, .bt-add{padding:7px 10px; font-size:12px}
  .bt-flu{padding:5px 9px; font-size:11.5px}
  .det-hist h2{font-size:12.5px} .ev{padding-bottom:8px}
  .ev-cab b{font-size:11px} .ev-cab span{font-size:9.5px}
  .ev-txt{font-size:11.5px} .ev-user{font-size:10px}
  .bt-acao{padding:6px 10px; font-size:11.5px} .bt-acao svg{width:15px; height:15px}
  .voltar{font-size:12px}

  /* Formulário */
  .form{padding:12px}
  .f-bloco{gap:9px; padding-bottom:11px; margin-bottom:11px}
  .f-campo > span{font-size:9.5px}
  .f-campo input, .f-campo select, .f-campo textarea{padding:8px 10px; font-size:12.5px}
  .f-check{font-size:12px}
  .f-secao{padding-top:11px; margin-bottom:11px}
  .f-secao h2{font-size:9.5px}
  .f-secao textarea{padding:8px 10px; font-size:12.5px}

  /* Títulos de tela */
  .header h1{font-size:19px}
  .btn-novo{padding:7px 13px; font-size:12px}
}

/* ═══════════════════════════════════════════════════════════════════════
   CLIENTES — medidas de src/ui/clientes_view.py e src/ui/cliente_detail.py
   Card: margens 14/10/12/11, espaçamento 6; nome 10.5pt/600; info 9pt/500.
   ═══════════════════════════════════════════════════════════════════════ */
.card-cli{
  position:relative; background:var(--cartao); border:1px solid var(--borda);
  border-radius:8px; padding:7px 12px 8px 14px; margin-bottom:5px;
  display:flex; flex-direction:column; gap:5px;
}
.card-cli:hover{border-color:#D8DEE7}
/* Card inteiro clicável: a capa fica ACIMA do conteúdo (senão o clique só
   pega o espaço vazio) e só as ações ficam acima dela. Mesmo arranjo dos
   cards de tarefa e de evento. */
/* ⚠️ REGRA GERAL, não presa a uma classe de card. Estava escrita como
   `.card-cli .capa` e o card de COMUNICAÇÃO (`.card-com`) ficou clicável só no
   ícone de visualizar — o mesmo defeito de antes, em outro lugar (usuário,
   02/09/2026). Toda capa, em qualquer card, cobre o cartão inteiro. */
.capa{position:absolute; inset:0; z-index:1; border-radius:inherit;
  text-decoration:none; color:inherit}
/* ⚠️ o conteúdo fica em fluxo NORMAL (sem position): assim a capa, que é
   absolute, passa por cima dele e o clique abre o item em qualquer ponto.
   Se o contêiner tivesse position+z-index, ele criaria um contexto de
   empilhamento e as ações de dentro não conseguiriam subir acima da capa. */
.cli-topo, .cli-meio, .cli-base{display:flex; align-items:center}
/* e as ações sobem ACIMA da capa, em qualquer card, para continuarem clicáveis */
.c-acoes{position:relative; z-index:2}
.cli-topo{gap:8px; flex-wrap:wrap}
.cli-meio{gap:8px}
.cli-nome{
  flex:1; min-width:0; color:var(--texto); font-size:10.5px; font-weight:600;
  overflow-wrap:anywhere;
}
.cli-base{gap:14px; flex-wrap:wrap}
.cli-info{color:#374151; font-size:9px; font-weight:500; min-width:0; overflow-wrap:anywhere}
.cli-proc{display:inline-flex; align-items:center; gap:4px; color:#2563EB;
  font-size:9px; font-weight:600}

.cli-proc svg{width:14px; height:14px}
.cli-selos{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}

/* Avisos da ficha (representação 10%/30%, sigilo 14%/45% — cliente_detail.py) */
.aviso-cli{
  border-radius:8px; padding:9px 12px; font-size:9.5px; font-weight:600;
  margin-bottom:12px;
}

/* Ficha: rótulo 9pt/600 cinza-médio + valor 9.5pt (cliente_detail._build) */
.ficha{
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:10px 12px; display:flex; flex-direction:column; gap:6px;
}
.ficha-l{display:flex; gap:14px; align-items:baseline; min-width:0}
.ficha-l .rot{flex:0 0 auto; min-width:96px; color:var(--texto-med);
  font-size:9px; font-weight:600}
.ficha-l .val{color:var(--texto); font-size:9.5px; min-width:0; overflow-wrap:anywhere}

/* Abas PF/PJ do formulário */
.abas-form{display:flex; gap:0; border-bottom:1px solid var(--borda); margin-bottom:14px}
.aba-f{
  padding:8px 18px; font-size:10px; font-weight:500; color:var(--texto-med);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.aba-f.on{color:var(--azul); border-bottom-color:var(--azul); font-weight:600}
.aba-f input{display:none}

/* Grade de 6 colunas — a mesma divisão do QGridLayout do app */
.f-grade{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:12px;
  padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--borda-soft);
}
.f-grade:last-of-type{border-bottom:none}
.col1{grid-column:span 1} .col2{grid-column:span 2} .col3{grid-column:span 3}
.col4{grid-column:span 4} .col5{grid-column:span 5} .col6{grid-column:span 6}

.form-topo{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.f-rodape{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:6px}
.bt-cancelar{
  border:1px solid var(--borda); background:var(--cartao); color:var(--texto-med);
  border-radius:6px; padding:7px 18px; font-size:9.5px; font-weight:600;
  text-decoration:none; font-family:inherit;
}
.det-topo{display:flex; align-items:center; gap:10px; margin-bottom:14px}

/* No celular a grade vira 2 colunas e os campos largos ocupam a linha toda */
@media (max-width: 900px){
  .f-grade{grid-template-columns:repeat(2, 1fr); gap:10px}
  .col3, .col4, .col5, .col6{grid-column:span 2}
  .col1{grid-column:span 1}
  .cli-nome{font-size:12px}
  .cli-info, .cli-proc{font-size:10px}
  .ficha-l{flex-direction:column; gap:1px}
  .ficha-l .rot{min-width:0; font-size:9.5px}
  .ficha-l .val{font-size:11.5px}
  .aba-f{flex:1; text-align:center; padding:8px 10px; font-size:12px}
}

/* Ícone PNG do app tintado com a cor do texto (mesma aparência do tint do Qt) */
.ico-png{
  display:inline-block; width:14px; height:14px; background:currentColor;
  -webkit-mask:var(--png) center/contain no-repeat; mask:var(--png) center/contain no-repeat;
}
/* Busca simples: clientes_view usa só o campo (padding 7px 12px, 10pt) */
.busca-simples{
  width:100%; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:7px 12px; font-size:10px; color:var(--texto);
  font-family:inherit;
}
.busca-simples:focus{outline:none; border-color:var(--azul)}

/* Título de tela — o app não usa um tamanho só:
   Tarefas e Financeiro 18pt; Clientes, Processos, Audiências, Compromissos e
   Atendimentos 22px; Agenda 13pt; Comunicações 14pt. */
.header h1.t22{font-size:22px}
.header h1.t14{font-size:14px}
.header h1.t13{font-size:13px}
@media (max-width: 900px){
  .header h1.t22{font-size:20px}
  .header h1.t14{font-size:13.5px}
  .header h1.t13{font-size:13px}
}

/* Ícone PNG do app dentro dos botões de ação (o desenho vem do PNG,
   a cor do CSS — mesmo efeito do tint do Qt em get_action_icon) */
.ac .ico-png, .bt-acao .ico-png{width:16px; height:16px; flex:0 0 16px}
.bd .ico-png{width:14px; height:14px}
@media (max-width: 900px){ .ac .ico-png{width:15px; height:15px; flex:0 0 15px} }

/* ═══════════════════════════════════════════════════════════════════════
   PROCESSOS — medidas de src/ui/processos_view.py e processo_detail.py
   ═══════════════════════════════════════════════════════════════════════ */
.proc-topo{color:#6B7280; font-size:8.5px;
  font-weight:500; overflow-wrap:anywhere}
.proc-polos{flex:1; min-width:0; color:#374151; font-size:9px; font-weight:500;
  overflow-wrap:anywhere}
.proc-mov{color:#6B7280; font-size:8.5px; white-space:nowrap}
.proc-mov.novo{color:var(--amarelo); font-size:9px; font-weight:700}
.sel-situacao{
  flex:0 0 auto; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:7px 12px; font-size:10px; color:var(--texto);
  font-family:inherit; appearance:none; cursor:pointer;
}

/* Ficha: rótulo pequeno EM CIMA e valor embaixo, sem caixa (_campo_ro):
   rótulo 8pt/700 caixa-alta, valor 10pt */
.proc-grade{
  display:grid; grid-template-columns:2fr 1fr; gap:12px 22px;
  padding-bottom:14px; border-bottom:1px solid var(--borda-soft);
}
/* a coluna larga da capa vai em DUAS colunas, como a grade do app:
   Tribunal | Órgão Julgador · Tipo de Ação | Assunto · Polo Ativo | Polo Passivo */
.proc-col-larga{display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; min-width:0}
.proc-col-dir{display:flex; flex-direction:column; gap:12px; min-width:0}
.campo-ro{display:flex; flex-direction:column; gap:2px; min-width:0}
.campo-ro.larga{padding-top:14px; grid-column:1 / -1}
.proc-col-larga .campo-ro.largo-2{grid-column:1 / -1}
.rot-ro{
  color:var(--texto-med); font-size:8px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px;
}
.val-ro{color:var(--texto); font-size:10px; min-width:0; overflow-wrap:anywhere}
/* número da OAB ao lado do nome do advogado — discreto, não compete com o nome */
.oab-ro{color:var(--texto-light); font-size:8px; font-weight:500; margin-left:4px}
/* pílula de "Cliente"/"Parceria" ao lado do nome dentro do polo — pequena,
   para não competir com o nome da parte (usuário, 01/09/2026) */
.pilula.selo.mini{font-size:7.5px; font-weight:700; padding:1px 8px;
  min-height:16px; border-radius:8px; line-height:1.4; vertical-align:middle}
/* dentro de uma linha de texto (nome da parte, número do processo) o selo
   precisa de um respiro à esquerda */
.val-ro .pilula.mini, .det-titulo .pilula.mini{margin-left:6px}

/* ── Movimentações: cada uma é um CARTÃO, como no app (_CardMovimento) ──
   coluna esquerda com o dia (11pt/700) e a hora; no meio o nome, o
   complemento e o órgão; à direita o botão "Criar evento" (outline azul). */
.secao-det .mov{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:9px 12px; margin-bottom:6px;
}
.secao-det .mov:hover{background:var(--superficie2)}
.mov.novo{border-color:#FDE68A; background:#FFFBEB}
.mov-esq{flex:0 0 82px; display:flex; flex-direction:column; gap:1px}
.mov-dia{color:var(--texto); font-size:11px; font-weight:700}
.mov-hora{color:var(--texto-med); font-size:8px}
.mov-corpo{flex:1; min-width:0}
.mov-cab{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.mov-nome{color:var(--texto); font-size:11px; font-weight:500; overflow-wrap:anywhere}
.mov.novo .mov-nome{font-weight:700}
.mov-badge{
  background:var(--amarelo); color:#fff; font-size:7.5px; font-weight:700;
  border-radius:3px; padding:1px 6px; letter-spacing:.3px;
}
.mov-compl{color:var(--texto-med); font-size:9px; margin-top:1px; overflow-wrap:anywhere}
.mov-org{color:var(--texto-med); font-size:8px; font-style:italic; margin-top:1px}
.mov-evento{
  flex:0 0 auto; background:transparent; color:var(--azul);
  border:1px solid var(--azul); border-radius:5px; padding:4px 10px;
  font-size:8.5px; font-weight:600; text-decoration:none; white-space:nowrap;
}
.mov-evento:hover{background:var(--azul); color:#fff}
.secao-det h2 .cont.novos{color:var(--amarelo)}

@media (max-width: 900px){
  .proc-grade{grid-template-columns:1fr; gap:10px}
  .proc-col-larga{grid-template-columns:1fr}
  .mov-esq{flex:0 0 70px}
  .mov-dia{font-size:12px} .mov-nome{font-size:12px}
  .proc-topo{font-size:10px}
  .proc-polos{font-size:11px}
  .proc-mov{font-size:10px; white-space:normal}
  .rot-ro{font-size:9.5px} .val-ro{font-size:12px}
  .mov-txt{font-size:11.5px} .mov-data, .mov-org{font-size:10px}
  .sel-situacao{flex:1 1 100%; font-size:12.5px}
}
/* "Última atualização" ao lado do título (8.5pt, 10px de recuo) */
.sync-ts{color:#6B7280; font-size:8.5px; padding-left:10px}
@media (max-width: 900px){ .sync-ts{font-size:10px; padding-left:0; flex-basis:100%} }

/* ═══════════════════════════════════════════════════════════════════════
   KANBAN — medidas de src/ui/kanban_view.py
   Coluna: mín. 230px, cabeçalho colorido de 40px (raio 10 em cima), corpo
   #EEF1F4. Card: margens 12/10, espaçamento 5, título 9pt/500,
   meta e rodapé 7.5pt. Contador: branco sobre rgba(255,255,255,.25).
   ═══════════════════════════════════════════════════════════════════════ */
/* O quadro ocupa a ALTURA DA TELA e NÃO rola: quem rola é cada coluna por
   dentro — como no app, onde cada coluna tem seu próprio QScrollArea. */
.board{
  display:flex; gap:14px; align-items:stretch;
  height:calc(100vh - 200px); min-height:340px;
}
.kb-col{flex:1 1 0; min-width:230px; display:flex; flex-direction:column;
  min-height:0; height:100%}
/* em janela média as quatro colunas encolhem em vez de a última ficar cortada
   (o mínimo de 230px do app só vale quando há espaço para as quatro) */
@media (max-width: 1279px) and (min-width: 901px){
  .kb-col{min-width:0}
  .board{gap:10px}
  .kb-cab{padding:9px 10px}
}
.kb-cab{
  display:flex; align-items:center; gap:8px; min-height:40px; padding:9px 12px 9px 14px;
  border-radius:10px 10px 0 0;
}
.kb-tit{flex:1; color:#fff; font-size:9px; font-weight:700; white-space:nowrap}
.kb-cnt{
  color:#fff; font-size:8.5px; font-weight:700; background:rgba(255,255,255,0.25);
  border-radius:8px; padding:1px 7px;
}
.kb-corpo{
  flex:1; background:#EEF1F4; border-radius:0 0 10px 10px; padding:10px;
  display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-height:0;
}
.kb-card{
  display:flex; flex-direction:column; gap:5px; background:var(--cartao);
  border:1px solid var(--borda); border-radius:8px; padding:10px 12px;
  text-decoration:none; color:inherit;
}
.kb-card:hover{border-color:#2563EB; background:#F3F4F6}
.kb-meta{color:var(--texto-med); font-size:7.5px}
.kb-txt{color:var(--texto); font-size:9px; font-weight:500; overflow-wrap:anywhere}
.kb-rod{font-size:7.5px}
.kb-vazio{color:#B6BEC8; font-size:9px; text-align:center; padding:24px 0}

/* No celular as colunas viram uma fileira que rola de lado — é a natureza do
   quadro; cada coluna ocupa quase a largura da tela para o card ficar legível. */
@media (max-width: 900px){
  .board{overflow-x:auto; padding-bottom:8px; gap:10px}
  .kb-col{flex:0 0 84%; min-width:0}
  .kb-tit{font-size:11.5px} .kb-cnt{font-size:10.5px}
  .kb-meta{font-size:9.5px} .kb-txt{font-size:11.5px} .kb-rod{font-size:9.5px}
}
/* topo do card do Kanban: triângulo de urgência (13px) + origem */
.kb-topo{display:flex; align-items:center; gap:6px; min-width:0}
.kb-ico{width:13px; height:13px; flex:0 0 13px}
/* qualquer ícone dentro dos botões tem tamanho fixo — sem isso um SVG sem
   width/height estica o botão inteiro */
.btn-secundario svg, .btn-novo svg, .btn-secundario .ico-png{width:14px; height:14px; flex:0 0 14px}

/* ═══════════════════════════════════════════════════════════════════════
   COMUNICAÇÕES — medidas de src/ui/comunicacoes_view.py
   Card: margens 14/10/12/11, espaçamento 6; topo 8.5pt, nº 10pt/600.
   Não lida: borda esquerda âmbar de 3px e fundo #FFFBEB.
   ═══════════════════════════════════════════════════════════════════════ */
.card-com{
  position:relative; background:var(--cartao); border:1px solid var(--borda);
  border-left:3px solid var(--borda); border-radius:10px;
  padding:10px 12px 11px 14px; margin-bottom:6px;
  display:flex; flex-direction:column; gap:6px;
}
.card-com.nao-lida{background:#FFFBEB; border-left-color:#D97706}
.card-com:hover{border-color:#93C5FD; background:#FAFCFF}
.card-com.nao-lida:hover{border-left-color:#D97706}
.com-num{flex:1; min-width:0; color:var(--texto); font-size:10px; font-weight:600;
  overflow-wrap:anywhere}
.selo-nl{color:#D97706; font-size:9px; font-weight:700; margin-left:10px}
.teor{
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:10px 12px; font-size:9.5px; line-height:1.5; white-space:pre-wrap;
  overflow-wrap:anywhere; color:var(--texto);
}
@media (max-width: 900px){
  .com-num{font-size:12px} .teor{font-size:11.5px} .selo-nl{font-size:10.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
   FINANCEIRO — medidas de src/ui/financeiro_view.py
   Cartão de resumo: 96px de altura, margens 14/12, título 9.5pt/600 e
   valor 18pt/800. Card do lançamento com borda lateral por tipo.
   ═══════════════════════════════════════════════════════════════════════ */
.fin-resumo{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:14px}
.fin-card{
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  height:96px; padding:12px 14px; display:flex; flex-direction:column; gap:2px;
}
.fin-tit{color:var(--texto-med); font-size:9.5px; font-weight:600}
.fin-val{font-size:18px; font-weight:800}
.fin-valor{font-size:11px; font-weight:700; white-space:nowrap}
.card-fin .cli-nome{font-size:10.5px}
/* a linha de base do card de lançamento é 9pt PESO 400 no app
   (financeiro_view._criar_card) — o .cli-info geral usa 500 */
.card-fin .cli-info{font-weight:400}
@media (max-width: 900px){
  .fin-resumo{grid-template-columns:1fr 1fr 1fr; gap:7px}
  .fin-card{height:auto; padding:9px 10px}
  .fin-tit{font-size:9.5px} .fin-val{font-size:14px}
  .fin-valor{font-size:12px}
}

/* ROTINAS — medidas de src/ui/rotinas_view.py (card 14/10/12/11, esp. 4;
   título 11pt/600; info 9pt; descrição 8.5pt; borda esquerda 4px por estado) */
.card-rot{
  position:relative; background:var(--cartao); border:1px solid var(--borda);
  border-radius:8px; padding:10px 12px 11px 14px; margin-bottom:6px;
  display:flex; flex-direction:column; gap:4px;
}
.capa-form{position:absolute; inset:0}
.capa-form .capa{width:100%; height:100%; border:none; background:transparent; cursor:pointer}
.rot-tit{flex:1; min-width:0; color:var(--texto); font-size:11px; font-weight:600;
  overflow-wrap:anywhere}
.rot-info{position:relative; z-index:1; color:var(--texto-med); font-size:9px}
.rot-desc{position:relative; z-index:1; color:var(--texto-light); font-size:8.5px}
@media (max-width: 900px){
  .rot-tit{font-size:12.5px} .rot-info{font-size:10.5px} .rot-desc{font-size:10px}
}
.dica-rot{color:var(--texto-light); font-size:9.5px; flex:1}
.linha-dias{display:flex; flex-wrap:wrap; gap:10px 16px}
@media (max-width: 900px){ .dica-rot{font-size:11px; flex-basis:100%} }

/* ═══════════════════════════════════════════════════════════════════════
   ESTATÍSTICAS — medidas de produtividade_view._CardVariacao
   Cartão: mín. 132px, margens 14/12, esp. 3; título 9.5pt/600;
   valor 20pt/800; anterior 8.5pt + 11pt/700; faixa de diferença 9pt/700.
   ═══════════════════════════════════════════════════════════════════════ */
.periodos{display:flex; gap:8px; margin:12px 0}
.per{
  background:var(--cartao); color:var(--texto-med); border:1px solid var(--borda);
  border-radius:6px; padding:6px 18px; font-size:9.5px; font-weight:500;
  text-decoration:none;
}
.per:hover{background:var(--borda-soft); color:var(--texto)}
.per.on{background:var(--azul); color:#fff; border-color:var(--azul); font-weight:600}
.est-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px}
.est-card{
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  min-height:132px; padding:12px 14px; display:flex; flex-direction:column; gap:3px;
}
.est-tit{color:var(--texto-med); font-size:9.5px; font-weight:600}
.est-valores{display:flex; align-items:center; gap:8px}
.est-atual{flex:1; color:var(--texto); font-size:20px; font-weight:800}
.est-ant{display:flex; flex-direction:column; align-items:flex-end; text-align:right}
.est-ant i{color:var(--texto-light); font-size:8.5px; font-style:normal}
.est-ant b{color:var(--texto-med); font-size:11px; font-weight:700}
.est-diff{
  border-radius:4px; padding:3px 8px; font-size:9px; font-weight:700; text-align:center;
  margin-top:auto;
}
@media (max-width: 900px){
  .est-cards{grid-template-columns:1fr 1fr; gap:7px}
  .est-card{min-height:0; padding:9px 10px}
  .est-tit{font-size:10px} .est-atual{font-size:17px}
  .est-ant i{font-size:9px} .est-ant b{font-size:11px}
  .est-diff{font-size:9.5px}
  .per{padding:6px 14px; font-size:11.5px}
}
/* Gráfico "Comparativo por Categoria" — barras agrupadas: atual na cor da
   categoria e anterior em cinza #E5E7EB (produtividade_view._GraficoBarras) */
.graf-box{
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:14px 16px; margin-top:12px; display:flex; flex-direction:column; gap:6px;
}
.graf-tit{color:var(--texto); font-size:11px; font-weight:700}
.graf{display:flex; align-items:flex-end; gap:18px; height:220px; padding-top:8px}
.graf-grupo{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; height:100%}
.graf-barras{flex:1; display:flex; align-items:flex-end; gap:5px; width:100%; justify-content:center}
.graf-barras i{width:26px; border-radius:3px 3px 0 0; display:block}
.b-ant{background:#E5E7EB}
.graf-rot{color:var(--texto-med); font-size:8.5px; text-align:center; overflow-wrap:anywhere}
.graf-legenda{display:flex; gap:16px; justify-content:center; color:var(--texto-med); font-size:8.5px}
.graf-legenda span{display:inline-flex; align-items:center; gap:5px}
.graf-legenda i{width:10px; height:10px; border-radius:2px; display:inline-block}
@media (max-width: 900px){
  .graf{height:170px; gap:9px}
  .graf-barras i{width:16px}
  .graf-rot{font-size:9px} .graf-legenda{font-size:10px} .graf-tit{font-size:12.5px}
}
/* Link do evento: "Entrar pelo Zoom/Teams" + botão Copiar (atendimento_detail) */
.linha-link{display:flex; align-items:center; gap:8px; padding:8px 0; flex-wrap:wrap}
.linha-link .rot{color:var(--texto-light); font-size:8.5px; font-weight:600; letter-spacing:.4px}
.ir-link{color:var(--azul); font-size:10px; font-weight:600; text-decoration:none; min-width:0}
.ir-link:hover{text-decoration:underline}
.secao-cabec-fl{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.secao-cabec-fl h2{flex:1; margin:0}
.secao-det textarea{
  width:100%; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:8px 10px; font-size:9.5px; font-family:inherit;
  color:var(--texto); resize:vertical; line-height:1.45;
}
.secao-det textarea:focus{outline:none; border-color:var(--azul)}
@media (max-width: 900px){ .secao-det textarea{font-size:12px} }
.linha-hora{display:flex; align-items:center; gap:10px}
.linha-hora input[type=time]{
  flex:1; min-width:0; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:7px 10px; font-size:10px; font-family:inherit; color:var(--texto);
}
.linha-cep{display:flex; gap:6px; align-items:center}
.linha-cep input{flex:1; min-width:0}
/* campo de envio de arquivo, na linha do botão Anexar */
.linha-nova input[type=file]{
  flex:1; min-width:0; font-size:9px; font-family:inherit; color:var(--texto-med);
  padding:5px 0;
}
@media (max-width: 900px){ .linha-nova input[type=file]{font-size:11px} }
/* Polos: uma caixa por parte, com lixeira e "+ Adicionar parte" (ProcessoForm) */
.partes{display:flex; flex-direction:column; gap:6px}
.parte{display:flex; align-items:center; gap:6px}
.parte input{flex:1; min-width:0}
.bt-parte{
  margin-top:6px; width:100%; background:transparent; color:var(--azul);
  border:1px dashed #BFDBFE; border-radius:6px; padding:6px 10px;
  font-size:9px; font-weight:600; cursor:pointer; font-family:inherit;
}
.bt-parte:hover{background:#EFF6FF}
@media (max-width: 900px){ .bt-parte{font-size:11px} }

/* CONFIGURAÇÕES — nove abas, mesmo padrão de formulário das outras telas */
.cfg{background:var(--cartao); border:1px solid var(--borda); border-radius:8px; padding:16px 18px}
.cfg-tit{color:var(--texto); font-size:11px; font-weight:700; margin:14px 0 8px}
.aviso-ok{
  background:rgba(5,150,105,.13); border:1px solid rgba(5,150,105,.30); color:#059669;
  border-radius:6px; padding:7px 12px; font-size:9.5px; font-weight:600; margin-bottom:12px;
}
.dica.erro{color:#B91C1C; font-weight:600; font-style:normal}
@media (max-width: 900px){
  .cfg{padding:12px 12px} .cfg-tit{font-size:12.5px} .aviso-ok{font-size:11.5px}
}
.cfg-sub{color:var(--texto); font-size:10px; font-weight:700}

/* ═══════════════════════════════════════════════════════════════════════
   Caixa de marcar — REDONDA, como o QSS global do app (main.py):
   13px, borda #CBD5E1, raio 7px; marcada fica azul sólida com o ✓ branco.
   ═══════════════════════════════════════════════════════════════════════ */
.f-check input[type=checkbox], .linha-dias input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:13px; height:13px; flex:0 0 13px; border:1px solid #CBD5E1;
  border-radius:7px; background:#fff; cursor:pointer; position:relative; margin:0;
}
.f-check input[type=checkbox]:hover{border-color:#93C5FD}
.f-check input[type=checkbox]:checked, .linha-dias input[type=checkbox]:checked{
  background:var(--azul); border-color:var(--azul);
}
.f-check input[type=checkbox]:checked::after{
  content:""; position:absolute; left:4px; top:1px; width:3px; height:7px;
  border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(42deg);
}
/* texto de apoio: 9.5pt e cinza claro, como os QLabel de dica do app */
.dica{color:var(--texto-light); font-size:9.5px; font-style:normal; line-height:1.45}
@media (max-width: 900px){
  .f-check input[type=checkbox], .linha-dias input[type=checkbox]{
    width:15px; height:15px; flex:0 0 15px; border-radius:8px;
  }
  .f-check input[type=checkbox]:checked::after{left:5px; top:2px; width:3px; height:8px}
  .dica{font-size:11px}
}

/* Reagendar em lote (Agenda) — lista com caixa de marcar e contador */
.lote-topo{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.lote-cont{color:var(--texto-light); font-size:9px; font-weight:600}
/* a linha herda .card-cli (que é coluna) — aqui volta a ser LINHA:
   caixa de marcar à esquerda, texto em seguida */
.lote-linha{display:flex; flex-direction:row; align-items:center; gap:10px;
  cursor:pointer; text-align:left}
.lote-linha input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:13px; height:13px; flex:0 0 13px;
  border:1px solid #CBD5E1; border-radius:7px; background:#fff; position:relative;
}
.lote-linha input[type=checkbox]:checked{background:var(--azul); border-color:var(--azul)}
.lote-linha input[type=checkbox]:checked::after{
  content:""; position:absolute; left:4px; top:1px; width:3px; height:7px;
  border:solid #fff; border-width:0 1.6px 1.6px 0; transform:rotate(42deg);
}
.lote-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.lote-meta{color:var(--texto-med); font-size:8.5px}
/* fileira de atalhos que quebra em linhas (mesmo LayoutFluxo do app) */
/* a barra de atalhos fica PRESA no rodapé, como o rodapé fixo do diálogo do
   app — com 67 tarefas na lista, rolar até o fim para escolher a data seria ruim */
.lote-rodape{
  position:sticky; bottom:0; background:var(--cartao); border-top:1px solid var(--borda);
  margin:14px -18px -18px; padding:12px 18px; border-radius:0 0 8px 8px;
}
.lote-acoes{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.lote-cal{display:flex; gap:6px; align-items:center; margin-left:auto}
.lote-cal input[type=date]{
  background:var(--cartao); border:1px solid var(--borda); border-radius:6px;
  padding:6px 10px; font-size:9.5px; font-family:inherit; color:var(--texto);
}
@media (max-width: 900px){
  .lote-meta{font-size:10px} .lote-cont{font-size:10.5px}
  .lote-cal{margin-left:0; flex-basis:100%}
}
.lote-rot{color:var(--texto-med); font-size:9.5px; font-weight:600; margin-top:14px}
.bt-atalho{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:64px}
.bt-atalho b{font-size:9px; font-weight:600}
.bt-atalho i{font-size:8px; font-style:normal; color:var(--texto-light)}
@media (max-width: 900px){
  .lote-rot{font-size:11px}
  .bt-atalho b{font-size:11px} .bt-atalho i{font-size:9.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Balão de ajuda — as mesmas cores e medidas de src/ui/widgets/tooltip.py:
   fundo #FFFFFF, texto #1F2937, borda #D8DEE7, raio 6px, 6px 10px, 9.5pt.
   ═══════════════════════════════════════════════════════════════════════ */
#balao{
  display:none; position:fixed; z-index:9999; max-width:420px;
  background:#FFFFFF; color:#1F2937; border:1px solid #D8DEE7; border-radius:6px;
  padding:6px 10px; font-size:9.5px; line-height:1.4; pointer-events:none;
  box-shadow:0 4px 18px rgba(15,23,42,.16);
}
@media (max-width: 900px){ #balao{font-size:11.5px; max-width:min(420px, 88vw)} }

/* Rótulo curto no celular: o cabeçalho mantém nome à esquerda e botões à
   direita (como no computador) sem estourar a largura da tela. */
.so-estreito{display:none}
@media (max-width: 900px){
  .so-largo{display:none}
  .so-estreito{display:inline}
}
/* no celular a "Última atualização" desce para uma linha própria */
.sync-cel{color:#6B7280; font-size:10px; margin:-6px 0 10px}
.sync-cel .selo-nl{margin-left:0}

/* ═══════════════════════════════════════════════════════════════════════
   CARD DE EVENTO (audiências, compromissos, atendimentos) — a MESMA
   estrutura do app: TOPO meta · MEIO título + ações À DIREITA · BASE
   data · hora · pílula · local. Margens 14/10/12/11, espaçamento 6.
   ═══════════════════════════════════════════════════════════════════════ */
.card-evento{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:8px; row-gap:6px;
  grid-template-areas:"meta meta" "titulo acoes" "base base";
  background:var(--cartao); border:1px solid var(--borda); border-radius:10px;
  padding:10px 12px 11px 14px; margin-bottom:6px; overflow:hidden;
}
.card-evento:hover{border-color:#93C5FD; background:#FAFCFF}
.ev-meta{grid-area:meta; color:var(--texto-light); font-size:8.5px; font-weight:500}
.ev-titulo{
  grid-area:titulo; color:var(--texto); font-size:10.5px; font-weight:600;
  text-decoration:none; min-width:0; overflow-wrap:anywhere;
}
.ev-titulo.riscado{text-decoration:line-through; color:var(--texto-light)}
.card-evento .c-acoes{grid-area:acoes}
.ev-base{grid-area:base; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ev-data{font-size:9px; font-weight:500}
.ev-hora{color:#374151; font-size:9px; font-weight:500}
.card-evento .local-ev{color:var(--texto-light); font-size:9px; margin-left:auto}
/* extras da BASE do card de ATENDIMENTO, como no app (atendimentos_view._info):
   processo e duração em 9pt/500, e o valor em VERDE 9.5pt/700 à direita */
.ev-info{color:#374151; font-size:9px; font-weight:500}
.ev-valor{color:var(--verde); font-size:9.5px; font-weight:700; margin-left:auto}

@media (max-width: 900px){
  /* no celular as ações vão para a esquerda, como nas tarefas */
  .card-evento{grid-template-columns:1fr; grid-template-areas:"meta" "titulo" "acoes" "base";
    padding:7px 10px 8px 12px}
  .card-evento .c-acoes{justify-content:flex-start}
  .ev-meta{font-size:9.5px} .ev-titulo{font-size:12px}
  .ev-data, .ev-hora{font-size:10px}
  .card-evento .local-ev{font-size:10px; margin-left:0; flex-basis:100%}
  .ev-info{font-size:10px} .ev-valor{font-size:10.5px}
}
/* botão vermelho de ação destrutiva (Limpar comunicações), como no app */
.btn-perigo{
  background:#DC2626; color:#fff; border:none; border-radius:6px;
  padding:7px 14px; font-size:9px; font-weight:600; cursor:pointer; font-family:inherit;
}
.btn-perigo:hover{background:#B91C1C}
@media (max-width: 900px){ .btn-perigo{font-size:11.5px; padding:7px 12px; white-space:nowrap} }

/* ═══════════════════════════════════════════════════════════════════════
   AGENDA — modo CALENDÁRIO (o padrão do app). Célula mín. 58px, margens
   5/4, número 9pt, chip 7.5pt com faixa lateral colorida por tipo,
   "hoje" com fundo #EFF6FF; dia de outro mês sobre o fundo da tela.
   ═══════════════════════════════════════════════════════════════════════ */
.cal-grade{display:flex; flex-direction:column; gap:6px}
.cal-cab{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px}
.cal-cab span{color:var(--texto-light); font-size:8.5px; font-weight:500; text-align:center}
.cal-linha{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px}
.cal-cel{
  min-height:58px; background:var(--cartao); border:1px solid var(--borda);
  border-radius:8px; padding:4px 5px; display:flex; flex-direction:column; gap:2px;
  min-width:0; overflow:hidden;
}
.cal-cel.fora{background:var(--fundo)}
.cal-cel.hoje{background:#EFF6FF}
.cal-num{color:var(--texto); font-size:9px; font-weight:600; text-decoration:none}
.cal-cel.fora .cal-num{color:var(--texto-light)}
.cal-cel.hoje .cal-num{color:var(--azul); font-weight:700}
.cal-chip{
  background:var(--cartao); border:1px solid var(--borda-soft); border-left:3px solid var(--azul);
  border-radius:4px; padding:3px 6px; color:var(--texto); font-size:7.5px; font-weight:600;
  text-decoration:none; overflow-wrap:anywhere; line-height:1.25;
}
.cal-chip b{font-weight:600; margin-right:4px}
.cal-chip:hover{background:var(--fundo)}
.cal-mais{color:var(--texto-med); font-size:7.5px; font-weight:600}
/* no computador o contador não aparece — lá cabem os títulos.
   ⚠️ esta regra vem ANTES do @media, senão anularia a do celular */
.cal-conta{display:none}
/* escopo DIA: uma coluna só, ocupando a largura */
.cal-grade.cal-dia .cal-linha{grid-template-columns:1fr}
.cal-grade.cal-dia .cal-cel{min-height:220px}
.cal-grade.cal-dia .cal-chip{font-size:9px}

@media (max-width: 900px){
  /* No celular a grade do MÊS não comporta os títulos: sete colunas de ~45px
     quebrariam o texto letra a letra. Fica só o NÚMERO do dia e um contador
     dos eventos; tocar no dia abre a agenda daquele dia em lista.
     (regra da COMPACTAÇÃO: no celular as coisas diminuem para caber bem) */
  .cal-cel{min-height:44px; padding:3px 2px; align-items:center; gap:3px}
  .cal-cab span{font-size:9px}
  .cal-num{font-size:11px; font-weight:600}
  .cal-cel .cal-chip{display:none}
  .cal-conta{
    display:inline-flex; align-items:center; justify-content:center; min-width:16px;
    height:16px; border-radius:8px; background:var(--azul); color:#fff;
    font-size:8.5px; font-weight:700; padding:0 4px;
    /* ⚠️ É um <a>, e sem isto o navegador SUBLINHA o número dentro da bolinha —
       a regra do escritório: clicável não pode PARECER link. */
    text-decoration:none;
  }
  .cal-mais{display:none}
  .cal-linha, .cal-cab{gap:3px}
}

/* prévia do logo em Configurações → Perfil (como no app) */
.cfg-logo{
  display:inline-block; background:var(--cartao); border:1px solid var(--borda);
  border-radius:8px; padding:10px 14px; margin:8px 0;
}
.cfg-logo img{max-width:220px; height:auto; display:block}

/* CALENDÁRIO DA SEMANA — 7 colunas, cabeçalho "Seg / 31", "—" quando vazio
   (agenda_view._render_calendario_semana: margens 6/8, espaçamento 5) */
.cal-semana{display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; align-items:start}
.sem-col{
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:8px 6px; display:flex; flex-direction:column; gap:5px; min-width:0;
}
.sem-col.hoje{background:#EFF6FF}
.sem-cab{
  text-align:center; color:var(--texto); font-size:9px; font-weight:700;
  text-decoration:none; display:flex; flex-direction:column; line-height:1.25;
}
.sem-col.hoje .sem-cab{color:var(--azul)}
.sem-vazio{color:var(--texto-light); font-size:9px; text-align:center}
.cal-semana .cal-chip{font-size:9px}
@media (max-width: 900px){
  /* no celular a semana rola de lado, com colunas legíveis */
  .cal-semana{display:flex; overflow-x:auto; gap:6px; padding-bottom:6px}
  .sem-col{flex:0 0 46%}
  .sem-cab{font-size:10.5px}
  .cal-semana .cal-chip{font-size:9.5px}
}
/* dia do mini calendário do Painel: clicável, leva à Agenda daquele dia */
.cal a.d{text-decoration:none; color:inherit}
.cal a.d:hover{background:var(--superficie2)}
.cal a.d.hoje:hover{background:var(--azul)}
/* chip da SEMANA em duas linhas: título e, embaixo, "tipo · origem" */
.cal-semana .cal-chip{display:flex; flex-direction:column; gap:1px}
.cal-semana .cal-chip i{color:var(--texto-med); font-size:7.5px; font-style:normal; font-weight:500}
/* botão que abre o seletor de arquivo (Importar) — parece um botão comum */
.frm-importar{display:inline-flex}
.frm-importar .btn-secundario{cursor:pointer; display:inline-flex; align-items:center}
/* fileira de ações em Configurações (trocar logo, backup, calendário) */
.linha-acoes{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0}
.linha-membro{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 0;
  border-bottom:1px solid var(--borda-soft);
}
.linha-membro input[type=text], .linha-membro input:not([type]){
  flex:1 1 130px; min-width:0; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:6px 9px; font-size:9.5px; font-family:inherit; color:var(--texto);
}
.frm-remover{display:inline-flex; margin:-38px 0 8px auto}
@media (max-width: 900px){
  .linha-membro input{flex:1 1 100%; font-size:12px}
  .frm-remover{margin:0 0 8px auto}
}

/* ═══════════════════════════════════════════════════════════════════════
   Reagendar em lote — painel SOBREPOSTO (o app usa um diálogo). Mesmo
   fundo escurecido e a mesma caixa central dos filtros.
   ═══════════════════════════════════════════════════════════════════════ */
.fundo-filtro.on{display:block}
.painel-lote{
  display:none; position:fixed; z-index:51; top:50%; left:50%;
  transform:translate(-50%,-50%); width:min(760px, calc(100vw - 32px));
  max-height:calc(100vh - 60px); background:var(--cartao);
  border:1px solid var(--borda); border-radius:8px;
  box-shadow:0 12px 40px rgba(17,24,39,.22);
  padding:0; display:none; flex-direction:column; overflow:hidden;
}
.painel-lote.on{display:flex}
/* cabeçalho do diálogo: margens 22/16/22/12 e linha divisória, como no app */
.lote-cabec{
  display:flex; align-items:flex-start; gap:10px; padding:16px 22px 12px;
  border-bottom:1px solid var(--borda); flex:0 0 auto;
}
.lote-cabec h3{flex:1; color:var(--texto); font-size:14px; font-weight:700}
.painel-lote > .dica{padding:10px 22px 0; margin:0}
/* ⚠️ O <form> fica ENTRE o painel e a lista: sem ele também ser uma coluna
   flexível, o `flex:1` da lista não vale e ela transborda — com 67 tarefas a
   lista ficava com 3812px, sem rolagem, e o rodapé dos atalhos ia parar no
   meio da tela. */
.painel-lote form{flex:1; display:flex; flex-direction:column; min-height:0}
.lote-lista{flex:1; overflow-y:auto; margin:0; padding:10px 22px; min-height:0}
.painel-lote .lote-linha{
  display:flex; flex-direction:row; align-items:center; gap:10px; cursor:pointer;
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:8px 10px; margin-bottom:5px; text-align:left;
}
.painel-lote .lote-linha:hover{border-color:#93C5FD; background:#FAFCFF}
/* o rodapé é item FIXO da coluna (não sticky): com sticky dentro do form ele
   flutuava no meio da lista rolável */
.painel-lote .lote-rodape{
  position:static; flex:0 0 auto; background:var(--cartao);
  border-top:1px solid var(--borda); margin:0; padding:12px 22px 14px;
}
@media (max-width: 900px){
  .painel-lote{width:calc(100vw - 20px); padding:12px 12px 0}
  .painel-lote .lote-rodape{margin:0 -12px; padding:10px 12px 12px}
  .lote-cabec h3{font-size:13.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Concluir na Agenda — botão REDONDO de 30px com ícone de 20px, à ESQUERDA
   e FORA do card (agenda_view._botao_concluir). Cinza quando pendente,
   verde quando concluído; fundo #ECFDF5 ao passar o cursor.
   ═══════════════════════════════════════════════════════════════════════ */
.ag-linha{display:flex; align-items:flex-start; gap:8px}
.ag-linha .ag-item{flex:1; min-width:0}
.frm-concluir{display:flex; padding-top:4px}
.bt-concluir{
  width:30px; height:30px; flex:0 0 30px; border:none; background:transparent;
  border-radius:15px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; color:#9CA3AF; padding:0;
}
.bt-concluir:hover{background:#ECFDF5}
.bt-concluir.feito{color:#059669}
.bt-concluir .ico-png, .bt-concluir svg{width:20px; height:20px}
@media (max-width: 900px){
  .bt-concluir{width:28px; height:28px; flex:0 0 28px; border-radius:14px}
  .bt-concluir .ico-png{width:18px; height:18px}
}
.lote-tit{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.lote-sub{color:var(--texto-light); font-size:9.5px; line-height:1.4}
.painel-lote .lote-topo{padding:10px 22px 0; margin:0}
@media (max-width: 900px){ .lote-sub{font-size:11px} }
/* filtro de data dentro do seletor de filtros */
.sf-data{display:flex; align-items:center; gap:8px}
.sf-data > span{color:var(--texto-med); font-size:9.5px; font-weight:500; flex:0 0 30px}
.sf-data input[type=date]{
  flex:1; min-width:0; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:6px 10px; font-size:9.5px; font-family:inherit; color:var(--texto);
}
.sf-data-par{display:flex; flex-direction:column; gap:8px}
@media (max-width: 900px){
  .sf-data > span{font-size:11.5px} .sf-data input[type=date]{font-size:12px}
}

/* ═══════════════════════════════════════════════════════════════════════
   CARTÃO SOBREPOSTO (detalhe e formulário) — no app essas telas são
   DIÁLOGOS. Mesmas medidas dos outros sobrepostos: raio 8px, borda
   #E5E7EB, sombra; o conteúdo rola dentro da caixa.
   ═══════════════════════════════════════════════════════════════════════ */
.fundo-sobre{
  display:none; position:fixed; inset:0; z-index:60; background:rgba(17,24,39,.42);
}
.fundo-sobre.on{display:block}
.cartao-sobre{
  display:none; position:fixed; z-index:61; top:50%; left:50%;
  transform:translate(-50%,-50%); width:min(1100px, calc(100vw - 40px));
  max-height:calc(100vh - 48px); background:var(--fundo);
  border:1px solid var(--borda); border-radius:8px;
  box-shadow:0 12px 40px rgba(17,24,39,.22); overflow:hidden;
}
.cartao-sobre.on{display:block}
.sobre-corpo{max-height:calc(100vh - 48px); overflow-y:auto; padding:18px 20px}
/* X de fechar: bolinha PRESA ao canto superior direito do cartão — assim fica
   SEMPRE no mesmo lugar, ao visualizar e ao editar, no computador e no celular.
   (Preso ao fluxo da barra ele mudava de lugar quando a barra quebrava em
   duas linhas na tela estreita.) */
.sobre-fechar{
  position:absolute; top:13px; right:13px; z-index:3;
  width:30px; height:30px; flex:0 0 30px; border:1px solid var(--borda);
  background:var(--cartao); border-radius:15px; cursor:pointer;
  color:var(--texto-med); font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
}
/* (o espaço do X é reservado na regra da barra, mais abaixo) */
.sobre-fechar:hover{background:var(--superficie2); color:var(--texto)}
.sobre-carregando{color:var(--texto-light); font-size:10px; padding:24px; text-align:center}
body.sobre-aberto{overflow:hidden}          /* a página de trás não rola junto */
/* dentro do cartão o conteúdo não repete a margem da página */
.sobre-corpo .det-grade{margin:0}
@media (max-width: 900px){
  .cartao-sobre{width:calc(100vw - 16px); max-height:calc(100vh - 24px)}
  .sobre-corpo{max-height:calc(100vh - 24px); padding:14px 12px}
  .sobre-carregando{font-size:12px}
}
/* A tela do Kanban não cresce além da janela. ⚠️ `flex:1` num item de uma
   linha flexível controla a LARGURA, não a altura — por isso a altura do
   quadro é fixada aqui, descontando cabeçalho, abas e margens. */
.kanban-tela{display:flex; flex-direction:column; min-height:0}
.kanban-tela .board{height:calc(100vh - 186px); min-height:300px}
body.tela-kanban .main{overflow:hidden}
@media (max-width: 900px){
  /* no celular o quadro rola de lado e a página rola normalmente */
  .kanban-tela .board{height:calc(100vh - 215px); min-height:260px}
  body.tela-kanban .main{overflow:hidden}
}

/* ═══════════════════════════════════════════════════════════════════════
   Dentro do cartão sobreposto a MOLDURA fica parada: a barra de ações
   (Voltar · Concluir · Editar · Excluir · status) e o título do formulário
   ficam presos no topo, e só as informações rolam por baixo.
   ═══════════════════════════════════════════════════════════════════════ */
.sobre-corpo .det-barra,
.sobre-corpo .det-topo,
.sobre-corpo .form-topo{
  position:sticky; top:0; z-index:3; background:var(--fundo);
  margin:-18px -20px 14px; padding:14px 62px 14px 20px;   /* 62 à direita = folga do X */
  border-bottom:1px solid var(--borda);
  /* ⚠️ O X mede 30px e começa a 14px do topo: sem altura mínima, a barra de
     FORMULÁRIO (só o título, 45px) deixava o X a 2px da linha de divisão —
     colado (usuário, 02/09/2026). 14 + 30 + 14 = 58 dá a MESMA folga em cima
     e embaixo, e a barra de detalhe (55px) continua maior que isso. */
  min-height:58px; align-items:center;
  /* ⚠️ Sem QUEBRA DE LINHA, numa tela estreita os botões não cabem e a pílula
     de situação estoura o recuo de 56px, indo parar POR BAIXO do X — foi o
     que o usuário viu passar (02/09/2026). Com wrap ela desce uma linha e o X
     continua sozinho no canto. */
  flex-wrap:wrap;
}
/* a pílula vai para a direita, mas afastada do X */
.sobre-corpo .selo-topo{margin-left:auto; flex:0 0 auto; white-space:nowrap}
/* o rodapé do formulário (Salvar/Cancelar) também fica sempre à mão */
.sobre-corpo .f-rodape,
.sobre-corpo .f-acoes{
  position:sticky; bottom:0; z-index:3; background:var(--fundo);
  margin:14px -20px -18px; padding:12px 20px; border-top:1px solid var(--borda);
}
@media (max-width: 900px){
  .sobre-corpo .det-barra,
  .sobre-corpo .det-topo,
  .sobre-corpo .form-topo{margin:-14px -12px 12px; padding:12px 56px 12px 12px}
  .sobre-corpo .f-rodape,
  .sobre-corpo .f-acoes{margin:12px -12px -14px; padding:10px 12px}
}
/* o X fica flutuando no canto do cartão; a barra de ações reserva espaço
   à direita para ele não cobrir a pílula de status */
/* "+ Anexar" na linha do título da seção, como no app */
.secao-det h2.com-acao{display:flex; align-items:center; gap:8px}
.secao-det h2.com-acao .frm-anexo{margin-left:auto}
.frm-anexo .bt-flu, .frm-anexo .bt-add{cursor:pointer; display:inline-flex; align-items:center}
/* atalho "Calendário…" do reagendamento */
.frm-cal{position:relative; display:inline-flex}
.frm-cal input[type=date]{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.frm-obs-editar{display:inline-flex}


/* ═══════════════════════════════════════════════════════════════════════
   Dentro do cartão sobreposto os BLOCOS ficam parados e cada um rola por
   dentro — como no app, onde a coluna do conteúdo e a do Histórico têm
   cada qual a sua barra de rolagem.
   ═══════════════════════════════════════════════════════════════════════ */
.sobre-corpo{
  overflow:hidden;                    /* o cartão inteiro não rola */
  display:flex; flex-direction:column;
  height:calc(100vh - 48px); padding:18px 20px;
}
.sobre-corpo > .det-barra,
.sobre-corpo > .det-topo,
.sobre-corpo > .form-topo{position:static; flex:0 0 auto}
.sobre-corpo .det-grade{flex:1; min-height:0; align-items:stretch}
.sobre-corpo .det-col,
.sobre-corpo .det-hist{overflow-y:auto; min-height:0; align-self:stretch}
/* Formulário: o próprio <form> é a caixa branca (.form). Os blocos de campos
   rolam por dentro; o rodapé com Salvar/Cancelar fica parado no pé da caixa. */
.sobre-corpo > form{
  flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
.sobre-corpo > form > .f-bloco{flex:0 0 auto}
.sobre-corpo > form > .f-acoes,
.sobre-corpo > form > .f-rodape{
  position:static; flex:0 0 auto; margin:0; border-radius:0;
  border-top:1px solid var(--borda); padding-top:12px;
}
/* embrulho rolável dos campos, criado pelo JS ao abrir o formulário */
.form-miolo{flex:1; overflow-y:auto; min-height:0; margin:0 -20px; padding:0 20px}
/* telas sem grade (cliente, comunicação): o corpo interno é que rola */
.sobre-corpo > .cfg, .sobre-corpo > .lista,
.sobre-corpo > .det-col, .sobre-corpo > .cartao, .sobre-corpo > .det-bloco,
.sobre-corpo > .com-det{flex:1; overflow-y:auto; min-height:0}
@media (max-width: 900px){
  .sobre-corpo{height:calc(100vh - 24px); padding:14px 12px}
}

/* Link que cobre o card inteiro: no app o clique em QUALQUER ponto do card
   abre a visualização (mousePressEvent → _visualizar), mesmo concluído.
   As ações e a pílula ficam ACIMA dele para continuarem clicáveis. */
.card-evento{position:relative}
.capa-card{position:absolute; inset:0; z-index:1; border-radius:inherit;
  text-decoration:none; color:inherit}
.card-tarefa{position:relative}
.card-evento > *:not(.capa-card),
.card-tarefa > *:not(.capa-card){position:relative; z-index:0}
/* as ações (e o botão de urgência) ficam ACIMA da capa para continuarem clicáveis */
.card-evento .c-acoes, .card-tarefa .c-acoes, .card-tarefa .btn-prio-form{z-index:2}
.card-evento .ev-titulo{cursor:pointer}

/* Porcentagem das Subtarefas: verde e em negrito, como no app
   (tarefa_detail._lbl_progresso: 9pt, peso 700, _VERDE) */
.secao-det h2 .pct{color:var(--verde); font-size:9px; font-weight:700;
  text-transform:none; letter-spacing:0}
/* "+ Anexar" não herda o CAIXA ALTA do título da seção */
.secao-det h2 .bt-flu, .secao-det h2 .frm-anexo{text-transform:none; letter-spacing:0}

/* ficha do evento: rótulo 9pt (a da tarefa usa 8.5pt) */
.campos-ev .rot{font-size:9px}

/* botão Atualizar do Kanban: 120px fixos, como no app */
.bt-atualizar{width:120px; justify-content:center}

/* ═══════════════════════════════════════════════════════════════════════
   Ficha do cliente — cartões dos vínculos (cliente_detail._card do app):
   fundo branco, borda, raio 8, 12px 8px; título em cima, subtítulo embaixo,
   e um valor à direita (status do evento ou valor do lançamento).
   ═══════════════════════════════════════════════════════════════════════ */
.cd-card{
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:8px 12px; text-decoration:none; color:inherit;
}
.cd-card:hover{border-color:#93C5FD; background:#FAFCFF}
.cd-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.cd-tit{font-size:9.5px; font-weight:600; color:var(--texto); overflow-wrap:anywhere}
.cd-sub{font-size:8.5px; color:var(--texto-light)}
.cd-dir{font-size:9px; font-weight:600; flex:0 0 auto; white-space:nowrap}
/* histórico do cliente: cartão cinza com evento em azul (cliente_detail) */
.ev-cli{
  background:var(--fundo); border:1px solid var(--borda); border-radius:6px;
  padding:7px 10px; margin-bottom:6px;
}
.ev-cli .ev-cab{display:flex; align-items:center; gap:6px; margin-bottom:2px}
.ev-cli .ev-cab b{color:var(--azul); font-size:9px; font-weight:700}
.ev-cli .ev-cab span{margin-left:auto; color:var(--texto-light); font-size:8px}
.ev-cli .ev-txt{font-size:9px; color:var(--texto); overflow-wrap:anywhere}
.ev-cli .ev-user{font-size:7.5px; color:var(--texto-light); font-style:italic}
/* título de seção da ficha: no app é "Dados · N", tudo na mesma cor cinza */
.secao-det h2 .cont{color:var(--texto-light); font-weight:700}

/* rótulo do cabeçalho da ficha ("Ficha do Cliente"), 12pt/700 como no app */
.det-rotulo{font-size:12px; font-weight:700; color:var(--texto)}
.bt-acao.dir-auto{margin-left:auto}

/* Selo de tipo/representação/sigilo/situação (cliente e processo): no app é
   8pt/700 — a pílula de STATUS de tarefa e evento é 8.5pt/600. */
/* ── ESCALA DAS PÍLULAS: o tamanho acompanha o PESO da informação ────────
   (usuário, 01/09/2026: "pílulas em tamanho proporcionais a cada situação")

   | papel                       | fonte | peso | altura | raio |
   |-----------------------------|-------|------|--------|------|
   | SITUAÇÃO / STATUS  .pilula  | 8.5px | 600  | 22px   | 11   |  Ativo, Agendado
   | CLASSIFICAÇÃO      .selo    | 8px   | 700  | 19px   | 9.5  |  Cliente, Pessoa Física
   | AVISO CURTO        .mini    | 7.5px | 700  | 16px   | 8    |  Segredo de justiça

   A LARGURA já é proporcional ao texto (vem do padding), então cada pílula
   ocupa só o que a palavra dela precisa. As medidas de altura/raio saem do
   app: raio = metade da altura, senão o macOS desenha o canto reto. */
.pilula.selo{font-size:8px; font-weight:700; min-height:19px;
  border-radius:9.5px; padding:2px 10px}

/* Moldura das abas PF/PJ: no app é o painel do QTabWidget — caixa branca com
   borda que vai do Nome até o Complemento. Representação e Observações ficam
   FORA dela. */
.f-painel{
  background:var(--cartao); border:1px solid var(--borda);
  border-radius:0 8px 8px 8px; padding:16px; margin-bottom:16px;
}
.abas-form{margin-bottom:0}

/* Observações do cadastro de cliente: 70px de altura fixa, como no app
   (clientes_view: obs_edit.setFixedHeight(70)) */
.f-obs textarea{height:70px; resize:vertical}

.escopos a{text-decoration:none; display:inline-flex; align-items:center}

/* Os botões do cabeçalho ficam JUNTOS à direita, como no app — antes o
   "Importar" ficava colado ao título porque só o .btn-novo tinha margin-left. */
.header-acoes{margin-left:auto; display:flex; align-items:center; gap:8px}
.header-acoes .btn-novo{margin-left:0}
.header-acoes .btn-secundario{display:inline-flex; align-items:center; gap:6px}
@media (max-width: 900px){ .header-acoes{gap:6px} }

/* Filtros de presença (subtarefas / observações / anexos): no app são botões
   arredondados que ficam azuis quando ligados (tarefas_view._toggle_chip). */
.sf-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.sf-chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--cartao); border:1px solid var(--borda); border-radius:999px;
  padding:6px 14px; font-size:9.5px; color:#475569; min-height:30px;
}
.sf-chip:hover{border-color:#93C5FD}
.sf-chip.on{background:#EFF6FF; border-color:var(--azul); color:var(--azul)}
.sf-chip .ico-png{width:14px; height:14px; flex:0 0 14px}

/* setas do período: triângulo cheio de 16px em botão de 32px, como no app */
.nav-per{display:inline-flex; align-items:center; justify-content:center}
.nav-per svg{width:16px; height:16px; fill:#475569}

/* Escolha do destino ao criar evento de uma movimentação */
.conv-resumo{background:var(--fundo); border:1px solid var(--borda); border-radius:8px;
  padding:12px 14px; display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.conv-aviso{color:var(--texto-med); font-size:9.5px; margin-bottom:14px}
.conv-destinos{display:flex; gap:10px; flex-wrap:wrap}
.conv-op{
  flex:1 1 150px; text-align:center; background:var(--cartao);
  border:1px solid var(--borda); border-radius:8px; padding:14px 18px;
  font-size:10.5px; font-weight:600; color:var(--texto); text-decoration:none;
}
.conv-op:hover{border-color:var(--azul); background:#EFF6FF; color:var(--azul)}

/* rodapé da ficha do processo: "Marcar tudo como lido" preso no pé da caixa */
.rodape-proc{display:flex; align-items:center; gap:10px}
.rodape-proc button[disabled]{opacity:.45; cursor:default}
.rodape-proc button[disabled]:hover{background:var(--cartao); border-color:var(--borda)}

/* número do processo no detalhe: 16pt no app (processo_detail:212) */
.det-titulo.proc{font-size:16px}

/* Bloco "Clientes Vinculados" do cadastro de processo: no app é um grupo com
   moldura e título embutido (QGroupBox), não um título solto. */
.f-grupo{
  border:1px solid var(--borda); border-radius:8px; padding:14px 16px 16px;
  margin:16px 0 14px; background:var(--cartao); position:relative;
}
.f-grupo h2{
  color:var(--texto-med); font-size:9.5px; font-weight:600; margin:0 0 10px;
  letter-spacing:0;
}
.f-grupo .secao-cabec-fl{margin-bottom:6px}
.f-grupo .dica{margin:0 0 8px}
.lista-partes{display:flex; flex-direction:column; gap:4px}
.lista-outros{display:flex; flex-direction:column; gap:4px; margin-bottom:10px}

/* Indicador de CASO ADMINISTRATIVO no card do cliente — o par do "N processos".
   Mesmo desenho, cor âmbar para diferenciar do judicial (azul). */
.cli-adm{display:inline-flex; align-items:center; gap:4px; color:#B45309;
  font-size:9px; font-weight:600}
.cli-adm .ico-png{width:14px; height:14px; flex:0 0 14px}
/* escolha Cliente/Parceria ao lado de cada parte do processo */
.parte-vinc{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.parte-vinc .f-check{flex:1; min-width:0}
.sel-relacao{flex:0 0 auto; padding:3px 8px; font-size:9px; border-radius:5px;
  border:1px solid var(--borda); background:var(--cartao); color:var(--texto-med)}

/* Clientes do processo, na ficha: pílula (Cliente/Parceria) + nome + polo,
   com a troca direta ao lado. */
.vinc-cli{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--fundo); border:1px solid var(--borda); border-radius:8px;
  padding:8px 12px; margin-bottom:6px}
.vinc-nome{flex:1; min-width:120px; font-size:10px; font-weight:600;
  color:var(--texto); text-decoration:none}
.vinc-nome:hover{color:var(--azul)}
.vinc-polo{color:var(--texto-light); font-size:8.5px; white-space:nowrap}
.frm-trocar{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.frm-trocar select{padding:3px 8px; font-size:9px; border-radius:5px;
  border:1px solid var(--borda); background:var(--cartao); color:var(--texto-med);
  max-width:170px}


/* ── Formulário de evento: dica e anexos (evento_forms/AtendimentoForm) ──── */
/* a mesma frase em itálico e cinza do app (AtendimentoForm: 8.5pt, #6B7280) */
.dica-form{color:var(--texto-light); font-size:8.5px; font-style:italic;
  margin:-6px 0 12px}
/* "+ Anexar documento" — botão claro com borda, como no app
   (evento_forms._build_anexos_section: fundo #F3F4F6, borda #E5E7EB) */
.bt-anexar{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:#F3F4F6; color:var(--texto); border:1px solid var(--borda);
  border-radius:6px; padding:7px 14px; font-size:9.5px; font-family:inherit}
.bt-anexar:hover{background:#E5E7EB; border-color:var(--azul)}
.anx-escolhidos{margin-top:6px}


/* ── Partes do Processo: uma linha por pessoa (nome · papel · marca) ──────
   Um bloco só, e o papel escolhido é o que distribui a pessoa na ficha
   (usuário, 01/09/2026). Medidas do formulário do app: campo de 30px de
   altura, rótulo 9.5pt e valor 10pt. */
.partes-papel{display:flex; flex-direction:column; gap:6px; margin-top:4px}
.linha-papel{
  display:grid; grid-template-columns:1fr 190px auto; align-items:center; gap:10px;
  background:var(--fundo); border:1px solid var(--borda); border-radius:8px;
  padding:7px 12px;
}
.lp-nome{font-size:10px; font-weight:600; color:var(--texto); min-width:0;
  overflow-wrap:anywhere}
/* o papel é só leitura: quem manda é a caixa em que o nome está */
.lp-papel{font-size:9px; font-weight:500; color:var(--texto-light); white-space:nowrap}
.linha-papel select{
  height:30px; background:var(--cartao); border:1px solid var(--borda);
  border-radius:6px; padding:0 10px; font-size:9.5px; font-family:inherit;
  color:var(--texto-med); appearance:none; width:100%; min-width:0;
}
.linha-papel select:focus{outline:none; border-color:var(--azul)}
.linha-papel select:disabled{opacity:.45}
@media (max-width: 900px){
  .linha-papel{grid-template-columns:1fr; gap:6px}
}

/* "(Pessoa Física)" ao lado do nome do cliente: texto de apoio, não pílula */
.cli-tipo{color:var(--texto-light); font-size:8.5px; font-weight:600}
@media (max-width: 900px){ .cli-tipo{font-size:10px} }

/* Linha das partes no card do processo: nomes separados por "," dentro do
   mesmo polo e por "×" entre os dois polos (como no app), com a pílula
   pequena grudada no nome do meu cliente. */
.proc-polos{display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px 5px}
/* a vírgula cola no nome anterior; o "×" separa os dois polos com folga */
.proc-sep{color:var(--texto-light); font-weight:600}
.proc-sep.virgula{margin:0 3px 0 -4px}
.proc-sep.polo{margin:0 6px}
.proc-polos .pilula.mini{margin-left:1px}

/* ⚠️ A pílula que fica COLADA a um texto (o número do processo, o nome de uma
   parte, a linha "N processos") tem de ter a ALTURA daquele texto, não a de
   uma pílula solta (usuário, 01/09/2026: "proporcional ao tamanho do número do
   processo, a altura do número do processo"). O número tem 10.5px de fonte e
   13px de caixa; a pílula fica em 14px, com o raio na metade. */
.cli-meio .pilula.selo.mini,
.proc-polos .pilula.selo.mini,
.cli-base .pilula.selo.mini,
/* dentro de "N processos" o selo herda o gap de 4px do .cli-proc — fica colado
   ao texto e na altura dele (usuário, 01/09/2026) */
.cli-proc .pilula.selo.mini,
.val-ro .pilula.selo.mini,
.det-titulo .pilula.selo.mini{
  min-height:0; height:14px; border-radius:7px; padding:0 7px;
  font-size:7px; line-height:1;
}
@media (max-width: 900px){
  .cli-meio .pilula.selo.mini, .proc-polos .pilula.selo.mini,
  .cli-base .pilula.selo.mini{height:15px; border-radius:7.5px; font-size:8px}
}

/* ── Botõezinhos da linha da parte (usuário, 01/09/2026) ─────────────────
   "Responsável" e Cliente/Parceria/Dativo deixaram de ser seletores: agora
   ligam e desligam com um clique, e acendem na cor da própria marca. Clicar
   de novo no que está aceso desliga. */
/* duas fileiras: os três de relação em cima, "Advogado responsável" embaixo.
   Ficam SEMPRE visíveis, para toda linha ter a mesma altura — antes o bloco do
   cliente saía maior que o do advogado (usuário, 01/09/2026). */
/* ⚠️ 'Advogado responsável' começa onde começa o 'Cliente' — as duas
   fileiras alinhadas pela ESQUERDA (usuário, 01/09/2026) */
.chips-parte{display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.chips-linha{display:flex; align-items:center; gap:5px}
.marca-resp{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  color:var(--texto-light); font-size:8.5px; font-weight:600; user-select:none;
}
.marca-resp input{width:14px; height:14px; accent-color:var(--azul); margin:0}
.marca-resp:hover{color:var(--texto-med)}
.marca-resp.on{color:#2563EB}
.chip-p{
  display:inline-flex; align-items:center; cursor:pointer; user-select:none;
  background:var(--cartao); color:var(--texto-light);
  border:1px solid var(--borda); border-radius:12px; padding:0 11px;
  height:24px; font-size:8.5px; font-weight:600; font-family:inherit;
  white-space:nowrap; transition:background .12s, color .12s, border-color .12s;
}
.chip-p:hover{border-color:#9CA3AF; color:var(--texto-med)}
.chip-p[hidden]{display:none !important}
/* aceso: cada marca na SUA cor, a mesma da pílula que vai aparecer depois */
.chip-p.resp.on{color:#2563EB; background:rgba(37,99,235,.13); border-color:rgba(37,99,235,.45)}
.chip-p.rel.cliente.on{color:#059669; background:rgba(5,150,105,.13); border-color:rgba(5,150,105,.45)}
.chip-p.rel.parceria.on{color:#7C3AED; background:rgba(124,58,237,.13); border-color:rgba(124,58,237,.45)}
.chip-p.rel.dativo.on{color:#0891B2; background:rgba(8,145,178,.13); border-color:rgba(8,145,178,.45)}

@media (max-width: 900px){
  .linha-papel{grid-template-columns:1fr}
  .chips-parte{align-items:flex-start; gap:6px}
  .chip-p{height:28px; font-size:11px}
  .marca-resp{font-size:11px}
}

/* Comunicações: o selo "Pendente" fica colado ao número + tipo, na altura
   desse texto (usuário, 01/09/2026) — mesma regra do sigilo nos processos */
.com-num .pilula.selo.mini{height:14px; border-radius:7px; padding:0 7px;
  font-size:7px; line-height:1; min-height:0; margin-left:6px; vertical-align:middle}
@media (max-width: 900px){
  .com-num .pilula.selo.mini{height:15px; border-radius:7.5px; font-size:8px}
}

/* ⚠️ "Limpar comunicações" é destrutivo: precisa de folga do "Coletar agora",
   para não ser clicado por engano (usuário, 01/09/2026). 8px era pouco. */
.header-acoes .btn-perigo{margin-right:8px}
@media (max-width: 900px){ .header-acoes .btn-perigo{margin-right:4px} }

/* no celular a aba encolhe antes de quebrar */
@media (max-width: 900px){ .abas a{min-width:0; padding:8px 14px} }

/* Quando o cartão sobreposto NÃO tem barra de ações, o X fica preso ao canto e
   o título precisa de folga para não passar por baixo dele (usuário, 02/09/2026) */
.sobre-corpo .det-titulo.com-x{padding-right:46px}
.det-titulo .pilula{margin-left:8px; vertical-align:middle}

/* ⚠️ Qualquer CABEÇALHO de tela aberta no cartão precisa da mesma folga que a
   barra de ações tem, senão o que estiver à direita passa por baixo do X
   (usuário, 02/09/2026 — foi o caso do "Voltar" em Conferir base). */
.sobre-corpo > .header{padding-right:46px}

/* Cartão sem barra de ações: o conteúdo desce para o X não cair sobre ele
   (usuário, 02/09/2026 — o X ficava por cima do primeiro cartão branco) */
.cartao-sobre.sem-barra .sobre-corpo{padding-top:52px}
.cartao-sobre.sem-barra .det-titulo.com-x{padding-right:0}

/* ═══════════════════════════════════════════════════════════════════════
   FINANCEIRO COMPLETO (02/09/2026)
   Escala herdada do app: título de seção 9.5px/600, valor 18px/800,
   texto de apoio 9.5px. Nada de cor nova: só as da paleta.
   ═══════════════════════════════════════════════════════════════════════ */
.fin-ambito{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.fin-ambito .segmentos{margin-left:0}
.fin-mes{margin-left:auto}
.fin-mes label{display:flex; align-items:center; gap:6px}
.fin-mes span{color:var(--texto-med); font-size:9.5px; font-weight:600}
.fin-mes input{
  border:1px solid var(--borda); border-radius:5px; padding:4px 8px;
  background:var(--cartao); color:var(--texto); font-size:10px;
}
/* seis quadros: a faixa de números do mês não pode virar rolagem lateral */
.fin-resumo.seis{grid-template-columns:repeat(6, 1fr)}
/* ⚠️ O cartão de resumo do app tem 96px porque são TRÊS. Com seis na faixa,
   96px deixa metade do quadro vazio — a regra da compactação manda encolher. */
.fin-resumo.seis .fin-card{height:auto; min-height:58px; padding:9px 12px; justify-content:center}
.fin-resumo.seis .fin-val{font-size:15px}
@media (max-width:1180px){ .fin-resumo.seis{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:640px){ .fin-resumo.seis{grid-template-columns:repeat(2, 1fr)} }

.fin-duas{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
@media (max-width:900px){ .fin-duas{grid-template-columns:1fr} }

/* barra horizontal de gasto por grupo */
.fin-barra-linha{display:flex; align-items:center; gap:8px; padding:5px 0}
.fin-barra-nome{width:96px; flex:0 0 96px; color:var(--texto); font-size:10px; font-weight:600}
.fin-barra-caixa{flex:1; min-width:0; height:8px; background:var(--superficie2); border-radius:4px}
.fin-barra{display:block; height:100%; border-radius:4px; min-width:2px}
.fin-barra-val{color:var(--texto); font-size:10px; font-weight:700; white-space:nowrap}
.fin-barra-pct{width:38px; flex:0 0 38px; text-align:right;
  color:var(--texto-light); font-size:9px; font-weight:600}

/* colunas de entrada × saída por mês */
.fin-evolucao{display:flex; align-items:flex-end; gap:10px; height:120px; padding:8px 0}
.fin-mes-col{flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:4px; height:100%}
.fin-cols{flex:1; display:flex; align-items:flex-end; gap:3px; width:100%; justify-content:center}
.fin-col{width:12px; border-radius:2px 2px 0 0; min-height:2px}
.fin-col.ent{background:var(--verde)} .fin-col.sai{background:var(--vermelho)}
.fin-mes-rot{color:var(--texto-light); font-size:8.5px; font-weight:600}
.fin-legenda{display:flex; gap:14px; justify-content:center; padding-top:4px}
.fin-legenda span{display:flex; align-items:center; gap:5px;
  color:var(--texto-med); font-size:9px}
.fin-legenda i{width:8px; height:8px; border-radius:2px}

.fin-patr{display:flex; flex-direction:column; gap:2px}
.fin-patr-l{display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; border-bottom:1px solid var(--borda-soft)}
.fin-patr-l span{color:var(--texto-med); font-size:10px}
.fin-patr-l b{color:var(--texto); font-size:11px; font-weight:700}
.fin-patr-l.total{border-bottom:0; padding-top:9px}
.fin-patr-l.total span{color:var(--texto); font-weight:600}
.fin-patr-l.total b{font-size:14px; font-weight:800}
.fin-aviso{margin-top:8px; padding:7px 10px; border-radius:6px;
  background:rgba(202,138,4,.13); border:1px solid rgba(202,138,4,.30);
  color:#92400E; font-size:9.5px}

/* metas */
.fin-meta{position:relative; background:var(--cartao); border:1px solid var(--borda);
  border-radius:8px; padding:10px 12px; margin-bottom:8px}
.fin-meta-topo{display:flex; align-items:center; gap:7px; margin-bottom:7px}
.fin-meta-tit{flex:1; min-width:0; color:var(--texto); font-size:11px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fin-meta-barra{height:8px; background:var(--superficie2); border-radius:4px; overflow:hidden}
.fin-meta-cheio{display:block; height:100%; border-radius:4px; min-width:2px}
.fin-meta-base{display:flex; align-items:center; gap:8px; margin-top:6px}
.fin-meta-base span{color:var(--texto-med); font-size:9.5px}
.fin-meta-base b{font-size:11px; font-weight:800}
.fin-meta-prazo{margin-left:auto; color:var(--texto-light) !important; font-size:9px}

/* contas e cartões: cada instituição pelo seu logo */
.fin-grade{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px}
.fin-inst{position:relative; background:var(--cartao); border:1px solid var(--borda);
  border-radius:8px; padding:11px 13px}
.fin-inst.inativa{opacity:.6}
.fin-inst-topo{display:flex; align-items:center; gap:9px}
.fin-inst-id{flex:1; min-width:0}
.fin-inst-nome{display:block; color:var(--texto); font-size:11.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fin-inst-sub{display:block; color:var(--texto-light); font-size:9px; margin-top:1px}
.fin-band{font-weight:700}
.fin-inst-saldo{margin-top:9px; font-size:17px; font-weight:800}
/* o "logo": a cor da marca com a sigla — reconhecível sem arquivo de imagem */
.fin-logo{display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 34px; border-radius:8px;
  color:#FFFFFF; font-size:10px; font-weight:800; letter-spacing:.3px}

.fin-limite{margin-top:9px}
.fin-limite-caixa{display:block; height:7px; background:var(--superficie2); border-radius:4px}
.fin-limite-barra{display:block; height:100%; border-radius:4px; min-width:2px}
.fin-limite-txt{display:block; margin-top:4px; color:var(--texto-med); font-size:9px}

.fin-faturas{margin-top:10px; display:flex; flex-direction:column; gap:4px}
.fin-fatura{display:flex; align-items:center; gap:8px; padding:6px 8px;
  border:1px solid var(--borda); border-radius:6px;
  text-decoration:none; color:inherit; background:var(--fundo)}
.fin-fatura:hover{background:var(--superficie2)}
.ff-mes{width:52px; flex:0 0 52px; color:var(--texto); font-size:10px; font-weight:700}
.ff-val{flex:1; min-width:0; color:var(--texto); font-size:11px; font-weight:700}
.ff-venc{color:var(--texto-light); font-size:9px; white-space:nowrap}

/* botões que ligam/desligam — mesmo padrão dos de Cliente/Parceria/Dativo */
.bt-escolha{display:flex; flex-wrap:wrap; gap:5px}
.bt-op{
  border:1px solid var(--borda); border-radius:6px; padding:5px 11px;
  background:var(--cartao); color:var(--texto-med);
  font-size:10px; font-weight:600; cursor:pointer;
}
.bt-op:hover{background:var(--superficie2)}
.bt-op.on{background:rgba(37,99,235,.13); border-color:rgba(37,99,235,.30); color:var(--azul)}
.bt-op.verde.on{background:rgba(5,150,105,.13); border-color:rgba(5,150,105,.30); color:var(--verde)}
.bt-op.vermelho.on{background:rgba(220,38,38,.13); border-color:rgba(220,38,38,.30); color:var(--vermelho)}
.bt-op.azul.on{background:rgba(37,99,235,.13); border-color:rgba(37,99,235,.30); color:var(--azul)}

.fin-marcas{display:flex; flex-wrap:wrap; gap:5px}
.fin-marca{display:flex; align-items:center; gap:6px; padding:4px 9px 4px 4px;
  border:1px solid var(--borda); border-radius:8px; background:var(--cartao);
  color:var(--texto-med); font-size:9.5px; font-weight:600; cursor:pointer}
.fin-marca:hover{background:var(--superficie2)}
.fin-marca.on{border-color:var(--azul); color:var(--texto); box-shadow:0 0 0 1px var(--azul) inset}
.fin-marca .fin-logo{width:26px; height:26px; flex:0 0 26px; border-radius:6px; font-size:8.5px}
/* ⚠️ Com a logo de verdade, o selo perde a cor de fundo e vira uma moldura
   BRANCA: a maioria das logos de banco é feita para fundo claro, e sobre a cor
   da marca elas somem. */
/* ⚠️ E o selo deixa de ser QUADRADO. Medido nas 15 logos: a maioria é deitada,
   de 3:1 a 5,9:1 (Banco do Brasil, Bradesco, Santander…). Dentro de um quadrado
   de 34px, uma logo 5,9:1 fica com SEIS pixels de altura — ilegível. Com 78px
   de largura ela ganha 13px, que é o tamanho de um texto pequeno e se lê. As
   quadradas (Itaú, Elo) não sofrem: o `contain` as centraliza. */
.fin-logo.com-imagem{
  width:78px; flex:0 0 78px; border-radius:7px;
  background:#FFFFFF; border:1px solid var(--borda); padding:3px 5px;
}
/* ⚠️ `contain` e nunca `cover`: logo de banco esticada ou cortada é pior do
   que sigla nenhuma. */
.fin-logo.com-imagem img{width:100%; height:100%; object-fit:contain; display:block}
@media (max-width:900px){
  .fin-logo.com-imagem{width:66px; flex:0 0 66px}
}

.f-dica{margin:6px 0 0; color:var(--texto-med); font-size:9.5px; font-style:italic}

.fin-pagar{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;
  margin:12px 0; padding:11px 13px; background:var(--cartao);
  border:1px solid var(--borda); border-radius:8px}
.fin-pagar .f-campo{margin:0}
.fin-item{display:flex; align-items:center; gap:8px; padding:6px 0;
  border-bottom:1px solid var(--borda-soft)}
.fin-item-data{width:44px; flex:0 0 44px; color:var(--texto-light);
  font-size:9.5px; font-weight:600}
.fin-item-desc{flex:1; min-width:0; color:var(--texto); font-size:10.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fin-item-val{color:var(--texto); font-size:11px; font-weight:700; white-space:nowrap}

/* ── Financeiro no celular ────────────────────────────────────────────────
   A escolha do ÂMBITO é a primeira decisão da tela: no estreito ela quebra
   para cima do seletor de mês (o `margin-left:auto` a jogava para depois). */
@media (max-width:900px){
  .fin-ambito{flex-wrap:wrap; gap:7px}
  .fin-ambito .segmentos{order:1; width:100%}
  .fin-mes{order:2; margin-left:0}
  .fin-resumo.seis .fin-card{min-height:46px; padding:7px 10px}
  .fin-resumo.seis .fin-val{font-size:13px}
  .fin-resumo.seis .fin-tit{font-size:9px}
  .fin-duas{gap:8px}
  .fin-barra-nome{width:74px; flex:0 0 74px; font-size:9.5px}
  .fin-barra-val{font-size:9.5px}
  .fin-evolucao{height:96px}
  .fin-col{width:9px}
  .fin-grade{grid-template-columns:1fr}
  .fin-logo{width:30px; height:30px; flex:0 0 30px; font-size:9px}
  .fin-inst-saldo{font-size:15px}
  .fin-meta-tit{font-size:10.5px}
  .fin-marcas{gap:4px}
  .fin-marca{font-size:9px; padding:3px 7px 3px 3px}
  .fin-marca .fin-logo{width:22px; height:22px; flex:0 0 22px; font-size:7.5px}
}
/* ═══════════════════════════════════════════════════════════════════════
   A PORTA — entrar, primeiro acesso e trocar senha
   Refeita em 02/09/2026 a partir do repertório de direção de arte do
   escritório (REPERTORIO-LOGIN.md).

   SETE CAMADAS, nenhum ícone avulso:
     1 base      gradiente marinho                        body
     2 luz       três focos que respiram em 20s           body::before
     3 guardiã   a estátua, entrando como LUZ             .porta-guardia
     4 textura   ruído que costura a foto ao gradiente     .porta-textura
     5 dither    quebra as faixas do gradiente escuro      .porta-grao
     6 vinheta   escurece as bordas                       body::after
     7 vidro     o cartão + a marca acima dele            .porta-coluna
     8 cursor    ponto que acompanha, anel que chega depois .porta-cursor

   ⚠️ A regra de ouro do repertório: UM objeto sólido só — o cartão. A
   guardiã e a luz são fundo; a marca vive entre os dois. Duas cores e um
   metal: marinho, azul do sistema (#2563EB, uma aparição só, no botão) e
   prata translúcida.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ⚠️ A sala era MARINHO. O usuário pediu tons pretos (02/09/2026): grafite
     frio, quase neutro, com um resto mínimo de azul para não virar cinza de
     impressora. O metal continua sendo a prata. */
  --porta-marinho-a:#14171C;   /* topo */
  --porta-marinho-b:#0B0D11;   /* meio */
  --porta-marinho-c:#040506;   /* pé */
  --porta-prata:#C6D4E6;
  --porta-prata-luz:#EDF3FA;
  --porta-prata-sombra:#7C8FAB;   /* traço, aresta, filete — NUNCA texto */
  /* ⚠️ #7C8FAB é para TRAÇO e ARESTA, nunca para texto: em 10-12px dava
     2,8:1 sobre o campo. Esta é a prata de LEITURA, medida no pixel real da
     tela renderizada (auditoria WCAG, 02/09/2026): #C6D4E6 dá 5,24:1 no fundo
     típico do campo e 4,85:1 no PIOR pixel — passa nos dois. #B3C4DA, o
     primeiro candidato, ficava em 4,11:1 no pior caso e reprovava. */
  --porta-prata-texto:#C6D4E6;
  --porta-curva:cubic-bezier(.2,.75,.2,1);
}

/* ── 1 · A SALA ──────────────────────────────────────────────────────── */
body.tela-porta{
  min-height:100vh; height:auto;
  display:flex; align-items:center; justify-content:flex-end;
  /* ⚠️ 8% deixava o cartão colado na borda direita (usuário,
     02/09/2026). Foram dois passos, a
     pedido: 8% → 11% → 15%. Em 1440 o cartão anda 101px para dentro, e a
     marca vai junto porque as duas moram na mesma coluna. */
  padding:0 15%; overflow:hidden;
  background:linear-gradient(165deg,
    var(--porta-marinho-a) 0%, var(--porta-marinho-b) 55%, var(--porta-marinho-c) 100%);
  color:var(--porta-prata-luz);
}

/* ── 2 · A LUZ ───────────────────────────────────────────────────────── */
/* ⚠️ Anima SÓ `background-position` — mexer em tamanho ou opacidade aqui
   custa repintura de tela cheia a cada quadro. */
body.tela-porta::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  /* ⚠️ Focos de PRATA, não de azul: sobre o grafite, luz azul devolvia o
     marinho pela porta dos fundos. */
  background:
    /* ⚠️ ERAM TRÊS FOCOS. O terceiro ficava em 44% 46% com 460×320 de raio —
       ou seja, cobria a estátua INTEIRA e a balança, e era ele a "mancha
       branca na frente do rosto" e a "mancha na balança" que o usuário viu.
       Luz difusa sobre uma figura clara não ilumina: embaça. Os dois que
       ficam moram nos CANTOS, longe dela, que é onde luz de ambiente serve
       para alguma coisa — e desceram de .13/.11 para .10/.085. */
    /* ⚠️ FOCO GRANDE = FAIXA LARGA. Um degradê de ~10 níveis espalhado por
       880px gasta 88px em cada nível: é essa a largura das "curvas de nível"
       que apareciam no fundo. Encolhendo o foco, a mesma variação acontece em
       menos pixels e a faixa fica estreita demais para a vista pegar. */
    radial-gradient(520px 380px at 82% 0%, rgba(204,204,204,.10), transparent 68%),
    radial-gradient(420px 340px at 0% 100%, rgba(166,166,166,.085), transparent 70%);
  animation:porta-respirar 20s ease-in-out infinite alternate;
}
@keyframes porta-respirar{
  from{background-position:0 0, 0 0, 0 0}
  to{background-position:34px -16px, -40px 18px, 16px 10px}
}

/* ── 3 · A FUMAÇA ────────────────────────────────────────────────────── */
/* Duas nuvens que atravessam a sala em minutos, não em segundos. A opacidade
   é tão baixa que só se percebe o movimento, nunca a nuvem — é ambiente, não
   efeito. ⚠️ `filter:blur` numa camada de tela cheia é caro: por isso o
   desfoque mora no próprio gradiente (bordas suaves), não num filtro. */
/* ⚠️ Um passeio de 3% em 78s é imperceptível. 11% já se lê como fumaça
   andando, sem virar animação chamativa. */

/* ── 4 · A GUARDIÃ ───────────────────────────────────────────────────── */
/* ⚠️ Ela entra como LUZ, não como foto colada: `mix-blend-mode:screen` apaga
   o preto do arquivo, e a máscara ELÍPTICA dissolve em todas as direções
   antes de chegar a qualquer borda reta. Fade linear deixaria uma faixa de
   transição que se lê como emenda. Ancorada ao PÉ da tela: estátua flutuando
   no vazio denuncia a montagem. */
.porta-guardia{
  /* ⚠️ Em -11% ela ficava encostada na borda, longe do cartão. Trazida para
     dentro (usuário, 02/09/2026): a figura e o formulário passam a conversar
     em vez de morarem em cantos opostos da tela.

     ⚠️ SEM `z-index` — e este é o ponto que custou três tentativas. Um
     `position` + `z-index` cria um CONTEXTO DE EMPILHAMENTO, e o
     `mix-blend-mode:screen` da imagem passa a misturar só com o interior
     desse contêiner (transparente), nunca com o fundo da página. Resultado: o
     preto do arquivo ficava VISÍVEL e desenhava o retângulo do JPEG na tela,
     por mais que as bordas do arquivo estivessem em preto absoluto — foram
     medidas, estavam. Sem z-index, a ordem do documento resolve a pilha
     (fumaça → guardiã → grão → coluna) e o `screen` alcança o fundo. */
  /* ⚠️ 92% MEDIA A CAIXA, NÃO A FIGURA (usuário, 02/09/2026: "a cabeça dela
     está quase no meio da página"). O arquivo tem 30% de moldura preta de
     cada lado — a folga onde a elipse dissolve —, então numa caixa de 828px
     a figura ocupava só 656 e a cabeça caía a 25% da altura da tela. Medido.
     A conta: a figura começa a 18,4% do topo da caixa, então a cabeça fica em
     `altura_da_tela − 0,816 × altura_da_caixa`. Para a cabeça subir a ~10% da
     tela, a caixa precisa de 110%. */
  /* ⚠️ A POSIÇÃO LATERAL SE MEDE DEPOIS DE CRESCER, não antes: ao subir para
     110% a figura ficou 30% mais larga e andou sozinha para o meio — sobravam
     216px à esquerda dela e só 145px até o cartão, ou seja, ela encostava mais
     no formulário do que na borda da tela. Recuada até as duas folgas se
     igualarem (~180px de cada lado). "Afastar da borda" nunca foi "ir para o
     meio" — o cartão precisa do seu próprio ar. */
  position:fixed; left:-2.5%; bottom:0; height:110%;
  pointer-events:none; user-select:none;
  /* ⚠️ O BLEND VAI AQUI, no elemento `fixed` — não na imagem dentro dele.
     `position:fixed` cria um CONTEXTO DE EMPILHAMENTO sempre, com ou sem
     z-index: o `screen` posto na imagem misturava apenas com o interior deste
     contêiner (transparente) e o preto do arquivo ficava VISÍVEL, desenhando
     o retângulo do JPEG na tela. Três tentativas foram gastas nisso antes de
     eu medir os pixels: a caixa do retângulo batia exatamente com a caixa da
     imagem. Aqui, o blend alcança o fundo da página, que é o que apaga o
     preto. */
  mix-blend-mode:screen;
  opacity:.66;                            /* a 100% compete com o cartão */
}
.porta-guardia img{
  height:100%; width:auto; display:block;
  /* ⚠️ A elipse tem de terminar ANTES da borda do arquivo, senão o retângulo
     do JPEG aparece — foi o que se viu na primeira prova: um bloco escuro de
     canto reto no pé da tela. Dissolve a 74% do raio e ainda ganha um fade
     vertical, que apaga o corte do rodapé sem deixar faixa de emenda. */
  /* ⚠️ Três coisas de uma vez, cada uma por um defeito visto:
     • o centro ALTO (44%) e o raio vertical generoso — com 55%/58% a máscara
       cortava a CABEÇA da figura, e uma guardiã sem rosto não olha para nada;
     • o raio horizontal subiu para 66% e o centro foi para 52%, porque a
       BALANÇA (que fica à direita do corpo) estava sendo cortada pela metade;
     • o fade termina a 88%, não a 82%, para a dissolução alcançar a ponta da
       balança antes de a máscara zerar. */
  /* ⚠️ SEM máscara no CSS: a dissolução mora na PRÓPRIA IMAGEM (repertório,
     seção 6). Foi a saída para um beco — a BALANÇA fica a ~88% da largura da
     figura, e uma máscara no navegador ou era forte o bastante para esconder
     a borda reta do arquivo (e comia a balança), ou fraca o bastante para
     mostrar a balança (e deixava o retângulo aparecer). Na imagem o quadro
     ganhou 30% de moldura preta de cada lado, e a elipse dissolve NELA, longe
     da figura. As três bordas do arquivo estão em preto ABSOLUTO — medido — e
     o `screen` some com elas. */
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* ── 5 · O GRÃO ──────────────────────────────────────────────────────── */
/* Não é enfeite: é ele que COSTURA a fotografia ao gradiente. Sem ele, a
   estátua e o fundo continuam parecendo duas imagens diferentes. */
.porta-grao{
  /* ⚠️ ESTA CAMADA É O DITHER — e é ela que resolve a "moldura que se
     movimenta" que o usuário viu. Revelando a estrutura fina da tela (cada
     pixel menos a média local, realçada 22×) aparecem FAIXAS ONDULADAS por
     todo o fundo, como curvas de nível de mapa. É banding: num fundo tão
     escuro, um degrau de 1/255 vira uma faixa larga, e quando a fumaça soma
     por cima as faixas ANDAM. Não era moldura — eram curvas de nível.

     ⚠️ `overlay` NÃO SERVE AQUI, por mais natural que pareça: sobre uma base
     de 3/255 ele é quase uma multiplicação por zero. Nem `screen`, que só
     SOMA e clareia a cena inteira em vez de embaralhar a fronteira (medido:
     +6 níveis de luminância). O que funciona no escuro é a MISTURA NORMAL com
     opacidade minúscula: `base×(1−α) + ruído×α`. A dose foi medida, não
     chutada: com um índice objetivo — quantos pixels SEGUIDOS têm o mesmo
     valor numa faixa lisa — o overlay dava faixa média de 3,33px; .015 deu
     2,24; .045 deu 1,73, e o fundo continua preto (9,4 de 255). Acima disso
     o ganho para e só o preto se perde. */
  position:fixed; inset:0; pointer-events:none; z-index:3;
  opacity:.045; mix-blend-mode:normal; background-size:256px 256px;
  /* ⚠️ `stitchTiles='stitch'` faz o ruído CASAR de um azulejo para o outro:
     sem isso as bordas do quadrado não fecham e a repetição desenha grade.
     O `feComponentTransfer` estica o contraste — o `fractalNoise` cru fica
     apertado em torno do cinza médio e não teria amplitude para ditherar. */
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'>\
<filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/>\
<feComponentTransfer><feFuncR type='linear' slope='3' intercept='-1'/>\
<feFuncG type='linear' slope='3' intercept='-1'/><feFuncB type='linear' slope='3' intercept='-1'/>\
</feComponentTransfer></filter>\
<rect width='256' height='256' filter='url(%23r)'/></svg>");
}

/* ── 5b · A TEXTURA ──────────────────────────────────────────────────── */
/* O grão que costura a FOTOGRAFIA ao gradiente — outro trabalho, outra
   camada. Aqui `overlay` é o certo: ele age onde há imagem (tons médios),
   que é justamente onde a emenda entre foto e fundo apareceria. */
.porta-textura{
  position:fixed; inset:0; pointer-events:none; z-index:3;
  opacity:.30; mix-blend-mode:overlay; background-size:256px 256px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'>\
<filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='256' height='256' filter='url(%23t)' opacity='.55'/></svg>");
}


/* ── 6 · A VINHETA ───────────────────────────────────────────────────── */
body.tela-porta::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2;
  /* ⚠️ .72 fechava o canto de baixo num bloco quase preto, e a borda do
     arquivo da guardiã aparecia contra ele. */
  background:radial-gradient(128% 100% at 48% 42%, transparent 44%, rgba(1,4,11,.56) 100%);
}

/* ── A COLUNA (marca + cartão) ───────────────────────────────────────── */
.porta-coluna{
  position:relative; z-index:4;
  width:100%; max-width:352px;
  display:flex; flex-direction:column; align-items:center;
}

/* ── 7 · A MARCA ─────────────────────────────────────────────────────── */
/* ⚠️ O que vende o 3D é o PARALAXE: a sombra é uma segunda cópia da própria
   logo, achatada, desfocada e movida no sentido CONTRÁRIO ao cursor.
   Inclinação sozinha não vende. */
.porta-marca{
  position:relative; display:flex; justify-content:center;
  /* ⚠️ 18px deixava a marca solta no ar, longe do cartão: as duas peças têm
     de se ler como UMA coluna. */
  /* ⚠️ 6px colava a marca no cartão (usuário, 02/09/2026). Ela precisa de ar
     para ler como MARCA e não como cabeçalho do formulário — mas não tanto que
     as duas deixem de ser uma coluna só. */
  margin-bottom:22px; perspective:900px;
}
/* ⚠️ O HALO SAIU (usuário, 02/09/2026: "pra que não fique esse balão grande,
   como se fosse cinzento, esbranquiçado"). Era um círculo de 366px com desfoque
   de 28px atrás da marca; sobre preto ele não "prendia a peça à cena" como eu
   pretendia — virava um balão de fumaça parado. O que dá volume à marca é a
   SOMBRA PROJETADA dela e o paralaxe, não um brilho por trás. */
.porta-marca .peca{
  /* ⚠️ 168px era a medida da logo COM o nome escrito embaixo. Só o símbolo
     pede mais presença: 208px (usuário, 02/09/2026). */
  position:relative; width:224px; height:224px; display:block; cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .5s var(--porta-curva);
}
.porta-marca .peca > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  /* ⚠️ SEM BRILHO NENHUM (usuário, 02/09/2026: "quando eu passo o mouse por
     cima da logo, a logo ainda exibe aquele fundo branco. Não quero que exiba
     esse fundo branco"). Um `drop-shadow` CLARO é um halo radial: sobre preto
     ele não destaca a peça, desenha um disco esbranquiçado — e, sendo um
     degradê de pouquíssimos níveis, sai em ANÉIS visíveis. O hover chegava a
     42px com 44% de opacidade, que é o "fundo branco" do relato.
     Fica só a sombra PROJETADA: escura, dá volume, não clareia nada. */
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.75));
  transition:filter .3s var(--porta-curva);
}
/* ⚠️ No hover a sombra APROFUNDA em vez de acender — a peça sobe, nada brilha. */
.porta-marca .peca:hover > img{
  filter:drop-shadow(0 20px 32px rgba(0,0,0,.85));
}
.porta-marca .sombra{                       /* a mesma peça, virada sombra */
  position:absolute; inset:0; pointer-events:none;
  filter:brightness(0) blur(12px); opacity:.55;
  transform:translateZ(-40px) translateY(16px) scale(.94);
  transition:transform .5s var(--porta-curva);
}
.porta-marca .sombra img{width:100%; height:100%; object-fit:contain; display:block}

/* ── 8 · O CARTÃO DE PRATA ───────────────────────────────────────────── */
/* ⚠️ Desfoque 24px: abaixo de 16 parece sujo, acima de 32 vira leitoso.
   ⚠️ A sombra é AZULADA (rgba(2,8,20)), nunca preta — preto sobre marinho
   abre um buraco. */
.porta-vidro{
  position:relative; z-index:2; width:100%; padding:26px 24px; border-radius:18px;
  /* ⚠️ Sobre marinho MUITO escuro, .16 → .06 lê como cinza-fumê, não como
     prata: falta luz por trás para o vidro refratar. Subindo para .22 → .09 e
     acrescentando um brilho no ALTO do cartão, ele volta a ser metal. */
  /* ⚠️ Sobre marinho MUITO escuro o vidro não tem luz por trás para refratar:
     .16 → .06 lia como cinza-fumê. A prata precisa nascer do próprio cartão —
     daí o brilho no alto e um segundo foco na diagonal. */
  background:
    linear-gradient(155deg, rgba(232,241,253,.30), rgba(198,212,230,.11)),
    radial-gradient(130% 70% at 50% -6%, rgba(196,220,252,.22), transparent 68%),
    radial-gradient(80% 60% at 88% 100%, rgba(160,190,236,.10), transparent 72%);
  border:1px solid rgba(232,241,253,.32);
  -webkit-backdrop-filter:blur(24px) saturate(115%);
          backdrop-filter:blur(24px) saturate(115%);
  box-shadow:
    0 30px 70px rgba(2,8,20,.60),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.06);
}
/* o fio de luz: é ISTO que faz a prata. Sem ele o cartão lê como fumê. */
.porta-vidro::before{
  content:""; position:absolute; left:14%; right:14%; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(237,243,250,.75),transparent);
  pointer-events:none;
}
.porta-vidro h1{
  margin:0; color:var(--porta-prata-luz);
  font-size:21px; font-weight:600; letter-spacing:-.2px; text-align:center;
}
.porta-filete{
  display:block; width:34px; height:1px; margin:9px auto 20px;
  background:linear-gradient(90deg,transparent,var(--porta-prata),transparent);
}

/* ── 9 · CAMPOS ──────────────────────────────────────────────────────── */
.porta-campo{position:relative; margin-bottom:14px}
.porta-campo input{
  width:100%; height:50px; padding:18px 14px 6px; border-radius:9px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(226,236,250,.16);
  color:var(--porta-prata-luz); font-size:12.5px; font-family:inherit;
  transition:border-color .16s var(--porta-curva), background .16s var(--porta-curva);
}
.porta-campo input:focus{
  outline:none; background:rgba(255,255,255,.10);
  border-color:rgba(226,236,250,.34);
}
.porta-campo input:-webkit-autofill{
  -webkit-text-fill-color:var(--porta-prata-luz);
  -webkit-box-shadow:0 0 0 40px rgba(20,34,62,.98) inset;
  caret-color:var(--porta-prata-luz);
}
/* ⚠️ Rótulo FLUTUANTE, nunca placeholder puro: o placeholder some ao digitar
   e a pessoa perde a referência do que é aquele campo. */
.porta-campo label{
  position:absolute; left:15px; top:16px; pointer-events:none;
  color:var(--porta-prata-texto); font-size:12px; font-weight:500;
  transform-origin:left center;
  transition:transform .16s var(--porta-curva), color .16s var(--porta-curva);
}
.porta-campo input:focus + label,
.porta-campo input:not(:placeholder-shown) + label{
  transform:translateY(-10px) scale(.78);
  color:var(--porta-prata);
}
/* filete que cresce no foco */
.porta-risco{
  position:absolute; left:1px; right:1px; bottom:1px; height:2px; border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,transparent,var(--porta-prata),transparent);
  transform:scaleX(0); transition:transform .3s var(--porta-curva); pointer-events:none;
}
.porta-campo input:focus ~ .porta-risco{transform:scaleX(1)}

.porta-olho{
  position:absolute; right:6px; top:7px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:8px; cursor:pointer;
  color:var(--porta-prata-sombra); transition:color .16s, background .16s;
}
.porta-olho:hover{color:var(--porta-prata); background:rgba(255,255,255,.07)}
.porta-olho svg{width:17px; height:17px}

.porta-caps{
  margin:-6px 0 12px; color:var(--porta-prata); font-size:10px; letter-spacing:.02em;
}

/* ── 10 · O BOTÃO — PRETO, com aresta de prata ───────────────────────── */
/* ⚠️ O usuário trocou o azul por preto (02/09/2026). Preto sobre grafite
   SOME: o que o desenha é a ARESTA de prata, mais um brilho interno no alto e
   um halo escuro que o levanta do fundo. Sem a aresta ele vira um buraco
   retangular no cartão. */
.porta-botao{
  position:relative; overflow:hidden;
  width:100%; height:48px; margin-top:6px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg, #191C22 0%, #0A0C0F 100%);
  border:1px solid rgba(226,236,250,.34);
  color:var(--porta-prata-luz);
  font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer;
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.16);
  transition:background .16s var(--porta-curva), border-color .16s var(--porta-curva),
             box-shadow .16s var(--porta-curva), transform .12s var(--porta-curva);
}
.porta-botao:hover{
  background:linear-gradient(180deg, #22262E 0%, #101318 100%);
  border-color:rgba(237,243,250,.58);
  box-shadow:0 12px 30px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.22);
}
.porta-botao:active{transform:translateY(1px)}
.porta-botao[disabled]{opacity:.72; cursor:progress}
.porta-botao .porta-seta{width:15px; height:15px; transition:transform .16s var(--porta-curva)}
.porta-botao:hover .porta-seta{transform:translateX(3px)}
/* brilho que atravessa o botão uma vez */
.porta-botao::after{
  content:""; position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-160%); pointer-events:none;
}
.porta-botao:hover::after{animation:porta-brilho .75s var(--porta-curva)}
@keyframes porta-brilho{to{transform:translateX(320%)}}
.porta-girando{
  width:15px; height:15px; border:2px solid rgba(226,236,250,.28);
  border-top-color:var(--porta-prata-luz); border-radius:50%;
  animation:porta-gira .7s linear infinite;
}
@keyframes porta-gira{to{transform:rotate(360deg)}}

/* ── 11 · RECADOS ────────────────────────────────────────────────────── */
/* O vermelho e o verde TRANSLÚCIDOS do sistema (13% de fundo, 30% de borda) —
   nunca uma cor sólida nova. */
.porta-erro, .porta-aviso{
  margin:0 0 14px; padding:9px 12px; border-radius:8px;
  font-size:10.5px; line-height:1.5;
}
.porta-erro{
  color:#FCA5A5; background:rgba(220,38,38,.15); border:1px solid rgba(248,113,113,.34);
  animation:porta-tremor .35s var(--porta-curva);
}
.porta-aviso{
  color:#86EFAC; background:rgba(5,150,105,.15); border:1px solid rgba(52,211,153,.30);
}
@keyframes porta-tremor{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-5px)} 44%{transform:translateX(4px)}
  66%{transform:translateX(-3px)} 88%{transform:translateX(2px)}
}
.porta-dica{
  margin:-4px 0 18px; text-align:center; line-height:1.55;
  color:var(--porta-prata-texto); font-size:10.5px;
}
.porta-ajuda{
  margin:18px 0 0; padding-top:14px; text-align:center;
  border-top:1px solid rgba(226,236,250,.12);
  color:var(--porta-prata-texto); font-size:10.5px; line-height:1.6;
}
/* ⚠️ O link tinha 119×14 de área clicável — abaixo do mínimo de 24px do
   WCAG 2.2 AA. O `inline-block` com padding dá o alvo sem mudar o desenho. */
.porta-ajuda a{
  display:inline-block; padding:5px 2px 4px; margin-top:2px;
  color:var(--porta-prata-luz); text-decoration:none;
  border-bottom:1px solid rgba(226,236,250,.46);
}
.porta-ajuda a:hover{border-bottom-color:var(--porta-prata-luz)}
/* ⚠️ Foco de TECLADO explícito: quem navega por Tab precisa ver onde está.
   `:focus-visible` só aparece para o teclado, não no clique do mouse. */
.porta-ajuda a:focus-visible,
.porta-olho:focus-visible,
.porta-botao:focus-visible,
.porta-campo input:focus-visible{
  outline:2px solid var(--porta-prata-luz); outline-offset:2px; border-radius:6px;
}


/* ── 12 · ENTRADA ESCALONADA ─────────────────────────────────────────── */
.porta-entra{opacity:0; transform:translateY(14px); animation:porta-sobe .55s var(--porta-curva) forwards}
.porta-entra.d1{animation-delay:.06s}
.porta-entra.d2{animation-delay:.12s}
.porta-entra.d3{animation-delay:.18s}
@keyframes porta-sobe{to{opacity:1; transform:none}}

/* ── 13 · CELULAR E TABLET ───────────────────────────────────────────── */
/* ── 15 · O CURSOR ────────────────────────────────────────────────────── */
/* Um ponto que acompanha e um anel que chega depois. O atraso é do JS
   (estatico/cursor.js); aqui mora só a aparência.
   ⚠️ `pointer-events:none` nos dois: sem isso o próprio cursor tapa o botão
   que ele está tentando apontar. */
.porta-cursor{position:fixed; inset:0; pointer-events:none; z-index:9}
.porta-cursor .ponto,
.porta-cursor .anel{
  position:fixed; top:0; left:0; pointer-events:none; opacity:0;
  border-radius:50%;
  transition:opacity .18s var(--porta-curva);
  will-change:transform;   /* avisa a placa: isto vai se mexer todo quadro */
}
.porta-cursor .ponto{
  width:8px; height:8px;
  background:var(--porta-prata-luz);
  box-shadow:0 0 10px rgba(255,255,255,.5);
}
.porta-cursor .anel{
  width:34px; height:34px;
  border:1px solid rgba(226,236,250,.55);
  /* ⚠️ Só a LARGURA e a COR entram na transição — nunca o `transform`, que o
     JS reescreve a cada quadro. Uma transição em cima dele brigaria com o
     `lerp` e o anel andaria aos solavancos. */
  transition:opacity .18s var(--porta-curva), width .22s var(--porta-curva),
             height .22s var(--porta-curva), border-color .22s var(--porta-curva),
             margin .22s var(--porta-curva);
}
/* sobre algo clicável o anel ABRE — é o aviso de que ali se pode agir */
.porta-cursor .anel.aberto{
  width:48px; height:48px; margin:-7px 0 0 -7px;
  border-color:rgba(237,243,250,.85);
}
/* e o clique o aperta */
.porta-cursor .anel.apertado{
  width:26px; height:26px; margin:4px 0 0 4px;
  border-color:rgba(237,243,250,.95);
}
/* ⚠️ O ponteiro do sistema só some quando o JS confirma que assumiu
   (`body.com-cursor`). Se o script falhar, a pessoa continua com o cursor de
   sempre em vez de ficar sem nenhum numa tela de senha. */
body.tela-porta.com-cursor,
body.tela-porta.com-cursor *{cursor:none}
/* ⚠️ …MENOS nos campos: numa tela de login, sumir com a barra de texto é pior
   do que qualquer ganho de estilo. */
body.tela-porta.com-cursor .porta-campo,
body.tela-porta.com-cursor .porta-campo *{cursor:auto}
body.tela-porta.com-cursor .porta-campo input{cursor:text}

@media (max-width:900px){
  body.tela-porta{justify-content:center; padding:40px 24px 56px; align-items:center}
  /* ⚠️ No estreito o cartão vai para o CENTRO, e a guardiã, se ficar no meio,
     passa a ser fundo ATRÁS do formulário: o rosto dela aparecia por trás da
     logo e o corpo atrás dos campos. Ela recua para o canto de baixo e vira
     uma presença, não um plano de fundo. */
  /* ⚠️ A OPACIDADE MORA NO CONTÊINER, não na imagem. Quando o blend foi
     movido para cá (para o `screen` alcançar o fundo da página), esta regra
     ficou apontando para dentro: o contêiner em .66 MULTIPLICAVA a imagem em
     .34 e o resultado real era .22 — um terço mais apagada do que o desenho
     pedia. Medido no celular antes de corrigir. */
  /* ⚠️ Em 72% ela ficava "absolutamente coberta" (usuário, 02/09/2026): com a
     moldura do arquivo, a caixa de 608px deixava só ~480px de figura e o cartão
     tapava tudo menos os ombros.

     ⚠️ CRESCER SOZINHO NÃO RESOLVE — no estreito o ROSTO briga com a LOGO, e
     as duas ocupam a mesma faixa de altura. Três posições foram medidas antes
     de fechar esta:
       • left:-30% → a figura acendia em x 294→372, bem na altura da logo:
         rosto e marca lado a lado, exatamente o que a regra proíbe;
       • left:-72% → pior: a logo caía EM CIMA do rosto;
       • bottom:-26% (descer em vez de recuar) → o rosto sumia atrás do vidro e
         sobrava só a cintura — ela deixava de ser alguém.
     Em -88% o rosto cabe inteiro na faixa livre à ESQUERDA da logo (a marca
     começa em x=115) e a balança reaparece à direita dela. O corpo desce por
     trás do cartão, que é de vidro — ali ele vira textura, não disputa.

     A opacidade sobe de .34 para .46: naquele valor a figura maior lia como
     mancha, não como estátua. */
  .porta-guardia{left:-88%; height:105%; bottom:-2%; opacity:.46}
  /* ⚠️ 120px era a medida da logo COM o nome. Só o símbolo mantém a mesma
     proporção que o usuário aprovou no computador (208/168 = 1,24). */
  .porta-marca .peca{width:160px; height:160px}
  .porta-marca::before{width:268px; height:268px}
  /* mais luz no vidro: no celular ele fica sobre a parte clara do fundo */
  .porta-vidro{
    -webkit-backdrop-filter:blur(20px) saturate(120%);
            backdrop-filter:blur(20px) saturate(120%);
  }
}
/* ⚠️ TELA BAIXA: encolher em vez de rolar — a mesma regra do menu lateral.
   A marca de 160px mais a folga de 22px custaram 34px de rolagem vertical num
   aparelho de 568px de altura (medido). Num login, rolar para achar o botão
   Entrar é um defeito; a marca cede primeiro, porque o formulário é o que a
   pessoa veio fazer. */
@media (max-height:760px){
  .porta-marca .peca{width:140px; height:140px}
  .porta-marca::before{width:236px; height:236px}
  .porta-marca{margin-bottom:16px}
  body.tela-porta{padding-top:22px; padding-bottom:30px}
}
@media (max-height:620px){
  .porta-marca .peca{width:120px; height:120px}
  .porta-marca::before{width:210px; height:210px}
  .porta-marca{margin-bottom:12px}
  body.tela-porta{padding-top:18px; padding-bottom:24px}
}
/* ⚠️ O PRIMEIRO ACESSO tem QUATRO campos e ainda rola num aparelho de 667px —
   já rolava antes desta revisão, e o cartão simplesmente não cabe ali. É a
   tela que se usa UMA vez na vida; o que não pode rolar é o /entrar, que é a
   do dia a dia, e esse cabe em todas as alturas medidas (568 a 900). */

@media (max-width:430px){
  body.tela-porta{padding:28px 16px 48px}
  .porta-vidro{padding:22px 18px; border-radius:15px}
  .porta-vidro h1{font-size:19px}
  /* ⚠️ No celular o campo e o botão crescem: abaixo de 46px o dedo erra. */
  .porta-campo input{height:52px; font-size:13.5px}
  .porta-botao{height:50px; font-size:13.5px}
  .porta-olho{top:10px}
}

/* ── 14 · FREIO DE MOVIMENTO ─────────────────────────────────────────── */
/* ⚠️ Obrigatório: quem liga "reduzir movimento" no sistema tem enjoo ou
   sensibilidade de verdade. Nada se mexe — e a tela continua COMPLETA. */
@media (prefers-reduced-motion: reduce){
  body.tela-porta::before,
  .porta-botao::after,
  .porta-erro,
  .porta-entra{animation:none !important}
  .porta-entra{opacity:1; transform:none}
  .porta-marca .peca, .porta-marca .sombra,
  .porta-campo input, .porta-campo label, .porta-risco,
  .porta-botao, .porta-botao .porta-seta{transition:none !important}
}


/* tela de "sem acesso" — quando a pessoa abre algo fora da permissão dela */
.sem-perm{
  max-width:460px; margin:38px auto; padding:26px 28px; text-align:center;
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
}
.sem-perm h2{color:var(--texto); font-size:15px; font-weight:700; margin-bottom:8px}
.sem-perm p{color:var(--texto-med); font-size:10.5px; line-height:1.6}
.sem-perm-dica{color:var(--texto-light) !important; margin-top:6px}
.sem-perm .btn-novo{display:inline-block; margin-top:16px}

/* ═══════════════════════════════════════════════════════════════════════
   EQUIPE E ACESSOS (02/09/2026)
   ═══════════════════════════════════════════════════════════════════════ */
.eq-lista{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.eq-pessoa{
  position:relative; display:flex; align-items:center; gap:10px;
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  padding:10px 13px;
}
/* a inicial no lugar da foto: identifica de relance sem pedir uma imagem */
.eq-inicial{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:0 0 32px; border-radius:16px;
  background:var(--superficie2); color:var(--texto-med);
  font-size:12px; font-weight:700;
}
.eq-id{flex:1; min-width:0}
.eq-nome{
  display:block; color:var(--texto); font-size:11.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.eq-voce{color:var(--texto-light); font-style:normal; font-weight:400}
.eq-sub{
  display:block; margin-top:1px; color:var(--texto-light); font-size:9px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.eq-selos{display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  position:relative; z-index:2}
.eq-marcas{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  min-height:32px}

/* a grade de permissões: uma linha por área, uma bolinha por nível */
.perm-tabela{
  border:1px solid var(--borda); border-radius:8px; overflow:hidden;
  background:var(--cartao); margin-top:4px;
}
.perm-cabec, .perm-linha{
  display:grid; grid-template-columns:1fr repeat(4, 78px);
  align-items:center; gap:0;
}
.perm-cabec{
  background:var(--superficie2); border-bottom:1px solid var(--borda);
  padding:7px 12px;
}
.perm-cabec .perm-col, .perm-cabec .perm-area{
  color:var(--texto-med); font-size:8.5px; font-weight:600; text-align:center;
}
.perm-cabec .perm-area{text-align:left}
.perm-linha{padding:7px 12px; border-bottom:1px solid var(--borda-soft)}
.perm-linha:last-child{border-bottom:0}
.perm-linha:hover{background:var(--fundo)}
/* financeiro e equipe são as áreas sensíveis: ganham um traço à esquerda */
.perm-linha.destaque{box-shadow:inset 3px 0 0 rgba(202,138,4,.45)}
.perm-linha .perm-area{color:var(--texto); font-size:10px; font-weight:500}
.perm-col{display:flex; align-items:center; justify-content:center; cursor:pointer}
.perm-col input{position:absolute; opacity:0; width:0; height:0}
.perm-bola{
  width:15px; height:15px; border-radius:8px;
  border:1.5px solid var(--borda); background:var(--cartao);
}
.perm-col:hover .perm-bola{border-color:var(--texto-light)}
.perm-col input:checked + .perm-bola{
  border-color:var(--azul); background:var(--azul);
  box-shadow:inset 0 0 0 2.5px var(--cartao);
}
.perm-col input:disabled + .perm-bola{opacity:.45; cursor:not-allowed}
@media (max-width:760px){
  /* no estreito a grade vira 4 colunas menores — o rótulo da área quebra */
  .perm-cabec, .perm-linha{grid-template-columns:1fr repeat(4, 48px)}
  .perm-cabec .perm-col{font-size:7.5px}
  .perm-linha .perm-area{font-size:9.5px}
}

/* rodapé do menu: quem está no sistema, a data e a saída */
.rodape-side .rs-nome{
  display:block; color:var(--texto-med); font-size:9.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rodape-side .rs-data{display:block; margin-top:1px}
.rodape-side .rs-acoes{
  display:flex; justify-content:center; gap:10px; margin-top:6px;
  padding-top:6px; border-top:1px solid var(--borda-soft);
}
.rodape-side .rs-acoes a{
  color:var(--texto-light); font-size:8.5px; font-weight:600;
  text-decoration:none;
}
.rodape-side .rs-acoes a:hover{color:var(--azul)}

/* ⚠️ A dica em itálico precisa de folga: sem ela o rótulo do campo seguinte
   cola no texto e parece parte da frase. */
.f-grupo .f-dica{margin-bottom:12px}
/* ⚠️ Numa tela larga, colunas grudadas na borda direita deixam o olho perdido
   entre o nome da área e a bolinha certa. A grade tem largura máxima e as
   linhas ficam legíveis de ponta a ponta. */
.perm-tabela{max-width:720px}

/* ═══════════════════════════════════════════════════════════════════════
   LER DOCUMENTO (PDF) — o que o sistema leu, antes de virar tarefa
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ Prazo processual errado custa o direito do cliente: o aviso usa o âmbar
   translúcido das pílulas e vem ANTES dos campos, não depois. */
.doc-aviso{
  margin:12px 0; padding:10px 13px; border-radius:6px;
  background:rgba(202,138,4,.13); border:1px solid rgba(202,138,4,.30);
  color:#92400E; font-size:10px; line-height:1.6;
}
.doc-campos{display:flex; flex-direction:column; gap:1px}
.doc-linha{
  display:flex; gap:12px; padding:6px 0;
  border-bottom:1px solid var(--borda-soft);
}
.doc-linha:last-child{border-bottom:0}
.doc-rot{
  width:132px; flex:0 0 132px; color:var(--texto-med);
  font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.3px;
}
.doc-val{flex:1; min-width:0; color:var(--texto); font-size:10.5px;
  word-break:break-word}
.doc-obs{color:var(--texto-med); font-size:10px; line-height:1.6;
  white-space:pre-wrap}
.doc-trecho{
  max-height:220px; overflow:auto; padding:10px 12px;
  background:var(--superficie2); border:1px solid var(--borda); border-radius:6px;
  color:var(--texto-med); font-size:9.5px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
  font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* reiteração: a decisão vem no TOPO, antes de qualquer outra coisa */
.doc-reiteracao{
  margin:12px 0 16px; padding:14px 16px; border-radius:8px;
  background:var(--cartao); border:1px solid rgba(124,58,237,.30);
  box-shadow:inset 3px 0 0 rgba(124,58,237,.45);
}
.doc-reiteracao h2{color:var(--texto); font-size:12.5px; font-weight:700;
  margin-bottom:6px}
.doc-reiteracao p{color:var(--texto-med); font-size:10px; line-height:1.6}
.doc-existente{
  margin:8px 0; padding:9px 11px; border-radius:6px;
  background:var(--fundo); border:1px solid var(--borda);
}
.doc-ex-desc{display:block; color:var(--texto); font-size:11px; font-weight:600}
.doc-ex-meta{display:block; margin-top:2px; color:var(--texto-light); font-size:9px}
.doc-acoes{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px}
.doc-acoes form{display:inline}
@media (max-width:640px){
  .doc-linha{flex-direction:column; gap:2px}
  .doc-rot{width:auto; flex:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   AUDITORIA DE CELULAR E TABLET (02/09/2026)
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠️ Quatro botões com rótulo somavam 437px numa tela de 390: o título
   "Tarefas" ficava ESCONDIDO atrás do primeiro botão e o "+" saía da tela.
   No estreito o botão secundário fica SÓ COM O DESENHO — o balão de ajuda
   continua dizendo o que ele faz. */
@media (max-width:560px){
  .header-acoes .btn-secundario .rot-bt{display:none}
  .header-acoes .btn-secundario{
    /* ⚠️ `padding:0` sem altura deixava o botão com 18px — alto demais para o
       dedo errar, e visualmente mais baixo que o "+ Nova" ao lado. */
    width:32px; height:32px; padding:0; flex:0 0 32px;
    justify-content:center; align-items:center;
  }
  .header-acoes .btn-secundario svg,
  .header-acoes .btn-secundario .ico-png{width:16px; height:16px; flex:0 0 16px}
}

/* ⚠️ Quatro abas com padding de 15px somavam 442px numa tela de 390: elas
   quebravam em duas linhas e "Compromissos" ficava solto embaixo, parecendo
   desalinhado. Apertando o padding (a fonte continua legível em 11.5px) as
   quatro cabem numa linha só. */
@media (max-width:430px){
  .abas a{padding:9px 11px; font-size:11.5px}
}
/* ⚠️ A coluna do quadro ocupava 84%: sobrava um pedaço da coluna seguinte em
   que metade das palavras aparecia cortada ("Atençã", "ACO", "Proc") — dava a
   impressão de defeito, não de "role para o lado". Com 88% a coluna atual lê
   melhor e a seguinte vira uma faixa fina, que é a dica certa de rolagem. */
@media (max-width:900px){
  .kb-col{flex:0 0 88%}
}

/* ⚠️ "Minha senha" e "Sair" tinham 13px de ALTURA de área clicável — medido em
   celular e tablet. Com o dedo é impossível acertar sem errar o vizinho. Viram
   dois alvos de 30px, separados por uma barra fina. */
.rodape-side .rs-acoes{gap:0}
.rodape-side .rs-acoes a{
  flex:1 1 0; min-height:30px; display:flex; align-items:center;
  justify-content:center; border-radius:5px;
}
.rodape-side .rs-acoes a + a{border-left:1px solid var(--borda-soft)}
.rodape-side .rs-acoes a:hover{background:var(--superficie2)}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET (768–1279px) — o Painel em GRADE de três colunas
   ⚠️ Vem no FIM do arquivo de propósito: a regra de ≤900px também mexe na
   `.linha-topo` e, se esta viesse antes, seria vencida entre 768 e 900.
   ⚠️ Cinco cartões numa linha davam 113px a cada um em 950px e o rótulo
   quebrava NO MEIO da palavra ("atrasa/das", "pende/ntes"). Em 768–900 o
   `flex-wrap` deixava o último cartão sozinho com 876px, enquanto os outros
   tinham 287px — desigual. Grade de três colunas resolve os dois: seis
   quadros (a data é o sexto) em duas linhas certinhas, todos do mesmo
   tamanho. Compactar é reorganizar, não espremer.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:600px) and (max-width:1279px){
  .linha-topo{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
    align-items:stretch; margin-bottom:14px;
  }
  .linha-topo .stat-card, .linha-topo .data-card{
    width:auto; min-width:0; flex:none; height:auto; min-height:104px;
  }
  .linha-topo .data-card{
    background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  }
}

/* ⚠️ Abaixo de 600px o `flex-wrap` deixava o último quadro SOZINHO ocupando a
   linha inteira (676px em 700, 576px em 600), enquanto os outros tinham 220px.
   Grade de duas colunas: seis quadros em três linhas iguais — que é o arranjo
   que o usuário fechou para o celular (a data é o sexto quadro). */
@media (max-width:599px){
  .linha-topo{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
    align-items:stretch;
  }
  .linha-topo .stat-card, .linha-topo .data-card{
    width:auto; min-width:0; flex:none; height:auto; min-height:104px;
  }
}

/* ⚠️ No tablet o quadro da data ficou largo (259px) e a faixa azul do MÊS
   esticava por tudo — uma barra de 500px só para escrever "Set". Ela volta à
   largura do app (82px), centrada, e o quadro fica com a mesma leitura dos
   outros cinco. */
@media (min-width:600px) and (max-width:1279px){
  .linha-topo .data-card .mes{width:82px; border-radius:6px}
  .linha-topo .data-card{gap:4px; justify-content:center}
}
/* ═══════════════════════════════════════════════════════════════════════
   TABLET DEITADO (901–1279px) — A ESCALA DE LEITURA, NÃO A DO COMPUTADOR
   (auditoria de 02/09/2026, a pedido do usuário)

   ⚠️ O DEFEITO: a escala de leitura parava em 900px. De 901 a 1279 — que é o
   iPad em paisagem — tudo voltava à escala DENSA do aplicativo do Mac.
   Resultado medido: no iPad o texto ficava MENOR que no celular.
       .kb-rod  9,5px no celular → 7,5px no iPad
       .kb-tit 11,5px no celular →   9px no iPad
       .cli-nome 12px no celular → 10,5px no iPad
   Não faz sentido: o iPad tem MAIS espaço que o celular, e é segurado mais
   longe dos olhos. Era o que o usuário descreveu — "muita coisa tentou manter
   a proporcionalidade da versão para computador, e cada versão merece a sua".

   Este bloco repete APENAS a tipografia da faixa de toque (font-size,
   line-height, font-weight). Nada de layout: o tablet deitado mantém o menu
   fixo, as colunas e o arranjo do computador — só o TEXTO ganha o tamanho de
   quem lê numa tela de toque.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px) and (max-width:1279px){
  /* ⚠️ Estas duas ficaram de fora da extração automática: o seletor já
     aparecera antes com outra declaração e o dedupe as descartou. São
     conteúdo de leitura — o título do card e o botão da Agenda. */
  .c-titulo{font-size:12px; line-height:1.3}
  .bt-reagendar{font-size:10.5px}
  .header h1{font-size:20px}
  .btn-novo{font-size:11.5px}
  .btn-secundario{font-size:11.5px}
  .data-card .mes{line-height:22px; font-size:11px}
  .data-card .dia{font-size:26px; line-height:1.2}
  .data-card .sem{font-size:9.5px}
  .stat-card .titulo{font-size:11.5px}
  .donut{font-size:11.5px}
  .legendas div{font-size:10px; line-height:1.3}
  .legendas b{font-size:11px}
  .legendas span{font-size:10px}
  .painel-cabec h2{font-size:13px}
  .escopos a, .escopos button{font-size:10.5px}
  .grupo .rotulo{font-size:11px}
  .bloco .pct{font-size:13px}
  .bloco .lbl{font-size:8.5px; line-height:1.2}
  .abas a{font-size:12.5px}
  .campo-busca input{font-size:12.5px}
  .btn-limpar{font-size:12px}
  .c-meta{font-size:9.5px}
  .c-base .prazo{font-size:10px}
  .pilula{font-size:9.5px}
  .pilula.selo{font-size:9px}
  .pilula.selo.mini{font-size:8.5px}
  .bd{font-size:9.5px}
  .selo-concl{font-size:9.5px}
  .bt-acao{font-size:12px}
  .det-titulo{font-size:16.5px}
  .form-titulo{font-size:16px}
  .ag-titulo{font-size:14px}
  .ag-barra .bt-acao{font-size:10.5px}
  .ag-barra form .btn-novo{font-size:10.5px}
  .ag-tipo{font-size:9px}
  .ag-origem{font-size:10px}
  .ag-titulo-item{font-size:12px; line-height:1.3}
  .ag-base{font-size:10px}
  .campo .rot{font-size:9.5px}
  .campo .val{font-size:12px}
  .secao-det h2{font-size:9.5px}
  .linha-vinc .rot{font-size:9px}
  .linha-vinc span:last-child{font-size:12px}
  .item-sub span, .item-anx .nome, .obs-txt{font-size:12px}
  .obs-cab b{font-size:11px}
  .obs-cab span{font-size:10px}
  .linha-nova input, .bt-add{font-size:12px}
  .bt-flu{font-size:11.5px}
  .det-hist h2{font-size:12.5px}
  .ev-cab b{font-size:11px}
  .ev-cab span{font-size:9.5px}
  .ev-txt{font-size:11.5px}
  .ev-user{font-size:10px}
  .voltar{font-size:12px}
  .f-campo > span{font-size:9.5px}
  .f-campo input, .f-campo select, .f-campo textarea{font-size:12.5px}
  .f-check{font-size:12px}
  .f-secao h2{font-size:9.5px}
  .f-secao textarea{font-size:12.5px}
  .cli-nome{font-size:12px}
  .cli-info, .cli-proc{font-size:10px}
  .ficha-l .rot{font-size:9.5px}
  .ficha-l .val{font-size:11.5px}
  .aba-f{font-size:12px}
  .header h1.t22{font-size:20px}
  .header h1.t14{font-size:13.5px}
  .header h1.t13{font-size:13px}
  .mov-dia{font-size:12px}
  .mov-nome{font-size:12px}
  .proc-topo{font-size:10px}
  .proc-polos{font-size:11px}
  .proc-mov{font-size:10px}
  .rot-ro{font-size:9.5px}
  .val-ro{font-size:12px}
  .mov-txt{font-size:11.5px}
  .mov-data, .mov-org{font-size:10px}
  .sel-situacao{font-size:12.5px}
  .sync-ts{font-size:10px}
  .kb-tit{font-size:11.5px}
  .kb-cnt{font-size:10.5px}
  .kb-meta{font-size:9.5px}
  .kb-txt{font-size:11.5px}
  .kb-rod{font-size:9.5px}
  .com-num{font-size:12px}
  .teor{font-size:11.5px}
  .selo-nl{font-size:10.5px}
  .fin-tit{font-size:9.5px}
  .fin-val{font-size:14px}
  .fin-valor{font-size:12px}
  .rot-tit{font-size:12.5px}
  .rot-info{font-size:10.5px}
  .rot-desc{font-size:10px}
  .dica-rot{font-size:11px}
  .est-tit{font-size:10px}
  .est-atual{font-size:17px}
  .est-ant i{font-size:9px}
  .est-ant b{font-size:11px}
  .est-diff{font-size:9.5px}
  .per{font-size:11.5px}
  .graf-rot{font-size:9px}
  .graf-legenda{font-size:10px}
  .graf-tit{font-size:12.5px}
  .secao-det textarea{font-size:12px}
  .linha-nova input[type=file]{font-size:11px}
  .bt-parte{font-size:11px}
  .cfg-tit{font-size:12.5px}
  .aviso-ok{font-size:11.5px}
  .dica{font-size:11px}
  .lote-meta{font-size:10px}
  .lote-cont{font-size:10.5px}
  .lote-rot{font-size:11px}
  .bt-atalho b{font-size:11px}
  .bt-atalho i{font-size:9.5px}
  #balao{font-size:11.5px}
  .ev-meta{font-size:9.5px}
  .ev-titulo{font-size:12px}
  .ev-data, .ev-hora{font-size:10px}
  .card-evento .local-ev{font-size:10px}
  .ev-info{font-size:10px}
  .ev-valor{font-size:10.5px}
  .btn-perigo{font-size:11.5px}
  .cal-cab span{font-size:9px}
  .cal-num{font-size:11px; font-weight:600}
  .cal-conta{font-size:8.5px; font-weight:700}
  .sem-cab{font-size:10.5px}
  .cal-semana .cal-chip{font-size:9.5px}
  .linha-membro input{font-size:12px}
  .lote-cabec h3{font-size:13.5px}
  .lote-sub{font-size:11px}
  .sf-data > span{font-size:11.5px}
  .sf-data input[type=date]{font-size:12px}
  .sobre-carregando{font-size:12px}
  .cli-tipo{font-size:10px}
  .cli-meio .pilula.selo.mini, .proc-polos .pilula.selo.mini, .cli-base .pilula.selo.mini{font-size:8px}
  .chip-p{font-size:11px}
  .marca-resp{font-size:11px}
  .com-num .pilula.selo.mini{font-size:8px}
  .fin-resumo.seis .fin-val{font-size:13px}
  .fin-resumo.seis .fin-tit{font-size:9px}
  .fin-barra-nome{font-size:9.5px}
  .fin-barra-val{font-size:9.5px}
  .fin-logo{font-size:9px}
  .fin-inst-saldo{font-size:15px}
  .fin-meta-tit{font-size:10.5px}
  .fin-marca{font-size:9px}
  .fin-marca .fin-logo{font-size:7.5px}
}

/* ⚠️ No celular o "(você)" encostava na pílula "Dono" (medido: 2×10px de
   sobreposição) — o nome é `flex:1` e não sobrava largura. Os selos ganham a
   linha de baixo quando o cartão fica estreito, em vez de disputar espaço. */
@media (max-width:560px){
  .eq-pessoa{flex-wrap:wrap; row-gap:8px}
  /* a leitura é: inicial · nome+função · ações à direita  /  selos embaixo.
     ⚠️ As ações NÃO podem cair entre o nome e os selos — quebram a frase. */
  .eq-id{flex:1 1 0; min-width:0; order:2}
  .eq-pessoa .c-acoes{order:3; margin-left:auto}
  .eq-selos{flex:1 1 100%; order:4; margin-left:42px}
}

/* ═══════════════════════════════════════════════════════════════════════
   ÁREA DO DEDO — em aparelho de toque (≤1279px)
   ⚠️ Medido na auditoria: caixa de marcar com 15×15, aba com 23px de altura,
   ícone de ação com 26×24 e dia do calendário com 28×22. Com o dedo, alvo
   abaixo de ~28px erra o vizinho.
   ⚠️ O que cresce é a ÁREA CLICÁVEL, não o desenho: o ícone continua com o
   mesmo tamanho, a fonte da aba continua a mesma. A compactação (quantos
   cards cabem na primeira tela) não muda — conferido medindo a altura das
   telas antes e depois.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1279px) and (pointer:coarse), (max-width:900px){
  /* ⚠️ O ícone de ação do card (26×24) NÃO cresce: é a escala que o usuário
     fechou, e aumentá-lo somava 4px a CADA card — a lista de tarefas engordava
     3,8% (medido: 12.538px → 13.018px). Alvo largo (26px) o dedo acerta; o que
     não pode é ser estreito NOS DOIS lados. Fica como está. */
  /* aba: mais 2px em cima e embaixo (23px → 27px) */
  .abas a{padding-top:11px; padding-bottom:11px}
  /* caixa de marcar: o quadrado continua 15px, mas o toque pega 28px */
  .f-check{min-height:28px; display:inline-flex; align-items:center}
  .f-check input[type=checkbox], .f-check input[type=radio]{
    width:17px; height:17px; flex:0 0 17px;
  }
  /* dia do calendário do Painel */
  .cal-grade a.d, .cal a.d{min-height:28px}
  /* botão de escolha (âmbito, tipo, função) */
  .bt-op{min-height:30px}
  /* a bolinha da grade de permissões: alvo maior sem mudar o desenho */
  .perm-col{min-height:30px}
}

/* ⚠️ No celular a barra de ações quebra em duas linhas e a pílula de situação
   ("Concluída") caía SOZINHA na segunda linha, encostada na borda direita —
   solta, sem ligação visual com os botões de cima. Ela passa a acompanhar os
   botões, alinhada com eles, como faz no computador. */
@media (max-width:560px){
  .det-barra{row-gap:8px}
  .det-barra .selo-topo{margin-left:0}
}

/* ⚠️ Alvos que a auditoria encontrou abaixo de 26px em aparelho de toque.
   Só a ALTURA cresce — a largura e a fonte continuam as mesmas, então a
   compactação e o desenho não mudam. */
@media (max-width:1279px) and (pointer:coarse), (max-width:900px){
  /* segmentos: Dia/Semana/Mês, Lista/Calendário, Conjunto/Pessoal/Escritório */
  .segmentos a{min-height:30px; display:flex; align-items:center; justify-content:center}
  /* botão principal da barra (Sincronizar Calendário, Reagendar) */
  .btn-novo, .bt-acao, .bt-reagendar{min-height:32px}
  /* botão de urgência do card (22×22 → 26×26, sem mexer no ícone) */
  .btn-prio{width:26px; height:26px}
  /* caixa de marcar solta, fora de um .f-check */
  input[type=checkbox], input[type=radio]{width:18px; height:18px}
}

/* ── AS LOGOS DAS INSTITUIÇÕES ───────────────────────────────────────── */
/* ⚠️ `auto-fill` com mínimo de 180px: a grade se ajusta sozinha da largura do
   cartão sobreposto (352px, uma coluna) à da página inteira, sem media query. */
.fin-logos-grade{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
  gap:10px; margin:8px 0 22px;
}
.fin-logo-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border:1px solid var(--borda); border-radius:8px;
  background:#FFFFFF;
}
/* ⚠️ `overflow-wrap:break-word` quebrava NO MEIO da palavra quando o espaço
   apertava — "Sant/ande/r", "Mast/ercar/d". Nome partido não identifica banco
   nenhum. Aqui a quebra é só entre palavras (`normal`) e o card ficou mais
   largo para caber: o nome tem prioridade sobre os botões. */
.fin-logo-nome{flex:1 1 auto; min-width:64px; font-size:10.5px; font-weight:600;
               line-height:1.25; overflow-wrap:normal; word-break:normal}
.fin-logo-acoes{display:flex; gap:5px; flex:0 0 auto}
.fin-logo-acoes .bt-flu{font-size:9px; padding:3px 8px; height:22px}

/* ── O "+ NOVO" DO PAINEL ─────────────────────────────────────────────── */
/* ⚠️ `position:relative` no pai é o que prende a lista ao botão; sem ele ela
   se solta e vai para o canto da página. */
.novo-menu{position:relative; margin-left:auto}
.novo-lista{
  position:absolute; top:calc(100% + 6px); right:0; z-index:20;
  min-width:186px; padding:5px;
  background:var(--cartao); border:1px solid var(--borda); border-radius:8px;
  box-shadow:0 10px 28px rgba(15,23,42,.14);
  display:flex; flex-direction:column; gap:1px;
}
.novo-lista a{
  display:block; padding:8px 11px; border-radius:6px;
  color:var(--texto); font-size:11px; font-weight:600; text-decoration:none;
}
.novo-lista a:hover{background:var(--superficie2)}
/* ⚠️ `[hidden]` precisa vencer o `display:flex` da classe — é a mesma pegadinha
   que já escondeu blocos condicionais em outras telas. */
.novo-lista[hidden]{display:none !important}