@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #0a0a0a;
  --navy-2: #1f1f1f;
  --ink: #0a0a0a;
  --muted: #6b6b6b;
  --line: #e4e4e4;
  --bg: #f4f4f4;
  --card: #ffffff;
  --accent: #0a0a0a;
  --accent-2: #2b2b2b;
  --accent-dark: #000000;
  --ok: #0f7d44;
  --ok-bg: #e7f7ee;
  --warn: #9a6512;
  --warn-bg: #fcf3e2;
  --err: #d23b3b;
  --err-bg: #fdeceb;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow: 0 4px 16px rgba(16, 24, 40, 0.07), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 18px 40px rgba(16, 24, 40, 0.13), 0 4px 10px rgba(16, 24, 40, 0.06);
  --gold: #c9a54c;   /* o dourado do "jus", lido da própria arte da marca */
  --gold-soft: #3d3d3d;
  --accent-soft: #ececec;
  --surface: #fafafa;

  /* Peças que o tema escuro precisa trocar. Estavam cravadas pelo CSS afora;
     viraram variáveis para que exista UM lugar onde o tema é decidido. */
  --surface-2: #fbfcfe;        /* linha alternada, item marcado, barra de progresso */
  --campo: #ffffff;            /* fundo de input e textarea */
  --line-forte: #c7cfdd;       /* borda de realce (foco de mouse, caixa de marcar) */
  --brilho-1: #e7ecf4;         /* os dois brilhos do fundo da página */
  --brilho-2: #f3efe6;
  --foco: rgba(10, 10, 10, 0.14);
  --foco-forte: rgba(10, 10, 10, 0.26);
  --btn-1: #2b2b2b;            /* botão principal: no escuro ele inverte, */
  --btn-2: #0a0a0a;            /* senão um botão preto some num fundo preto */
  --btn-2-forte: #000000;
  --btn-texto: #ffffff;
  --neutro-bg: #eef1f7;
  --neutro-fg: #4a5468;
  --aviso-bg: #fde7c9;
  --aviso-fg: #8a4b00;
  --aviso-linha: #f0d4a3;
  --err-linha: #f6c9c6;
  --err-bg-2: #f9d9d6;
  --ok-linha: #b9e6cd;
  --btn-brilho: rgba(255, 255, 255, 0.22);   /* brilho SOBRE o botão principal */
  --info: #2563a8;             /* azul de categoria e do selo "fazendo" */
  --info-bg: #e6eef8;
  color-scheme: light;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(1100px 480px at 100% -8%, var(--brilho-1) 0%, transparent 62%),
    radial-gradient(900px 420px at -8% 0%, var(--brilho-2) 0%, transparent 58%),
    var(--bg);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* Títulos/marca em serifa ótica (Fraunces); corpo, tabela e valores seguem em Inter. */
h1, h2, .brand, .office-title, .skill-card h2, .review h4 {
  font-family: var(--font-display); font-weight: 600;
}

