/* cartorio.css — Sistema Cartorário. Tema escuro (padrão) e claro.
   Estética: charcoal quente · serifa editorial · acento ouro + azul · rosa secundário.
   Portado do handoff Claude Design (legado/Sistema Cartorário.html). */

:root{
  --gold-h:84; --blue-h:248; --rose-h:14;
  --accent:var(--gold);
  --radius:10px;
  --title-font:'Playfair Display', Georgia, serif;
  --ui-font:'Public Sans', system-ui, sans-serif;
  --mono-font:'IBM Plex Mono', monospace;
}

/* ---- DARK (default) ---- */
:root, [data-theme="dark"]{
  --bg:oklch(0.165 0.008 65);
  --bg-deep:oklch(0.135 0.007 65);
  --card:oklch(0.205 0.009 62);
  --card-2:oklch(0.235 0.010 62);
  --field:oklch(0.155 0.008 60);
  --line:oklch(0.32 0.012 62);
  --line-soft:oklch(0.265 0.010 62);
  --ink:oklch(0.94 0.012 78);
  --ink-2:oklch(0.74 0.020 72);
  --ink-3:oklch(0.56 0.020 66);
  --gold:oklch(0.80 0.105 84);
  --gold-dim:oklch(0.66 0.085 82);
  --blue:oklch(0.62 0.105 248);
  --blue-solid:oklch(0.50 0.10 250);
  --rose:oklch(0.74 0.095 14);
  --ok:oklch(0.74 0.095 158);  --ok-bg:oklch(0.30 0.04 158);
  --warn:oklch(0.80 0.10 84);  --warn-bg:oklch(0.32 0.045 84);
  --bad:oklch(0.72 0.11 18);   --bad-bg:oklch(0.32 0.06 18);
  --shadow:0 24px 60px oklch(0 0 0/.45);
  --on-accent:oklch(0.16 0.01 65);
  color-scheme:dark;
}
/* ---- LIGHT ---- */
[data-theme="light"]{
  --bg:oklch(0.955 0.006 82);
  --bg-deep:oklch(0.92 0.006 82);
  --card:oklch(0.995 0.003 82);
  --card-2:oklch(0.975 0.004 82);
  --field:oklch(1 0 0);
  --line:oklch(0.87 0.008 76);
  --line-soft:oklch(0.91 0.006 78);
  --ink:oklch(0.26 0.012 64);
  --ink-2:oklch(0.46 0.016 66);
  --ink-3:oklch(0.60 0.018 66);
  --gold:oklch(0.60 0.10 76);
  --gold-dim:oklch(0.66 0.09 78);
  --blue:oklch(0.50 0.12 250);
  --blue-solid:oklch(0.48 0.12 250);
  --rose:oklch(0.54 0.14 16);
  --ok:oklch(0.52 0.10 158);  --ok-bg:oklch(0.94 0.03 158);
  --warn:oklch(0.58 0.10 78); --warn-bg:oklch(0.95 0.04 82);
  --bad:oklch(0.54 0.14 18);  --bad-bg:oklch(0.95 0.035 18);
  --shadow:0 20px 50px oklch(0.4 0.02 65/.18);
  --on-accent:oklch(0.99 0 0);
  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{
  font-family:var(--ui-font); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background .3s, color .3s;
}
.mono{font-family:var(--mono-font); font-variant-ligatures:none;}
.serif{font-family:var(--title-font);}
button{font-family:inherit; cursor:pointer; color:inherit;}
input,select{font-family:inherit;}
::selection{background:var(--gold-dim); color:var(--on-accent);}

/* ---------- logo badge ---------- */
.logo{
  display:grid; place-items:center; border-radius:50%; flex:none;
  border:2px solid var(--gold); background:var(--bg-deep); color:var(--gold);
  font-family:var(--title-font); font-weight:700; letter-spacing:.02em;
}
.logo--blue{border-color:var(--blue); color:var(--blue);}

/* ---------- shared header ---------- */
.appbar{padding:26px 40px 0;}
.appbar__row{display:flex; align-items:flex-start; gap:18px;}
.appbar__brand{display:flex; gap:16px; align-items:center; min-width:0;}
.appbar__title{font-family:var(--title-font); font-size:30px; font-weight:700; margin:0; line-height:1.05; letter-spacing:.005em;}
.appbar__sub{font-size:12px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.18em; margin-top:5px; font-weight:600;}
.appbar__actions{margin-left:auto; display:flex; align-items:center; gap:12px;}
.appbar__user{font-size:14px; color:var(--ink-2); margin-right:4px; display:inline-flex; align-items:center; gap:7px;}
.tbtn{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
  border:1px solid var(--line); border-radius:8px; background:transparent;
  color:var(--ink-2); font-size:13.5px; font-weight:600; transition:.15s; text-decoration:none;
}
.tbtn:hover{border-color:var(--gold); color:var(--ink); background:var(--card);}
.tbtn--rose{color:var(--rose); border-color:color-mix(in oklch, var(--rose) 35%, transparent);}
.tbtn--rose:hover{border-color:var(--rose); color:var(--rose); background:color-mix(in oklch,var(--rose) 10%, transparent);}
.appbar__rule{margin-top:18px; height:1px; background:var(--line-soft); position:relative;}
.appbar__rule::before{content:""; position:absolute; left:0; top:-1px; height:3px; width:96px; background:var(--blue); border-radius:2px;}
.appbar__rule::after{content:""; position:absolute; left:96px; top:-1px; height:3px; width:44px; background:var(--gold); border-radius:2px;}

/* ---------- card ---------- */
.card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  position:relative; overflow:hidden;
}
.card--accent{border-top:2px solid var(--blue);}
.card__head{display:flex; align-items:center; gap:12px; padding:20px 26px 16px; border-bottom:1px solid var(--line-soft);}
.card__mark{font-family:var(--title-font); font-size:24px; color:var(--gold); line-height:1; transform:translateY(1px);}
.card__title{font-family:var(--title-font); font-size:20px; font-weight:600; margin:0;}
.card__body{padding:24px 26px;}
.card__foot{
  display:flex; align-items:center; gap:14px; padding:16px 26px;
  border-top:1px solid var(--line-soft); background:var(--card-2);
}
.card__hint{font-size:13px; color:var(--ink-3); font-style:italic;}
.card__foot .spacer{margin-left:auto;}

