/* ESCRIBA — Acervo Digital · estilo comum a todas as telas */

:root{
  --navy:#0E2239; --navy-d:#071527; --navy-l:#1D3C60;
  --gold:#D6B16A; --gold-l:#F0D9A0; --gold-dk:#A8894A;
  --paper:#F4F1E9; --card:#ffffff; --ink:#12263D; --muted:#7A7161;
  --line:#E2DACB; --soft:#FBF9F4;
  --erro:#8C1D18; --erro-bg:#FDECEA; --erro-ln:#F3C6C1;
  --ok:#2E5A32;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --e1:0 1px 2px rgba(20,30,45,.05);
  --e2:0 1px 2px rgba(20,30,45,.05), 0 6px 18px rgba(20,30,45,.06);
  --e3:0 2px 5px rgba(20,30,45,.07), 0 16px 40px rgba(20,30,45,.10);
  --borda:inset 0 1px 0 rgba(255,255,255,.5);
  --ease:cubic-bezier(.22,.7,.3,1);
  --r:13px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:16px;line-height:1.65;min-height:100svh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

/* ------------------------------------------------------------ barra --- */
.barra{background:var(--navy);color:#fff;display:flex;align-items:center;
       gap:12px;padding:13px 20px;position:sticky;top:0;z-index:40}
.barra .marca{display:flex;align-items:center;gap:11px;min-width:0}
.barra .nome{font-family:var(--serif);font-size:19px;letter-spacing:.17em;
             color:var(--gold);white-space:nowrap}
.barra .doc{font-size:13px;color:#C3D0DE;border-left:1px solid rgba(255,255,255,.18);
            padding-left:12px;white-space:nowrap;overflow:hidden;
            text-overflow:ellipsis;max-width:40vw}
.barra .dir{margin-left:auto;display:flex;align-items:center;gap:7px}
.bic{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);
     display:grid;place-items:center;font-size:13px;color:#D9E2EB;border:0;
     cursor:pointer;transition:background .18s}
.bic:hover{background:rgba(255,255,255,.16)}
.bic.ouro{color:var(--gold);background:rgba(214,177,106,.16)}
.av{width:30px;height:30px;border-radius:50%;background:var(--navy-l);
    color:var(--gold);display:grid;place-items:center;font-size:11px;
    font-weight:600;letter-spacing:.04em;margin-left:4px}
.voltar{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);
        display:grid;place-items:center;color:#D9E2EB;font-size:17px;line-height:1}

/* ------------------------------------------------------------ folha --- */
.folha{max-width:1060px;margin:0 auto;padding:30px 24px 60px}
.trilha{font-size:12.5px;color:var(--muted);display:flex;gap:7px;
        align-items:center;flex-wrap:wrap}
.trilha b{color:var(--gold-dk);font-weight:600;letter-spacing:.06em;
          text-transform:uppercase;font-size:11px}
h1{font-family:var(--serif);font-size:clamp(23px,4.6vw,30px);font-weight:400;
   line-height:1.2;letter-spacing:.005em}
