/* Notas na nuvem — tela do Gabinete FireBEE (notas.html + tokens do base.html),
   sem Jinja e sem CSS inline (a CSP só aceita 'self').
   Contraste: todo par de cor passa AA nos dois temas. Os que o Gabinete deixava
   abaixo no escuro foram corrigidos aqui: --ink3 sobre --painel2 e texto sobre
   --acento (--sobre-acento). Estado é sempre cor + ícone + rótulo. */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  --bg:#faf8f5; --painel:#fff; --painel2:#f5f2ec; --borda:#e6e1d8;
  --ink:#1b1916; --ink2:#575149; --ink3:#736c61;
  --acento:#a8481c; --sobre-acento:#fff;
  --bom:#2c6e49; --bom-bg:#e8f2ec;
  --aten:#8a5a0b; --aten-bg:#fbf1dd;
  --grave:#a32a1e; --grave-bg:#fbe9e7;
  --outro:#6a45b8; --outro-bg:#f3effc; --sobre-outro:#fff;
  --aviso-bt:#f3a774;
  --r:10px;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sombra:0 1px 2px rgba(0,0,0,.04),0 1px 8px rgba(0,0,0,.03);
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#14130e; --painel:#1d1b15; --painel2:#24211a; --borda:#332f28;
    --ink:#f0ebe2; --ink2:#b3ab9f; --ink3:#9d9689;
    --acento:#e08a4e; --sobre-acento:#1b1208;
    --bom:#74c894; --bom-bg:#1a2b21;
    --aten:#e0ae5e; --aten-bg:#2e2617;
    --grave:#ef8577; --grave-bg:#321f1c;
    --outro:#b9a2f2; --outro-bg:#241e36; --sobre-outro:#15121f;
    --aviso-bt:#8f3d12;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 1px 10px rgba(0,0,0,.2);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}

/* ── barra do topo (fina: o texto é o protagonista) ─────────────────── */
body>header.topo{display:flex;align-items:center;gap:.6rem;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
  min-height:44px;border-bottom:1px solid var(--borda);background:var(--painel);position:relative;z-index:20}
.topo .marca{font-weight:650;letter-spacing:-.02em;display:flex;align-items:center;gap:.45rem;
  color:var(--ink);text-decoration:none}
.topo .marca::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acento);flex:none}
.topo .esp{flex:1}
.topo-sair{font:inherit;font-size:.86rem;color:var(--ink2);background:transparent;border:1px solid var(--borda);
  border-radius:8px;padding:.3rem .75rem;min-height:32px;cursor:pointer}
.topo-sair:hover{color:var(--ink);border-color:var(--acento)}
.topo-sair:focus-visible,.topo .marca:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ── login ──────────────────────────────────────────────────────────── */
.tela-login{min-height:100dvh;display:grid;place-items:center;padding:16px}
.login-cartao{width:min(380px,100%);background:var(--painel);border:1px solid var(--borda);border-radius:14px;
  padding:1.6rem 1.5rem;display:grid;gap:.6rem;box-shadow:var(--sombra)}
.login-cartao .marca{display:flex;gap:.8rem;align-items:center;margin-bottom:.6rem}
.login-cartao h1{margin:0;font-size:1.25rem;letter-spacing:-.02em}
.login-cartao p{margin:0;color:var(--ink2);font-size:.86rem}
.login-cartao label{font-size:.86rem;color:var(--ink2);font-weight:550}
.login-cartao input{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--borda);border-radius:9px;
  padding:.65rem .75rem;min-height:44px}
.login-cartao input:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:var(--acento)}
.login-cartao button{font:inherit;margin-top:.4rem;background:var(--acento);color:var(--sobre-acento);border:0;
  border-radius:9px;padding:.7rem;min-height:44px;font-weight:650;cursor:pointer}