/* ---------- form fields ---------- */
.formgrid{display:grid; grid-template-columns:repeat(12,1fr); gap:20px 22px;}
.field{display:flex; flex-direction:column; gap:7px; min-width:0;}
.field__label{font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2); font-weight:700;}
.field__control{position:relative; display:flex; align-items:center;}
.field input, .field select{
  width:100%; background:var(--field); border:1px solid var(--line);
  border-radius:8px; padding:12px 14px; color:var(--ink); font-size:14.5px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{color:var(--ink-3);}
.field input:focus, .field select:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim);}
.field select{appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;}
.field__control svg{position:absolute; right:13px; color:var(--ink-3); pointer-events:none;}

/* col spans */
.c2{grid-column:span 2;} .c3{grid-column:span 3;} .c4{grid-column:span 4;}
.c5{grid-column:span 5;} .c6{grid-column:span 6;} .c7{grid-column:span 7;}
.c8{grid-column:span 8;} .c12{grid-column:span 12;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:8px;
  font-size:14px; font-weight:600; border:1px solid var(--line); background:transparent; color:var(--ink); transition:.15s;
}
.btn:hover{border-color:var(--gold); background:var(--card);}
.btn--primary{background:var(--blue-solid); border-color:var(--blue-solid); color:var(--on-accent);}
.btn--primary:hover{filter:brightness(1.12); border-color:var(--blue-solid);}
.btn--rose{color:var(--rose); border-color:color-mix(in oklch,var(--rose) 35%, transparent);}
.btn--rose:hover{border-color:var(--rose); background:color-mix(in oklch,var(--rose) 10%, transparent);}
.btn--gold{background:var(--gold); border-color:var(--gold); color:var(--on-accent);}
.btn--gold:hover{filter:brightness(1.08);}
.btn:disabled{opacity:.5; cursor:default;}

/* ---------- main scroll area ---------- */
.screen{min-height:100vh; display:flex; flex-direction:column;}
.screen__body{padding:26px 40px 70px; display:flex; flex-direction:column; gap:24px;}

