/* =====================================================================
   UP ADV — folha de estilo (identidade premium)
   Direção: superfícies claras e arejadas, um único acento violeta usado
   com parcimônia, tipografia DM Sans com hierarquia firme, cantos 12–16px,
   sombras baixas e difusas. Cor semântica (verde / âmbar / vermelho) é
   separada do acento e só aparece onde há estado.
   Os nomes de token do protótipo original foram mantidos para que as
   telas continuem funcionando; os valores é que mudaram.
   ===================================================================== */

/* ── TIPOGRAFIA ────────────────────────────────────────────────────────
   DM Sans auto-hospedada (SIL Open Font License 1.1). Antes vinha do Google
   Fonts e a CSP da API (`style-src 'self'`) bloqueava a folha: em produção o
   sistema inteiro caía em Segoe UI. Servindo daqui, a fonte carrega e nenhum
   dado de quem usa o sistema sai para terceiro. Arquivo variável: um só
   recurso cobre os pesos 400–700. */
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('../assets/fontes/dm-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;
  src:url('../assets/fontes/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* acento */
  --brand:#673de6;
  --brand-600:#5025d1;
  --brand-700:#3f1ba8;
  --brand-100:#ebe4ff;
  --brand-50:#f5f2ff;
  --meteorite:#2f1c6a;
  --meteorite-deep:#1f1247;
  /* tinta e neutros (cinzas com viés frio-violeta)
     --muted e --muted-2 foram escurecidos na auditoria de 16/09/2026: os valores
     antigos (#6d7081 / #9a9cb0) davam 2,5 a 2,7:1 em todo estado vazio, cabeçalho
     de tabela e placeholder — abaixo do mínimo AA de 4,5:1. */
  --ink:#1d1e20;
  --ink-2:#36344d;
  --muted:#5f6275;    /* 5,9:1 no branco · 5,4:1 sobre --bg */
  --muted-2:#6b6e85;  /* 5,0:1 no branco · 4,6:1 sobre --bg */
  --line:#e2e3ec;
  --line-2:#eeeff5;
  --bg:#f4f4fa;
  --surface:#ffffff;
  /* semântica — o par claro (--ok, --warn, --bad) é de PREENCHIMENTO (barras,
     pontos, bordas, badges). Para TEXTO sobre o fundo tingido correspondente
     use sempre o par -texto, que é o único que passa em contraste AA. */
  --ok:#00a37e;   --ok-bg:#e3f7f1;   --ok-line:#bfece0;   --ok-texto:#0a7259;    /* 5,3:1 sobre --ok-bg */
  --warn:#b57500; --warn-bg:#fff4d6; --warn-line:#f4dfa3; --warn-texto:#7d5200;  /* 6,2:1 sobre --warn-bg */
  --bad:#d6336c;  --bad-bg:#fde8ef;  --bad-line:#f7c3d4;  --bad-texto:#b01d52;   /* 5,7:1 sobre --bad-bg */
  /* aliases do protótipo */
  --navy-900:var(--ink);
  --navy-800:var(--meteorite);
  --navy-700:var(--ink-2);
  --blue-600:var(--brand-600);
  --blue-500:var(--brand);
  --blue-100:var(--brand-100);
  --green:var(--ok);
  --amber:var(--warn);
  --red:var(--bad);
  --gray-50:var(--bg);
  --gray-100:var(--line-2);
  --gray-200:var(--line);
  --gray-400:var(--muted-2);
  --gray-600:var(--muted);
  --gray-800:var(--ink-2);
  --white:var(--surface);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(29,30,32,.04), 0 4px 16px rgba(47,28,106,.06);
  --shadow-lg:0 12px 40px rgba(47,28,106,.14);
  /* O anel antigo (violeta a 18%) resultava em ~1,3:1 contra o branco: existia
     e não se enxergava. Agora é sólido — 6,2:1 — com uma borda clara por dentro
     para continuar visível sobre a barra lateral escura. */
  --ring:0 0 0 2px var(--surface),0 0 0 4px var(--brand);
  --font:'DM Sans','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink-2);
  display:flex;min-height:100vh;font-size:14px;line-height:1.45;
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button,input,select,textarea{font-family:inherit;}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.01em;text-wrap:balance;}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ───────────────────────────── LOGIN ───────────────────────────── */
#login{
  position:fixed;inset:0;z-index:100;display:none;
  background:
    radial-gradient(900px 600px at 80% -10%,rgba(103,61,230,.55),transparent 60%),
    radial-gradient(700px 500px at -10% 110%,rgba(103,61,230,.35),transparent 60%),
    linear-gradient(135deg,var(--meteorite-deep),var(--meteorite) 55%,#3b2385);
  align-items:center;justify-content:center;gap:64px;padding:32px;
}
#login.on{display:flex;}
.login-hero{color:#fff;max-width:440px;}
.login-hero .eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c9b8ff;font-weight:700;margin-bottom:18px;}
.login-hero h2{color:#fff;font-size:40px;line-height:1.08;font-weight:700;letter-spacing:-.02em;margin-bottom:18px;}
.login-hero p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.78);max-width:400px;}
.login-hero ul{margin-top:26px;display:grid;gap:12px;}
.login-hero li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.9);}
.login-hero li::before{content:'';width:22px;height:22px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;}
.login-box{
  background:var(--surface);border-radius:20px;padding:36px 34px;width:400px;
  box-shadow:0 30px 80px rgba(15,8,40,.45);
}
.login-box .brand{border:none;padding:0 0 22px;}
.login-box label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:14px 0 6px;}
.login-box input{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:14.5px;outline:none;background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.login-box input:focus{border-color:var(--brand);box-shadow:var(--ring);}
.login-box .btn-primary{width:100%;justify-content:center;margin-top:22px;padding:13px;font-size:15px;border-radius:12px;}
.login-erro{color:var(--bad-texto);font-size:12.5px;margin-top:12px;min-height:18px;font-weight:600;}
.login-dica{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.55;}
@media(max-width:900px){.login-hero{display:none;}}

/* ───────────────────────────── SIDEBAR ─────────────────────────── */
.sidebar{
  width:248px;background:linear-gradient(180deg,var(--meteorite) 0%,var(--meteorite-deep) 100%);
  color:#d9d3f0;display:flex;flex-direction:column;flex-shrink:0;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08);}
.brand .marca{width:170px;max-width:100%;height:auto;display:block;}
.brand .marca-composta{display:flex;align-items:center;gap:10px;width:auto;}
.brand .marca-composta .marca-simbolo{width:34px;height:34px;display:block;flex:0 0 auto;}
.brand .marca-composta .marca-nome{width:104px;height:auto;display:block;}
.brand .marca-sub{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b9a8f2;}
.brand .marca-mini{display:none;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),#8b6cf5);color:#fff;font-weight:700;font-size:13px;align-items:center;justify-content:center;letter-spacing:.04em;box-shadow:0 6px 16px rgba(103,61,230,.45);}
.login-box .brand{align-items:center;}
.login-box .brand .marca{width:150px;}
.login-box .brand .marca-sub{color:var(--muted);text-align:center;}
.login-hero .marca-hero{width:330px;height:auto;display:block;margin-bottom:28px;}
.brand .logo{
  width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),#8b6cf5);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;letter-spacing:.04em;flex-shrink:0;
  box-shadow:0 6px 16px rgba(103,61,230,.45);
}
.brand .name{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.1;}
.brand .name small{display:block;font-size:10px;font-weight:600;letter-spacing:.12em;color:#b9a8f2;text-transform:uppercase;margin-top:3px;}
.login-box .brand .name small{color:var(--muted);}
.brand .name span{color:#b9a8f2;}
.login-box .brand .name{color:var(--ink);}
.nav{flex:1;padding:14px 12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;}
.nav-section-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.42);padding:16px 12px 8px;font-weight:700;}
/* <button>, não <div>: os 17 itens da navegação não eram alcançáveis por teclado
   nem anunciados por leitor de tela. O estado ativo agora também é aria-current. */
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  color:#cfc7ea;font-size:13.5px;font-weight:500;cursor:pointer;margin-bottom:2px;
  width:100%;text-align:left;border:0;background:transparent;font-family:inherit;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.nav-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--meteorite-deep),0 0 0 4px #fff;}
.nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.8;}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-item.active{background:#fff;color:var(--brand-600);font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.18);}
.nav-item.active svg{opacity:1;color:var(--brand);}
.nav-badge{margin-left:auto;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 8px;min-width:22px;text-align:center;}
.nav-badge.quieto{background:rgba(255,255,255,.14);color:#e6e1f7;}
.nav-item.active .nav-badge.quieto{background:var(--brand-100);color:var(--brand-600);}
.sidebar-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;}
.avatar{
  width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#8b6cf5);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0;
}
.sidebar-footer .who{line-height:1.25;flex:1;min-width:0;}
.sidebar-footer .who b{display:block;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
.sidebar-footer .who small{color:rgba(255,255,255,.55);font-size:11px;}
.sair{color:rgba(255,255,255,.72);cursor:pointer;font-size:11.5px;font-weight:600;background:none;border:0;font-family:inherit;padding:4px 6px;border-radius:7px;}
.sair:hover{color:#fff;background:rgba(255,255,255,.1);}
.sair:focus-visible{outline:none;box-shadow:0 0 0 2px var(--meteorite-deep),0 0 0 4px #fff;}
.avatar{border:0;font-family:inherit;}
.avatar:focus-visible{outline:none;box-shadow:0 0 0 2px var(--meteorite-deep),0 0 0 4px #fff;}

/* ───────────────────────────── MAIN ────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line-2);padding:14px 28px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:5;
}
.topbar h1{font-size:21px;font-weight:700;color:var(--ink);}
.search{
  flex:1;max-width:460px;margin-left:12px;display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid transparent;border-radius:12px;padding:9px 14px;color:var(--muted);position:relative;
  transition:border-color .15s,background .15s;
}
.search:focus-within{background:#fff;border-color:var(--brand);box-shadow:var(--ring);}
.search input{border:none;background:transparent;outline:none;font-size:13.5px;width:100%;color:var(--ink);}
.search input::placeholder{color:var(--muted-2);}
.busca-resultados{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);
  max-height:420px;overflow-y:auto;display:none;z-index:20;
}
.busca-resultados.on{display:block;}
.busca-item{padding:11px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;}
.busca-item:hover{background:var(--brand-50);}
.busca-item:focus-visible{outline:none;background:var(--brand-50);box-shadow:inset 0 0 0 2px var(--brand);}
.busca-item b{display:block;font-size:13.5px;color:var(--ink);}
.busca-item span{font-size:12px;color:var(--muted);}
.busca-item .tag{margin-right:8px;}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px;}
.icon-btn{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);cursor:pointer;position:relative;color:var(--ink-2);border:1px solid transparent;transition:background .15s,border-color .15s;
}
.icon-btn:hover{background:#fff;border-color:var(--line);}
.icon-btn svg{width:17px;height:17px;}
.dot{position:absolute;top:7px;right:7px;width:8px;height:8px;background:var(--bad);border-radius:50%;border:2px solid #fff;display:none;}
.dot.on{display:block;}

/* ───────────────────────────── BOTÕES ──────────────────────────── */
.btn-primary{
  background:var(--brand);color:#fff;border:none;padding:10px 18px;border-radius:11px;
  font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 1px 2px rgba(47,28,106,.2);transition:background .15s,transform .15s,box-shadow .15s;white-space:nowrap;
}
.btn-primary:hover{background:var(--brand-600);box-shadow:0 8px 20px rgba(103,61,230,.28);transform:translateY(-1px);}
.btn-primary:active{transform:none;}
.btn-primary:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;}
.btn-ghost{
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  padding:9px 16px;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
}
.btn-ghost:hover{background:var(--brand-50);border-color:#cfc2ff;color:var(--brand-600);}
.btn-mini{
  background:var(--bg);border:1px solid var(--line);color:var(--ink-2);
  padding:5px 11px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;
}
.btn-mini:hover{background:#fff;border-color:#cfc2ff;color:var(--brand-600);}
.btn-mini.verde{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-texto);}
.btn-mini.verde:hover{background:#d3f2e8;}
.btn-mini.vermelho{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-texto);}
.btn-mini.vermelho:hover{background:#fbd7e2;}

.content{padding:28px 32px 48px;flex:1;}
.view{display:none;animation:fade .28s ease;}
.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
/* Os grupos de botão do cabeçalho de tela são montados com `display:flex` inline
   e sem quebra: no celular empurravam a página inteira para o lado. */
/* max-width é o que faltava: sem ele o grupo de ações recebe a sobra da linha
   e os filhos estouram para fora da tela em vez de quebrar. Medido na rodada
   25: Relatórios saía 25px da janela a 375px, por causa do controle de
   30/60/90/120 dias. */
.page-head > div{flex-wrap:wrap;min-width:0;max-width:100%;}
.page-head h2{font-size:26px;font-weight:700;color:var(--ink);}
.page-head p{color:var(--muted);font-size:13.5px;margin-top:4px;}

/* ─────────────────────────── KPI CARDS ─────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;}
.kpi-grid.cinco{grid-template-columns:repeat(5,1fr);}
.kpi-card{background:var(--surface);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow);border:1px solid var(--line-2);transition:box-shadow .2s,transform .2s;}
.kpi-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start;}
.kpi-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.kpi-icon svg{width:19px;height:19px;}
.kpi-value{font-size:30px;font-weight:700;color:var(--ink);margin-top:12px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kpi-label{font-size:12.5px;color:var(--muted);margin-top:2px;}
.kpi-trend{font-size:11.5px;font-weight:700;margin-top:8px;display:inline-flex;align-items:center;gap:3px;}
.up{color:var(--ok-texto);} .down{color:var(--bad-texto);} .neutro{color:var(--muted);}

/* ─────────────────────────── LAYOUT ────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start;}
.grid-2.igual{grid-template-columns:1fr 1fr;}
/* Item de grade tem min-width:auto por padrão: sem isto, um cartão de card
   operacional dentro da coluna empurrava a página inteira para o lado no celular. */
.grid-2 > *,.pasta-grid > *{min-width:0;}
.card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--line-2);box-shadow:var(--shadow);overflow:hidden;min-width:0;}
.card-head{padding:18px 22px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.card-head h3{font-size:15.5px;font-weight:700;color:var(--ink);}
/* As "ações de texto" ("ver todos", "todas as pastas") tinham 18px de altura:
   alcançáveis por teclado desde a rodada 13, mas pequenas demais para o dedo.
   A WCAG 2.5.8 pede 24px; o padding vertical resolve sem mudar o desenho,
   porque o recuo negativo devolve o espaço ao layout. */
.card-head a{font-size:12.5px;color:var(--brand-600);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;min-height:24px;padding:3px 4px;margin:-3px -4px;border-radius:6px;}
.card-head a:hover{text-decoration:underline;}
.card-body{padding:16px 22px 22px;}

/* ─────────────────────────── TABELAS ───────────────────────────── */
.tabela-rolagem{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-2);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:700;
}
tbody td{padding:14px 12px;font-size:13.5px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top;}
tbody tr:hover{background:var(--brand-50);}
tbody tr.clicavel{cursor:pointer;transition:background .15s;}
tbody tr.clicavel:hover{background:var(--brand-50);}
tbody tr:last-child td{border-bottom:none;}
.mono{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px;white-space:nowrap;}

.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700;line-height:1.5;}
.tag.blue{background:var(--brand-100);color:var(--brand-600);}
.tag.green{background:var(--ok-bg);color:var(--ok-texto);}
.tag.amber{background:var(--warn-bg);color:var(--warn-texto);}
.tag.red{background:var(--bad-bg);color:var(--bad-texto);}
.tag.gray{background:var(--line-2);color:var(--muted);}
.tag.navy{background:#e9e3fb;color:var(--meteorite);}

/* ─────────────────────────── AGENDA ────────────────────────────── */
.agenda-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);}
.agenda-item:last-child{border:none;}
.agenda-time{width:52px;flex-shrink:0;font-size:12.5px;font-weight:700;color:var(--brand-600);font-variant-numeric:tabular-nums;}
.agenda-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;}
.agenda-text{min-width:0;}
.agenda-text b{display:block;font-size:13.5px;color:var(--ink);}
.agenda-text span{font-size:12px;color:var(--muted);}
.agenda-dia{font-size:11px;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em;padding:14px 0 4px;}

.checklist-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);}
.checklist-item:last-child{border:none;}
.checklist-item input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;}
.checklist-item label{font-size:13.5px;flex:1;cursor:pointer;}
.checklist-item .prazo{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.checked label{text-decoration:line-through;color:var(--muted-2);}

/* ─────────────────────────── FILTROS ───────────────────────────── */
.filters{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center;}
.filters select,.filters input[type=text],.filters input[type=date]{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;
  font-size:13.5px;color:var(--ink-2);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;
}
.filters select:focus,.filters input:focus{border-color:var(--brand);box-shadow:var(--ring);}
.filters .grow{flex:1;min-width:180px;}

/* ═══════════════════ CARD OPERACIONAL — o núcleo visual ═══════════
   O responsável é a faixa superior do card: a primeira coisa lida.
   ═══════════════════════════════════════════════════════════════════ */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;}
.cards-grid > *{min-width:0;}
.op-card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  border-left:4px solid var(--line);cursor:pointer;transition:box-shadow .2s ease,transform .2s ease;
}
.op-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
/* Uma única escala de prioridade em todo o sistema — a mesma da grade de Pastas.
   Antes o card usava outra: ALTA saía vermelha aqui e âmbar lá, MÉDIA âmbar aqui
   e violeta lá, e CRÍTICA e ALTA eram as duas vermelhas com o mesmo emoji. */