.login-cartao button:hover{filter:brightness(1.06)}
.login-cartao button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.login-cartao button:disabled{cursor:progress}
.login-cartao .erro{color:var(--grave);background:var(--grave-bg);border-radius:8px;padding:.45rem .6rem;font-size:.86rem}

/* ── Notas ──────────────────────────────────────────────────────────────
   Tela de ferramenta: ocupa a janela abaixo da barra, e o texto é o
   protagonista. Lista e histórico cedem espaço e somem no modo foco. */
main.app-notas{height:calc(100dvh - var(--topo,45px));overflow:hidden}
html.nt-foco body>header{display:none}
html.nt-foco main.app-notas{height:100dvh}

.nt{--lado:clamp(210px,20vw,272px);--hist:clamp(290px,26vw,348px);display:grid;height:100%;
  grid-template-columns:var(--lado) minmax(0,1fr);position:relative}
.nt.com-hist{grid-template-columns:var(--lado) minmax(0,1fr) var(--hist)}
html.nt-foco .nt,.nt.sem-lado{grid-template-columns:minmax(0,1fr)}
html.nt-foco .nt.com-hist,.nt.sem-lado.com-hist{grid-template-columns:minmax(0,1fr) var(--hist)}
html.nt-foco .nt-lado,.nt.sem-lado .nt-lado{display:none}

.nt svg.i,.nt-dlg svg.i,.nt-pop svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.nt kbd,.nt-dlg kbd{font:600 .7rem/1 var(--mono);border:1px solid var(--borda);
  border-bottom-width:2px;border-radius:5px;padding:.15rem .32rem;color:var(--ink2);background:var(--painel)}
.nt button,.nt-dlg button,.nt-pop button{font:inherit;cursor:pointer}
.nt :focus-visible,.nt-dlg :focus-visible,.nt-pop :focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ── lista de notas ─────────────────────────────────────────────────── */
.nt-lado{border-right:1px solid var(--borda);background:var(--painel2);display:flex;
  flex-direction:column;min-height:0}
.nt-lado-topo{padding:.8rem .75rem .5rem;display:grid;gap:.45rem}
.nt-buscar{display:flex;align-items:center;gap:.5rem;width:100%;min-height:38px;
  padding:.4rem .65rem;border:1px solid var(--borda);border-radius:9px;background:var(--painel);
  color:var(--ink2);font-size:.88rem;text-align:left}
.nt-buscar:hover{border-color:var(--acento);color:var(--ink)}
.nt-buscar span{flex:1}
.nt-novo{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:38px;
  border-radius:9px;border:1px solid var(--acento);background:var(--acento);color:var(--sobre-acento);
  font-weight:600;font-size:.88rem}
.nt-novo:hover{filter:brightness(1.06)}
.nt-novo-campo{display:none;gap:.35rem}
.nt-novo-campo.aberto{display:flex}
.nt-novo-campo input{flex:1;min-width:0;min-height:38px;padding:.4rem .6rem;font:inherit;
  font-size:.9rem;border:2px solid var(--acento);border-radius:9px;background:var(--painel);color:var(--ink)}
.nt-lista{list-style:none;margin:0;padding:.2rem .45rem 1rem;overflow-y:auto;flex:1;min-height:0}
.nt-item{display:block;text-decoration:none;color:inherit;border-radius:9px;
  padding:.6rem .7rem .6rem .8rem;margin-bottom:.15rem;border:1px solid transparent;position:relative}
.nt-item:hover{background:var(--painel)}
.nt-item.ativo{background:var(--painel);border-color:var(--borda);box-shadow:var(--sombra)}
.nt-item.ativo::before{content:"";position:absolute;left:0;top:.6rem;bottom:.6rem;width:3px;
  border-radius:3px;background:var(--acento)}
