/* ============================================================================
   Portal de Documentos — Bragheto Advocacia
   Design system "dossiê": papel + navy + ouro, serifa editorial.
   Tokens light/dark (do mockup aprovado). Componentes: painel + portal cliente.
   ============================================================================ */
:root{
  --bg:#ECEAE3; --card:#FFFFFF; --card-2:#FBF9F4;
  --ink:#1E2433; --ink-2:#5D6473; --line:#E6E3DA;
  --navy:#1F2A44; --navy-hover:#2C3A5C;
  --gold:#8A6E33; --gold-soft:#B99A57; --gold-bg:#FBF7EE;
  --ok:#1E7E44; --ok-bg:#E7F4EC; --ok-line:#BCD8C4;
  --danger:#B4472F; --danger-bg:#F7E9E7; --danger-line:#E0B7B1;
  --shadow-sm:0 1px 2px rgba(20,20,30,.05);
  --shadow-md:0 1px 2px rgba(20,20,30,.05),0 12px 30px -20px rgba(20,20,30,.30);
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r-lg:14px; --r-md:11px; --r-sm:8px;
  color-scheme:light only;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--gold-soft);outline-offset:2px;border-radius:4px}
svg{display:block}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- topbar / shell do painel (navy + logo dourada) ---------- */
.topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 22px;background:var(--navy);position:relative}
.topo::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold-soft),#d9be86 55%,transparent)}
.marca{display:flex;align-items:center;gap:12px}
.marca img{height:34px;width:auto;display:block}
.marca .sep{width:1px;height:24px;background:rgba(255,255,255,.22)}
.marca .sub{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#cbb98f;font-family:var(--sans)}
.topo nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.topo nav a{padding:7px 11px;border-radius:var(--r-sm);font-size:14px;color:#d3d8e2;transition:background .15s,color .15s}
.topo nav a:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.topo nav a.ativo{color:#e7cf9b;background:rgba(255,255,255,.09)}
.inline{display:inline;margin:0}
button.link{background:none;border:none;color:#d3d8e2;font-family:var(--sans);font-size:14px;
  cursor:pointer;padding:7px 11px;border-radius:var(--r-sm);min-height:38px}
button.link:hover{background:rgba(255,255,255,.09);color:#fff}

.conteudo{max-width:960px;margin:28px auto;padding:0 20px}
.rodape{text-align:center;color:var(--ink-2);font-size:12px;padding:26px;
  border-top:1px solid var(--line);margin-top:44px;letter-spacing:.03em}

/* ---------- tipografia ---------- */
h1{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--navy);margin:0 0 4px;letter-spacing:-.01em}
h2{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--gold);margin:30px 0 14px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.sub{color:var(--ink-2);margin:0 0 20px;font-size:15px}
.cab{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:6px}

/* ---------- flash ---------- */
.flash{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:var(--r-md);
  margin:0 0 16px;border:1px solid;font-size:14.5px}
.flash svg{flex-shrink:0}
.flash-ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.flash-erro{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}

/* ---------- cartões / tabela ---------- */
.cartao{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;margin:0 0 16px;box-shadow:var(--shadow-sm)}
.grid-cartoes{display:grid;gap:14px}

.tabela-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:middle}
th{background:var(--card-2);color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
tbody tr:last-child td,tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--gold-bg)}
.num-col{font-variant-numeric:tabular-nums}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 9px;border-radius:20px;
  border:1px solid;font-weight:500;white-space:nowrap}
.chip-ativa{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.chip-encerrada{background:var(--card-2);border-color:var(--line);color:var(--ink-2)}
.chip-ouro{background:var(--gold-bg);border-color:var(--gold-soft);color:var(--gold)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

/* ---------- formulários ---------- */
label{display:block;font-size:13.5px;font-weight:500;color:var(--ink);margin:14px 0 6px}
label .op{font-weight:400;color:var(--ink-2)}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--sans);font-size:16px;background:var(--card);color:var(--ink);min-height:46px;
  transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold-soft);
  box-shadow:0 0 0 3px var(--gold-bg)}
textarea{min-height:84px;resize:vertical;line-height:1.5}
.dica{font-size:12.5px;color:var(--ink-2);margin:5px 0 0}
.checkline{display:flex;align-items:center;gap:9px;margin:10px 0}
.checkline label{margin:0;font-weight:400}
.checkline input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--gold)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--navy);color:#fff;
  border:none;border-radius:var(--r-md);padding:12px 20px;font-family:var(--sans);font-size:15px;
  font-weight:600;cursor:pointer;min-height:46px;transition:background .15s,transform .08s;text-decoration:none}
.btn:hover{background:var(--navy-hover);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-ouro{background:var(--gold)}.btn-ouro:hover{background:var(--gold-soft)}
.btn-sec{background:var(--card-2);color:var(--ink);border:1px solid var(--line)}
.btn-sec:hover{background:var(--gold-bg);color:var(--gold)}
.btn-perigo{background:var(--danger)}
.btn-sm{padding:8px 14px;font-size:14px;min-height:40px}
.acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.slot-linha{display:flex;gap:10px;align-items:center;margin:9px 0;flex-wrap:wrap}
.slot-linha input[type=text]{flex:1;min-width:150px}
.slot-tipo{width:auto;min-width:96px;min-height:40px;padding:8px 10px;font-size:14px}
.slot-linha .grab{color:var(--ink-2);cursor:default;flex-shrink:0}
.slot-linha .rm{background:none;border:none;color:var(--ink-2);cursor:pointer;padding:8px;border-radius:6px;min-height:40px}
.slot-linha .rm:hover{background:var(--danger-bg);color:var(--danger)}
.vazio{color:var(--ink-2);font-style:italic;padding:16px 0;text-align:center}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all}
pre.meta{white-space:pre-wrap;word-break:break-word;background:var(--card-2);border:1px solid var(--line);
  padding:9px 11px;border-radius:var(--r-sm);font-size:11px;max-width:440px;margin:6px 0 0;
  max-height:260px;overflow:auto;color:var(--ink-2)}