.op-card.p-CRITICA{border-left-color:var(--bad);}
.op-card.p-ALTA{border-left-color:var(--warn);}
.op-card.p-MEDIA{border-left-color:var(--brand);}
.op-card.p-BAIXA{border-left-color:var(--ok);}
.op-card.atrasado{background:linear-gradient(180deg,#fff5f8,#fff 60%);}

.op-resp{
  background:linear-gradient(135deg,var(--meteorite),#4a2ab0);color:#fff;padding:15px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.op-resp .nome{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;}
.op-resp .rot{font-size:10px;letter-spacing:.16em;color:#c9b8ff;text-transform:uppercase;font-weight:700;}
/* Card sem dono é o estado que mais pede um clique: fica âmbar, não violeta. */
/* Auditoria da rodada 25: o fim do gradiente era #a86400, e sobre ele o
   rótulo (#ffe0a3, 10px) dava 3,66:1 — abaixo do mínimo AA de 4,5. O início
   escureceu junto para o gradiente continuar sendo um gradiente. Agora são
   5,05:1 no rótulo e 6,45:1 no nome, nos dois extremos. */
.op-resp.sem-dono{background:linear-gradient(135deg,#6b4000,#8a5100);}
.op-resp.sem-dono .rot{color:#ffe0a3;}
/* Troca de responsável, dentro da própria faixa do dono. */
.op-resp .resp-troca{width:100%;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.22);text-align:left;}
.op-resp .resp-troca label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.82);margin-bottom:6px;}
.op-resp .resp-troca-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.op-resp .resp-troca select{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:13px;}
.op-resp .resp-troca select option{color:var(--ink);background:#fff;}
.op-resp .resp-troca select:focus-visible{outline:3px solid #fff;outline-offset:1px;}
.op-resp .resp-troca .btn-mini{background:#fff;color:var(--meteorite);border-color:#fff;font-weight:700;flex:0 0 auto;}
.op-resp .resp-troca .btn-mini:disabled{opacity:.6;cursor:default;}
/* O que o DJEN publicou, no alto do card: é o motivo de ele existir. */
.op-publicado{background:var(--brand-50);border:1px solid var(--brand-100);border-left:4px solid var(--brand);
  border-radius:10px;padding:12px 14px;margin-bottom:16px;}
.op-publicado .rot{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brand-700);margin-bottom:4px;}
.op-publicado p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5;}
.op-corpo{padding:16px;flex:1;display:flex;flex-direction:column;gap:8px;}
.op-linha{font-size:12.5px;color:var(--muted);display:flex;gap:6px;}
.op-linha b{color:var(--ink-2);font-weight:600;min-width:64px;flex-shrink:0;}
.op-prov{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3;}
.op-prazo{font-size:13px;font-weight:700;color:var(--ink);}
.op-prazo small{font-weight:600;color:var(--muted);}
/* Audiência no card: data marcada por juízo não compete com o resto
   do card — tem faixa própria, para ser vista antes de qualquer leitura. */
.op-audiencia{
  font-size:12.5px;font-weight:700;color:var(--ok-texto);background:var(--ok-bg);
  border:1px solid var(--ok-line);border-radius:8px;padding:6px 10px;margin-top:2px;
}
.op-pe{padding:11px 16px;border-top:1px solid var(--line-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fbfbfe;}
.op-alerta{
  background:var(--bad-bg);color:var(--bad-texto);font-size:11px;font-weight:700;
  padding:5px 10px;border-radius:8px;display:flex;gap:6px;align-items:center;
}
.op-alerta.brando{background:var(--warn-bg);color:var(--warn-texto);}
.op-concluir{margin-left:auto;padding:6px 12px;font-size:12px;}

/* ─────────────────────────── KANBAN ───────────────────────────── */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px;}
.kanban-col{background:var(--line-2);border-radius:var(--radius);padding:10px;min-height:200px;}
.kanban-col h4{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:6px 6px 12px;display:flex;justify-content:space-between;}
.kanban-col .op-card{margin-bottom:10px;}
.kanban-col .op-resp{padding:9px 12px;}
.kanban-col .op-resp .nome{font-size:13px;}

/* ─────────────────────────── TIMELINE ──────────────────────────── */
.timeline{position:relative;padding-left:24px;}
.timeline::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line);}
.tl-item{position:relative;padding:0 0 18px 4px;}
.tl-item::before{
  content:'';position:absolute;left:-22px;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--brand);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--line);
}
.tl-item.sistema::before{background:var(--muted-2);}
.tl-data{font-size:11px;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.tl-texto{font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.5;}
.tl-ator{font-size:11.5px;color:var(--muted);margin-top:2px;}

/* ─────────────────────────── CLIENTES ──────────────────────────── */
/* auto-fill com min() no lugar de 3 colunas fixas: antes a grade pedia 825px num
   contêiner de 697px em 1024, e estourava a página com rolagem horizontal em
   todos os tamanhos abaixo de 1100px. */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;}
.client-grid > *{min-width:0;}
.client-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .2s,transform .2s;min-width:0;}
.client-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.client-top{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.client-avatar{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--meteorite),var(--brand));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;}
.client-top b{display:block;font-size:14.5px;color:var(--ink);}
.client-top span{font-size:12px;color:var(--muted);}
/* sem flex-wrap, o min-content destes dois textos virava piso de largura do
   cartão e era a causa raiz do estouro da grade. */
.client-meta{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:12px;border-top:1px solid var(--line-2);padding-top:12px;}
.client-meta > span{min-width:0;}

/* ─────────────────────────── FINANCEIRO ────────────────────────── */
.fin-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;}
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding:10px 4px 0;}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
.bar{width:100%;border-radius:8px 8px 0 0;background:var(--brand);}
.bar-wrap span{font-size:10.5px;color:var(--muted);}

/* ─────────────────────────── TIMESHEET ─────────────────────────── */
.timer-box{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--meteorite),#4a2ab0);border-radius:var(--radius);padding:20px 24px;color:#fff;margin-bottom:20px;flex-wrap:wrap;}
.timer-clock{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.timer-box select,.timer-box input{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:10px;padding:9px 12px;font-size:12.5px;}
.timer-box .btn-timer{margin-left:auto;background:#fff;color:var(--brand-600);border:none;border-radius:11px;padding:11px 20px;font-weight:700;font-size:13px;cursor:pointer;}

/* ─────────────────────────── BARRA DE CARGA ────────────────────── */
.carga-linha{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);}
.carga-linha:last-child{border:none;}
.carga-nome{width:150px;flex-shrink:0;font-size:13.5px;font-weight:600;color:var(--ink);}
.carga-nome small{display:block;font-weight:500;color:var(--muted);font-size:11px;}
.carga-barra{flex:1;height:10px;background:var(--line-2);border-radius:8px;overflow:hidden;display:flex;}
.carga-barra i{display:block;height:100%;background:var(--brand);}
.carga-barra i.atraso{background:var(--bad);}
.carga-num{width:78px;text-align:right;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}

/* ─────────────────────────── FAIXAS DE PRAZO ───────────────────── */
.faixas{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.faixa{border-radius:14px;padding:16px 14px;text-align:center;border:1px solid var(--line-2);background:var(--bg);}
.faixa b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.faixa span{font-size:11.5px;color:var(--muted);}
.faixa.vencidos{background:var(--bad-bg);border-color:var(--bad-line);} .faixa.vencidos b{color:var(--bad-texto);}
.faixa.hoje{background:var(--bad-bg);border-color:var(--bad-line);} .faixa.hoje b{color:var(--bad-texto);}
.faixa.tres{background:var(--warn-bg);border-color:var(--warn-line);} .faixa.tres b{color:var(--warn-texto);}
.faixa.sete{background:#fffae8;border-color:#f4ebc2;} .faixa.sete b{color:#856800;}
.faixa.futuros{background:var(--ok-bg);border-color:var(--ok-line);} .faixa.futuros b{color:var(--ok-texto);}

/* ─────────────────────────── AUDIÊNCIAS ────────────────────────── */
.aud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:18px;}
.aud-grid > *{min-width:0;}
.aud-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border-left:4px solid var(--brand);transition:box-shadow .2s,transform .2s;}
.aud-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.aud-card.hoje{border-left-color:var(--bad);}
.aud-card.realizada{border-left-color:var(--ok);opacity:.85;}
.aud-topo{display:flex;gap:14px;padding:16px;border-bottom:1px solid var(--line-2);align-items:center;}
.aud-data{width:60px;text-align:center;flex-shrink:0;background:var(--brand-50);border-radius:12px;padding:8px 4px;}
.aud-data b{display:block;font-size:22px;line-height:1;color:var(--brand-700);font-weight:700;}
.aud-data span{font-size:10.5px;text-transform:uppercase;color:var(--brand-600);letter-spacing:.08em;font-weight:700;}
.aud-data i{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--ink);margin-top:4px;}
.aud-titulo{flex:1;min-width:0;}
.aud-titulo b{display:block;font-size:14.5px;color:var(--ink);}
.aud-titulo span{font-size:12px;color:var(--muted);display:block;}
.aud-corpo{padding:12px 16px 14px;font-size:12.5px;}
.aud-prep{display:flex;align-items:center;gap:8px;margin-top:8px;}
.aud-prep .barra{flex:1;height:8px;background:var(--line-2);border-radius:6px;overflow:hidden;}
.aud-prep .barra i{display:block;height:100%;background:var(--ok);}
.prep-item{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-2);}
.prep-item:last-child{border:none;}
.prep-item input[type=checkbox]{width:16px;height:16px;margin-top:2px;accent-color:var(--ok);cursor:pointer;}
.prep-item .txt{flex:1;font-size:13.5px;}
.prep-item.feito .txt{text-decoration:line-through;color:var(--muted-2);}
.prep-item .acoes{display:flex;gap:4px;}