.nt-item-t{display:flex;align-items:center;gap:.35rem;font-weight:600;font-size:.92rem;line-height:1.3}
.nt-item-t b{font-weight:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.nt-item-t svg.i{width:14px;height:14px;color:var(--acento)}
.nt-item-q{font-size:.8rem;color:var(--ink2);margin-top:.12rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.nt-item-q .quando{color:var(--ink);margin-right:.35rem}
.nt-lixeira{margin:0 .45rem;border-top:1px solid var(--borda);font-size:.85rem}
.nt-lixeira summary{cursor:pointer;color:var(--ink2);padding:.55rem .4rem;display:flex;
  align-items:center;gap:.4rem;list-style:none}
.nt-lixeira summary::-webkit-details-marker{display:none}
.nt-lixeira ul{list-style:none;margin:0;padding:0 0 .6rem;max-height:30vh;overflow-y:auto}
.nt-lixeira li{display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem;color:var(--ink2)}
.nt-lixeira li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-lado-pe{border-top:1px solid var(--borda);padding:.6rem .85rem .75rem;font-size:.78rem;
  color:var(--ink2);display:grid;gap:.35rem}
.nt-lado-pe a{display:inline-flex;align-items:center;gap:.35rem;color:var(--ink2);
  text-decoration:none;font-weight:550}
.nt-lado-pe a:hover{color:var(--acento)}

/* ── centro: barra, papel, rodapé ─────────────────────────────────────── */
.nt-centro{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--painel)}
.nt-barra{display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem .45rem 1rem;
  border-bottom:1px solid var(--borda);min-height:54px}
.nt-titulo{flex:1;min-width:0;font:inherit;font-size:1.12rem;font-weight:650;
  letter-spacing:-.015em;color:var(--ink);background:transparent;border:1px solid transparent;
  border-radius:8px;padding:.3rem .5rem;margin-left:-.5rem}
.nt-titulo:hover{border-color:var(--borda)}
.nt-titulo:focus{outline:none;border-color:var(--acento);background:var(--bg)}
.nt-estado{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--ink2);
  white-space:nowrap;padding:.25rem .55rem;border-radius:999px}
.nt-estado i{width:8px;height:8px;border-radius:50%;background:var(--bom);flex:none}
.nt-estado[data-e=sujo] i,.nt-estado[data-e=salvando] i{background:var(--aten)}
.nt-estado[data-e=salvando] i{animation:nt-pulsa 1s ease-in-out infinite}
.nt-estado[data-e=offline],.nt-estado[data-e=conflito]{color:var(--grave);background:var(--grave-bg)}
.nt-estado[data-e=offline] i,.nt-estado[data-e=conflito] i{background:var(--grave)}
@keyframes nt-pulsa{50%{opacity:.35}}
.nt-acoes{display:flex;gap:.25rem;align-items:center}
.nt-bt{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;min-width:36px;
  justify-content:center;padding:.3rem .6rem;border-radius:8px;border:1px solid transparent;
  background:transparent;color:var(--ink2);font-size:.86rem;position:relative}
.nt-bt:hover{background:var(--painel2);color:var(--ink)}
.nt-bt[aria-pressed=true]{background:var(--painel2);border-color:var(--borda);color:var(--ink)}
#bt-lado[aria-pressed]{background:transparent;border-color:transparent}
#bt-lado:hover{background:var(--painel2)}
.nt-aa{font:600 .95rem/1 ui-serif,Georgia,serif!important;letter-spacing:-.02em}
.nt-cont{font:700 .68rem/1 ui-sans-serif,system-ui,sans-serif;background:var(--acento);color:var(--sobre-acento);
  border-radius:999px;padding:.15rem .36rem;min-width:1.25rem;text-align:center}

.nt-papel{flex:1;min-height:0;position:relative;display:flex;
  --p-bg:var(--painel);--p-ink:var(--ink);--p-sel:color-mix(in srgb,var(--acento) 26%,transparent)}