/* ---------- caixa de link ---------- */
.linkbox{display:flex;gap:8px;align-items:center;background:var(--gold-bg);border:1px dashed var(--gold-soft);
  border-radius:var(--r-md);padding:8px 8px 8px 13px;margin:10px 0}
.linkbox input{border:none;background:transparent;flex:1;min-height:36px;padding:0;font-size:14px;color:var(--ink)}
.linkbox input:focus{box-shadow:none}

/* ============================================================================
   PORTAL DO CLIENTE (página pública de envio) — reproduz o mockup aprovado
   ============================================================================ */
body.portal{display:flex;justify-content:center;padding:22px 12px 48px}
.phone{width:100%;max-width:410px}
.pmark{background:var(--navy);border-radius:var(--r-lg);padding:22px 20px;text-align:center;
  margin-bottom:14px;box-shadow:var(--shadow-md)}
.pmark .plogo{display:block;margin:0 auto;width:auto;max-width:78%;max-height:150px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 16px;box-shadow:var(--shadow-md)}
.secure{display:flex;align-items:flex-start;gap:9px;background:var(--ok-bg);border:1px solid var(--ok-line);
  border-radius:var(--r-md);padding:10px 12px;margin-bottom:16px}
.secure svg{color:var(--ok);flex-shrink:0;margin-top:1px}
.secure p{margin:0;font-size:12.5px;color:var(--ink);line-height:1.45}
.secure b{color:var(--ok)}
.phone h1{font-size:20px;margin:0 0 3px}
.plead{font-size:13.5px;color:var(--ink-2);margin:0 0 4px;line-height:1.5}
.pref{font-size:12.5px;color:var(--ink-2);margin:13px 0 4px;padding-top:12px;border-top:1px solid var(--line)}
.pref b{color:var(--ink)}

.slot{border:1px solid var(--line);border-radius:var(--r-md);padding:13px;margin-top:12px;transition:border-color .15s}
.slot.done{border-color:var(--gold-soft)}
.slot .top{display:flex;align-items:flex-start;gap:10px}
.slot .num{width:23px;height:23px;border-radius:6px;background:var(--navy);color:#fff;font-size:11px;
  font-weight:700;display:grid;place-items:center;flex-shrink:0;margin-top:1px;font-variant-numeric:tabular-nums}
.slot.done .num{background:var(--gold)}
.slot .lbl{font-size:14.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.slot .hint{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.4}
.slot .op{font-weight:400;color:var(--ink-2);font-size:12.5px}

.drop{margin-top:11px;position:relative;border:1.5px dashed var(--gold-soft);border-radius:var(--r-sm);
  padding:14px;text-align:center;color:var(--gold);font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s;min-height:48px;display:flex;align-items:center;justify-content:center;gap:7px}
.drop:hover{background:var(--gold-bg)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop.dragover{background:var(--gold-bg);border-color:var(--gold)}
.sent{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--ok);
  background:var(--ok-bg);border-radius:var(--r-sm);padding:8px 10px}
.sent svg{flex-shrink:0}
.sent b{color:var(--ink);font-weight:600}
.staged{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.stg{display:flex;align-items:center;gap:8px;background:var(--gold-bg);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 9px;font-size:12.5px}
.stg-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.stg-sz{color:var(--ink-2);font-variant-numeric:tabular-nums;flex-shrink:0}
.stg-rm{background:none;border:none;color:var(--ink-2);cursor:pointer;padding:4px;border-radius:5px;
  min-height:30px;display:flex;align-items:center;flex-shrink:0}
.stg-rm:hover{background:var(--danger-bg);color:var(--danger)}
.slot.sel{border-color:var(--gold-soft)}
.resp-area{width:100%;margin-top:11px;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-family:var(--sans);font-size:16px;background:var(--card);
  color:var(--ink);min-height:74px;resize:vertical;line-height:1.5}
.resp-area:focus{outline:none;border-color:var(--gold-soft);box-shadow:0 0 0 3px var(--gold-bg)}
.txt-toggle{display:inline-block;background:none;border:none;color:var(--gold);font-family:var(--sans);
  font-size:12.5px;cursor:pointer;padding:9px 2px 1px;text-decoration:underline;min-height:34px}
.sent.resp{align-items:flex-start}
.resp-txt{color:var(--ink);font-weight:600;white-space:pre-wrap;word-break:break-word}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.psubmit{width:100%;margin-top:18px;min-height:52px;font-size:15px;position:sticky;bottom:12px}
.lgpd{font-size:11.5px;color:var(--ink-2);line-height:1.5;margin-top:15px;text-align:center}
.lgpd a{color:var(--gold)}
.pfoot{text-align:center;font-size:10.5px;color:var(--ink-2);margin-top:16px;letter-spacing:.04em}
.pfechado{text-align:center;padding:12px 0}

@media(max-width:620px){
  .topo{padding:12px 16px}
  .conteudo{margin:18px auto;padding:0 14px}
  .cab{flex-direction:column}
  h1{font-size:22px}
}