/* ─────────────────────────── PETIÇÕES ──────────────────────────── */
.pet-layout{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start;}
.pet-lateral .btn-ghost{width:100%;text-align:left;}
.pet-lateral .btn-ghost:disabled{opacity:.5;cursor:not-allowed;}
.pet-toolbar{
  display:flex;gap:4px;align-items:center;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--radius) var(--radius) 0 0;padding:8px 10px;
  position:sticky;top:66px;z-index:4;box-shadow:var(--shadow);
}
.pet-toolbar button{
  min-width:32px;height:30px;padding:0 8px;border:1px solid var(--line);background:var(--bg);
  border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink-2);
}
.pet-toolbar button:hover{background:var(--brand-50);border-color:#cfc2ff;color:var(--brand-600);}
.pet-toolbar .sep{width:1px;height:22px;background:var(--line);margin:0 4px;}
.pet-folha-wrap{background:#e6e5f0;padding:24px;border-radius:0 0 var(--radius) var(--radius);overflow:auto;}
.pet-folha{
  position:relative;width:21cm;min-height:29.7cm;margin:0 auto;background:#fff;
  box-shadow:0 10px 36px rgba(29,30,32,.22);
}
.pet-timbre-topo,.pet-timbre-base{position:absolute;left:0;right:0;pointer-events:none;}
.pet-timbre-topo{top:0;height:3.6cm;} .pet-timbre-base{bottom:0;height:4.9cm;}
.pet-timbre-topo img,.pet-timbre-base img{position:absolute;display:block;}
.pet-editor{
  position:relative;padding:3.6cm 3cm 4.9cm;min-height:29.7cm;outline:none;
  font-family:Calibri,'Segoe UI',Carlito,Arial,sans-serif;font-size:12pt;line-height:1.5;color:#111;
}
.pet-editor:empty::before{content:'Comece pelo botão “Endereçamento” ao lado, ou cole o texto aqui.';color:var(--muted-2);font-style:italic;}
.pet-editor p{margin:0 0 .35cm;text-align:justify;}
.pet-editor h1{font-size:13pt;text-align:center;text-transform:uppercase;margin:.5cm 0 .3cm;color:#111;letter-spacing:0;}
.pet-editor h2{font-size:12.5pt;text-transform:uppercase;margin:.5cm 0 .3cm;color:#111;letter-spacing:0;}
.pet-editor h3{font-size:12pt;margin:.4cm 0 .25cm;color:#111;letter-spacing:0;}
.pet-editor ul,.pet-editor ol{margin:0 0 .35cm 1.2cm;list-style:revert;}
.pet-editor blockquote{margin:0 0 .35cm 3cm;font-size:11pt;line-height:1.3;}
.pet-editor table{border-collapse:collapse;width:100%;font-size:11pt;}
.pet-editor td,.pet-editor th{border:1px solid #999;padding:3px 6px;}
@media(max-width:1200px){.pet-layout{grid-template-columns:1fr;}}

/* ─────────────────────────── AVISO / BANNER ────────────────────── */
.banner{
  border-radius:14px;padding:14px 18px;margin-bottom:20px;font-size:13.5px;
  display:flex;gap:12px;align-items:flex-start;border:1px solid;line-height:1.5;
}
.banner.critico{background:var(--bad-bg);border-color:var(--bad-line);color:#8a1f47;}
.banner.aviso{background:var(--warn-bg);border-color:var(--warn-line);color:#6b4600;}
.banner.info{background:var(--brand-50);border-color:#dcd2ff;color:var(--brand-700);}
/* "feito": o que o sistema resolveu sozinho, e não um alerta. */
.banner.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-texto);}
.banner b{display:block;margin-bottom:2px;}

/* ─────────────────────────── PAINEL LATERAL ────────────────────── */
.drawer-fundo{position:fixed;inset:0;background:rgba(29,30,32,.45);backdrop-filter:blur(2px);z-index:50;display:none;}
.drawer-fundo.on{display:block;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:560px;max-width:94vw;background:var(--surface);
  z-index:51;box-shadow:-16px 0 50px rgba(29,30,32,.22);display:none;flex-direction:column;
  border-radius:22px 0 0 22px;
}
.drawer.on{display:flex;animation:slide .25s ease;}
@keyframes slide{from{transform:translateX(24px);opacity:0;}to{transform:none;opacity:1;}}
.drawer-head{padding:20px 24px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;}
.drawer-head h3{font-size:17px;color:var(--ink);}
.drawer-body{padding:22px 24px 44px;overflow-y:auto;flex:1;}
.drawer-fechar{background:var(--bg);border:none;font-size:20px;color:var(--muted);cursor:pointer;line-height:1;width:34px;height:34px;border-radius:10px;}
.drawer-fechar:hover{background:var(--line-2);color:var(--ink);}
.bloco{margin-bottom:24px;}
.bloco h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);margin-bottom:10px;font-weight:700;}
.memoria{background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;font-size:12.5px;line-height:1.6;color:var(--muted);}
.memoria li{margin-bottom:6px;padding-left:14px;position:relative;}
.memoria li::before{content:'•';position:absolute;left:2px;color:var(--brand);}
.memoria li.alerta{color:#8a1f47;font-weight:600;}

/* ─────────────────────────── FORMULÁRIO ────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo.largo{grid-column:1 / -1;}
.campo label{font-size:12.5px;font-weight:600;color:var(--ink-2);}
.campo input,.campo select,.campo textarea{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;font-size:13.5px;
  font-family:inherit;color:var(--ink);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;
}
.campo textarea{min-height:120px;resize:vertical;line-height:1.5;}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--brand);box-shadow:var(--ring);}

/* ─────────────────────────── NOTIFICAÇÕES ──────────────────────── */
.notif-item{padding:12px 0;border-bottom:1px solid var(--line-2);display:flex;gap:10px;}
.notif-item:last-child{border:none;}
.notif-item .pt{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--line);}
.notif-item.nova .pt{background:var(--brand);}
.notif-item.CRITICO .pt{background:var(--bad);}
.notif-item.ALERTA .pt{background:#e0a300;}
.notif-item b{display:block;font-size:13.5px;color:var(--ink);}
.notif-item span{font-size:12px;color:var(--muted);}
.notif-item time{font-size:11px;color:var(--muted-2);}

/* ─────────────────────────── LOG DE AUTOMAÇÕES ─────────────────── */
.log-linha{border-bottom:1px solid var(--line-2);padding:14px 0;}
.log-linha:last-child{border:none;}
.log-topo{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.log-topo time{font-size:12px;color:var(--muted-2);font-variant-numeric:tabular-nums;}
.log-topo b{font-size:13.5px;color:var(--ink);}
.log-passos{padding-left:16px;border-left:2px solid var(--line);margin-left:4px;}
.log-passo{font-size:12.5px;color:var(--muted);padding:3px 0;}
.log-passo i{font-style:normal;font-weight:700;color:var(--meteorite);}
.log-passo.FALHA i{color:var(--bad-texto);}
.log-passo.IGNORADO i{color:var(--muted-2);}

/* ─────────────── ESTADO VAZIO ───────────────
   Um vazio bem desenhado explica por que está vazio e diz o que fazer. */
.vazio{
  text-align:center;padding:36px 20px;color:var(--muted);font-size:13.5px;
  display:flex;flex-direction:column;align-items:center;gap:8px;line-height:1.5;
}
.vazio .vazio-icone{
  width:40px;height:40px;border-radius:13px;background:var(--line-2);color:var(--muted-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.vazio .vazio-icone svg{width:19px;height:19px;}
.vazio b{color:var(--ink);font-size:14px;font-weight:600;}
.vazio p{max-width:44ch;}
.vazio .btn-ghost,.vazio .btn-primary{margin-top:4px;}
.vazio.enxuto{padding:20px 16px;}
/* dentro de uma célula de tabela o vazio não deve inflar a linha */
td > .vazio{padding:28px 16px;}

/* ─────────────── ESQUELETO DE CARREGAMENTO ───────────────
   Substitui a palavra "carregando…": o desenho já mostra a forma do que vem. */
.esqueleto{display:flex;flex-direction:column;gap:12px;padding:4px 0;}
.esq-linha,.esq-bloco,.esq-cartao{
  background:linear-gradient(90deg,var(--line-2) 25%,#e6e7f0 37%,var(--line-2) 63%);
  background-size:400% 100%;border-radius:8px;animation:brilho 1.4s ease infinite;
}
.esq-linha{height:13px;} .esq-linha.curta{width:38%;} .esq-linha.media{width:64%;}
.esq-bloco{height:76px;border-radius:14px;}
.esq-cartao{height:168px;border-radius:var(--radius);}
.esq-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:18px;}
.esq-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;}
@keyframes brilho{from{background-position:100% 0;}to{background-position:0 0;}}
@media(prefers-reduced-motion:reduce){.esq-linha,.esq-bloco,.esq-cartao{background:var(--line-2);}}
.carregando{text-align:center;padding:34px;color:var(--muted);font-size:13px;}
/* lido por leitor de tela, invisível na tela */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ─────────────── AVISOS (toast) ───────────────
   Único vocabulário de confirmação do sistema. Substituiu 84 alert() nativos. */
#avisos{
  position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;
  gap:10px;align-items:flex-end;max-width:min(420px,calc(100vw - 32px));pointer-events:none;
}
.toast{
  pointer-events:auto;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:12px 14px;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
  color:var(--ink-2);line-height:1.45;animation:toast-entra .2s ease;
}
.toast b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px;}
.toast .toast-icone{flex-shrink:0;font-size:14px;line-height:1.3;font-weight:700;}
.toast.ok{border-left-color:var(--ok);} .toast.ok .toast-icone{color:var(--ok-texto);}
.toast.erro{border-left-color:var(--bad);} .toast.erro .toast-icone{color:var(--bad-texto);}
.toast.aviso{border-left-color:var(--warn);} .toast.aviso .toast-icone{color:var(--warn-texto);}
.toast.info .toast-icone{color:var(--brand-600);}
.toast-fechar{
  margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;padding:2px 4px;border-radius:6px;flex-shrink:0;
}
.toast-fechar:hover{background:var(--line-2);color:var(--ink);}
@keyframes toast-entra{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ─────────────── DIÁLOGO (confirmação e texto curto) ───────────────
   Substituiu confirm() e prompt() nativos, que não têm identidade, não dizem
   qual ação é destrutiva e não podem explicar a consequência. */
.dialogo-fundo{position:fixed;inset:0;background:rgba(29,30,32,.45);backdrop-filter:blur(2px);z-index:210;display:none;align-items:center;justify-content:center;padding:20px;}
.dialogo-fundo.on{display:flex;}
.dialogo{
  background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);
  width:440px;max-width:100%;max-height:90vh;overflow-y:auto;padding:24px;
  animation:dialogo-entra .18s ease;
}
@keyframes dialogo-entra{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:none;}}
.dialogo h3{font-size:17px;margin-bottom:8px;}
.dialogo p{font-size:13.5px;color:var(--muted);line-height:1.55;}
.dialogo .campo{margin-top:16px;}
.dialogo-erro{color:var(--bad-texto);font-size:12.5px;font-weight:600;margin-top:8px;min-height:16px;}
.dialogo-acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap;}
.btn-primary.perigo{background:var(--bad);}
.btn-primary.perigo:hover{background:#b62a5c;box-shadow:0 8px 20px rgba(214,51,108,.28);}

/* ─────────────── ERRO POR CAMPO ───────────────
   A mensagem do servidor passa a nascer ao lado do campo que a causou. */
.campo-erro{color:var(--bad-texto);font-size:12px;font-weight:600;margin-top:-2px;}
.campo.com-erro input,.campo.com-erro select,.campo.com-erro textarea{border-color:var(--bad);}
.campo.com-erro input:focus,.campo.com-erro select:focus,.campo.com-erro textarea:focus{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--bad);}
.form-erro{
  background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad-texto);
  border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;margin-top:12px;line-height:1.45;
}

/* ─────────────── CONTROLE SEGMENTADO ───────────────
   Antes: dois btn-ghost iguais (Grade/Kanban) sem estado, e um `style=` inline
   com um azul fora da paleta no Dashboard. */
.segmentado{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px;}
.segmentado button{
  border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--muted);
  padding:7px 14px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;
}
.segmentado button:hover{color:var(--brand-600);}
.segmentado button[aria-pressed="true"]{background:var(--surface);color:var(--brand-600);box-shadow:0 1px 3px rgba(47,28,106,.12);}

/* ─────────────── AVISO DE LISTA TRUNCADA ───────────────
   As consultas da pasta têm limite (60 andamentos, 60 prazos…). O limite existia
   em silêncio; agora a tela diz o que ficou de fora. */
.truncado{
  display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted);background:var(--bg);border:1px dashed var(--line);
  border-radius:10px;padding:10px 14px;margin-top:12px;line-height:1.45;
}

/* ─────────────── ELEMENTOS CLICÁVEIS ALCANÇÁVEIS POR TECLADO ───────────────
   Cartões e linhas que abrem detalhe recebem tabindex e tratam Enter/Espaço;
   estas regras dão a eles o mesmo foco visível dos botões. */
[data-abrivel]{cursor:pointer;}
[data-abrivel]:focus-visible{outline:none;box-shadow:var(--ring);}
/* As ~70 "ações de texto" do sistema são <a> sem href (editar, definir,
   sincronizar, publicar no portal…): não eram focáveis nem anunciadas como
   controle. `acessibilizar()` marca role=button/tabindex; aqui vem o foco. */
a[role="button"]{cursor:pointer;}
a[role="button"]:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px;}
tr.clicavel:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--brand);}