/* ---------- status badge ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap;}
.badge--sm{padding:3px 9px; font-size:11px;}
.badge--ok{background:var(--ok-bg); color:var(--ok);}
.badge--warn{background:var(--warn-bg); color:var(--warn);}
.badge--bad{background:var(--bad-bg); color:var(--bad);}

/* ---------- responsivo ---------- */
@media (max-width:880px){
  .appbar{padding:18px 20px 0;}
  .appbar__row{flex-wrap:wrap;}
  .appbar__title{font-size:23px;}
  .appbar__actions{width:100%; margin-left:0; order:3; flex-wrap:wrap;}
  .appbar__user{display:none;}
  .screen__body{padding:20px 20px 60px;}
  .card__body{padding:18px;}
  .card__head,.card__foot{padding-left:18px; padding-right:18px;}
  .c2,.c3,.c4,.c5,.c6,.c7,.c8{grid-column:span 6;}
  .card__foot{flex-wrap:wrap;}
  .card__hint{width:100%;}
  .card__foot .spacer{display:none;}
}
@media (max-width:520px){
  .formgrid{gap:16px;}
  .c2,.c3,.c4,.c5,.c6,.c7,.c8{grid-column:span 12;}
  .btn{flex:1; justify-content:center;}
}

/* ====================== LOGIN ====================== */
.login{
  min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in oklch, var(--blue) 10%, transparent), transparent 55%),
    var(--bg-deep);
  position:relative;
}
.login__theme{position:absolute; top:22px; right:24px; z-index:3;}
.login__aside{
  padding:64px 60px; display:flex; flex-direction:column; gap:26px;
  border-right:1px solid var(--line-soft);
  background:linear-gradient(160deg, var(--card) 0%, var(--bg) 100%);
  position:relative; overflow:hidden;
}
.login__aside::after{
  content:"§"; position:absolute; right:-40px; bottom:-70px;
  font-family:var(--title-font); font-size:360px; color:var(--gold);
  opacity:.05; line-height:.7; pointer-events:none;
}
.login__brandtxt{margin-top:2px;}
.login__serv{font-size:32px; font-weight:700; line-height:1.05;}
.login__servsub{font-size:13px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.16em; margin-top:8px; font-weight:600;}
.login__note{margin-top:auto; font-size:14px; color:var(--ink-2); max-width:34ch; line-height:1.6;}
.login__note strong{color:var(--gold); font-weight:600;}
.login__card{
  align-self:center; justify-self:center; width:min(420px,86%);
  background:var(--card); border:1px solid var(--line-soft); border-top:2px solid var(--blue);
  border-radius:var(--radius); padding:40px 38px; box-shadow:var(--shadow);
}
.login__head{margin-bottom:28px;}
.login__eyebrow{font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--gold); font-weight:700;}
.login__title{font-size:28px; font-weight:700; margin:10px 0 6px;}
.login__sub{font-size:14px; color:var(--ink-3); margin:0;}
.login__row{display:flex; align-items:center; gap:8px; margin:2px 0 22px; font-size:13.5px; color:var(--ink-2);}
.login__row input{accent-color:var(--blue);}
.login__submit{width:100%; justify-content:center; padding:13px; font-size:15px;}
.login__foot{display:flex; justify-content:space-between; margin-top:20px; font-size:11.5px; color:var(--ink-3);}
.login__err{display:flex; gap:10px; padding:12px 14px; border-radius:8px; margin-bottom:20px; font-size:13.5px; background:var(--bad-bg); color:var(--bad);}
.login__err svg{flex:none; margin-top:1px;}
@media (max-width:820px){
  .login{grid-template-columns:1fr;}
  .login__aside{padding:40px 28px; border-right:none; border-bottom:1px solid var(--line-soft);}
  .login__serv{font-size:26px;}
  .login__note{margin-top:18px;}
  .login__card{padding:30px 24px; margin:24px 0;}
}