/* ---------- Top bar ---------- */
.topbar {
  background: linear-gradient(180deg, #0a0a0a 0%, #1c1c1c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  padding-left: max(32px, calc((100vw - 1080px) / 2));
  padding-right: max(32px, calc((100vw - 1080px) / 2));
  border-bottom: 1px solid rgba(176, 134, 66, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px rgba(15, 25, 45, 0.22);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  color: #fff; text-decoration: none; font-size: 1.2rem;
  letter-spacing: 0; display: flex; align-items: center; gap: 10px;
}
.brand span {
  color: var(--gold-soft); font-weight: 500;
  padding-left: 11px; border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.topnav { display: flex; align-items: center; gap: 18px; }
.who { color: #cdd7ee; font-size: 0.9rem; font-weight: 500; }
.navlink { color: #cdd7ee; text-decoration: none; font-size: 0.9rem; transition: color 0.15s; }
.navlink:hover { color: #fff; }
.linkbtn {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 0.88rem;
  font-family: inherit; transition: background 0.15s;
}
.linkbtn:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- Layout ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 48px 24px 80px; }
h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.05rem); line-height: 1.15;
  margin: 0 0 var(--s2); letter-spacing: -0.01em; text-wrap: balance;
}
h2 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.card > h1 + .muted { margin-bottom: var(--s5); }
.section-title { margin-top: var(--s7); padding-bottom: 6px; }

details.office {
  padding: var(--s5) var(--s5) var(--s6);
  margin-bottom: var(--s5);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow-sm);
}
details.office:first-of-type > .office-title { margin-top: 0; }
.office-title {
  font-size: 1.18rem; color: var(--navy);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 var(--s3); padding: 0 0 var(--s3); border-bottom: 2px solid var(--line);
  cursor: pointer; list-style: none; user-select: none;
  transition: color 0.12s;
}
.office-title::-webkit-details-marker { display: none; }
.office-title:hover { color: var(--accent-dark); }
.office-title::before {
  content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted);
}
/* Logo da banca no lugar do ponto (substitui o pseudo-elemento por imagem). */

.office-title::after {
  content: '▾'; color: var(--muted); font-size: 0.85rem; flex: none;
  transition: transform 0.18s ease;
}
details.office:not([open]) > .office-title::after { transform: rotate(-90deg); }
details.office:not([open]) > .office-title { border-bottom-color: transparent; margin-bottom: 0; padding-bottom: 0; }
.office-sub { font-size: 0.8rem; font-weight: 500; color: var(--muted); letter-spacing: 0.2px; font-family: var(--font-sans); }
.office-count {
  margin-left: auto; background: var(--accent-soft); color: var(--accent-dark);
  border-radius: 99px; padding: 2px 10px; font-size: 0.72rem; font-weight: 800;
  font-family: var(--font-sans);
}
.back { display: inline-block; margin-bottom: var(--s5); color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.back:hover { text-decoration: underline; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s6) 40px;
  margin-bottom: var(--s5);
}
.card.login { max-width: 400px; margin: 12vh auto 0; padding: 40px 36px; }
.card.login h1 { text-align: center; }
.card.login .muted { text-align: center; margin-bottom: 22px; }

/* ---------- Skill grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--s5);
  margin-top: var(--s5);
}
.skill-card {
  position: relative;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 22px 20px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.skill-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold-soft));
  opacity: 0.55; transition: opacity 0.18s ease;
}
.skill-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-forte);
  box-shadow: var(--shadow-lg);
}
.skill-card:hover::before { opacity: 1; }
.skill-icon {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.skill-card h2 { margin: 0 0 8px; color: var(--navy); font-size: 1.12rem; line-height: 1.3; text-wrap: balance; }
.skill-card p { color: var(--muted); margin: 0 0 18px; flex: 1; font-size: 0.9375rem; line-height: 1.55; }
.skill-card .cta { color: var(--accent); font-weight: 700; font-size: 0.92rem; }

/* ---------- Forms ---------- */
.field { display: block; margin-bottom: var(--s5); }
.field > span {
  display: block; font-weight: 600; margin-bottom: 7px; font-size: 0.8125rem;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--navy);
}
.field small { display: block; color: var(--muted); margin-top: 7px; font-size: 0.8125rem; line-height: 1.45; }
input, textarea {
  width: 100%; padding: 12px 13px; border: 1.5px solid var(--line);
  border-radius: 8px; font: inherit; background: var(--campo); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--foco); background: var(--campo); }
input[type=file] { padding: 10px; background: var(--campo); cursor: pointer; }
textarea { resize: vertical; }
.outinfo { background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); padding: 12px 14px; border-radius: 11px; font-size: 0.92rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border: 0; border-radius: 8px; padding: 12px 22px;
  font: inherit; font-weight: 700; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}