@media(max-width:1200px){
  .kpi-grid,.kpi-grid.cinco{grid-template-columns:repeat(3,1fr);}
  .faixas{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:1080px){
  .kpi-grid,.kpi-grid.cinco{grid-template-columns:repeat(2,1fr);}
  .grid-2,.grid-2.igual{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
}
/* A barra lateral passou a colapsar em 900px, não 760: em 768px ela ocupava 248px
   de 768 (32% da tela) e a grade ao lado estourava com rolagem horizontal. */
@media(max-width:900px){
  .sidebar{width:68px;}
  .brand .marca,.brand .marca-sub,.nav-section-title,.nav-item span:not(.nav-badge),.sidebar-footer .who{display:none;}
  .brand{align-items:center;padding:18px 0;} .brand .marca-mini{display:flex;}
  .nav-item{justify-content:center;}
  .topbar{flex-wrap:wrap;padding:12px 18px;row-gap:10px;}
  .topbar h1{font-size:18px;}
  /* A busca deixa de sumir no celular: passa para a linha de baixo, inteira. */
  .search{order:3;flex-basis:100%;max-width:none;margin-left:0;}
  .topbar-actions{margin-left:auto;}
  .faixas{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:620px){
  .kpi-grid,.kpi-grid.cinco{grid-template-columns:1fr;}
  .client-top{flex-wrap:wrap;}
  .content{padding:16px;}
  .page-head h2{font-size:22px;}
  .page-head{align-items:flex-start;}
  .btn-primary,.btn-ghost{white-space:normal;}
  #avisos{right:12px;left:12px;bottom:12px;max-width:none;align-items:stretch;}
}

/* ═══════════════════ PASTA DO CLIENTE (rodada 12) ═══════════════════ */
.prio-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;}
.prio-tag.critica{background:var(--bad-bg);color:var(--bad-texto);border:1px solid var(--bad-line);}
.prio-tag.alta{background:var(--warn-bg);color:var(--warn-texto);border:1px solid var(--warn-line);}
.prio-tag.media{background:var(--brand-100);color:var(--brand-600);border:1px solid #d9cdff;}
.prio-tag.baixa{background:var(--ok-bg);color:var(--ok-texto);border:1px solid var(--ok-line);}
.prio-resumo{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.prio-pill{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font:inherit;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;}
.prio-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.prio-pill b{font-size:20px;font-weight:700;letter-spacing:-.02em;}
.prio-pill span{font-size:12.5px;color:var(--muted);font-weight:600;}
.prio-pill.critica b{color:var(--bad-texto);} .prio-pill.alta b{color:var(--warn-texto);} .prio-pill.media b{color:var(--brand-600);} .prio-pill.baixa b{color:var(--ok-texto);}
/* Filtro ligado precisa SE VER. Só a borda violeta passava despercebido: o
   usuário filtrava, esquecia, e concluía que tinha menos cliente do que tem. */
.prio-pill.ativo{border-color:var(--brand);background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--brand);}
.prio-pill.ativo span{color:var(--brand-700);}
.prio-pill.ativo::after{content:'✕';margin-left:2px;font-size:11px;font-weight:700;color:var(--brand-600);}
.prio-pill:focus-visible{outline:3px solid var(--brand);outline-offset:2px;}
.pasta-card{border-left:4px solid var(--line-2);position:relative;}
.pasta-card.critica{border-left-color:var(--bad);} .pasta-card.alta{border-left-color:var(--warn);} .pasta-card.media{border-left-color:var(--brand);} .pasta-card.baixa{border-left-color:var(--ok);}
.pasta-card .client-top{align-items:flex-start;} .pasta-card .client-top > div:nth-child(2){flex:1;}
/* O nome do cliente é a informação principal do cartão. Numa linha só, quase
   todo nome de pessoa jurídica saía cortado ("Condomínio Edifício V…"). Duas
   linhas cabem sem desalinhar a grade — e o corte só acontece no exagero. */
.pasta-card .client-top b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;}
.pasta-motivos{margin:0;padding:0 0 0 16px;font-size:12.5px;color:var(--ink-2);line-height:1.45;min-height:38px;}
.pasta-motivos li{margin-bottom:2px;} .pasta-motivos.ok{list-style:none;padding:0;color:var(--muted);font-style:italic;}

.pasta-topo{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:16px;}
.pasta-id{display:flex;gap:14px;align-items:flex-start;flex:1;min-width:280px;}
.client-avatar.grande{width:56px;height:56px;border-radius:16px;font-size:18px;}
.pasta-nome h2{font-size:24px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap;letter-spacing:-.01em;}
.pasta-nome p{font-size:13px;color:var(--muted);margin-top:3px;}
.pasta-nome p b{color:var(--ink-2);font-weight:600;}
.pasta-contatos a,.pasta-linha a,.pasta-nota a,.tl-corpo small a,.pend small a,.pasta-h4 a{color:var(--brand-600);font-weight:600;cursor:pointer;}
.pasta-contatos a:hover,.pasta-linha a:hover,.tl-corpo small a:hover{text-decoration:underline;}
.pasta-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.pasta-motivos-barra{padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:16px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);line-height:1.5;}
.pasta-motivos-barra.critica{background:var(--bad-bg);border-color:var(--bad-line);color:#8a1f47;}
.pasta-motivos-barra.alta{background:var(--warn-bg);border-color:var(--warn-line);color:#6b4600;}
.pasta-motivos-barra.media{background:var(--brand-50);border-color:#d9cdff;color:var(--meteorite);}
.pasta-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px;}
.kpi-card.mini{padding:14px 16px;cursor:pointer;}
.kpi-card.mini .kpi-value{font-size:22px;margin-top:4px;}
.kpi-card.mini .kpi-value.red{color:var(--bad-texto);} .kpi-card.mini .kpi-value.amber{color:var(--warn-texto);} .kpi-card.mini .kpi-value.green{color:var(--ok-texto);} .kpi-card.mini .kpi-value.blue{color:var(--brand-600);}
/* ausência de dado: cinza, nunca verde */
.kpi-card.mini .kpi-value.cinza{color:var(--muted);}
.kpi-nota{font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pasta-grid{display:grid;grid-template-columns:minmax(320px,1fr) 1.6fr;gap:20px;align-items:start;}
.pasta-esq .card,.pasta-dir .card{margin-bottom:18px;}
.pasta-lista{display:flex;flex-direction:column;gap:12px;}
.pasta-proc{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;background:var(--bg);cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.pasta-proc:hover{border-color:#cfc2ff;box-shadow:var(--shadow);}
.pasta-proc-topo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px;}
.pasta-proc-topo b{font-size:13.5px;color:var(--ink);} .pasta-proc-topo > span:not(.tag){font-size:12px;color:var(--muted);flex:1;}
.pasta-linha{display:flex;gap:8px;font-size:12.5px;line-height:1.45;margin-top:4px;}
.pasta-linha b{min-width:78px;flex-shrink:0;color:var(--muted-2);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px;}
.pasta-linha span{color:var(--ink-2);} .pasta-linha i{color:var(--muted);} .pasta-linha small{color:var(--muted);}
.pasta-estrategia{font-size:13.5px;line-height:1.55;color:var(--ink-2);white-space:pre-wrap;}
.pasta-sigilo{font-size:11.5px;color:var(--meteorite);background:#efeafd;border-radius:8px;padding:6px 10px;margin-top:10px;}
.pasta-hist{margin-top:10px;font-size:12.5px;} .pasta-hist summary{cursor:pointer;color:var(--brand-600);font-weight:600;}
.pasta-hist-item{padding:8px 0;border-top:1px dashed var(--line-2);} .pasta-hist-item small{color:var(--muted);} .pasta-hist-item p{white-space:pre-wrap;color:var(--ink-2);}
.pasta-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:6px;box-shadow:var(--shadow);}
.pasta-tab{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:8px 12px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,color .15s;}
.pasta-tab:hover{background:var(--brand-50);color:var(--brand-600);}
.pasta-tab.ativa{background:var(--brand-600);color:#fff;}
.pasta-tab-n{background:rgba(255,255,255,.25);border-radius:999px;font-size:10.5px;padding:1px 7px;} .pasta-tab:not(.ativa) .pasta-tab-n{background:var(--bad-bg);color:var(--bad-texto);}
.pasta-h4{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2);margin:18px 0 10px;font-weight:700;} .pasta-h4:first-child{margin-top:0;}
.pasta-nota{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:10px;}
.pasta-timeline{display:flex;flex-direction:column;gap:0;}
.tl-item{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);position:relative;}
.tl-item:last-child{border-bottom:0;}
.tl-item time{font-size:12.5px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:2px;}
.tl-item time::after{content:"";position:absolute;left:78px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--brand);}
.tl-item.datajud time::after{background:var(--gray-400);} .tl-item.manual time::after{background:var(--meteorite);} .tl-item.pub time::after{background:var(--warn);}
.tl-corpo p{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:4px 0;white-space:pre-wrap;}
.tl-topo{display:flex;gap:6px;align-items:center;flex-wrap:wrap;} .tl-corpo small{font-size:12px;color:var(--muted);}
.tl-resumo{font-size:12.5px!important;color:var(--ok-texto)!important;background:var(--ok-bg);border-radius:8px;padding:6px 10px;}
.pasta-linha-prazo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px;}
.pasta-linha-prazo:last-child{border-bottom:0;} .pasta-linha-prazo b{font-variant-numeric:tabular-nums;color:var(--ink);} .pasta-linha-prazo > span:not(.tag):not(.mono){flex:1;color:var(--ink-2);min-width:160px;} .pasta-linha-prazo small{color:var(--muted);font-size:12px;}
.pasta-linha-prazo.nc{background:var(--warn-bg);margin:0 -8px;padding:9px 8px;border-radius:8px;}
.pend{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--surface);}
.pend.urgente{border-color:var(--bad-line);background:#fff8fa;} .pend.fechada{opacity:.75;}
.pend-topo{display:flex;gap:6px;align-items:center;flex-wrap:wrap;} .pend-data{font-size:12px;color:var(--muted);margin-left:auto;display:inline-flex;gap:6px;align-items:center;}
.pend p{font-size:13.5px;color:var(--ink);margin:6px 0 4px;line-height:1.5;} .pend small{font-size:12px;color:var(--muted);}
.pend-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.pend-portal{font-size:12px;color:var(--muted);display:inline-flex;gap:6px;align-items:center;margin-right:auto;cursor:pointer;}
.doc-linha{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13px;flex-wrap:wrap;}
.doc-linha > div:first-child{flex:1;min-width:200px;} .doc-linha b{display:block;color:var(--ink);} .doc-linha small{color:var(--muted);font-size:12px;}
.pasta-fin-resumo{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:12px 16px;background:var(--bg);border-radius:12px;font-size:13px;color:var(--ink-2);}
.pasta-fin-resumo b{font-size:16px;color:var(--ink);}
.pasta-msg{border-bottom:1px solid var(--line-2);padding:10px 0;} .pasta-msg p{font-size:13px;color:var(--ink-2);margin-top:6px;white-space:pre-wrap;} .pasta-msg small{color:var(--muted);font-size:12px;}
.portal-gestao{margin-bottom:6px;}
.portal-previa{border:1px dashed #cfc2ff;border-radius:16px;padding:8px;background:repeating-linear-gradient(45deg,#faf8ff,#faf8ff 10px,#f4f0ff 10px,#f4f0ff 20px);}

/* Painel do cliente (portal e prévia) — mobile-first, sem sidebar */
.portal{max-width:760px;margin:0 auto;font-family:inherit;color:var(--ink);background:var(--surface);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
.portal-cabecalho{background:linear-gradient(135deg,var(--meteorite-deep,#2f1c6a),var(--brand-600));color:#fff;padding:28px 26px;}
.portal-marca{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;font-weight:700;} 
.portal-cabecalho h1{font-size:24px;font-weight:700;margin:8px 0 6px;letter-spacing:-.01em;color:#fff;} .portal-cabecalho p{font-size:13.5px;opacity:.92;line-height:1.5;color:#fff;} .portal-cabecalho b{color:#fff;}
.portal-bloco{padding:22px 26px;border-bottom:1px solid var(--line-2);} .portal-bloco:last-of-type{border-bottom:0;}
.portal-bloco h2{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-2);font-weight:700;margin-bottom:14px;}
.portal-bloco.destaque{background:var(--warn-bg);}
.portal-item{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--surface);}
.portal-item.pend.urgente{border-color:var(--bad-line);}
.portal-item-topo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px;}
.portal-rotulo{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--brand-100);color:var(--brand-600);}
.portal-rotulo.vermelho{background:var(--bad-bg);color:var(--bad-texto);} .portal-rotulo.verde{background:var(--ok-bg);color:var(--ok-texto);} .portal-rotulo.cinza{background:var(--line-2);color:var(--muted);}
.portal-data{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600;}
.portal-item b{font-size:14.5px;color:var(--ink);display:block;} .portal-item small{display:block;font-size:12px;color:var(--muted);margin-top:2px;} .portal-item small.ok{color:var(--ok-texto);}
.portal-item p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:8px;} .portal-item p.proximo{background:var(--brand-50);border-radius:8px;padding:8px 10px;}
.portal-linha{list-style:none;padding:0;margin:0;} .portal-linha li{display:grid;grid-template-columns:86px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2);}
.portal-linha li:last-child{border-bottom:0;} .portal-linha time{font-size:12.5px;font-weight:700;color:var(--ink-2);} .portal-linha p{font-size:13.5px;color:var(--ink-2);line-height:1.5;} .portal-linha small{font-size:11.5px;color:var(--muted);}
.portal-vazio{font-size:13px;color:var(--muted);font-style:italic;} .portal-aviso{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.5;}
.portal-rodape{padding:18px 26px;background:var(--bg);font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px;} .portal-rodape b{color:var(--ink-2);}
.portal.compacto .portal-cabecalho{padding:20px 22px;} .portal.compacto .portal-bloco{padding:16px 22px;}

@media(max-width:1200px){
  .pasta-kpis{grid-template-columns:repeat(3,1fr);}
  /* Empilhado, a área de trabalho (abas: linha do tempo, prazos, pendências) vem
     primeiro. Antes era preciso rolar ~700px passando por Processos, Demandas e
     Estratégia — inclusive por cartões vazios — para chegar nela num notebook
     de 1366×768. */
  .pasta-grid{grid-template-columns:1fr;}
  .pasta-grid .pasta-dir{order:1;} .pasta-grid .pasta-esq{order:2;}
}
@media(max-width:900px){
  .pasta-topo{gap:12px;}
  .pasta-acoes{width:100%;}
  .pasta-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;}
  .pasta-tab{flex-shrink:0;}
}
@media(max-width:620px){
  .pasta-kpis{grid-template-columns:1fr 1fr;}
  .tl-item{grid-template-columns:70px 1fr;}
  .tl-item time::after{display:none;}
  .pasta-linha b{min-width:64px;}
  .pasta-nome h2{font-size:20px;}
  /* Numa coluna estreita, cortar o nome do cliente com reticências troca uma
     informação essencial por espaço que não falta mais: deixa quebrar. */
  .pasta-card .client-top b,.dash-pasta-topo b{white-space:normal;overflow:visible;}
}

.link-pasta{color:var(--brand-600);font-weight:600;cursor:pointer;} .link-pasta:hover{text-decoration:underline;}
.dash-pastas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px;}
.dash-pastas > *{min-width:0;}
.dash-pasta{border:1px solid var(--line-2);border-left:4px solid var(--line-2);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--bg);transition:box-shadow .15s,transform .15s;}
.dash-pasta:hover{box-shadow:var(--shadow);transform:translateY(-1px);}
.dash-pasta.critica{border-left-color:var(--bad);} .dash-pasta.alta{border-left-color:var(--warn);}
.dash-pasta-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;} .dash-pasta-topo b{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-pasta-motivo{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.4;} .dash-pasta-pe{font-size:11.5px;color:var(--muted);margin-top:6px;}

/* ─────────────── TELA DE PLANO ─────────────── */
.planos-sistema{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:18px;}
.planos-sistema > *{min-width:0;}
.plano-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);}
.plano-card.atual{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand),var(--shadow-lg);}
.plano-card-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.plano-card-topo h3{margin:0;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-700);}
.plano-card-preco{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1;}
.plano-card-preco span{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0;}
.plano-card-para{margin:0;font-size:13px;color:var(--muted);}
.plano-card-itens{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;flex:1;}
.plano-card-itens li{font-size:13px;color:var(--ink-2);padding-left:16px;position:relative;line-height:1.45;}
.plano-card-itens li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ok);}
.plano-card-itens li.nao{color:var(--muted);}
.plano-card-itens li.nao::before{background:var(--muted-2);}
.plano-card .btn-mini{margin-top:6px;justify-content:center;width:100%;}
.banner.neutro{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--ink-2);}

