/* ============================================================================
   Neto Roriz — Advocacia & Consultoria Jurídica
   TEMA ESCURO PREMIUM. Fundo grafite/verde; branco/champagne SÓ em texto.
   Paleta K (5 cores): verde #173D31 · grafite #202522 · dourado #B08D57 ·
   bordô #6E2F3A · champagne #D8C3A5.
   Acessibilidade: pensado p/ qualquer idade e escolaridade — texto grande,
   alto contraste (claro sobre escuro), alvos ≥ 48px, foco visível, linguagem
   simples. Contrastes conferidos ≥ AA (corpo AAA).
   ============================================================================ */
:root{
  /* cores da marca */
  --green:#173D31; --grafite:#202522; --grafite-deep:#171b19;
  --gold:#B08D57;        /* dourado da marca (decor/fios sobre escuro) */
  --gold-txt:#d7b06f;    /* dourado CLAREADO p/ texto/link sobre escuro (AA) */
  --bordo:#6E2F3A; --bordo-lift:#8f4150;   /* bordô — 2º acento (preenchimento) */
  --champagne:#D8C3A5;

  /* superfícies (nada de branco: tudo escuro) */
  --bg:#181e1b;                 /* fundo base */
  --panel:#232e28;              /* cartão / superfície */
  --panel-2:#1e2823;            /* superfície rebaixada / zebra */
  --panel-hi:#2a352e;           /* hover / elevado */
  --border:rgba(215,176,111,.26);   /* fio dourado sutil */
  --border-soft:rgba(216,195,165,.13);

  /* texto (só claro) */
  --text:#f2ecdd;               /* principal — quase-marfim (AAA) */
  --text-2:#d8c3a5;             /* champagne — corpo secundário (AAA) */
  --mut:#a9a08c;                /* apoio (AA) */

  /* estados (fg claro sobre tinta escura) */
  --ok:#7fcfa2; --ok-bg:rgba(47,107,79,.20);
  --wait:#9ec3d8; --wait-bg:rgba(58,85,102,.24);
  --act:#e3b876; --act-bg:rgba(148,97,41,.24);

  --shadow:0 2px 6px rgba(0,0,0,.30),0 14px 40px rgba(0,0,0,.34);
  --radius:15px;
  --fs:17px;                    /* base MAIOR p/ leitura confortável */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  font-size:var(--fs);line-height:1.6;color:var(--text);-webkit-font-smoothing:antialiased;
  background:var(--grafite-deep);
  background-image:
    radial-gradient(1200px 560px at 50% -10%, rgba(23,61,49,.55), transparent 62%),
    radial-gradient(900px 480px at 100% 0%, rgba(176,141,87,.10), transparent 60%),
    linear-gradient(180deg,var(--grafite) 0%,var(--grafite-deep) 60%,#12100e 100%);
  background-attachment:fixed;min-height:100vh;
}
.serif{font-family:"Fraunces",Georgia,serif}
.wrap{max-width:800px;margin:0 auto;padding:0 22px}
.hide{display:none !important}
@keyframes fade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.fade{animation:fade .45s cubic-bezier(.2,.7,.2,1) both}
.mono{display:block;flex:none}

/* ---------------- cabeçalho ---------------- */
header.brand{
  background:linear-gradient(180deg,rgba(23,61,49,.55),rgba(32,37,34,.30));
  border-bottom:1.5px solid var(--gold);padding:16px 0;position:relative;
  backdrop-filter:blur(6px)}
header.brand::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:1.5px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mark{display:flex;align-items:center;gap:13px;min-width:0}
.mark .glyph{width:44px;height:44px;display:grid;place-items:center;flex:none;
  border:1px solid var(--border);border-radius:10px;background:rgba(215,176,111,.06);padding:7px}
.mark .name{font-family:"Fraunces",serif;font-weight:600;font-size:20px;color:var(--text);line-height:1.05}
.mark .name small{display:block;font-family:"Public Sans";font-weight:600;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-txt);margin-top:3px}
.who{text-align:right;font-size:13.5px;color:var(--text-2);line-height:1.4}
.who b{display:block;font-weight:600;color:var(--text);font-size:14px}
.who a{color:var(--gold-txt);font-size:13px;cursor:pointer;text-decoration:none;
  display:inline-block;padding:6px 4px;min-height:32px}
.who a:hover{color:#fff;text-decoration:underline}

/* ---------------- login ---------------- */
.login-stage{min-height:100vh;display:grid;place-items:center;padding:40px 20px;position:relative}
.login-card{position:relative;max-width:420px;width:100%;background:var(--panel);
  border:1px solid var(--border);border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.55);
  padding:46px 38px 40px;border-top:3px solid var(--gold)}