.btn.primary {
  background: linear-gradient(180deg, var(--btn-1), var(--btn-2));
  color: var(--btn-texto); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.btn.primary:hover { background: linear-gradient(180deg, var(--btn-1), var(--btn-2-forte)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
.btn.primary:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }

/* ---------- Messages ---------- */
.error { background: var(--err-bg); border: 1px solid var(--err-linha); color: var(--err); padding: 11px 14px; border-radius: 8px; margin-top: 12px; font-size: 0.92rem; }
.ok-msg { background: var(--ok-bg); border: 1px solid var(--ok-linha); color: var(--ok); padding: 11px 14px; border-radius: 8px; margin-top: 12px; font-size: 0.92rem; }

/* ---------- Progress ---------- */
.progress { margin-top: 18px; }
.progress .bar { height: 9px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progress .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.25s ease; }
.progress .ptext { display: block; margin-top: 9px; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* ---------- Status ---------- */
.statusline { display: flex; align-items: center; gap: 10px; }
.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px;
  font-size: 0.78rem; font-weight: 700; text-transform: none; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.queued { background: var(--neutro-bg); color: var(--neutro-fg); }
.status.running { background: var(--warn-bg); color: var(--warn); }
.status.done { background: var(--ok-bg); color: var(--ok); }
.status.error { background: var(--err-bg); color: var(--err); }
.status.aviso { background: var(--aviso-bg); color: var(--aviso-fg); }
.warn-msg { background: var(--aviso-bg); border: 1px solid var(--aviso-linha); color: var(--aviso-fg); padding: 11px 14px; border-radius: 11px; margin-top: 12px; font-size: 0.92rem; line-height: 1.5; }

/* Lista: revisões aninhadas sob o pedido original + coluna processo/cliente */
table.jobs tr.revrow td { background: var(--surface-2); color: var(--muted); font-size: 0.85rem; }
table.jobs tr.revrow td:first-child { padding-left: 30px; }
.revarrow { color: var(--accent); font-weight: 700; margin-right: 3px; }
.ref-proc { font-variant-numeric: tabular-nums; }
.ref-nome { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 1px; }

.spinner {
  width: 17px; height: 17px; border: 2.5px solid var(--line-forte); border-top-color: var(--accent);
  border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Files ---------- */
.files { list-style: none; padding: 0; margin: 10px 0 0; }
.files li { margin: 0 0 9px; }
.files a {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px;
  background: var(--accent-soft); border: 1px solid var(--line);
  border-radius: 8px; color: var(--accent-dark); text-decoration: none; font-weight: 600; font-size: 0.92rem;
  transition: border-color 0.15s, transform 0.1s;
}
.files a::before { content: '⬇'; font-size: 0.85rem; opacity: 0.7; }
.files a:hover { border-color: var(--accent); transform: translateX(2px); }

/* ---------- Tables ---------- */
table.jobs {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  font-variant-numeric: tabular-nums;
}
table.jobs th, table.jobs td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 0.91rem; }
table.jobs td { font-variant-numeric: tabular-nums; }
table.jobs th { background: var(--surface); color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.07em; }
table.jobs tbody tr { transition: background 0.12s; }
table.jobs tbody tr:hover { background: var(--surface-2); }
table.jobs tr:last-child td { border-bottom: 0; }
table.jobs td a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
table.jobs td a:hover { text-decoration: underline; }
.tag { display: inline-block; font-size: 0.68rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-dark); padding: 2px 8px; border-radius: 99px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.4px; }

/* ---------- Log ---------- */
.logwrap { margin-top: 20px; }
.logwrap summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.logwrap pre {
  background: #131a2b; color: #cfe0ff; padding: 16px; border-radius: 10px; margin-top: 10px;
  overflow: auto; max-height: 360px; font-size: 0.8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}

/* ---------- Botões de marcar (choices) ---------- */
fieldset.choicebox { border: 0; padding: 0; margin: 0 0 var(--s5); }
.choices { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }
.choice {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 16px;
  cursor: pointer; background: var(--card); font-size: 0.92rem; font-weight: 600; color: var(--ink);
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.choice input { accent-color: var(--accent); margin: 0; }
.choice:hover { border-color: var(--line-forte); }
.choice:focus-within { outline: none; box-shadow: 0 0 0 3px var(--foco-forte); }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px var(--foco-forte);
}

/* ---------- Auditoria de êxito ---------- */
.card.exito-alta { border-left: 4px solid var(--ok); }
.card.exito-media { border-left: 4px solid var(--warn); }
.card.exito-baixa, .card.exito-remota { border-left: 4px solid var(--err); }
.exito-badge {
  font-size: 0.72rem; font-weight: 800; padding: 3px 12px; border-radius: 99px;
  vertical-align: middle; margin-left: 8px; letter-spacing: 0.04em;
}
.exito-badge.alta { background: var(--ok-bg); color: var(--ok); }
.exito-badge.media { background: var(--warn-bg); color: var(--warn); }
.exito-badge.baixa, .exito-badge.remota { background: var(--err-bg); color: var(--err); }

/* ---------- Conferência ---------- */
#confcard { border-left: 4px solid var(--accent); }
.review { font-size: 0.93rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.review h4 { margin: 16px 0 6px; color: var(--navy); font-size: 1rem; }
.review h4:first-child { margin-top: 4px; }
.review p { margin: 0 0 8px; }
.review ul { margin: 0 0 12px; padding-left: 20px; }
.review li { margin: 3px 0; }

/* ---------- Acessibilidade (foco de teclado) ---------- */
.skill-card:focus-visible, .btn:focus-visible, .files a:focus-visible, .navlink:focus-visible, .back:focus-visible, .office-title:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--foco-forte);
}

.foot { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 28px; }

/* ===== Painel "Arquivos gerados" — lista limpa com barra de ferramentas ===== */
:root{ --dur:150ms; --ease:cubic-bezier(.2,0,0,1); }
#results .sub{margin:0 0 18px;color:var(--muted);font-size:13px;}

#results .files-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px 10px 14px;
}
#results .tb-left{display:flex;align-items:center;gap:14px;flex:1;min-width:200px;}
#results .seltoggle{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid var(--line);
  background:var(--card);border-radius:8px;padding:6px 11px;font:inherit;font-size:12.5px;font-weight:600;color:var(--accent);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);user-select:none;white-space:nowrap;
}
#results .seltoggle:hover{border-color:var(--line-forte);background:var(--surface-2);}
#results .seltoggle svg{width:14px;height:14px;flex:none;}
#results .selcount{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
#results .selcount b{color:var(--ink);font-weight:700;}