/* ─────────────────────────── PAINEL (tela inicial) ───────────────
   Três colunas: o que vence, o que fazer, onde estar. Abaixo de
   1180px viram uma só, nessa ordem — é a ordem da urgência. */
.painel-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;margin-bottom:20px;}
.painel-3 > *{min-width:0;}
.painel-col .card-body{padding:8px 12px 14px;}
.painel-col .faixas.compactas{
  display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:12px 12px 0;
}
.painel-col .faixas.compactas .faixa{
  padding:8px 4px;border-radius:10px;cursor:pointer;font:inherit;width:100%;
  transition:transform .1s ease,box-shadow .1s ease;
}
.painel-col .faixas.compactas .faixa b{font-size:18px;}
.painel-col .faixas.compactas .faixa span{font-size:10.5px;display:block;}
.painel-col .faixas.compactas .faixa:hover{transform:translateY(-1px);box-shadow:var(--shadow);}

.painel-lista{list-style:none;margin:0;padding:0;}
.painel-item{
  display:flex;align-items:flex-start;gap:10px;padding:10px 10px;border-radius:10px;
  border-bottom:1px solid var(--line-2);
}
.painel-item:last-child{border-bottom:none;}
.painel-item.clicavel{cursor:pointer;}
.painel-item.clicavel:hover{background:var(--brand-50);}
.painel-item.clicavel:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
/* Faixa de prioridade à esquerda: cor é reforço, o texto continua dizendo tudo. */
.painel-item.pri-critica{box-shadow:inset 3px 0 0 var(--bad);}
.painel-item.pri-alta{box-shadow:inset 3px 0 0 var(--warn);}

