/* =====================================================================
   Gestão de Metrologia · Perpec Oilfield Supply
   Design system. Não invente cores fora dos tokens.

   Identidade: papel claro, tinta PRETA, uma única cor de marca — o
   vermelho Perpec — usada como acento e como ação, nunca como enfeite.
   O preto estrutura (faixa do documento, cabeçalhos de modal, números);
   o vermelho aponta (ação primária, aba ativa, marcador de seção).

   Movimento: curto (160–420 ms), sempre com desaceleração, sempre
   opcional. Quem pede menos movimento no sistema não recebe nenhum.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --red:#C0392B; --red2:#9E2A1E; --red3:#7C1F16;
  --dark:#151010; --dark2:#241A18; --dark3:#3A2C29;

  --bg:#F6F5F2; --surface:#FFFFFF; --surface2:#FAF9F7; --surface3:#F1EEEA;
  --border:#E5E1DA; --border2:#CFC8BF; --hair:#EEEAE4;
  --text:#151010; --text2:#4A423F; --muted:#7C746D;
  --accent:#C0392B; --accent-lt:#FCF1EF;

  --r-sm:6px; --r:9px; --r-lg:13px; --r-xl:16px;
  --sh-1:0 1px 2px rgba(21,16,16,.05);
  --sh-2:0 3px 10px rgba(21,16,16,.07), 0 1px 2px rgba(21,16,16,.05);
  --sh-3:0 18px 44px rgba(21,16,16,.20), 0 3px 10px rgba(21,16,16,.08);
  --sh-red:0 6px 18px rgba(192,57,43,.26);

  --mola:cubic-bezier(.2,.75,.3,1);
  --saida:cubic-bezier(.4,0,.2,1);
  --wrap:1400px;

  /* ---------------------------------------------------------------
     SEMÁFORO DE METROLOGIA — uma cor, um significado, em toda a
     aplicação e nos relatórios. Os seis tons base são padrão Perpec.

     Validados com o script do design system (ΔE em OKLab, simulação
     de daltonismo Machado 2009, superfície #FFFFFF):
       · como marcas de gráfico, na ordem linear
         descalibrado > externa > próximo > solicitado > calibrado,
         dão ΔE 21,4 sob deuteranopia e 24,3 em visão normal;
       · standby é cinza de propósito (croma 0,02): serve de rótulo,
         nunca de segmento de gráfico. Ver components/graficos.js.
     --------------------------------------------------------------- */
  --status-calibrado:#2E7D32;           --status-calibrado-bg:#ECF6ED;
  --status-proximo-vencimento:#B7791F;  --status-proximo-bg:#FDF5E5;
  --status-descalibrado:#C0392B;        --status-descalibrado-bg:#FCEDEB;
  --status-solicitado:#3D5AC0;          --status-solicitado-bg:#EDF0FD;
  --status-em-calibracao:#6D4AAE;       --status-em-calibracao-bg:#F2EEFB;
  --status-standby-pausado:#6A7480;     --status-standby-bg:#F1F3F5;
  /* Referência: teal. Longe do azul de 'solicitado' e do roxo de
     'em calibração externa' também sob deuteranopia — e sem competir
     com o vermelho, porque não é pendência: é classificação. */
  --status-referencia:#1F7A8C;          --status-referencia-bg:#E8F3F6;

  /* ---------------------------------------------------------------
     TINTA DE GRÁFICO — paleta institucional Perpec.

     Aqui não há semântica: são séries e eixos, e por isso saem direto
     da paleta da marca, sem tom inventado no meio do caminho.

       --serie    Pantone 5265 C  #3F415B   série única (as barras)
       --serie-2  Pantone 179 C   #E6332C   linha acumulada do Pareto
       --grid     Pantone 663 C   #EDEDED   grade, fio de cabelo
       --eixo     Pantone 446 C   #3F3F3E   linha de base (o zero)

     A dupla azul-marinho + vermelho vivo é o par de maior separação da
     paleta: barra e linha acumulada nunca se confundem, nem impressas
     em preto e branco, porque a diferença de luminosidade é grande.

     O SEMÁFORO (--status-*, mais acima) NÃO usa esta paleta, e não é
     esquecimento: verde e âmbar não existem no padrão Perpec, e sem eles
     não há como dizer "calibrado", "vencendo" e "descalibrado" pela cor.
     Ali a cor carrega significado; aqui, só identidade.
     --------------------------------------------------------------- */
  --grid:#EDEDED; --eixo:#3F3F3E; --serie:#3F415B; --serie-2:#E6332C;
}

html{-webkit-text-size-adjust:100%}
/* `hidden` precisa vencer sempre. Sem isto, .field{display:flex} e
   .card sobrepõem o atributo e o campo escondido pelo JS continua na
   tela — o que, num formulário que muda conforme a classificação do
   instrumento, é a diferença entre esconder e fingir que escondeu. */
[hidden]{display:none!important}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);
     min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(192,57,43,.16)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
::-webkit-scrollbar-track{background:transparent}

/* =====================================================================
   MOVIMENTO — declarado num bloco só, para ser fácil de auditar
   ===================================================================== */