/* ====================== SISTEMAS ====================== */
.systems__intro{margin-top:6px;}
.systems__h{font-size:24px; font-weight:600; margin:0;}
.systems__p{font-size:14.5px; color:var(--ink-3); margin:6px 0 0;}
.modgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.modcard{
  text-align:left; background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:24px 26px 20px; position:relative; overflow:hidden;
  transition:.18s; display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit;
}
.modcard::before{content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--gold); opacity:0; transition:.18s;}
.modcard:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow);}
.modcard:hover::before{opacity:1;}
.modcard--off{opacity:.62; cursor:not-allowed;}
.modcard--off:hover{transform:none; border-color:var(--line-soft); box-shadow:none;}
.modcard--off:hover::before{opacity:0;}
.modcard__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.modcard__icon{color:var(--ink-3);}
.modcard__abbr{font-size:11px; letter-spacing:.18em; color:var(--ink-3); font-weight:700; font-family:var(--mono-font);}
.modcard__name{font-size:20px; font-weight:600; margin:0; line-height:1.15;}
.modcard__sub{font-size:12.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; margin:2px 0 0;}
.modcard__meta{display:flex; align-items:center; gap:12px; margin-top:14px; font-size:12.5px; color:var(--ink-2);}
.modcard__pend{background:var(--warn-bg); color:var(--warn); padding:2px 9px; border-radius:20px; font-weight:600; font-size:11.5px;}
.modcard__cta{display:flex; align-items:center; gap:7px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); color:var(--gold); font-weight:600; font-size:13.5px;}
.modcard__cta--off{color:var(--ink-3);}
@media (max-width:760px){ .modgrid{grid-template-columns:1fr;} }

/* ====================== RESULTADOS / TABELA ====================== */
.resultsbar{display:flex; align-items:center; justify-content:space-between; padding:2px 2px;}
.resultsbar__l{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2);}
.resultsbar__count strong{color:var(--ink); font-weight:700;}
.resultsbar__sep{color:var(--ink-3);}
.resultsbar__mod{color:var(--ink-3);}
.linkbtn{border:none; background:none; color:var(--gold); font-size:13.5px; font-weight:600; padding:0;}
.linkbtn:hover{text-decoration:underline;}

.restable{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
}
.restable--scroll{overflow-x:auto;}
.restable--scroll table{min-width:1060px;}
.restable table{width:100%; border-collapse:collapse; font-size:14px;}
.restable thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-3); font-weight:700; padding:13px 18px; background:var(--card-2);
  border-bottom:1px solid var(--line-soft); white-space:nowrap;
}
.restable thead th.mono-h{font-family:var(--mono-font);}
.restable thead th.sortable{cursor:pointer; user-select:none;}
.restable thead th.sortable:hover{color:var(--gold);}
.restable tbody tr{border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background .12s;}
.restable tbody tr:last-child{border-bottom:none;}
.restable tbody tr:hover{background:var(--card-2);}
.restable td{padding:var(--row-pad,14px) 18px; color:var(--ink-2); vertical-align:middle;}
.restable td.mono{color:var(--ink); font-weight:500; white-space:nowrap;}
.restable td.td--grow{color:var(--ink); font-weight:500;}
.restable .td--chev{color:var(--ink-3); text-align:right;}
.restable tbody tr:hover .td--chev{color:var(--gold);}
.reglink{color:var(--gold); font-weight:700; text-decoration:none;}
.reglink:hover{text-decoration:underline;}

.restable__empty{
  background:var(--card); border:1px dashed var(--line); border-radius:var(--radius);
  padding:64px 24px; text-align:center; color:var(--ink-3);
}
.restable__emptymark{width:60px; height:60px; margin:0 auto 16px; border-radius:50%; background:var(--card-2); border:1px solid var(--line-soft); display:grid; place-items:center;}
.restable__emptyt{font-size:16px; font-weight:600; color:var(--ink-2); font-family:var(--title-font);}
.restable__emptys{font-size:13.5px; margin:6px auto 0; max-width:46ch; line-height:1.6;}
.restable__emptys strong{color:var(--ink-2);}