.painel-data{
  width:72px;flex-shrink:0;font-size:12.5px;line-height:1.35;
  font-variant-numeric:tabular-nums;color:var(--muted);
}
.painel-data b{display:block;font-size:13px;color:var(--ink);font-weight:700;}
.painel-data small{font-size:11px;color:var(--muted);}
.painel-texto{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.painel-texto b{
  font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.painel-texto span{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.painel-aud{color:var(--ok-texto)!important;font-weight:700;}
.painel-lado{
  flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;
}
.painel-lado small{font-size:11px;color:var(--muted);}
.painel-mais{margin:10px 2px 0;font-size:12.5px;}
.painel-mais a{color:var(--brand-600);font-weight:600;cursor:pointer;}
.painel-hoje{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2);}
.painel-hoje > b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;}

@media (max-width:1180px){
  .painel-3{grid-template-columns:1fr;}
}

/* ═══════════ AUTOMAÇÕES — o editor como frase, não formulário ═══════════
   QUANDO … SE … ENTÃO …. Quem escreve a regra pensa na frase; a tela
   acompanha. Os rótulos ficam em caixa baixa e peso forte para a linha ser
   lida como texto, e cada linha quebra inteira no celular em vez de
   espremer três selects lado a lado. */
.auto-linha {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.auto-linha > select,
.auto-linha > input[type="text"] { flex: 1 1 160px; min-width: 0; }
.auto-rot {
  font-weight: 700; color: var(--primary);
  min-width: 56px; font-size: 12.5px; letter-spacing: .02em;
}
.auto-acao {
  border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 12px; margin-bottom: 10px; background: var(--gray-50);
}
.auto-params { display: grid; gap: 8px; }
.auto-params input[type="text"],
.auto-params input[type="number"],
.auto-params textarea,
.auto-params select { width: 100%; }
.auto-params textarea { min-height: 64px; resize: vertical; }
.auto-params label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted-2);
}
.auto-params label > select,
.auto-params label > input[type="number"] { width: auto; flex: 0 1 auto; }
.auto-nota {
  font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 8px 0 0;
}
@media (max-width: 640px) {
  .auto-linha > select, .auto-linha > input[type="text"] { flex-basis: 100%; }
  .auto-rot { flex-basis: 100%; }
}

/* ═══════════ ASSISTENTE — sugestão com cara de sugestão ═══════════
   O cartão é deliberadamente diferente do resto da interface: borda
   tracejada e fundo levemente tingido. Quem bate o olho precisa saber, sem
   ler, que aquilo ainda não é decisão do escritório. Aceito, o tracejado
   vira sólido; recusado, o cartão esmaece. */
.ia-bloco h4 { display: flex; align-items: center; gap: 8px; }
.ia-bloco h4 svg { width: 18px; height: 18px; color: var(--primary); }
.ia-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ia-botao { display: inline-flex; align-items: center; gap: 6px; }
.ia-botao svg { width: 15px; height: 15px; }
.ia-botao:disabled { opacity: .5; cursor: not-allowed; }
.ia-aviso, .ia-regras p {
  font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 8px 0 0;
}
.ia-regras { margin-top: 12px; }
.ia-lista { display: grid; gap: 10px; margin-top: 12px; }
.ia-sugestao {
  border: 1px dashed var(--primary);
  border-radius: 10px; padding: 12px;
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.ia-sugestao.aceita { border-style: solid; border-color: var(--ok); background: transparent; }
.ia-sugestao.recusada { border-color: var(--gray-200); opacity: .7; background: transparent; }
.ia-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ia-texto { white-space: pre-wrap; font-size: 13px; line-height: 1.6; }
.ia-trecho {
  font-size: 12.5px; color: var(--muted-2); margin: 8px 0 0;
  border-left: 3px solid var(--gray-200); padding-left: 10px;
}
.ia-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ia-acoes small { color: var(--muted); font-size: 12px; }
.ia-rodape { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }

/* ═══════════════════ CAIXA DE ENTRADA ═══════════════════
   A mensagem é texto de gente: o cartão dá espaço ao texto e empurra os
   metadados para as bordas. O que precisa de uma pessoa (sem cliente
   identificado) ganha barra à esquerda — dá para varrer a coluna sem ler. */
.ce-card{padding:16px 18px;}
.ce-card + .ce-card{margin-top:12px;}
.ce-sem-cliente{border-left:3px solid var(--warn-line);}
.ce-urgente{border-left:3px solid var(--bad-line);}
.ce-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.ce-topo > div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ce-meta{color:var(--muted);font-size:12px;white-space:nowrap;}
.ce-anonimo{color:var(--ink-2);}
.ce-assunto{font-weight:600;margin-top:8px;}
.ce-texto{margin:10px 0 14px;white-space:pre-wrap;line-height:1.55;color:var(--ink);}
.ce-rodape{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:12px;}
.ce-de{color:var(--muted);font-size:12px;}
.ce-acoes{display:flex;gap:6px;flex-wrap:wrap;}
.ce-alerta{color:var(--bad-texto);}
.ce-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);}
.ce-nota{font-size:12px;color:var(--muted);margin:6px 0 12px;}
/* A mensagem original, citada dentro do painel: recuo e barra, como citação. */
.ce-citacao{border-left:3px solid var(--brand-100);background:var(--brand-50);padding:10px 14px;
  border-radius:0 8px 8px 0;white-space:pre-wrap;color:var(--ink-2);margin-bottom:14px;font-size:13px;}
/* Endereço secreto: quebra em qualquer ponto para caber e poder ser copiado. */
.ce-url{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;word-break:break-all;
  background:var(--brand-50);padding:4px 8px;border-radius:6px;user-select:all;}

/* ═══════════════════ PRIMEIROS PASSOS ═══════════════════
   Bloco do painel, não modal. Enquanto falta passo essencial ele ganha a
   barra violeta da marca; depois vira um cartão comum, discreto, porque o
   que sobra ali é opcional e não deve competir com prazo. */
.pp-bloco{margin-bottom:18px;}
.pp-urgente{border-left:3px solid var(--brand);}
.pp-progresso{font-size:12px;color:var(--muted);margin-left:auto;margin-right:8px;}
.pp-chamada{margin:0 0 12px;color:var(--ink-2);font-size:13px;}
.pp-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.pp-passo > details > summary{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:8px;
  cursor:pointer;list-style:none;min-height:44px;}
.pp-passo > details > summary::-webkit-details-marker{display:none;}
.pp-passo > details > summary:hover{background:var(--brand-50);}
.pp-passo > details > summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
.pp-icone{flex:0 0 auto;width:20px;height:20px;color:var(--line);}
.pp-icone svg{width:20px;height:20px;}
.pp-passo.feito .pp-icone{color:var(--ok);}
.pp-passo.essencial:not(.feito) .pp-icone{color:var(--brand);}
.pp-titulo{font-weight:600;font-size:14px;}
.pp-passo.feito .pp-titulo{color:var(--muted);font-weight:500;}
.pp-estado{margin-left:auto;font-size:12px;color:var(--muted);text-align:right;}
.pp-corpo{padding:4px 8px 14px 38px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.pp-corpo p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;}
.pp-como{color:var(--muted) !important;}
.pp-bloqueado{color:var(--warn-texto) !important;}
/* O bloco do roteiro é lido de cima para baixo: em tela estreita o estado
   desce para a própria linha em vez de espremer o título. */
@media (max-width: 560px){
  .pp-passo > details > summary{flex-wrap:wrap;}
  .pp-estado{margin-left:30px;width:100%;text-align:left;}
  .pp-corpo{padding-left:8px;}
}

/* Banner com ação: o diagnóstico da captura leva direto ao lugar de
   resolver. Sem isto a pessoa lê "cadastre a OAB" e tem de sair procurando
   em qual das dezenove telas isso mora. */
.banner button{flex:0 0 auto;margin-left:auto;align-self:center;white-space:nowrap;}

/* ═══════════════ AUDITORIA VISUAL — RODADA 25 ═══════════════
   A rodada 13 zerou contraste, teclado e rolagem em 17 telas. Doze rodadas
   depois entraram Relatórios, Automações, Assistente e Caixa de entrada, e a
   medição mostrou três coisas que escaparam. Ficam aqui, juntas, com o
   número que as motivou. */

/* Ações de texto fora do .card-head ("+ nova regra", "+ rotina",
   "+ suspensão"): mesmo caso, mesma correção. 18px → 24px de alvo. */
.acao-texto,
.page-head a,
.painel-mais a{display:inline-flex;align-items:center;min-height:24px;padding:3px 4px;margin:-3px -4px;border-radius:6px;}

/* Caixa de seleção de 13px não se acerta com o dedo. O rótulo inteiro vira
   alvo, que é o comportamento que a pessoa já espera de um checkbox. */
input[type="checkbox"]{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;flex:0 0 auto;}
label:has(> input[type="checkbox"]){display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;}

/* Coluna de grade com o conteúdo mais largo que a tela.
   `1fr` tem `min-width:auto`, que é o tamanho do CONTEÚDO: a folha A4 de
   21cm (794px) empurrava a página inteira 551px para fora a 375px. O
   `min-width:0` devolve a decisão à grade, e a folha passa a rolar dentro do
   próprio painel, que é o que `.pet-folha-wrap{overflow:auto}` já queria.
   Mesmo defeito que a rodada 13 corrigiu nas outras grades; a de Petições
   escapou porque a tela só estoura com uma petição ABERTA — e o teste de
   responsividade de então não tinha massa. */
.pet-layout > *{min-width:0;}
@media (max-width: 860px){
  .pet-layout{grid-template-columns:1fr;}
}

/* Timesheet: o seletor de processo carrega "número — cliente" e não cabe em
   375px. Encolher é melhor do que empurrar a página. */