#results .btn .zipnum{background:var(--btn-brilho);border-radius:20px;padding:1px 8px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
#results .btn svg{width:16px;height:16px;flex:none;}
#results .files-toolbar .btn.primary{display:inline-flex;align-items:center;gap:8px;}

/* Lista (sobrescreve o estilo .files herdado: pílulas viram linhas com separadores) */
#results .files{list-style:none;padding:0;margin:14px 0 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
#results .files li{display:flex;align-items:center;gap:12px;margin:0;padding:11px 14px;border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease);}
#results .files li:last-child{border-bottom:0;}
#results .files li:hover{background:var(--surface);}
#results .files li:has(input:checked){background:var(--surface-2);}

#results .files li > input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:0;
  border:1.5px solid var(--line-forte);border-radius:5px;background:var(--campo);cursor:pointer;position:relative;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
#results .files li > input[type=checkbox]:hover{border-color:var(--accent-2);}
#results .files li > input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent);}
#results .files li > input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;
  border:solid var(--card);border-width:0 2px 2px 0;transform:rotate(45deg);}
#results .files li > input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--foco-forte);}

#results .badge{flex:none;display:inline-flex;align-items:center;justify-content:center;width:46px;height:24px;
  border-radius:6px;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;}
#results .badge.docx{background:var(--neutro-bg);color:var(--neutro-fg);}
#results .badge.pdf{background:var(--err-bg);color:var(--err);}
#results .badge.xlsx{background:var(--ok-bg);color:var(--ok);}

/* Anula o ::before "⬇" herdado de .files a — aqui o link é só o ícone à direita */
#results .files a.dl::before{content:none;}
#results .files .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;}

#results .files a.dl{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  padding:0;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--accent);text-decoration:none;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);}
#results .files a.dl:hover{background:var(--accent-soft);border-color:var(--line-forte);color:var(--accent-dark);transform:none;}
#results .files a.dl:focus-visible{outline:none;box-shadow:0 0 0 3px var(--foco-forte);}
#results .files a.dl svg{width:17px;height:17px;}

#results .files-foot{margin-top:12px;color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:6px;}
#results .files-foot svg{width:14px;height:14px;flex:none;color:var(--ok);}

@media (max-width:520px){
  #results .files-toolbar{align-items:stretch;}
  #results .files-toolbar .btn.primary{width:100%;justify-content:center;}
}