@keyframes entra   {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes surge   {from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes aparece {from{opacity:0}to{opacity:1}}
@keyframes gira    {to{transform:rotate(360deg)}}
@keyframes realce  {0%{background:var(--status-proximo-bg)}100%{background:transparent}}
@keyframes pulsa   {0%,100%{opacity:1}50%{opacity:.45}}
@keyframes tracejo {to{stroke-dashoffset:0}}
@keyframes cresce  {from{transform:scaleY(0)}to{transform:scaleY(1)}}

@media (prefers-reduced-motion: no-preference){
  /* Anima o conteúdo, não o contêiner: animar os dois faz a tela
     parecer lenta, porque o mesmo pixel se move duas vezes. */
  .card{animation:entra .38s var(--mola) backwards}
  /* Escalonamento curto: dá ritmo sem fazer ninguém esperar. */
  .card:nth-of-type(1){animation-delay:.02s} .card:nth-of-type(2){animation-delay:.07s}
  .card:nth-of-type(3){animation-delay:.12s} .card:nth-of-type(4){animation-delay:.16s}
  .card:nth-of-type(n+5){animation-delay:.19s}
  .kpi{animation:entra .34s var(--mola) backwards}
  .kpi:nth-child(1){animation-delay:.03s} .kpi:nth-child(2){animation-delay:.08s}
  .kpi:nth-child(3){animation-delay:.13s} .kpi:nth-child(4){animation-delay:.18s}
  .kpi:nth-child(n+5){animation-delay:.22s}
  .rec{animation:aparece .3s var(--saida) backwards}
  .modal-card{animation:surge .26s var(--mola)}
  .ac-lista{animation:entra .16s var(--saida)}
  .g-dica{transition:opacity .13s,transform .13s}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important}
}

/* =====================================================================
   CABEÇALHO — branco, com o filete vermelho da Perpec
   ===================================================================== */
.site-header{background:var(--surface);border-bottom:3px solid var(--red)}
.header-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:18px;
              padding:.8rem 1.75rem}
.header-logo img{height:40px;width:auto;display:block}
.header-titulo{border-left:1px solid var(--border);padding-left:18px;min-width:0}
.header-titulo .title{font-size:15px;font-weight:700;color:var(--dark);letter-spacing:-.015em}
.header-titulo .sub{font-size:11.5px;color:var(--muted);margin-top:1px}

.header-usuario{margin-left:auto;display:flex;align-items:center;gap:14px}
.header-usuario .quem{text-align:right;line-height:1.35;min-width:0}
.header-usuario .nome{display:block;font-size:13px;font-weight:650;color:var(--text)}
.header-usuario .papel{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;
                       text-transform:uppercase;color:var(--muted)}
.header-usuario .papel.admin{color:var(--red)}
.btn-sair{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border);
          border-radius:var(--r);padding:7px 12px;font-family:inherit;font-size:12.5px;font-weight:650;
          color:var(--text2);cursor:pointer;transition:all .15s var(--saida)}
.btn-sair svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
              stroke-linecap:round;stroke-linejoin:round}
.btn-sair:hover{color:var(--red);border-color:var(--red);background:var(--accent-lt)}

/* Faixa preta: código do documento, estado do sistema e relógio. */
.doc-strip{background:var(--dark);padding:0 1.75rem}
.doc-strip-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:10px;
                 flex-wrap:wrap;padding:.42rem 0}
.doc-strip-inner .sep{flex:1}
.doc-code-label{font-size:9.5px;color:#8A7C79;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.doc-code-val{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;font-weight:700;
              color:#fff;letter-spacing:.11em}
.doc-meta{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;color:#B8A9A6;
          font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* Aviso de rede: aparece só quando há problema. Sistema saudável é silencioso. */
.conn{display:none;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#FFB4A8}
.conn.off{display:inline-flex}
.conn .dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0;
           animation:pulsa 1.6s ease-in-out infinite}

.sticky-top{position:sticky;top:0;z-index:100;background:var(--surface)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:1.75rem 1.75rem 4rem}
.page-footer{text-align:center;font-size:11px;color:var(--muted);padding:2.5rem 0 .5rem}

@media(max-width:860px){
  .header-inner,.doc-strip,.tabs-inner{padding-left:1rem;padding-right:1rem}
  .header-titulo{display:none}
  .wrap{padding:1.2rem 1rem 3rem}
}

/* =====================================================================
   NAVEGAÇÃO
   ===================================================================== */
.tabs{background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs-inner{max-width:var(--wrap);margin:0 auto;display:flex;padding:0 1.75rem}
.tab{position:relative;border:none;background:none;font-family:inherit;font-size:13.5px;font-weight:600;
     color:var(--muted);padding:13px 2px;margin-right:22px;cursor:pointer;white-space:nowrap;
     display:flex;align-items:center;gap:7px;transition:color .16s var(--saida);text-decoration:none}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--red);
            border-radius:2px 2px 0 0;transform:scaleX(0);transform-origin:left;
            transition:transform .24s var(--mola)}
.tab:hover{color:var(--text);text-decoration:none}
.tab:hover::after{transform:scaleX(.35);background:var(--border2)}
.tab.sel{color:var(--dark)}
.tab.sel::after{transform:scaleX(1);background:var(--red)}
.tab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;
         stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:.7;transition:.16s}
.tab.sel svg{opacity:1;stroke:var(--red)}
.tab .n{font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted);
        background:var(--surface3);border-radius:99px;padding:1px 6px;min-width:18px;text-align:center}