/* miniaturas TIFF (acervo digitalizado) */
.imgcell{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start;}
.thumb{width:72px; height:auto; border:1px solid var(--line); border-radius:6px; background:#fff; padding:3px; cursor:zoom-in; display:block; transition:border-color .15s, box-shadow .15s;}
.thumb:hover{border-color:var(--gold); box-shadow:0 4px 14px oklch(0 0 0/.35);}

/* estados */
.spinner{padding:46px; text-align:center; color:var(--ink-3); font-style:italic;}
.spinner::after{content:""; display:inline-block; width:14px; height:14px; margin-left:10px; vertical-align:-2px; border:2px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.errbox{background:var(--bad-bg); color:var(--bad); border:1px solid color-mix(in oklch,var(--bad) 40%, transparent); border-radius:var(--radius); padding:16px 18px; font-size:14px;}

/* ====================== STATUS BAR ====================== */
.statusbar{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding:9px 40px; border-top:1px solid var(--line-soft); background:var(--bg-deep);
  font-size:12px; color:var(--ink-3); position:sticky; bottom:0;
}
.statusbar__dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:7px; vertical-align:middle;}
@media (max-width:880px){ .statusbar{padding:9px 20px;} .statusbar span:last-child{display:none;} }

/* ====================== DRAWER ====================== */
.scrim{position:fixed; inset:0; background:oklch(0.1 0.01 65/.55); z-index:40; animation:fade .18s ease;}
@keyframes fade{from{opacity:0;}}
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(560px,94vw); z-index:50;
  background:var(--card); border-left:1px solid var(--line); display:flex; flex-direction:column;
  box-shadow:var(--shadow); animation:slideIn .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes slideIn{from{transform:translateX(34px); opacity:.3;}}
.drawer__head{padding:22px 26px 18px; border-bottom:1px solid var(--line-soft);}
.drawer__headtop{display:flex; align-items:center; gap:12px;}
.drawer__natwrap{min-width:0;}
.drawer__modnat{font-size:12px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; font-weight:600;}
.drawer__id{font-size:13px; color:var(--ink-2); margin-top:2px;}
.iconbtn{margin-left:auto; border:1px solid var(--line); background:transparent; width:34px; height:34px; border-radius:8px; display:grid; place-items:center; color:var(--ink-2);}
.iconbtn:hover{border-color:var(--gold); color:var(--ink);}
.drawer__title{font-size:23px; font-weight:600; margin:16px 0 0; line-height:1.2;}
.drawer__badges{margin-top:13px;}
.drawer__body{flex:1; overflow-y:auto; padding:22px 26px;}
.callout{display:flex; gap:11px; padding:13px 15px; border-radius:8px; margin-bottom:22px; font-size:13px; background:var(--bad-bg); color:var(--bad);}
.callout svg{flex:none; margin-top:1px;}
.callout strong{display:block; margin-bottom:3px;}
.callout p{margin:0; opacity:.9;}
.dsec{margin-bottom:28px;}
.dsec__h{display:flex; align-items:center; gap:8px; font-family:var(--title-font); font-size:16px; font-weight:600; color:var(--ink); padding-bottom:12px; border-bottom:1px solid var(--line-soft); margin-bottom:16px;}
.dsec__mark{color:var(--gold); font-size:20px;}
.dgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px 22px;}
.dfield{min-width:0;}
.dfield--full{grid-column:1 / -1;}
.dfield__l{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin-bottom:4px; font-weight:600;}
.dfield__v{font-size:14.5px; color:var(--ink); font-weight:500; word-break:break-word;}
.dsec__note{font-size:13.5px; color:var(--ink-2); margin:16px 0 0; line-height:1.6;}
.anot{white-space:pre-wrap; line-height:1.6; font-size:14px; color:var(--ink); background:var(--field); border:1px solid var(--line-soft); border-radius:8px; padding:12px 14px;}
.ptable{width:100%; border-collapse:collapse; font-size:13.5px;}
.ptable th,.ptable td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-soft);}
.ptable th{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700;}
.ptable td{color:var(--ink);}
.dtotal{color:var(--gold); font-weight:700; font-family:var(--mono-font);}
.drawer__foot{padding:16px 26px; border-top:1px solid var(--line-soft); display:flex; gap:9px; flex-wrap:wrap; background:var(--card-2);}
@media (max-width:520px){ .dgrid{grid-template-columns:1fr;} }

/* ====================== IMAGEM TELA CHEIA ====================== */
.imgmodal{display:none; position:fixed; inset:0; z-index:60; background:oklch(0.1 0.01 65/.78); flex-direction:column;}
.imgmodal.open{display:flex; animation:fade .18s ease;}
.imgmodal__bar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 22px; border-bottom:1px solid var(--line); background:var(--card); font-family:var(--title-font);}
.imgmodal__wrap{flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:18px;}
.imgmodal__wrap canvas{max-width:100%; background:#fff; border-radius:6px; box-shadow:var(--shadow);}