/* ===== Administração de usuários ===== */
.badge-admin{display:inline-block;background:var(--accent);color:var(--card);font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:99px;vertical-align:middle;}
.badge-off{display:inline-block;background:var(--err-bg);color:var(--err);font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:99px;vertical-align:middle;}
.adminbox{padding:18px 20px;margin-bottom:22px;}
.adminbox .adminsum{font-family:var(--font-display);font-size:1.15rem;font-weight:600;cursor:pointer;list-style:none;}
.adminbox .adminsum::-webkit-details-marker{display:none;}
.adminform{margin-top:14px;}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px;}
.accessbox{border-top:1px solid var(--line);padding-top:12px;margin:8px 0 16px;}
.accgroup{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:10px 0;}
.accgroup legend{padding:0 6px;font-size:.95rem;}
.grplabel{cursor:pointer;user-select:none;}
.accgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 16px;margin-top:6px;}
.acc{display:flex;align-items:center;gap:7px;font-size:.9rem;color:var(--ink);padding:3px 0;cursor:pointer;}
.acc input,.grplabel input{width:16px;height:16px;flex:none;cursor:pointer;}

.userlist{display:flex;flex-direction:column;gap:12px;}
.usercard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow-sm);}
.usercard.is-off{opacity:.62;background:var(--surface);}
.userhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.userhead .uname{font-size:1rem;}
.accsummary{font-size:.82rem;color:var(--muted);white-space:nowrap;}
.useractions{margin-top:10px;}
.useractions > summary{cursor:pointer;font-size:.85rem;color:var(--accent);font-weight:600;width:max-content;}
.accform{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px;}
.actionrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;}
.actionrow .inline{display:flex;gap:6px;align-items:center;margin:0;}
.actionrow .inline input{padding:7px 10px;font-size:.85rem;width:auto;min-width:150px;}
.actionrow .btn{padding:8px 14px;font-size:.82rem;}
.btn.danger{background:var(--err-bg);color:var(--err);border:1px solid var(--err-linha);}
.btn.danger:hover{background:var(--err-bg-2);}

/* --- marca Contack: o wordmark é imagem; nunca redesenhar com fonte --- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 13px; width: auto; display: block; }
.brand .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.login-brand { display: flex; justify-content: center; margin-bottom: var(--s5); }
.login-brand img { height: 21px; width: auto; }


/* --- publicações e carteira de processos --- */
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4); margin: var(--s4) 0; }
.inline-form .field { margin-bottom: 0; }
.inline-form input, .inline-form select { min-width: 140px; }
.inline-form .muted { padding-bottom: 10px; }
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--ink);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2px;
}
.pub-texto { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.5; max-width: 70ch; }
tr.lida { opacity: 0.55; }
.linkbtn.danger { color: var(--err); }
.ok-msg {
  background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-linha);
  padding: 10px 14px; border-radius: var(--radius); font-weight: 500;
}


/* --- leitura das intimações: selos, painel e teor --- */
.painel { display: flex; gap: var(--s4); flex-wrap: wrap; margin: var(--s4) 0; }
.painel-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 18px; min-width: 132px;
}
.painel-item .n { display: block; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.painel-item .r { display: block; color: var(--muted); font-size: 0.8rem; }
.painel-item.urgente .n { color: var(--err); }
.selo {
  display: inline-block; margin: 0 6px 6px 0; padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2px;
  background: var(--accent-soft); color: var(--ink);
}
.selo.cor-vermelho { background: var(--err-bg); color: var(--err); }
.selo.cor-ambar    { background: var(--warn-bg); color: var(--warn); }
.selo.cor-verde    { background: var(--ok-bg); color: var(--ok); }
.selo.cor-cinza    { background: var(--accent-soft); color: var(--muted); }
.selo.urg-alta     { background: var(--err-bg); color: var(--err); }
.selo.urg-media    { background: var(--warn-bg); color: var(--warn); }
.selo.urg-baixa    { background: var(--accent-soft); color: var(--muted); }
.selo.prazo        { background: var(--ink); color: var(--card); }
.o-que-fazer { margin: 6px 0; font-size: 0.9rem; line-height: 1.5; max-width: 52ch; }
.leitura {
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: var(--s4) var(--s5); margin: var(--s5) 0; background: var(--surface);
}
.leitura.cor-vermelho { border-left-color: var(--err); }
.leitura.cor-ambar    { border-left-color: var(--warn); }
.leitura.cor-verde    { border-left-color: var(--ok); }
.leitura-topo { margin-bottom: 8px; }
.leitura .o-que-fazer { max-width: 68ch; font-size: 0.95rem; }
.teor {
  white-space: pre-wrap; word-wrap: break-word; font-family: var(--font-sans);
  font-size: 0.9rem; line-height: 1.6; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s4); max-height: 60vh; overflow: auto;
}