.timer-box{flex-wrap:wrap;}
.timer-box select,.timer-box input{min-width:0;max-width:100%;}
.timesheet-linha{flex-wrap:wrap;}

/* ═══════════════ COBRANÇA ═══════════════ */
.cb-nota{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0 0 12px;}
.cb-pago{display:block;font-size:11px;color:var(--muted);margin-top:2px;}

/* ═══════════════ TELA DE PAGAMENTO ═══════════════
   Não é uma tela do sistema: é a única coisa na tela. Por isso ela ignora a
   grade das outras e centraliza, como o login. */
.sidebar.bloqueado .nav-item,
.sidebar.bloqueado .nav-section-title{opacity:.35;pointer-events:none;}
.pg-tela{display:flex;justify-content:center;padding:24px 0 48px;}
.pg-cartao{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;max-width:620px;width:100%;box-shadow:0 12px 40px rgba(29,30,32,.08);}
.pg-rotulo{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--brand-600);margin:0 0 8px;}
.pg-cartao h2{font-size:22px;font-weight:700;color:var(--ink);line-height:1.25;margin:0 0 10px;}
.pg-texto{color:var(--ink-2);line-height:1.6;margin:0 0 20px;}
.pg-alerta{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad-texto);
  border-radius:12px;padding:14px 16px;margin-bottom:20px;line-height:1.55;font-size:13.5px;}
.pg-valor{background:var(--brand-50);border:1px solid var(--brand-100);border-radius:12px;
  padding:16px 18px;margin-bottom:18px;display:flex;flex-direction:column;gap:3px;}
.pg-valor strong{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.02em;}
.pg-valor span{font-size:12.5px;color:var(--muted);}
.pg-meios{display:flex;gap:10px;flex-wrap:wrap;}
.pg-meios button{flex:1 1 200px;justify-content:center;}
.pg-resultado:not(:empty){margin-top:18px;}
.pg-pix{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.pg-pix p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55;}
.pg-pix textarea{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  border:1px solid var(--line);border-radius:10px;padding:10px;resize:vertical;background:var(--bg);}
.pg-qr{width:180px;height:180px;image-rendering:pixelated;border:1px solid var(--line);border-radius:10px;}
.pg-nota{font-size:12.5px;color:var(--muted);line-height:1.55;margin:8px 0 0;}
.pg-garantias{border-top:1px solid var(--line);margin-top:26px;padding-top:20px;}
.pg-garantias h3{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 10px;}
.pg-garantias ul{margin:0 0 14px;padding-left:18px;display:flex;flex-direction:column;gap:7px;}
.pg-garantias li{font-size:13.5px;color:var(--ink-2);line-height:1.55;}
.pg-garantia-janela{margin-top:20px;background:var(--ok-bg);border:1px solid var(--ok-line);
  color:var(--ok-texto);border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.6;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.pg-sair{margin-top:22px;background:none;border:0;color:var(--muted);font:inherit;font-size:12.5px;
  text-decoration:underline;cursor:pointer;padding:6px 0;min-height:24px;}
@media (max-width: 560px){ .pg-cartao{padding:22px;} .pg-valor strong{font-size:26px;} }

/* ─────────────────────── ÁREAS DO DIREITO ────────────────────────
   Paleta das áreas. Os valores são os mesmos de backend/src/lib/areas.js e
   foram MEDIDOS, não escolhidos no olho: cada `-tx` tem no mínimo 4,5:1 sobre
   a sua própria tinta (AA), e cada `-fi` no mínimo 3:1 sobre o branco (WCAG
   1.4.11, elemento não textual — o ponto e a barra da faixa).

   A cor da área NUNCA aparece sozinha: o nome vem escrito ao lado do ponto.
   Doze matizes não são distinguíveis por quem tem deficiência de visão de
   cores, e a área decide contagem de prazo. */
:root{
  --a-violeta-fi:#8b58e4; --a-violeta-bg:#f3edfd; --a-violeta-tx:#5b1fc1;
  --a-azul-fi:#5895e4;    --a-azul-bg:#edf4fd;    --a-azul-tx:#1f65c1;
  --a-ciano-fi:#1fa2bd;   --a-ciano-bg:#edfafd;   --a-ciano-tx:#17798c;
  --a-verde-fi:#1ba774;   --a-verde-bg:#edfdf7;   --a-verde-tx:#157f58;
  --a-lima-fi:#63a21a;    --a-lima-bg:#f5fded;    --a-lima-tx:#4d7f15;
  --a-ambar-fi:#bd8d1f;   --a-ambar-bg:#fdf8ed;   --a-ambar-tx:#916c18;
  --a-laranja-fi:#de7935; --a-laranja-bg:#fdf3ed; --a-laranja-tx:#af571d;
  --a-vermelho-fi:#e45d58;--a-vermelho-bg:#fdeded;--a-vermelho-tx:#c1251f;
  --a-rosa-fi:#e45890;    --a-rosa-bg:#fdedf3;    --a-rosa-tx:#c11f60;
  --a-magenta-fi:#e458cd; --a-magenta-bg:#fdedfa; --a-magenta-tx:#c11fa6;
  --a-roxo-fi:#c358e4;    --a-roxo-bg:#f9edfd;    --a-roxo-tx:#9b1fc1;
  --a-grafite-fi:#9093a7; --a-grafite-bg:#f3f4f6; --a-grafite-tx:#63667e;
}

.tag-area{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px 3px 7px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1.5;
  background:var(--area-bg,var(--a-grafite-bg));
  color:var(--area-tx,var(--a-grafite-tx));
  border:1px solid color-mix(in srgb, var(--area-fi,var(--a-grafite-fi)) 35%, transparent);
  max-width:100%;
}
.tag-area i{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--area-fi,var(--a-grafite-fi));
}
.a-violeta{--area-fi:var(--a-violeta-fi);--area-bg:var(--a-violeta-bg);--area-tx:var(--a-violeta-tx);}
.a-azul{--area-fi:var(--a-azul-fi);--area-bg:var(--a-azul-bg);--area-tx:var(--a-azul-tx);}
.a-ciano{--area-fi:var(--a-ciano-fi);--area-bg:var(--a-ciano-bg);--area-tx:var(--a-ciano-tx);}
.a-verde{--area-fi:var(--a-verde-fi);--area-bg:var(--a-verde-bg);--area-tx:var(--a-verde-tx);}
.a-lima{--area-fi:var(--a-lima-fi);--area-bg:var(--a-lima-bg);--area-tx:var(--a-lima-tx);}
.a-ambar{--area-fi:var(--a-ambar-fi);--area-bg:var(--a-ambar-bg);--area-tx:var(--a-ambar-tx);}
.a-laranja{--area-fi:var(--a-laranja-fi);--area-bg:var(--a-laranja-bg);--area-tx:var(--a-laranja-tx);}
.a-vermelho{--area-fi:var(--a-vermelho-fi);--area-bg:var(--a-vermelho-bg);--area-tx:var(--a-vermelho-tx);}
.a-rosa{--area-fi:var(--a-rosa-fi);--area-bg:var(--a-rosa-bg);--area-tx:var(--a-rosa-tx);}
.a-magenta{--area-fi:var(--a-magenta-fi);--area-bg:var(--a-magenta-bg);--area-tx:var(--a-magenta-tx);}
.a-roxo{--area-fi:var(--a-roxo-fi);--area-bg:var(--a-roxo-bg);--area-tx:var(--a-roxo-tx);}
.a-grafite{--area-fi:var(--a-grafite-fi);--area-bg:var(--a-grafite-bg);--area-tx:var(--a-grafite-tx);}

/* ── Modo "Áreas": a fila quebrada em faixas ── */
.area-secao{margin:0 0 26px;}
.area-secao:last-child{margin-bottom:8px;}
.area-cab{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  padding:8px 12px;border-radius:var(--radius);
  background:var(--area-bg,var(--a-grafite-bg));
  border-left:4px solid var(--area-fi,var(--a-grafite-fi));
}
.area-cab h3{
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:var(--area-tx,var(--a-grafite-tx));margin:0;
}
.area-cab .conta{
  margin-left:auto;font-size:12px;font-weight:700;
  color:var(--area-tx,var(--a-grafite-tx));
}
/* A faixa "sem área" não é decorativa: é a fila de trabalho de quem
   classifica. Fica tracejada para não passar por área de verdade. */
.area-secao.sem-area .area-cab{border-left-style:dashed;background:var(--line-2);}
.area-secao.sem-area .area-cab h3{color:var(--muted);}
.area-vazia{
  font-size:13px;color:var(--muted);padding:2px 0 0 4px;
}

/* ── Cadastro de áreas (Gestão) ── */
.area-linha{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);margin-bottom:8px;
}
.area-linha.inativa{opacity:.62;background:var(--line-2);}
.area-linha .nome{font-weight:700;font-size:14px;min-width:150px;}
.area-linha .uso{font-size:12px;color:var(--muted);}
.area-linha .acoes{margin-left:auto;display:flex;gap:8px;}
/* Seletor de cor: 12 botões redondos. O estado escolhido não é só a cor —
   tem anel e ✓, porque "qual está selecionado?" não pode depender de cor. */
.paleta{display:flex;flex-wrap:wrap;gap:8px;}
.paleta button{
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  border:2px solid var(--line);background:var(--swatch);
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:900;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.paleta button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--ink-2);}
.paleta button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
/* Áreas do cliente, no alto da lista de processos da pasta. Só aparece quando
   há mais de uma: com uma só, a etiqueta de cada processo já diz tudo. */
.pasta-areas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px 0;}
.pasta-areas small{font-size:11px;font-weight:700;color:var(--muted);margin:0 6px 0 -4px;}
/* Etiqueta da área no cabeçalho de cada processo da pasta: vai para a direita,
   junto da etiqueta de fase, em vez de empurrar o número do processo. */
.pasta-proc-topo .tag-area{margin-left:auto;}