.tab .n.warn{color:#fff;background:var(--status-proximo-vencimento)}
.tab .n.late{color:#fff;background:var(--status-descalibrado)}

.subtabs{display:inline-flex;gap:3px;background:var(--surface3);padding:3px;border-radius:var(--r);
         margin-bottom:1.5rem;overflow-x:auto;max-width:100%;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtab{border:none;background:none;font-family:inherit;font-size:13px;font-weight:650;color:var(--muted);
        padding:7px 15px;cursor:pointer;border-radius:7px;white-space:nowrap;
        transition:color .16s,background .2s var(--saida),box-shadow .2s}
.subtab:hover{color:var(--text)}
.subtab.sel{color:var(--dark);background:var(--surface);box-shadow:var(--sh-1)}
.pane{display:none}
.pane.on{display:block;animation:aparece .22s var(--saida)}

/* Seletor de visualização DENTRO de um painel (ex.: Empréstimo › Em
   aberto, por tipo). Mesmo controle segmentado das subabas; o filete
   vermelho embaixo do escolhido é o que o distingue da navegação de
   verdade, que fica acima dele. */
.subtabs-filtro{margin-bottom:1rem}
.subtabs-filtro .subtab.sel{box-shadow:var(--sh-1),inset 0 -2px 0 var(--red)}
.subtab:disabled{opacity:.42;cursor:not-allowed}
.subtab:disabled:hover{color:var(--muted);background:none}

/* =====================================================================
   CARTÕES
   ===================================================================== */
/* Sem `overflow:hidden`: ele recortava a lista do autocomplete, que é
   posicionada fora dos limites do cartão. O cabeçalho tem o mesmo fundo
   do cartão, então nada precisa ser recortado para os cantos ficarem
   corretos. */
.card{position:relative;background:var(--surface);border:1px solid var(--border);
      border-radius:var(--r-lg);margin-bottom:1.25rem;box-shadow:var(--sh-1);
      transition:box-shadow .22s var(--saida),border-color .22s var(--saida)}
.card:hover{box-shadow:var(--sh-2)}
/* Cartão com autocomplete aberto sobe acima dos cartões seguintes,
   que vêm depois no DOM e, sem isso, pintariam por cima da lista. */
.card.ac-aberto{z-index:60}
.card-head{padding:.95rem 1.4rem .85rem;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
           border-bottom:1px solid var(--hair);background:var(--surface)}
/* Marcador vermelho: o acento da marca, do tamanho de um acento. */
.card-head::before{content:"";width:3px;height:15px;background:var(--red);border-radius:2px;flex-shrink:0}
.card-head h2{font-size:13.5px;font-weight:700;letter-spacing:-.005em;color:var(--dark)}
.card-head .right{margin-left:auto;font-size:12px;color:var(--muted);font-weight:650;
                  font-variant-numeric:tabular-nums}
.card-head svg{width:15px;height:15px;stroke:var(--red);fill:none;stroke-width:1.9;
               stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.step{width:21px;height:21px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;
      font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;
      font-variant-numeric:tabular-nums}
.card-head .step + h2{margin-left:-2px}
.card-body{padding:1.4rem}
.card-body.tight{padding:1rem 1.1rem}

/* Cartão que abre e fecha. <details> nativo: teclado e leitor de tela
   já funcionam, sem uma linha de JS para o comportamento. */
details.card > summary{cursor:pointer;list-style:none;user-select:none;
                       border-bottom:1px solid transparent;transition:background .14s}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary:hover{background:var(--surface2)}
details.card[open] > summary{border-bottom-color:var(--hair)}
.card-head .chevron{display:flex;align-items:center;margin-left:10px;flex-shrink:0}
.card-head .chevron svg{width:16px;height:16px;stroke:var(--muted);stroke-width:2.2;
                        transition:transform .22s var(--mola)}
details.card[open] .chevron svg{transform:rotate(180deg);stroke:var(--red)}
@media (prefers-reduced-motion: no-preference){
  details.card[open] > .card-body{animation:entra .24s var(--saida)}
}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.full{grid-column:1/-1}
@media(max-width:1050px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.g2,.g3,.g4{grid-template-columns:1fr}.full{grid-column:1}}

.sec-title{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
           color:var(--red);margin:26px 0 11px;padding-bottom:7px;border-bottom:1px solid var(--hair)}
.sec-title:first-child{margin-top:0}

/* =====================================================================
   CAMPOS
   ===================================================================== */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12.5px;font-weight:650;color:var(--text2)}
.req{color:var(--red);margin-left:2px}
.field input,.field textarea,.field select{
  border:1px solid var(--border2);border-radius:var(--r);padding:10px 12px;font-size:16px;
  font-family:inherit;color:var(--text);background:var(--surface);width:100%;
  transition:border-color .15s,box-shadow .15s,background .15s}
.field input::placeholder,.field textarea::placeholder{color:#B4ADA4}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#B3AAA0}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.13)}
.field input[readonly]{background:var(--surface2);color:var(--muted);cursor:default}
.field textarea{resize:vertical;min-height:88px;line-height:1.55}
.field .hint{font-size:11.5px;color:var(--muted);line-height:1.45}
.field.err input,.field.err select,.field.err textarea{border-color:var(--red);background:var(--accent-lt)}
.field .msg{display:none;font-size:12px;font-weight:650;color:var(--red)}
.field.err .msg{display:block;animation:entra .2s var(--saida)}
.field-inline{display:flex;align-items:center;gap:9px;flex-direction:row}
.field-inline input[type=checkbox],.field-inline input[type=radio]{
  width:17px;height:17px;accent-color:var(--red);cursor:pointer;flex-shrink:0}
.field-inline label{cursor:pointer;font-size:13px;font-weight:550;color:var(--text)}

.cod{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace!important;font-size:17px!important;
     font-weight:700!important;letter-spacing:.11em!important;text-align:center;color:var(--dark)!important}

.file{position:relative;border:1px dashed var(--border2);border-radius:var(--r);background:var(--surface2);
      padding:16px 14px;text-align:center;cursor:pointer;transition:all .17s var(--saida)}
.file:hover{border-color:var(--red);background:var(--accent-lt)}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.file .txt{font-size:12.5px;font-weight:650;color:var(--muted);pointer-events:none;word-break:break-all}
.file.ok{border-style:solid;border-color:var(--status-calibrado);background:var(--status-calibrado-bg)}
.file.ok .txt{color:var(--status-calibrado)}

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 17px;
     min-height:39px;border:1px solid transparent;border-radius:var(--r);font-size:13.5px;
     font-weight:650;cursor:pointer;font-family:inherit;white-space:nowrap;text-decoration:none;
     transition:background .16s,border-color .16s,color .16s,box-shadow .2s var(--saida),transform .1s}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
         stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:var(--dark2);box-shadow:0 5px 14px rgba(21,16,16,.24)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red2);box-shadow:var(--sh-red)}
.btn-green{background:var(--status-calibrado);color:#fff}
.btn-green:hover{background:#25682A;box-shadow:0 5px 14px rgba(46,125,50,.26)}
.btn-outline{background:var(--surface);color:var(--text2);border-color:var(--border2)}
.btn-outline:hover{background:var(--surface2);border-color:var(--dark3);color:var(--dark)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface3);color:var(--text)}
.btn-perigo{background:var(--surface);color:var(--red);border-color:#E8C2BC}
.btn-perigo:hover{background:var(--accent-lt);border-color:var(--red)}
.btn-sm{padding:5px 11px;min-height:30px;font-size:12.5px;border-radius:var(--r-sm)}
.btn-xl{padding:13px 28px;min-height:47px;font-size:14.5px;letter-spacing:.02em}
.btn:disabled{background:var(--surface3)!important;cursor:not-allowed;color:#ADA69D!important;
              border-color:var(--border)!important;transform:none!important;box-shadow:none!important}

.act-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
         padding:.9rem 1.2rem;display:flex;align-items:center;justify-content:space-between;
         flex-wrap:wrap;gap:14px;box-shadow:var(--sh-1);margin-bottom:1.25rem}
.act-group{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:768px){.act-bar{flex-direction:column;align-items:stretch}
                        .act-group{justify-content:stretch}.act-bar .btn{width:100%}}

/* =====================================================================
   SITUAÇÃO — ponto colorido + rótulo.
   A cor nunca carrega o significado sozinha: o texto vem sempre junto.
   ===================================================================== */
.bdg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;
     color:var(--text2);white-space:nowrap;line-height:1.3}
.bdg::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.bdg.s-calibrado{color:var(--status-calibrado)}
.bdg.s-proximo_vencimento{color:var(--status-proximo-vencimento)}
.bdg.s-descalibrado{color:var(--status-descalibrado)}
.bdg.s-solicitado{color:var(--status-solicitado)}
.bdg.s-em_calibracao_externa{color:var(--status-em-calibracao)}
.bdg.s-standby_pausado{color:var(--status-standby-pausado)}
.bdg.s-referencia{color:var(--status-referencia)}
.bdg.s-ativo{color:var(--status-calibrado)}
.bdg.s-inativo{color:var(--muted)}
.bdg.neutro{color:var(--muted)}
.bdg.neutro::before{display:none}

.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);
     background:var(--surface3);padding:2px 8px;border-radius:var(--r-sm);white-space:nowrap}