/* --- publicações: cabeçalho de página, filtros e lista em cartões --- */
.titulo-pagina { margin: 0 0 4px; }
.sub-pagina { margin: 0 0 var(--s5); }
.inline-titulo { display: inline; font-size: 1.05rem; }
.card > summary { cursor: pointer; list-style: none; }
.card > summary::-webkit-details-marker { display: none; }
.card > summary::after { content: '▾'; float: right; color: var(--muted); transition: transform 0.18s; }
details[open] > summary::after { transform: rotate(180deg); }

a.painel-item { text-decoration: none; transition: border-color 0.18s, transform 0.18s; }
a.painel-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.painel-item.ativo { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.acoes-linha { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; margin-top: var(--s4); }
.acao-bloco { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }

.filtros { border-bottom: 1px solid var(--line); padding-bottom: var(--s4); margin-bottom: var(--s4); }
.filtro-form { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-end; margin: 0; }
.filtro { display: flex; flex-direction: column; gap: 5px; }
.filtro.cresce { flex: 1 1 240px; }
.filtro > span { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.filtro select, .filtro input { width: 100%; }
.titulo-lista { margin: 0 0 var(--s4); font-size: 1.05rem; }

.lista-pub { list-style: none; margin: 0; padding: 0; }
.pub {
  border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius);
  padding: var(--s4) var(--s5); margin-bottom: var(--s4); background: var(--card);
}
.pub.cor-vermelho { border-left-color: var(--err); }
.pub.cor-ambar    { border-left-color: var(--warn); }
.pub.cor-verde    { border-left-color: var(--ok); }
.pub.cor-cinza    { border-left-color: var(--line); }
.pub.lida { opacity: 0.6; }
.pub-cabeca { display: flex; flex-wrap: wrap; gap: 4px var(--s4); align-items: baseline; justify-content: space-between; }
.pub-processo { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.pub-meta { color: var(--muted); font-size: 0.8rem; }
.pub-selos { margin: 8px 0 4px; }
.pub-classe { color: var(--muted); font-size: 0.78rem; }
.pub .o-que-fazer { margin: 6px 0; max-width: 78ch; }
.pub .pub-texto { margin: 6px 0 10px; max-width: 95ch; }
.pub-acoes { font-size: 0.875rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.pub-acoes form.inline { display: inline; margin: 0; }
.card.vazio { text-align: center; padding: var(--s7) var(--s5); }

@media (max-width: 720px) {
  .painel-item { flex: 1 1 130px; }
  .filtro-form { gap: var(--s3); }
  .pub-cabeca { flex-direction: column; }
}

.paginacao { display: flex; align-items: center; gap: var(--s4); justify-content: center; margin-top: var(--s5); }


/* No celular o menu estourava a largura e escondia "Meus processos" e "Sair". */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .topnav { width: 100%; flex-wrap: wrap; gap: 10px 14px; justify-content: flex-start; }
  .topnav .who { width: 100%; }
  .container { padding-left: 16px; padding-right: 16px; }
  table.jobs { display: block; overflow-x: auto; }
}

.pub-partes { margin: 4px 0 6px; font-size: 0.9rem; max-width: 90ch; }
.pub-partes .rotulo { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; margin-right: 4px; }


/* --- tarefa em segundo plano: a barra que mostra que algo está acontecendo --- */
.progresso-tarefas:not([data-ativo="1"]) { display: none; }
.progresso-tarefas { margin: var(--s4) 0 0; }
.tarefa { margin-bottom: var(--s3); }
.tarefa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: 6px; font-size: 0.9rem; }
.barra { height: 8px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; }
.barra-cheia {
  height: 100%; background: var(--accent); border-radius: 999px;
  transition: width 0.6s ease;
  background-image: linear-gradient(90deg, var(--btn-brilho) 25%, transparent 25%, transparent 50%, var(--btn-brilho) 50%, var(--btn-brilho) 75%, transparent 75%);
  background-size: 22px 22px;
  animation: anda 1s linear infinite;
}
@keyframes anda { from { background-position: 0 0; } to { background-position: 22px 0; } }
@media (prefers-reduced-motion: reduce) { .barra-cheia { animation: none; } }

.aviso-perfil { border-left: 4px solid var(--warn); }
.aviso-perfil h2 { margin-top: 0; font-size: 1.05rem; }

.vindo-de { border-left: 4px solid var(--accent); background: var(--surface); }
.vindo-de p { margin: 4px 0; }

/* --- pauta do dia (Hoje) e estados da intimação --- */
.faixa-acao {
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between;
  border-left: 4px solid var(--accent);
}
.faixa-acao form { margin: 0; }
.titulo-lista.cor-vermelho { border-left: 4px solid var(--err); padding-left: 10px; }
.titulo-lista.cor-ambar    { border-left: 4px solid var(--warn); padding-left: 10px; }
.titulo-lista.cor-azul     { border-left: 4px solid var(--info); padding-left: 10px; }
.pub.cor-azul { border-left-color: var(--info); }
.selo.estado-a_fazer   { background: var(--warn-bg); color: var(--warn); }
.selo.estado-fazendo   { background: var(--info-bg); color: var(--info); }
.selo.estado-resolvida { background: var(--ok-bg); color: var(--ok); }
.btn.pequeno { padding: 5px 12px; font-size: 0.85rem; }
.pub-meta .antiga { color: var(--err); }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.lista-simples li:last-child { border-bottom: none; }
.rodape-hoje p { margin: 4px 0; }

/* Aviso que fica: busca que falhou não pode sumir da tela no primeiro recarregamento. */
.aviso-busca {
  border-left: 4px solid var(--warn); background: var(--warn-bg);
  padding: 12px 16px; border-radius: var(--radius); margin: var(--s4) 0;
}
.aviso-busca p { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.5; max-width: 80ch; }

/* Consulta ao diário feita pelo navegador do advogado. */
.busca-navegador {
  border-left: 4px solid var(--accent); background: var(--surface);
  padding: 14px 18px; border-radius: var(--radius); margin: var(--s4) 0;
}
.busca-navegador p { margin: 6px 0 10px; max-width: 82ch; }
.busca-navegador .barra { margin: 10px 0 6px; }
.busca-navegador .estado { font-size: 0.9rem; }

/* --- Trilha de acesso e verificação em duas etapas ------------------------- */
/* Linha de tentativa que falhou: senha errada, código errado, ação recusada.  */
table.jobs tr.linha-falha td { background: var(--err-bg); }
table.jobs tr.linha-falha td:first-child { box-shadow: inset 3px 0 0 var(--err); }
table.jobs td code { font-size: 0.82rem; color: var(--muted); }

/* A chave do autenticador e os códigos de recuperação existem para serem LIDOS
   e digitados por uma pessoa: monoespaçado, grande e com espaço entre grupos.  */
code.chave-mfa {
  display: inline-block; font-size: 1.15rem; letter-spacing: 0.12em;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; user-select: all;
}
ul.codigos-recuperacao {
  list-style: none; padding: 0; margin: 12px 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
}
ul.codigos-recuperacao code {
  display: block; text-align: center; padding: 9px 4px; font-size: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; user-select: all;
}

/* ===========================================================================
   Tema escuro
   ---------------------------------------------------------------------------
   Duas portas para a mesma paleta:
     1. o sistema pede escuro e o usuário NÃO escolheu claro explicitamente;
     2. o usuário escolheu escuro.
   O `:not([data-tema="claro"])` é o que faz a escolha da pessoa ganhar do
   sistema operacional — sem ele, quem prefere claro num Mac em modo escuro
   clicaria no botão e nada mudaria.

   A barra de topo NÃO está aqui: ela é preta nos dois temas, porque é a marca.
   =========================================================================== */
:root[data-tema="escuro"],
:root:not([data-tema="claro"]) {
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) { color-scheme: light; }
}