.sub{color:var(--muted);font-size:14px;margin-top:6px}
.cabecalho{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.cabecalho > a{margin-left:auto}
@media (max-width:560px){.cabecalho > a{margin-left:0;width:100%}}
.secao{font-size:10.5px;letter-spacing:.24em;font-weight:700;color:var(--gold-dk);
       text-transform:uppercase;display:flex;align-items:center;gap:12px;
       margin:30px 0 15px}
.secao::after{content:"";flex:1;height:1px;background:var(--line)}

/* ----------------------------------------------------------- blocos --- */
.blocos{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.blocos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.blocos{grid-template-columns:1fr}}
.bloco{position:relative;display:block;border:1px solid var(--line);
       background:var(--card);border-radius:var(--r);padding:16px 15px 17px;
       min-height:120px;box-shadow:var(--e2),var(--borda);
       transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.bloco:hover{transform:translateY(-3px);box-shadow:var(--e3),var(--borda)}
.bloco .tg,.bloco .tt,.bloco .qt{display:block}
.bloco .tg{font-size:9.5px;letter-spacing:.22em;font-weight:700;
           color:var(--gold-dk);text-transform:uppercase}
.bloco .tt{font-family:var(--serif);font-size:16.5px;line-height:1.3;margin-top:9px}
.bloco .qt{font-size:11.5px;color:#9A9281;margin-top:10px}
.bloco.fechado{opacity:.5;box-shadow:none}
.bloco.fechado:hover{transform:none;box-shadow:none}

/* --------------------------------------------------------- materias --- */
.lista{display:flex;flex-direction:column;gap:11px}
.item{display:flex;align-items:center;gap:16px;border:1px solid var(--line);
      background:var(--card);border-radius:12px;padding:15px 18px;
      box-shadow:var(--e1);transition:transform .2s var(--ease),box-shadow .2s}
.item:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.item .n{font-family:var(--serif);font-size:19px;color:#C3B183;min-width:30px}
.item .t,.item .d{display:block}
.item .t{font-family:var(--serif);font-size:17px;line-height:1.3}
.item .d{font-size:12.5px;color:var(--muted);margin-top:3px}
.item .seta{margin-left:auto;color:#B9B0A0;font-size:18px}

/* --------------------------------------------------------- formulário - */
.painel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
        padding:24px 26px;box-shadow:var(--e2),var(--borda);margin-top:18px}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.grade{grid-template-columns:1fr}
  .painel{padding:18px 16px}.folha{padding:22px 16px 50px}}
.campo{display:block}
.rot{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--muted);
     text-transform:uppercase;margin-bottom:6px}
.inp{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;
     background:var(--soft);padding:0 13px;font-size:15px;transition:border-color .2s,box-shadow .2s}
textarea.inp{height:auto;padding:12px 13px;line-height:1.6;min-height:160px;
             font-family:var(--sans);resize:vertical}
.inp:focus{outline:none;border-color:var(--gold);
           box-shadow:0 0 0 3px rgba(214,177,106,.22)}
.comfim{position:relative}
.comfim .inp{padding-right:84px}
.fim{position:absolute;right:6px;top:6px;height:34px;border:0;border-radius:8px;
     background:#EFE8D8;color:#8A6F32;font-size:11.5px;font-weight:700;
     letter-spacing:.08em;padding:0 11px;cursor:pointer}
.fim:hover{background:#E6DCC4}

/* ----------------------------------------------------------- botões --- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:0;border-radius:11px;padding:13px 22px;font-size:14.5px;
    font-weight:600;cursor:pointer;transition:transform .2s var(--ease),
    box-shadow .2s var(--ease),opacity .2s}
.bt.ok{background:var(--navy);color:var(--gold-l);box-shadow:var(--e2)}
.bt.ok:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--e3)}
.bt.ok:active{transform:translateY(1px)}
.bt.ok:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.bt.gh{background:var(--card);border:1px solid var(--line);color:#6B6252}
.bt.gh:hover{background:var(--soft)}
.bt.perigo{background:var(--card);border:1px solid var(--erro-ln);color:var(--erro)}
.rodape-form{display:flex;gap:12px;justify-content:flex-end;margin-top:22px;
             flex-wrap:wrap}
@media (max-width:560px){.rodape-form{flex-direction:column-reverse}
  .rodape-form .bt{width:100%}}

/* ---------------------------------------------------------- avisos ---- */
.aviso{border-radius:11px;padding:12px 15px;font-size:13.5px;line-height:1.55;
       margin-top:14px}
.aviso.erro{background:var(--erro-bg);color:var(--erro);border:1px solid var(--erro-ln)}
.aviso.bom{background:#EDF4EC;color:var(--ok);border:1px solid #CFE2CC}
.aviso.ouro{background:#FBF7EE;color:#7A6433;border:1px solid #E6DCC4}

/* --------------------------------------------------------- marcáveis -- */
.atalhos{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:14px 0 2px}
.pill{font-size:12.5px;font-weight:600;border:1px solid var(--line);
      background:var(--card);border-radius:999px;padding:7px 15px;color:#6B6252;
      cursor:pointer}
.pill:hover{background:var(--soft)}
.conta{margin-left:auto;font-size:12.5px;color:var(--muted)}
.conta.zero{color:var(--erro);font-weight:600}
.marcaveis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:13px}
@media (max-width:860px){.marcaveis{grid-template-columns:repeat(2,1fr)}}
.mk{position:relative;border:1px solid var(--line);background:var(--card);
    border-radius:var(--r);padding:15px 14px 16px;min-height:112px;cursor:pointer;
    display:block;transition:background .2s,border-color .2s}
.mk input{position:absolute;opacity:0;pointer-events:none}
.mk .tg{font-size:9.5px;letter-spacing:.22em;font-weight:700;color:var(--gold-dk);
        text-transform:uppercase;padding-right:26px;display:block}
.mk .tt{display:block;font-family:var(--serif);font-size:15.5px;line-height:1.3;margin-top:8px}
.mk .vis{position:absolute;top:12px;right:12px;width:21px;height:21px;
         border-radius:50%;border:1.5px solid #D8D0BF;display:grid;place-items:center}
.mk input:checked ~ .vis{background:var(--gold);border-color:var(--gold)}
.mk input:checked ~ .vis::after{content:"";width:9px;height:5px;
    border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);
    transform:rotate(-45deg);margin-top:-3px}
.mk:has(input:checked){background:var(--navy);border-color:var(--gold)}
.mk:has(input:checked) .tt{color:#fff}
.mk input:focus-visible ~ .vis{box-shadow:0 0 0 3px rgba(214,177,106,.35)}

/* ---------------------------------------------------------- chaves ---- */
.chave{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:18px;
       border-top:1px solid var(--line);cursor:pointer}
.chave + .chave{margin-top:12px;padding-top:12px}
.chave input{position:absolute;opacity:0;pointer-events:none}
.sw{width:44px;height:25px;border-radius:999px;background:#DED6C5;position:relative;
    flex:none;transition:background .22s var(--ease)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;
    border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);
    transition:transform .22s var(--ease)}
.chave input:checked ~ .sw{background:var(--navy)}
.chave input:checked ~ .sw::after{transform:translateX(19px);background:var(--gold)}
.chave .t,.chave .d{display:block}
.chave .t{font-size:14.5px;font-weight:600}
.chave .d{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ------------------------------------------------------------ abas ---- */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;
      overflow-x:auto}
.aba{padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--muted);
     border-bottom:2px solid transparent;white-space:nowrap}
.aba:hover{color:var(--ink)}
.aba.on{color:var(--ink);border-bottom-color:var(--gold)}

/* ---------------------------------------------------------- tabela ---- */
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-size:10px;letter-spacing:.18em;font-weight:700;
           color:var(--gold-dk);text-transform:uppercase;padding:0 12px 10px;
           border-bottom:1px solid var(--line)}
.tabela td{padding:13px 12px;border-bottom:1px solid #F0EADC;vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela .quem{display:flex;align-items:center;gap:11px}
.tabela .quem .av{margin:0;background:#EFE8D8;color:#8A6F32}
.tabela .nm{font-family:var(--serif);font-size:16px}
.tabela .us{font-size:12px;color:var(--muted)}
.selo{display:inline-block;font-size:10px;letter-spacing:.12em;font-weight:700;
      text-transform:uppercase;border-radius:999px;padding:3px 9px;
      background:#F0EADC;color:#7A6433;margin:2px 3px 2px 0}
.selo.off{background:#F2F0EA;color:#9A9281}
.selo.adm{background:var(--navy);color:var(--gold)}
@media (max-width:760px){
  .tabela thead{display:none}
  .tabela tr{display:block;border:1px solid var(--line);border-radius:12px;
             background:var(--card);padding:12px;margin-bottom:11px}
  .tabela td{display:block;border:0;padding:4px 2px}
}

/* ------------------------------------------------------------ login --- */
body.centro{display:grid;place-items:center;padding:24px 18px;
  background-image:
    radial-gradient(ellipse 78% 54% at 50% -12%, rgba(29,60,96,.13), transparent 70%),
    radial-gradient(ellipse 60% 44% at 50% 112%, rgba(214,177,106,.14), transparent 70%)}
.cartao{width:min(100%,430px);background:var(--card);border:1px solid var(--line);
        border-radius:22px;box-shadow:var(--e3),var(--borda);
        padding:32px 28px 26px;position:relative;overflow:hidden}
.cartao::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
        background:linear-gradient(90deg,var(--navy-l),var(--gold))}
.sinete{width:62px;height:62px;margin:0 auto 16px;display:grid;place-items:center;
        border-radius:18px;background:linear-gradient(165deg,var(--navy-l),var(--navy-d));
        box-shadow:var(--e2),var(--borda)}
.cartao h1{text-align:center;font-size:25px;letter-spacing:.18em;color:var(--ink)}
.cartao .sub{text-align:center;margin:6px 0 22px}
.cartao .campo{margin-bottom:15px}
.cartao .bt{width:100%}
.rodape-marca{margin:24px 0 0;padding-top:16px;border-top:1px solid var(--line);
        text-align:center;font-size:12px;color:var(--muted);letter-spacing:.02em}
.rodape-marca b{display:block;font-family:var(--serif);font-weight:400;
        font-size:15px;letter-spacing:.2em;color:var(--ink);margin-bottom:3px}
.olho{position:absolute;right:6px;bottom:6px;width:40px;height:34px;border:0;
      background:none;color:var(--muted);font-size:15px;cursor:pointer;border-radius:8px}
.linhachk{display:flex;align-items:center;gap:9px;margin:4px 0 18px;
          font-size:13.5px;color:var(--muted);cursor:pointer}
.linhachk input{width:18px;height:18px;accent-color:var(--navy)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}