.login-card::before,.login-card::after{content:"";position:absolute;width:28px;height:28px;pointer-events:none}
.login-card::before{top:13px;left:13px;border-top:1.5px solid var(--gold);border-left:1.5px solid var(--gold);
  border-top-left-radius:6px;opacity:.7}
.login-card::after{bottom:13px;right:13px;border-bottom:1.5px solid var(--gold);border-right:1.5px solid var(--gold);
  border-bottom-right-radius:6px;opacity:.7}
.login-card .glyph{width:70px;height:70px;margin:0 auto 22px;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:16px;background:rgba(215,176,111,.06);padding:12px}
.login-card h1{font-family:"Fraunces",serif;font-weight:500;font-size:26px;text-align:center;
  line-height:1.25;color:var(--text)}
.login-card h1::after{content:"◆";display:block;color:var(--gold-txt);font-size:9px;margin:12px auto 0}
.login-card p.sub{text-align:center;color:var(--text-2);font-size:15px;margin:8px 0 30px}
label{display:block;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--text-2);margin-bottom:8px}
input.f{width:100%;padding:15px 16px;border:1px solid var(--border);border-radius:11px;font:inherit;
  font-size:16px;background:rgba(0,0,0,.22);color:var(--text);margin-bottom:18px;transition:.15s}
input.f::placeholder{color:#8b8375}
input.f:focus{outline:none;border-color:var(--gold-txt);box-shadow:0 0 0 3px rgba(215,176,111,.22)}
/* AÇÕES = BORDÔ (sistema de cor por função). Texto marfim, contraste AA. */
.btn{width:100%;padding:16px;border:1px solid rgba(215,176,111,.25);border-radius:11px;font:inherit;
  font-weight:700;font-size:16.5px;cursor:pointer;letter-spacing:.02em;min-height:52px;transition:.18s;
  background:linear-gradient(180deg,#8f4150,#6e2f3a);color:#fbeef0;
  box-shadow:0 8px 22px rgba(110,47,58,.36)}
.btn:hover{background:linear-gradient(180deg,#a04a5a,#7a3641);box-shadow:0 10px 28px rgba(110,47,58,.48)}
.btn:disabled{opacity:.55;cursor:default;box-shadow:none}
.erro{background:rgba(110,47,58,.28);color:#f0b7bf;border:1px solid var(--bordo-lift);border-radius:10px;
  padding:12px 15px;font-size:15px;margin-bottom:16px}
.fineprint{text-align:center;font-size:13px;color:var(--mut);margin-top:26px;line-height:1.6}

/* ---------------- lista ---------------- */
.pagehead{padding:36px 0 8px}
.pagehead h1,.pagehead h2{font-family:"Fraunces",serif;font-weight:500;font-size:30px;color:var(--text)}
.pagehead .lead{color:var(--text-2);font-size:16px;margin-top:6px}
.proc-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px 26px 22px 28px;margin:18px 0;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.proc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--gold),var(--gold-txt))}
.proc-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.4),0 24px 56px rgba(0,0,0,.5);
  border-color:rgba(215,176,111,.5);background:var(--panel-hi)}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.pc-title{font-family:"Fraunces",serif;font-weight:600;font-size:20px;line-height:1.3;color:var(--text)}