/* A paleta em si, repetida nos dois seletores porque CSS não deixa
   declarar um bloco e apontar dois gatilhos para ele. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --navy: #f0f0f0;
    --navy-2: #d8d8d8;
    --ink: #ededed;
    --muted: #9a9a9a;
    --line: #2e2e2e;
    --bg: #0e0e0e;
    --card: #171717;
    --accent: #ededed;
    --accent-2: #c9c9c9;
    --accent-dark: #ffffff;
    --accent-soft: #2a2a2a;
    --surface: #1c1c1c;
    --surface-2: #202020;
    --campo: #141414;
    --line-forte: #3f3f3f;
    --brilho-1: #14181f;
    --brilho-2: #1a1712;
    --foco: rgba(237, 237, 237, 0.18);
    --foco-forte: rgba(237, 237, 237, 0.32);
    --btn-1: #f4f4f4;
    --btn-2: #d9d9d9;
    --btn-2-forte: #ffffff;
    --btn-texto: #0a0a0a;
    --ok: #4ade80;   --ok-bg: #12251a;   --ok-linha: #1f4531;
    --warn: #e0a838; --warn-bg: #2a2011; --aviso-bg: #2a2011;
    --aviso-fg: #e0a838; --aviso-linha: #4a3a1c;
    --err: #f87171;  --err-bg: #2a1616;  --err-linha: #4d2626; --err-bg-2: #3a1d1d;
    --neutro-bg: #242424; --neutro-fg: #b0b0b0;
  --btn-brilho: rgba(10, 10, 10, 0.18);      /* no escuro o botão é claro: brilho escuro */
  --info: #6aa9e9; --info-bg: #16243a;
    --gold-soft: #c9a54c;
    /* Sombra clara não existe no escuro: o que dá relevo ali é a sombra
       profunda somada a uma borda um pouco mais viva. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6);
  }
}
:root[data-tema="escuro"] {
  --navy: #f0f0f0;
  --navy-2: #d8d8d8;
  --ink: #ededed;
  --muted: #9a9a9a;
  --line: #2e2e2e;
  --bg: #0e0e0e;
  --card: #171717;
  --accent: #ededed;
  --accent-2: #c9c9c9;
  --accent-dark: #ffffff;
  --accent-soft: #2a2a2a;
  --surface: #1c1c1c;
  --surface-2: #202020;
  --campo: #141414;
  --line-forte: #3f3f3f;
  --brilho-1: #14181f;
  --brilho-2: #1a1712;
  --foco: rgba(237, 237, 237, 0.18);
  --foco-forte: rgba(237, 237, 237, 0.32);
  --btn-1: #f4f4f4;
  --btn-2: #d9d9d9;
  --btn-2-forte: #ffffff;
  --btn-texto: #0a0a0a;
  --ok: #4ade80;   --ok-bg: #12251a;   --ok-linha: #1f4531;
  --warn: #e0a838; --warn-bg: #2a2011; --aviso-bg: #2a2011;
  --aviso-fg: #e0a838; --aviso-linha: #4a3a1c;
  --err: #f87171;  --err-bg: #2a1616;  --err-linha: #4d2626; --err-bg-2: #3a1d1d;
  --neutro-bg: #242424; --neutro-fg: #b0b0b0;
  --btn-brilho: rgba(10, 10, 10, 0.18);      /* no escuro o botão é claro: brilho escuro */
  --info: #6aa9e9; --info-bg: #16243a;
  --gold-soft: #c9a54c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* --- A marca acompanha o tema ---------------------------------------------
   O cartão de entrada é branco no claro e escuro no escuro, então a versão do
   wordmark tem de trocar junto. As duas vão no HTML e o CSS esconde uma: assim
   a troca não depende de JavaScript e não pisca ao carregar. A da barra de topo
   é sempre a clara, porque a barra é preta nos dois temas. */
.login-brand .marca-escuro { display: none; }
:root[data-tema="escuro"] .login-brand .marca-claro { display: none; }
:root[data-tema="escuro"] .login-brand .marca-escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .login-brand .marca-claro { display: none; }
  :root:not([data-tema="claro"]) .login-brand .marca-escuro { display: block; }
}

/* --- Botão de trocar o tema, na barra de topo ----------------------------- */
.tema-form { display: inline-flex; }
.tema-btn {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 0.95rem; line-height: 1; transition: background 0.15s;
}
.tema-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* Qual dos dois botões de tema aparece. Mesmo mecanismo do wordmark: o CSS decide,
   porque só o navegador sabe o tema quando a escolha é "seguir o sistema". */
.so-escuro { display: none; }
:root[data-tema="escuro"] .so-claro  { display: none; }
:root[data-tema="escuro"] .so-escuro { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .so-claro  { display: none; }
  :root:not([data-tema="claro"]) .so-escuro { display: inline-flex; }
}

/* Barra de topo da tela de entrada: sem navegação, só o botão de tema à direita. */
.topnav-solta { margin-left: auto; }