.tag.acento{color:var(--red);background:var(--accent-lt)}

.warn-box{font-size:13px;font-weight:500;border-radius:var(--r);padding:11px 14px;margin-bottom:14px;
          line-height:1.55;border-left:3px solid;color:var(--text2)}
.warn-box b{color:var(--dark);font-weight:700}
.warn-box.i{border-color:var(--status-solicitado);background:var(--status-solicitado-bg)}
.warn-box.w{border-color:var(--status-proximo-vencimento);background:var(--status-proximo-bg)}
.warn-box.e{border-color:var(--status-descalibrado);background:var(--status-descalibrado-bg)}
.warn-box.g{border-color:var(--status-calibrado);background:var(--status-calibrado-bg)}

/* ---------------------------------------------------------------------
   DICA — a tarja explicativa guardada atrás de uma lâmpada.

   Fechada, é uma pastilha discreta com o ASSUNTO escrito: ocupa uma
   linha curta e some da leitura de quem já sabe. Aberta, vira a mesma
   tarja de antes, com a cor de sempre. Duas lâmpadas seguidas ficam lado
   a lado porque a pastilha é inline-block — abrir uma delas devolve o
   bloco inteiro. Conversão em components/dicas.js.
   --------------------------------------------------------------------- */
.dica{display:inline-block;max-width:100%;margin:0 6px 12px 0;vertical-align:top;
      border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
      transition:border-color .16s,background .16s}
.dica[open]{display:block;margin-right:0;border-left-width:3px}
.dica > summary{display:flex;align-items:center;justify-content:center;cursor:pointer;
                list-style:none;padding:5px 8px;color:var(--muted);user-select:none;
                border-radius:calc(var(--r) - 1px);transition:color .14s,background .14s}
.dica > summary::-webkit-details-marker{display:none}
.dica > summary:hover{color:var(--text);background:var(--surface2)}
.dica .lamp{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;
            stroke-linecap:round;stroke-linejoin:round}
/* Aberta, a lâmpada acende: o mesmo desenho, agora preenchido. */
.dica[open] .lamp{fill:currentColor;fill-opacity:.16;stroke-width:2}
.dica-corpo{padding:0 14px 12px 13px;margin-top:-2px;font-size:13px;line-height:1.55;
            color:var(--text2);animation:entra .2s var(--saida)}
.dica-corpo b{color:var(--dark);font-weight:700}
.dica-corpo code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;
                 background:var(--surface3);padding:1px 5px;border-radius:4px}
.dica-corpo > :not(:first-child){margin-top:8px}

.dica.d-i > summary{color:var(--status-solicitado)}
.dica.d-i[open]{border-color:var(--status-solicitado);background:var(--status-solicitado-bg)}
.dica.d-i[open] > summary:hover{background:transparent}
.dica.d-w > summary{color:var(--status-proximo-vencimento)}
.dica.d-w[open]{border-color:var(--status-proximo-vencimento);background:var(--status-proximo-bg)}
.dica.d-w[open] > summary:hover{background:transparent}