.pc-sub{color:var(--mut);font-size:13.5px;margin-top:5px;font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:6px 13px;
  border-radius:20px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.wait{background:var(--wait-bg);color:var(--wait)}
.pill.act{background:var(--act-bg);color:var(--act)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pc-foot{display:flex;gap:24px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft);
  font-size:14.5px;color:var(--text-2);flex-wrap:wrap}
.pc-foot b{color:var(--text);font-weight:600}
.pc-foot .arrow{margin-left:auto;color:var(--gold-txt);font-weight:700}

/* ---------------- detalhe ---------------- */
.back{display:inline-flex;align-items:center;gap:8px;color:var(--gold-txt);font-size:15px;
  margin:26px 0 6px;cursor:pointer;font-weight:600;min-height:40px;padding:4px 0}
.back:hover{color:#fff;text-decoration:underline}
.d-head{font-family:"Fraunces",serif;font-weight:500;font-size:29px;margin:4px 0 3px;line-height:1.25;color:var(--text)}
.d-meta{color:var(--mut);font-size:14px;font-variant-numeric:tabular-nums;margin-bottom:24px}
/* banner de situação — o MAIS importante p/ o cliente: grande e claro */
.status-banner{background:linear-gradient(150deg,#26332c,#1f2a24);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.status-banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold)}
.status-banner .row1{display:flex;align-items:center;gap:13px;margin-bottom:14px;flex-wrap:wrap}
.status-banner h2{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-txt)}
.status-banner .say{font-family:"Fraunces",serif;font-size:22px;font-weight:500;line-height:1.5;color:var(--text)}
.sec-t{font-family:"Fraunces",serif;font-weight:600;font-size:21px;margin:40px 0 5px;color:var(--text)}
.sec-lead{color:var(--text-2);font-size:14.5px;margin-bottom:18px}

/* ficha técnica */
.ficha{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ficha .linha{display:flex;gap:18px;padding:15px 22px;border-bottom:1px solid var(--border-soft);font-size:15.5px}
.ficha .linha:nth-child(even){background:var(--panel-2)}
.ficha .linha:last-child{border-bottom:none}
.ficha .rot{flex:none;width:170px;color:var(--gold-txt);font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.ficha .val{flex:1;min-width:0;word-break:break-word;color:var(--text)}
.polo{margin-bottom:11px}
.polo:last-child{margin-bottom:0}
.polo .p-rot{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-txt)}
.polo .p-nome{font-size:15.5px}
.tag-voce{display:inline-block;background:var(--bordo);color:var(--champagne);
  font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:10px;margin-left:9px;vertical-align:middle;letter-spacing:.04em}

/* timeline */
.tl{position:relative;padding-left:30px}
.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--gold),var(--border-soft))}
.tl-item{position:relative;padding:0 0 26px}
.tl-item::before{content:"";position:absolute;left:-30px;top:3px;width:15px;height:15px;border-radius:50%;
  background:var(--panel);border:2.5px solid var(--gold)}
.tl-item:first-child::before{background:var(--gold-txt);border-color:var(--gold-txt);
  box-shadow:0 0 0 4px rgba(215,176,111,.18)}
.tl-date{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
.tl-what{font-size:16.5px;font-weight:700;margin:3px 0 3px;color:var(--text)}
.tl-desc{font-size:15px;color:var(--text-2)}

/* abas */
.abas{display:inline-flex;gap:5px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:11px;padding:4px}
.aba{font-size:14.5px;font-weight:600;padding:9px 18px;border-radius:8px;cursor:pointer;color:var(--text-2);
  min-height:40px;display:inline-flex;align-items:center}
.aba.ativa{background:linear-gradient(180deg,#8f4150,#6e2f3a);color:#fbeef0;font-weight:700}
.tl-desc.mov{white-space:pre-wrap;font-size:14.5px;color:var(--text-2);line-height:1.55;
  overflow-wrap:anywhere;word-break:break-word}

/* segredo de justiça — bordô (estado grave) */
.segredo{background:rgba(110,47,58,.26);color:#f0c0c6;border:1px solid var(--bordo-lift);border-radius:12px;
  padding:15px 18px;font-size:15px;font-weight:600;margin-top:20px}

/* documentos */
.doc{display:flex;align-items:center;gap:15px;background:var(--panel);border:1px solid var(--border);
  border-radius:13px;padding:16px 18px;margin-bottom:12px;transition:.16s}
.doc:hover{border-color:rgba(215,176,111,.55);background:var(--panel-hi)}
/* ícone do documento = DOURADO (marca), p/ separar da ação bordô do botão */
.doc .ic{width:46px;height:46px;border-radius:10px;background:rgba(215,176,111,.08);
  border:1px solid var(--border);color:var(--gold-txt);
  display:grid;place-items:center;flex:none;font-weight:700;font-size:11px;letter-spacing:.05em}
.doc .info{flex:1;min-width:0}
.doc .info .n{font-size:16px;font-weight:600;color:var(--text)}
.doc .info .m{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;margin-top:2px}
.doc .dl{flex:none;color:#fbeef0;background:linear-gradient(180deg,#8f4150,#6e2f3a);border:none;border-radius:10px;
  padding:12px 22px;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;min-height:46px;
  display:inline-flex;align-items:center;transition:.15s}
.doc .dl:hover{background:linear-gradient(180deg,#a04a5a,#7a3641)}
.doc-note{font-size:14px;color:var(--text-2);background:var(--panel-2);border:1px solid var(--border-soft);
  border-radius:11px;padding:14px 16px;margin-top:8px}
.vazio{color:var(--mut);font-size:15.5px;text-align:center;padding:38px 0}

/* rodapé com compliance OAB */
footer.mk{text-align:center;padding:38px 22px 56px;color:var(--mut);font-size:13px;
  border-top:1px solid var(--border-soft);margin-top:48px;line-height:1.8}
footer.mk .oab{color:var(--text-2);font-weight:600}

/* painel interno (admin) */
.admin-tag{display:inline-block;background:var(--bordo);color:var(--champagne);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:10px;vertical-align:middle;margin-left:10px}

/* ---- acessibilidade: foco visível forte (WCAG 2.4.7) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
.proc-card:focus-visible, .cli-card:focus-visible, .aba:focus-visible,
.back:focus-visible, .doc .dl:focus-visible, .who a:focus-visible{
  outline:3px solid var(--gold-txt);outline-offset:2px;border-radius:8px;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}