.nt-papel[data-papel=sepia]{--p-bg:#f7f0e1;--p-ink:#3a2f22}
.nt-papel[data-papel=contraste]{--p-bg:#fff;--p-ink:#000}
@media (prefers-color-scheme:dark){
  .nt-papel[data-papel=sepia]{--p-bg:#231e16;--p-ink:#eadfc8}
  .nt-papel[data-papel=contraste]{--p-bg:#000;--p-ink:#fff}
}
.nt-texto{flex:1;width:100%;height:100%;resize:none;border:0;outline:0;margin:0;
  background:var(--p-bg);color:var(--p-ink);caret-color:var(--acento);
  font-family:var(--fonte,var(--mono));font-size:var(--tam,17px);line-height:var(--entre,1.7);
  tab-size:4;padding-block:1.4rem 40vh;--mg:clamp(.9rem,2.2vw,1.8rem);
  padding-left:var(--mg);padding-right:var(--mg);white-space:pre-wrap;overflow-wrap:anywhere}
.nt-texto:focus-visible{outline:none}
.nt-texto.sem-quebra{white-space:pre;overflow-wrap:normal;overflow-x:auto}
.nt-texto::selection{background:var(--p-sel)}
.nt-texto::placeholder{color:var(--ink2);opacity:1}
.nt-papel.limite .nt-texto{padding-right:max(var(--mg),calc(100% - 46em - var(--mg)))}

/* viagem no tempo: o papel muda de cor e ganha faixa — não dá para confundir
   "como estava" com "como está" e sair digitando no lugar errado. */
.nt-papel.viajando{--p-bg:var(--outro-bg)}
.nt-papel.viajando .nt-texto{cursor:default}
.nt-diff{flex:1;overflow:auto;background:var(--p-bg);color:var(--p-ink);
  font-family:var(--fonte,var(--mono));font-size:var(--tam,17px);line-height:var(--entre,1.7);
  padding-block:1.2rem 30vh;padding-inline:clamp(.4rem,1.2vw,1rem)}
.nt-papel.limite .nt-diff{padding-right:max(1rem,calc(100% - 48em))}
.nt-dl{display:grid;grid-template-columns:1.6rem 1fr;white-space:pre-wrap;overflow-wrap:anywhere;
  tab-size:4;border-radius:4px}
.nt-dl::before{content:" ";color:var(--ink2);text-align:center;user-select:none}
.nt-dl.saiu{background:var(--grave-bg);color:var(--grave)}
.nt-dl.saiu::before{content:"−";font-weight:700}
.nt-dl.entrou{background:var(--bom-bg);color:var(--bom)}
.nt-dl.entrou::before{content:"+";font-weight:700}
.nt-dl.saiu span{text-decoration:line-through;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.nt-dobra{display:block;margin:.35rem 0 .35rem 1.6rem;font:.8rem/1.4 ui-sans-serif,system-ui,sans-serif;
  color:var(--ink2);background:var(--painel2);border:1px dashed var(--borda);border-radius:6px;
  padding:.3rem .7rem;cursor:pointer}
.nt-dobra:hover{color:var(--ink);border-color:var(--acento)}
.nt-diff-vazio{font-family:ui-sans-serif,system-ui,sans-serif;color:var(--ink2);padding:2rem 1.6rem}

.nt-viagem{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;
  padding:.6rem 1rem;background:var(--outro-bg);border-bottom:2px solid var(--outro)}
.nt-viagem-t{flex:1 1 280px;min-width:0;font-size:.92rem;line-height:1.35}
.nt-viagem-t strong{color:var(--outro)}
.nt-viagem-t small{display:block;color:var(--ink2);font-size:.8rem}
.nt-seg{display:inline-flex;border:1px solid var(--borda);border-radius:9px;overflow:hidden;background:var(--painel)}
.nt-seg button{border:0;background:transparent;color:var(--ink2);padding:.4rem .7rem;font-size:.83rem;min-height:34px}
.nt-seg button+button{border-left:1px solid var(--borda)}
.nt-seg button[aria-pressed=true]{background:var(--ink);color:var(--bg);font-weight:600}
.nt-viagem .nt-bt{border-color:var(--borda);background:var(--painel)}
.nt-passos{display:inline-flex;gap:.25rem}
.nt-passos .nt-bt{font-size:1.3rem;line-height:1;padding:.2rem .55rem}
.nt-passos .nt-bt:disabled{opacity:.45;cursor:default}
.nt-viagem .nt-bt.forte{background:var(--outro);border-color:var(--outro);color:var(--sobre-outro);font-weight:600}
.nt-legenda{font-size:.78rem;color:var(--ink2);display:flex;gap:.4rem 1.2rem;flex-wrap:wrap}
.nt-legenda.no-diff{margin:0 0 .8rem 1.6rem;font-family:ui-sans-serif,system-ui,sans-serif}
.nt-legenda span::before{display:inline-block;width:1.1em;text-align:center;font-weight:700;
  border-radius:3px;margin-right:.3rem}
.nt-legenda .l-saiu::before{content:"−";background:var(--grave-bg);color:var(--grave)}
.nt-legenda .l-entrou::before{content:"+";background:var(--bom-bg);color:var(--bom)}

.nt-rodape{display:flex;align-items:center;gap:1rem;padding:.3rem 1rem;min-height:30px;
  border-top:1px solid var(--borda);font-size:.76rem;color:var(--ink2);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.nt-rodape .esp{flex:1}
.nt-rodape button{border:0;background:none;color:var(--ink2);font-size:.76rem;padding:0;
  text-decoration:underline dotted;text-underline-offset:3px}
.nt-rodape button:hover{color:var(--acento)}

/* ── painéis à direita: máquina do tempo e anexos ─────────────────────── */
.nt-hist{border-left:1px solid var(--borda);background:var(--painel2);display:flex;
  flex-direction:column;min-height:0}
.nt-hist-topo{padding:.8rem 1rem .6rem;border-bottom:1px solid var(--borda)}
.nt-hist-topo h3{margin:0;font-size:1rem;display:flex;align-items:center;gap:.45rem}
.nt-hist-topo h3 span{flex:1}
.nt-hist-topo p{margin:.2rem 0 0;font-size:.8rem;color:var(--ink2)}
.nt-atalhos{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.nt-atalhos button{border:1px solid var(--borda);background:var(--painel);color:var(--ink2);
  border-radius:999px;padding:.25rem .65rem;font-size:.8rem;min-height:30px}
.nt-atalhos button:hover{border-color:var(--outro);color:var(--outro)}
.nt-data{display:flex;align-items:center;gap:.4rem;margin-top:.55rem;font-size:.8rem;color:var(--ink2)}
.nt-data input{font:inherit;font-size:.82rem;padding:.25rem .4rem;border:1px solid var(--borda);
  border-radius:7px;background:var(--painel);color:var(--ink);min-height:30px;flex:1;min-width:0}
.nt-regua{padding:.75rem 1rem .6rem;border-bottom:1px solid var(--borda)}
.nt-regua input{width:100%;accent-color:var(--outro);margin:0}
.nt-regua-rot{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink2);margin-top:.2rem}
.nt-regua-rot b{color:var(--outro);font-weight:650}
.nt-vlista{overflow-y:auto;flex:1;min-height:0;padding:.3rem .55rem 1.2rem}
.nt-dia{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);
  font-weight:700;margin:.9rem .45rem .35rem;position:sticky;top:0;background:var(--painel2);
  padding:.25rem 0;z-index:1}
.nt-v{display:grid;grid-template-columns:auto 1fr;gap:.1rem .7rem;width:100%;text-align:left;
  border:1px solid transparent;background:transparent;border-radius:9px;padding:.5rem .6rem;
  color:inherit;position:relative}
.nt-v:hover{background:var(--painel)}
.nt-v.ativo{background:var(--painel);border-color:var(--outro);box-shadow:0 0 0 1px var(--outro)}
.nt-v time{font-weight:650;font-size:.95rem;font-variant-numeric:tabular-nums;grid-row:span 2}
.nt-v .m{font-size:.8rem;color:var(--ink2);display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.nt-v .m .mais{color:var(--bom);font-weight:600}
.nt-v .m .menos{color:var(--grave);font-weight:600}
.nt-v .s{font-size:.74rem;color:var(--ink2)}
.nt-tag{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-radius:5px;padding:.05rem .35rem;border:1px solid currentColor}
.nt-tag.agora{color:var(--bom)}
.nt-tag.restaurada{color:var(--outro)}
.nt-tag.fora{color:var(--aten)}
.nt-tag.importada,.nt-tag.criada{color:var(--ink2)}

/* anexos e links da nota aberta */
.nt-anx-corpo{overflow-y:auto;flex:1;min-height:0;padding:.8rem 1rem 1.4rem;display:grid;align-content:start;gap:.5rem}
.nt-soltar-aqui{display:grid;gap:.2rem;text-align:center;border:1.5px dashed var(--acento);border-radius:11px;
  padding:1rem .8rem;cursor:pointer;background:var(--painel);color:var(--ink);font-size:.9rem}
.nt-soltar-aqui:hover,.nt-soltar-aqui:focus-within{background:var(--bg)}
.nt-soltar-aqui u{color:var(--acento);text-underline-offset:3px}
.nt-soltar-aqui small{color:var(--ink2);font-size:.78rem}
.nt-envio{display:grid;gap:.2rem;font-size:.8rem;color:var(--ink2)}
.nt-envio progress{width:100%;accent-color:var(--acento)}
.nt-form-link{display:grid;gap:.35rem;margin-top:.3rem}
.nt-form-link input{font:inherit;font-size:.86rem;padding:.4rem .55rem;border:1px solid var(--borda);
  border-radius:8px;background:var(--painel);color:var(--ink);min-height:36px;min-width:0}
.nt-form-link button{justify-self:start;border:1px solid var(--borda);background:var(--painel);color:var(--ink);
  border-radius:8px;padding:.35rem .8rem;min-height:36px;font-size:.86rem}
.nt-form-link button:hover{border-color:var(--acento)}
.nt-anx-corpo h4{margin:.7rem 0 .1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink2);font-weight:700}
.nt-anx-lista{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.nt-anx-lista li{display:flex;align-items:center;gap:.25rem;border-radius:8px;padding:.25rem .3rem}
.nt-anx-lista li:hover{background:var(--painel)}
.nt-anx-lista li.vazio{color:var(--ink2);font-size:.84rem;padding:.3rem}
.nt-anx-lista a.nome{flex:1;min-width:0;display:flex;gap:.5rem;align-items:center;color:var(--ink);
  text-decoration:none;font-size:.88rem}
.nt-anx-lista a.nome span{min-width:0;overflow:hidden}
.nt-anx-lista a.nome b{display:block;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-anx-lista a.nome small{display:block;color:var(--ink2);font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-anx-lista a.nome:hover b{color:var(--acento)}
.nt-anx-lista .nt-bt{min-height:32px;min-width:32px;padding:.2rem}

/* ── popovers, diálogos, avisos ───────────────────────────────────────── */
.nt-pop{position:fixed;z-index:60;background:var(--painel);border:1px solid var(--borda);
  border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.2);padding:.5rem;min-width:240px;
  max-width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1rem);overflow-y:auto}
.nt-menu button{display:flex;align-items:center;gap:.6rem;width:100%;border:0;background:none;
  color:var(--ink);padding:.5rem .6rem;border-radius:8px;font-size:.88rem;text-align:left;min-height:38px}
.nt-menu button:hover{background:var(--painel2)}
.nt-menu button span{flex:1}
.nt-menu button.perigo{color:var(--grave)}
.nt-menu hr{border:0;border-top:1px solid var(--borda);margin:.3rem .2rem}
.nt-ap{padding:.4rem .5rem .5rem;display:grid;gap:.85rem;width:300px}
.nt-ap h4{margin:0 0 .35rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);font-weight:700}
.nt-ap .nt-seg{display:flex}
.nt-ap .nt-seg button{flex:1}
.nt-tam{display:flex;align-items:center;gap:.5rem}
.nt-tam input{flex:1;accent-color:var(--acento);min-width:0}
.nt-tam output{font:600 .85rem var(--mono);min-width:3.2em;text-align:right;color:var(--ink)}
.nt-tam button{width:36px;height:36px;border:1px solid var(--borda);border-radius:8px;background:var(--painel);color:var(--ink)}
.nt-amostra{font-size:.8rem;color:var(--ink2)}

.nt-dlg{border:1px solid var(--borda);border-radius:14px;background:var(--painel);color:var(--ink);
  padding:0;width:min(94vw,560px);max-width:none;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.nt-dlg::backdrop{background:rgba(10,8,5,.45);backdrop-filter:blur(2px)}
.nt-dlg .corpo{padding:1.1rem 1.2rem}
.nt-dlg h3{margin:0 0 .4rem;font-size:1.05rem;overflow-wrap:anywhere}
.nt-dlg p{margin:.3rem 0;color:var(--ink2);font-size:.9rem;line-height:1.5}
.nt-dlg p strong{color:var(--ink)}
.nt-dlg summary.ver-la{cursor:pointer;color:var(--ink2);font-size:.88rem}
.nt-dlg .bts{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap;
  padding:.8rem 1.2rem;border-top:1px solid var(--borda);background:var(--painel2);border-radius:0 0 14px 14px}
.nt-dlg .bts button,.nt-dlg .bts a{border:1px solid var(--borda);background:var(--painel);color:var(--ink);
  border-radius:8px;padding:.45rem .9rem;min-height:38px;font-size:.88rem;text-decoration:none;display:inline-flex;align-items:center}
.nt-dlg .bts button.forte{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);font-weight:600}
.nt-dlg textarea{width:100%;height:9rem;font:.84rem/1.5 var(--mono);border:1px solid var(--borda);
  border-radius:8px;background:var(--bg);color:var(--ink);padding:.5rem .6rem;resize:vertical;margin-top:.5rem}
.nt-previa{width:min(96vw,980px)}
.nt-previa iframe{width:100%;height:70dvh;border:0;border-radius:8px;background:#fff}
.nt-previa img{max-width:100%;max-height:70dvh;display:block;margin:auto}

.nt-paleta{width:min(94vw,640px);margin-top:12vh}
.nt-paleta .campo{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--borda)}
.nt-paleta .campo input{flex:1;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:1.05rem;min-width:0}
.nt-paleta .campo input::placeholder{color:var(--ink2);opacity:1}
.nt-paleta .campo svg.i{color:var(--ink2)}
.nt-res{max-height:min(60vh,520px);overflow-y:auto;padding:.4rem}
.nt-res h5{margin:.7rem .6rem .3rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.nt-res button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);
  border-radius:8px;padding:.5rem .7rem;font-size:.9rem;min-height:40px}
.nt-res button.sel,.nt-res button:hover{background:var(--painel2)}
.nt-res button small{display:block;color:var(--ink2);font-size:.78rem;margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nt-res button mark{background:var(--aten-bg);color:inherit;border-radius:3px;padding:0 .1rem;
  box-shadow:inset 0 -2px 0 var(--aten)}
.nt-res .vazio-p{padding:1.2rem .8rem;color:var(--ink2);font-size:.88rem;text-align:center}
.nt-res .apagado small{color:var(--grave)}
.nt-paleta .rodape-p{display:flex;gap:1rem;flex-wrap:wrap;padding:.5rem 1rem;
  border-top:1px solid var(--borda);font-size:.75rem;color:var(--ink2)}

.nt-atalhos-lista{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;margin:.6rem 0 0;font-size:.88rem;align-items:center}
.nt-atalhos-lista dd{margin:0;color:var(--ink2)}
.nt-atalhos-lista dt{text-align:right;white-space:nowrap}

.nt-aviso{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(20px);
  opacity:0;pointer-events:none;z-index:80;display:flex;align-items:center;gap:.8rem;
  background:var(--ink);color:var(--bg);border-radius:10px;padding:.65rem .9rem;
  font-size:.88rem;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:calc(100vw - 2rem);
  transition:opacity .18s ease,transform .18s ease}
.nt-aviso.visivel{opacity:1;transform:translateX(-50%);pointer-events:auto}
.nt-aviso button{font:inherit;border:0;background:none;color:var(--aviso-bt);font-weight:700;padding:.2rem .3rem;cursor:pointer}

.nt-soltar{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:16px;
  background:color-mix(in srgb,var(--acento) 14%,transparent);backdrop-filter:blur(2px)}
.nt-soltar.ativo{display:grid}
.nt-soltar div{border:3px dashed var(--acento);border-radius:18px;padding:2.2rem 2.4rem;
  background:var(--painel);font-size:1.1rem;font-weight:600;text-align:center}
.nt-soltar small{display:block;font-weight:400;color:var(--ink2);font-size:.88rem;margin-top:.3rem}

.nt-veu{display:none}

/* ── painel aberto em tela média: a lista de notas vira gaveta ──────────
   Três colunas em 1024 px deixavam o texto com ~300 px. Quem está olhando o
   passado (ou os anexos) de UMA nota não precisa da lista. */
@media (min-width:901px) and (max-width:1280px){
  .nt.com-hist{grid-template-columns:minmax(0,1fr) var(--hist)}
  .nt.com-hist .nt-lado{position:absolute;inset:0 auto 0 0;width:300px;z-index:40;
    transform:translateX(-102%);visibility:hidden;transition:transform .2s ease,visibility .2s}
  .nt.com-hist.lado-aberto .nt-lado{transform:none;visibility:visible;box-shadow:8px 0 30px rgba(0,0,0,.2)}
  .nt.com-hist.sem-lado .nt-lado{display:flex}
  .nt.com-hist.lado-aberto .nt-veu{display:block;position:absolute;inset:0;z-index:35;background:rgba(0,0,0,.35)}
}
/* ── telas estreitas (celular) ───────────────────────────────────────── */
@media (max-width:900px){
  .nt,.nt.com-hist,.nt.sem-lado.com-hist{grid-template-columns:minmax(0,1fr)}
  .nt.sem-lado .nt-lado{display:flex}
  .nt-lado{position:absolute;inset:0 auto 0 0;width:min(86vw,300px);z-index:40;
    transform:translateX(-102%);visibility:hidden;transition:transform .2s ease,visibility .2s}
  .nt.lado-aberto .nt-lado{transform:none;visibility:visible;box-shadow:8px 0 30px rgba(0,0,0,.2)}
  .nt-hist{position:absolute;inset:0 0 0 auto;width:min(94vw,380px);z-index:40;box-shadow:-8px 0 30px rgba(0,0,0,.2)}
  .nt.lado-aberto .nt-veu{display:block;position:absolute;inset:0;z-index:35;background:rgba(0,0,0,.35)}
  .nt-rotulo-bt{display:none}
}
@media (max-width:560px){
  .nt-barra{padding-left:.5rem;gap:.25rem}
  .nt-acoes{gap:0}
  .nt-estado{padding:.25rem .35rem}
  .nt-estado span{display:none}
  .nt-rodape .opc{display:none}
  .nt-bt{min-width:34px;padding:.3rem .4rem}
  #bt-foco{display:none}
}
@media (max-height:520px){
  .nt-barra{min-height:46px;padding-block:.25rem}
  .nt-texto{padding-block:1rem 40vh}
  .nt-lado-topo{padding-top:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .nt-lado,.nt-aviso{transition:none}
  .nt-estado[data-e=salvando] i{animation:none}
}