.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:13.5px;
             border:1px dashed var(--border2);border-radius:var(--r-lg);background:var(--surface2)}

.legenda{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted);align-items:center}
.legenda i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:1px}

/* =====================================================================
   INDICADORES
   ===================================================================== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px;margin-bottom:1.5rem}
.kpi{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
     padding:1.05rem 1.15rem 1.1rem;cursor:pointer;text-align:left;font-family:inherit;
     box-shadow:var(--sh-1);overflow:hidden;display:flex;flex-direction:column;gap:3px;
     transition:transform .2s var(--mola),box-shadow .2s var(--saida),border-color .2s}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--border2)}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border2);
            transform:scaleY(.35);transform-origin:top;transition:transform .28s var(--mola)}
.kpi:hover::after{transform:scaleY(1)}
.kpi .k{font-size:11.5px;font-weight:650;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi .k::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.kpi .v{font-size:31px;font-weight:700;line-height:1.12;color:var(--dark);letter-spacing:-.03em}
.kpi .d{font-size:11.5px;color:var(--muted);line-height:1.4}
.kpi.c-total::after{background:var(--dark);transform:scaleY(1)}
.kpi.c-total .k{color:var(--muted)} .kpi.c-total .k::before{display:none}
.kpi.c-calibrado::after{background:var(--status-calibrado)}        .kpi.c-calibrado .k{color:var(--status-calibrado)}
.kpi.c-proximo::after{background:var(--status-proximo-vencimento)} .kpi.c-proximo .k{color:var(--status-proximo-vencimento)}
.kpi.c-descalibrado::after{background:var(--status-descalibrado)}  .kpi.c-descalibrado .k{color:var(--status-descalibrado)}
.kpi.c-solicitado::after{background:var(--status-solicitado)}      .kpi.c-solicitado .k{color:var(--status-solicitado)}
.kpi.c-externa::after{background:var(--status-em-calibracao)}      .kpi.c-externa .k{color:var(--status-em-calibracao)}
.kpi.c-standby::after{background:var(--status-standby-pausado)}    .kpi.c-standby .k{color:var(--status-standby-pausado)}
.kpi.c-referencia::after{background:var(--status-referencia)}      .kpi.c-referencia .k{color:var(--status-referencia)}
/* Inativo não tem cor no semáforo — e não deve ter: ele está fora do
   fluxo de calibração, não em algum estágio dele. Cinza, como o badge. */
.kpi.c-inativo::after{background:var(--border2)}                   .kpi.c-inativo .k{color:var(--muted)}
.kpi.sel{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.kpi.estatico{cursor:default}
.kpi.estatico:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--border)}

/* =====================================================================
   GRÁFICOS
   ===================================================================== */
/* ---------------------------------------------------------------------
   GRADE DOS GRÁFICOS — quatro cartas, sempre em linha cheia.

   Com `auto-fit`, a largura da janela decidia quantas colunas cabiam: em
   1344px davam três, e a quarta carta caía sozinha numa segunda linha,
   deixando dois vãos vazios do tamanho de um gráfico. Aqui a contagem é
   declarada, e só em números que DIVIDEM quatro — 2 ou 1. Nunca três:
   linha quebrada não acontece por acidente de viewport.

   Duas colunas, e não quatro, porque o texto do SVG escala junto com o
   desenho: em quatro colunas o rótulo de eixo cairia para ~8px. Em 2×2
   cada gráfico é lido confortavelmente, e as quatro cartas fecham duas
   linhas cheias.

   `grid-auto-rows:1fr` iguala as alturas das linhas, e o cartão em
   coluna flex com a tabela-gêmea empurrada para baixo (`margin-top:auto`)
   alinha o rodapé de todas as cartas. É o que faz quatro conteúdos de
   tamanhos diferentes parecerem do mesmo tamanho.
   --------------------------------------------------------------------- */
.graficos{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:16px;margin-bottom:1.5rem}
/* São TRÊS gráficos. Em duas colunas o terceiro ficaria com meia carta e
   um vão morto ao lado — por isso ele atravessa a linha inteira. A partir
   de 1280px os três cabem lado a lado, cada um acima do piso de 300px que
   moldura() exige, e não sobra vão nenhum para atravessar. */
@media(min-width:820px){
  .graficos{grid-template-columns:repeat(2,1fr)}
  .graficos .larga{grid-column:1/-1}
}
@media(min-width:1280px){
  .graficos{grid-template-columns:repeat(3,1fr)}
  .graficos .larga{grid-column:auto}
}
.graficos .card{margin-bottom:0;display:flex;flex-direction:column}
.graficos .card-body{flex:1;display:flex;flex-direction:column}
/* Sem teto de largura: o gráfico ocupa a carta inteira. O texto do SVG
   escalaria junto com o desenho, então o desenho é gerado em escala 1:1
   — a largura real é medida antes e vira o viewBox. Ver moldura() em
   components/graficos.js. */
.grafico{position:relative;display:flex;flex-direction:column;flex:1;width:100%}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}

/* O anel é a exceção: círculo não estica. Numa carta larga quem ocupa a
   sobra é a legenda, que vai para o lado dele — e a carta economiza seis
   linhas de altura. Estreitou, o flex quebra e volta a empilhar. */
.arco-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.arco-wrap > svg{flex:0 1 340px;max-width:340px}
.arco-wrap > .g-legenda{flex:1 1 210px;margin-top:0;padding-top:0;border-top:none}
@media(max-width:600px){
  .arco-wrap > svg{flex-basis:100%;max-width:none}
  .arco-wrap > .g-legenda{margin-top:6px;padding-top:12px;border-top:1px solid var(--hair)}
}
.g-sub{font-size:11.5px;color:var(--muted);line-height:1.45}
.g-eixo{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.g-valor{font-size:11px;font-weight:700;fill:var(--text2);font-variant-numeric:tabular-nums}
.g-grid{stroke:var(--grid);stroke-width:1}
.g-base{stroke:var(--eixo);stroke-width:1}
.g-hero{font-size:35px;font-weight:700;fill:var(--dark);letter-spacing:-.03em}
.g-hero-sub{font-size:11px;fill:var(--muted);font-weight:650}
/* Mesmo número-herói, fora do SVG: o gráfico de inativos abre com o
   percentual em HTML, ao lado da frase que o explica. */
.g-hero-num{font-size:32px;font-weight:700;color:var(--dark);letter-spacing:-.03em;
            line-height:1;font-variant-numeric:tabular-nums;flex-shrink:0}

/* Foco por realce: ao passar o mouse, as demais marcas recuam.
   O alvo é a faixa inteira, nunca um alvo de precisão. */
.g-marca{transition:opacity .14s var(--saida)}
.grafico:hover .g-marca{opacity:.38}
.g-marca:hover,[data-dica]:hover .g-marca{opacity:1}
.g-alvo{fill:transparent;cursor:default}

@media (prefers-reduced-motion: no-preference){
  /* pathLength="100" normaliza o traço: um só keyframe serve para
     qualquer arco ou linha, de qualquer tamanho. */
  .g-traco{stroke-dasharray:100;stroke-dashoffset:100;animation:tracejo .75s var(--saida) forwards}
  .g-barra{transform-box:fill-box;transform-origin:50% 100%;animation:cresce .5s var(--mola) backwards}
  .g-ponto,.g-valor{animation:aparece .3s var(--saida) backwards;animation-delay:.55s}
}

.g-legenda{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:14px;padding-top:12px;
           border-top:1px solid var(--hair)}
.g-legenda .item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);
                 line-height:1.65;min-width:0}
.g-legenda .sw{width:9px;height:9px;border-radius:2.5px;flex-shrink:0}
.g-legenda .sw.linha{height:2.5px;border-radius:2px;width:14px}
.g-legenda .qtd{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--dark);
                padding-left:10px}
.g-legenda.colunas{display:grid;grid-template-columns:1fr;gap:1px}

.g-dica{position:absolute;pointer-events:none;background:var(--dark);color:#fff;font-size:11.5px;
        font-weight:650;padding:7px 11px;border-radius:var(--r-sm);white-space:nowrap;opacity:0;
        transform:translate(-50%,-125%) scale(.96);z-index:20;box-shadow:var(--sh-2);line-height:1.5}
.g-dica.on{opacity:1;transform:translate(-50%,-135%) scale(1)}
.g-dica .l2{font-weight:500;color:#C9BCB9;display:block}

/* Tabela-gêmea: todo valor é legível sem depender de cor.
   `margin-top:auto` a mantém colada no rodapé do cartão — é ela que
   alinha a base das quatro cartas quando o conteúdo tem alturas
   diferentes. */
.g-tabela{margin-top:auto;padding-top:10px;border-top:1px solid var(--hair)}
.g-tabela summary{font-size:11.5px;font-weight:650;color:var(--muted);cursor:pointer;list-style:none;
                  transition:color .14s}
.g-tabela summary:hover{color:var(--red)}
.g-tabela summary::-webkit-details-marker{display:none}
.g-tabela summary::before{content:"▸ ";display:inline-block}
.g-tabela[open] summary::before{content:"▾ "}
.g-tabela[open] table{animation:entra .22s var(--saida)}
.g-tabela table{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.g-tabela th{text-align:left;font-weight:700;color:var(--muted);font-size:10px;text-transform:uppercase;
             letter-spacing:.07em;padding:4px 6px}
.g-tabela td{padding:5px 6px;border-top:1px solid var(--hair);color:var(--text2)}
.g-tabela td.num{text-align:right;font-variant-numeric:tabular-nums}

/* =====================================================================
   CARTÃO DE ITEM DE LISTA
   ===================================================================== */
.rec{border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:var(--r);
     background:var(--surface);margin-bottom:8px;overflow:hidden;
     transition:border-color .16s,box-shadow .2s var(--saida),transform .16s var(--mola)}
.rec[data-instr]{cursor:pointer}
.rec[data-instr]:hover{transform:translateX(3px);box-shadow:var(--sh-2);border-color:var(--border2)}
.rec.s-calibrado{border-left-color:var(--status-calibrado)}
.rec.s-proximo_vencimento{border-left-color:var(--status-proximo-vencimento)}
.rec.s-descalibrado{border-left-color:var(--status-descalibrado)}
.rec.s-solicitado{border-left-color:var(--status-solicitado)}
.rec.s-em_calibracao_externa{border-left-color:var(--status-em-calibracao)}
.rec.s-standby_pausado{border-left-color:var(--status-standby-pausado)}
.rec.s-referencia{border-left-color:var(--status-referencia)}
.rec-in{padding:12px 14px}
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 18px;font-size:13px}
.rec-grid .k{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rec-grid .v{color:var(--text);font-weight:550;margin-top:2px;word-break:break-word}
.rec-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--hair)}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;letter-spacing:.04em;
      color:var(--dark)}

/* =====================================================================
   TABELA
   ===================================================================== */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
          box-shadow:var(--sh-1)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:880px}
table.tbl th{background:var(--surface);color:var(--muted);font-size:10px;font-weight:800;
             letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:12px;
             border-bottom:1.5px solid var(--dark);white-space:nowrap;position:sticky;top:0;z-index:2}
table.tbl th.ord{cursor:pointer;user-select:none;transition:color .14s}
table.tbl th.ord:hover{color:var(--red)}
table.tbl th .seta{opacity:0;margin-left:4px;font-size:9px;transition:opacity .14s}
table.tbl th.ord:hover .seta{opacity:.45}
table.tbl th.asc .seta,table.tbl th.desc .seta{opacity:1;color:var(--red)}
table.tbl td{padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:middle;color:var(--text2)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr{transition:background .12s}
table.tbl tbody tr.clicavel{cursor:pointer}
table.tbl tbody tr:hover{background:var(--surface2)}
table.tbl tbody tr.marcada{background:var(--accent-lt)}
table.tbl tbody tr.l-calibrado             td:first-child{box-shadow:inset 3px 0 0 var(--status-calibrado)}
table.tbl tbody tr.l-proximo_vencimento    td:first-child{box-shadow:inset 3px 0 0 var(--status-proximo-vencimento)}
table.tbl tbody tr.l-descalibrado          td:first-child{box-shadow:inset 3px 0 0 var(--status-descalibrado)}
table.tbl tbody tr.l-solicitado            td:first-child{box-shadow:inset 3px 0 0 var(--status-solicitado)}
table.tbl tbody tr.l-em_calibracao_externa td:first-child{box-shadow:inset 3px 0 0 var(--status-em-calibracao)}
table.tbl tbody tr.l-standby_pausado       td:first-child{box-shadow:inset 3px 0 0 var(--status-standby-pausado)}
table.tbl tbody tr.l-referencia            td:first-child{box-shadow:inset 3px 0 0 var(--status-referencia)}
table.tbl tbody tr.inativa td{color:var(--muted)}
table.tbl td.mono{white-space:nowrap}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl td.sel,table.tbl th.sel{width:38px;padding-right:0}
table.tbl input[type=checkbox]{width:16px;height:16px;accent-color:var(--red);cursor:pointer}
.tbl-rodape{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
            padding:10px 2px 0;font-size:12px;color:var(--muted)}

.filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.25rem}
.filtros .field{min-width:160px;flex:0 1 auto}
.filtros .field.busca{flex:1 1 280px;min-width:220px}
.filtros .field input,.filtros .field select{font-size:14px;padding:8px 11px}

/* Barra de seleção em massa — preta, porque a ação é séria. */
.sel-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--dark);color:#fff;
         border-radius:var(--r);padding:10px 14px;margin-bottom:12px;font-size:13px;font-weight:650;
         box-shadow:var(--sh-2);animation:entra .22s var(--mola)}
.sel-bar .sep{flex:1}
.sel-bar .btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.sel-bar .btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}

/* =====================================================================
   MODAL
   ===================================================================== */
.modal{position:fixed;inset:0;z-index:9000;background:rgba(21,16,16,.55);backdrop-filter:blur(4px);
       display:flex;align-items:flex-start;justify-content:center;padding:2rem 1.2rem;overflow-y:auto;
       animation:aparece .16s}
.modal[hidden]{display:none}
.modal-card{background:var(--surface);border-radius:var(--r-xl);max-width:720px;width:100%;
            box-shadow:var(--sh-3);overflow:hidden;margin:auto}
.modal-card.lg{max-width:1000px}
/* Cabeçalho preto: dá peso ao que exige decisão. */
.modal-head{background:var(--dark);padding:1.1rem 1.5rem;display:flex;align-items:center;gap:12px;
            flex-wrap:wrap}
.modal-head h3{font-size:15.5px;font-weight:700;color:#F5EDEC;letter-spacing:-.015em}
.modal-head .x{margin-left:auto;background:none;border:none;color:#9A8B88;font-size:22px;line-height:1;
               cursor:pointer;padding:2px 7px;font-family:inherit;border-radius:var(--r-sm);
               transition:all .15s}
.modal-head .x:hover{color:#fff;background:rgba(255,255,255,.12)}
.modal-body{padding:1.4rem 1.5rem;max-height:68vh;overflow-y:auto}
.modal-foot{padding:1rem 1.5rem;border-top:1px solid var(--hair);background:var(--surface2);
            display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:600px){.modal-foot .btn{width:100%}}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px 20px}
.kv .k{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kv .v{font-size:14px;color:var(--text);font-weight:550;margin-top:2px;word-break:break-word}

/* =====================================================================
   LINHA DO TEMPO
   ===================================================================== */
.tl{position:relative;padding-left:24px}
.tl::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:var(--border)}
.tl-item{position:relative;padding:0 0 20px 4px;animation:entra .3s var(--saida) backwards}
.tl-item:nth-child(1){animation-delay:.02s} .tl-item:nth-child(2){animation-delay:.06s}
.tl-item:nth-child(3){animation-delay:.1s}  .tl-item:nth-child(n+4){animation-delay:.13s}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-24px;top:5px;width:9px;height:9px;border-radius:50%;
                 background:var(--border2);box-shadow:0 0 0 3px var(--surface)}
.tl-item.t-entrada::before   {background:var(--dark)}
.tl-item.t-inspecao::before  {background:var(--status-solicitado)}
.tl-item.t-calibracao::before{background:var(--status-calibrado)}
.tl-item.t-saida::before     {background:var(--status-proximo-vencimento)}
.tl-item.t-retorno::before   {background:var(--status-calibrado)}
.tl-item.t-auditoria::before {background:var(--status-em-calibracao)}
.tl-item.t-documento::before {background:var(--muted)}
.tl-quando{font-size:11px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-titulo{font-size:13.5px;font-weight:650;color:var(--dark);margin-top:2px}
.tl-detalhe{font-size:12.5px;color:var(--text2);margin-top:3px;line-height:1.55}
.tl-autor{font-size:11.5px;color:var(--muted);margin-top:4px}

/* =====================================================================
   ARQUIVOS — a pasta de cada equipamento

   Pasta é metáfora de arquivo físico, e é assim que ela se comporta: o
   cartão fechado mostra a etiqueta (tag, instrumento e o que tem
   dentro); aberto, as subpastas por tipo de documento. Nada de miniatura
   ou grade de ícones — o que se procura aqui é um documento específico,
   não uma galeria.
   ===================================================================== */
.pasta > summary .mono{margin-right:2px}
.arqs{display:flex;flex-direction:column;gap:14px}
.arq-grupo{border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);
           overflow:hidden}
.arq-grupo-cab{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface3);
               font-size:12px;color:var(--text2);border-bottom:1px solid var(--border)}
.arq-grupo-cab svg{width:14px;height:14px;stroke:var(--red);fill:none;stroke-width:1.9;
                   stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.arq-grupo-cab b{font-size:12px;font-weight:700;color:var(--dark);letter-spacing:.01em}
.arq-qtd{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface);
         border:1px solid var(--border);border-radius:99px;padding:1px 8px;
         font-variant-numeric:tabular-nums}
.arq-item{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--surface);
          border-top:1px solid var(--hair)}
.arq-item:first-of-type{border-top:none}
.arq-txt{min-width:0;flex:1}
.arq-nome{font-size:13px;font-weight:600;color:var(--text);word-break:break-word}
.arq-meta{font-size:11px;color:var(--muted);margin-top:2px;word-break:break-all}
.arq-path{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10.5px}
/* Ações da pasta (anexar foto): alinhadas à direita, acima do conteúdo —
   longe do "Abrir" de cada arquivo, que é o gesto de leitura. */
.arq-acoes{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:-2px 0 10px}
/* Pasta sem foto: o aviso é do INVENTÁRIO, não do arquivo — é por ela que
   se reconhece o instrumento na conferência. */
.sem-foto{font-size:11.5px;font-weight:650;color:var(--status-proximo-vencimento);align-self:center}

/* =====================================================================
   AUTOCOMPLETE
   ===================================================================== */
.ac{position:relative;z-index:30}
.ac-lista{position:absolute;z-index:70;left:0;right:0;top:calc(100% + 4px);background:var(--surface);
          border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-3);
          max-height:min(52vh,340px);overflow-y:auto;overscroll-behavior:contain;padding:4px}
.ac-lista[hidden]{display:none}
.ac-item{padding:9px 11px;cursor:pointer;font-size:13px;border-radius:var(--r-sm);color:var(--text2);
         transition:background .12s}
.ac-item:hover,.ac-item.sel{background:var(--accent-lt)}
.ac-item b{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.04em;color:var(--dark)}
.ac-item > div{display:flex;align-items:center;gap:10px;margin-top:3px;flex-wrap:wrap}
.ac-item span{color:var(--muted);font-size:12px}

/* =====================================================================
   TOAST, CARREGANDO, GATE
   ===================================================================== */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(14px) scale(.97);
       background:var(--dark);color:#fff;border-radius:var(--r);padding:12px 20px;font-size:13.5px;
       font-weight:650;pointer-events:none;opacity:0;z-index:99999;max-width:min(90vw,470px);
       text-align:center;white-space:pre-line;box-shadow:var(--sh-3);line-height:1.5;
       transition:opacity .22s,transform .28s var(--mola);border-left:3px solid var(--dark3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.success{border-left-color:var(--status-calibrado)}
.toast.error{border-left-color:var(--red)}

.carregando{display:flex;align-items:center;justify-content:center;gap:10px;padding:3rem;
            color:var(--muted);font-size:13px;font-weight:650;animation:aparece .3s .12s backwards}
.spin{width:16px;height:16px;border:2px solid var(--border2);border-top-color:var(--red);
      border-radius:50%;animation:gira .62s linear infinite;flex-shrink:0}

.gate{position:fixed;inset:0;z-index:9500;background:var(--bg);display:flex;align-items:center;
      justify-content:center;padding:1.5rem;overflow-y:auto}
.gate[hidden]{display:none}
.gate-card{background:var(--surface);border-radius:var(--r-xl);max-width:400px;width:100%;
           box-shadow:var(--sh-3);overflow:hidden;animation:surge .34s var(--mola)}
.gate-top{padding:2.2rem 2rem 1.5rem;text-align:center;border-bottom:3px solid var(--red)}
.gate-top img{height:44px;margin:0 auto 1.5rem;display:block}
.gate-top h1{font-size:19px;font-weight:700;color:var(--dark);letter-spacing:-.025em}
.gate-top p{font-size:12.5px;color:var(--muted);margin-top:5px}
.gate-body{padding:1.6rem 2rem 1.8rem;display:flex;flex-direction:column;gap:14px}
.gate-foot{background:var(--dark);padding:.7rem;text-align:center;font-size:10px;color:#8A7C79;
           letter-spacing:.14em;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}

.mudou{animation:realce 2.6s ease-out}

@media print{
  .sticky-top,.act-bar,.filtros,.btn,.tabs,.sel-bar{display:none!important}
  /* No papel não há clique: a dica que ficou fechada não pode virar uma
     pastilha sem conteúdo. Melhor esforço — o navegador ainda decide se
     revela o miolo de um <details> fechado. */
  .dica{display:block;border-color:var(--border)}
  .dica > .dica-corpo{display:block}
  body{background:#fff}
  .card{break-inside:avoid;box-shadow:none;border-color:#ccc;animation:none}
}