/* =====================================================================
   PerpecNet — só as DERIVAÇÕES do design system da metrologia.

   style.css é cópia sem alteração do app de metrologia (APP-MET-001).
   Tudo que o SGQ precisa e a metrologia não tinha mora aqui, e nenhuma
   cor nova é criada: os sete tons do semáforo SGQ são aliases dos tons
   da metrologia (docs/design-system.md §8.1).
   ===================================================================== */
:root{
  --st-vigente:var(--status-calibrado);            --st-vigente-bg:var(--status-calibrado-bg);
  --st-atencao:var(--status-proximo-vencimento);   --st-atencao-bg:var(--status-proximo-bg);
  --st-vencido:var(--status-descalibrado);         --st-vencido-bg:var(--status-descalibrado-bg);
  --st-aprovacao:var(--status-solicitado);         --st-aprovacao-bg:var(--status-solicitado-bg);
  --st-elaboracao:var(--status-em-calibracao);     --st-elaboracao-bg:var(--status-em-calibracao-bg);
  --st-obsoleto:var(--status-standby-pausado);     --st-obsoleto-bg:var(--status-standby-bg);
  --st-externo:var(--status-referencia);           --st-externo-bg:var(--status-referencia-bg);
}

/* =====================================================================
   ACENTO HORIZONTAL — a linguagem própria da PerpecNet.

   Faixa colorida na lateral de caixa arredondada virou clichê de
   interface gerada; aqui ela não existe. O acento é sempre HORIZONTAL,
   como num documento técnico: fio no topo do aviso (com o rótulo em
   caixa alta, igual às NOTAS dos POPs), traço curto sob o título do
   cartão, sublinhado que cresce no indicador — a mesma gramática da aba
   ativa, que já era um sublinhado vermelho.

   Estas regras SOBRESCREVEM o style.css (que continua cópia fiel da
   metrologia); por isso ficam no topo e usam a mesma especificidade.
   ===================================================================== */
.warn-box{position:relative;border-left:0;border-top:1.5px solid;border-radius:1px 1px var(--r) var(--r);
          padding:23px 15px 12px}
.warn-box::before{position:absolute;top:7px;left:15px;font-size:9.5px;font-weight:800;letter-spacing:.14em;
                  text-transform:uppercase;line-height:1}
.warn-box.i::before{content:"Nota";color:var(--st-aprovacao)}
.warn-box.w::before{content:"Atenção";color:var(--st-atencao)}
.warn-box.e::before{content:"Erro";color:var(--st-vencido)}
.warn-box.g::before{content:"Concluído";color:var(--st-vigente)}
.warn-box.sem-rotulo{padding-top:11px} .warn-box.sem-rotulo::before{display:none}

.dica[open]{border-left-width:1px;border-top-width:1.5px;border-radius:1px 1px var(--r) var(--r)}

/* Título de cartão: traço curto embaixo, no lugar da barrinha vertical. */
.card-head::before{display:none}
.card-head h2{padding-bottom:4px;
              background:linear-gradient(var(--red),var(--red)) left bottom / 16px 2px no-repeat}

/* Indicador: o fio de cor corre na base e cresce ao passar o mouse. */
.kpi::after{top:auto;right:0;bottom:0;width:auto;height:2.5px;transform:scaleX(.16);transform-origin:left}
.kpi:hover::after,.kpi.sel::after{transform:scaleX(1)}

.rec{border-left:1px solid var(--border)}

.toast{border-left:0;border-top:2px solid var(--dark3)}
.toast.success{border-top-color:var(--status-calibrado)}
.toast.error{border-top-color:var(--red)}
/* ---- Semáforo: badge, legenda, linha de tabela, cartão, indicador ---- */
.bdg.s-vigente{color:var(--st-vigente)}      .bdg.s-atencao{color:var(--st-atencao)}
.bdg.s-vencido{color:var(--st-vencido)}      .bdg.s-aprovacao{color:var(--st-aprovacao)}
.bdg.s-elaboracao{color:var(--st-elaboracao)} .bdg.s-obsoleto{color:var(--st-obsoleto)}
.bdg.s-externo{color:var(--st-externo)}

.legenda i.sw-vigente{background:var(--st-vigente)}     .legenda i.sw-atencao{background:var(--st-atencao)}
.legenda i.sw-vencido{background:var(--st-vencido)}     .legenda i.sw-aprovacao{background:var(--st-aprovacao)}
.legenda i.sw-elaboracao{background:var(--st-elaboracao)} .legenda i.sw-obsoleto{background:var(--st-obsoleto)}
.legenda i.sw-externo{background:var(--st-externo)}

/* Linha de tabela e cartão de lista NÃO ganham faixa colorida: a
   situação já está no badge (ponto + rótulo). Ver "Acento horizontal". */
table.tbl tbody tr.l-obsoleto td{color:var(--muted)}
.rec[data-ir]{cursor:pointer}
.rec[data-ir]:hover{transform:translateX(3px);box-shadow:var(--sh-2);border-color:var(--border2)}

.kpi.c-vigente::after{background:var(--st-vigente)}       .kpi.c-vigente .k{color:var(--st-vigente)}
.kpi.c-atencao::after{background:var(--st-atencao)}       .kpi.c-atencao .k{color:var(--st-atencao)}
.kpi.c-vencido::after{background:var(--st-vencido)}       .kpi.c-vencido .k{color:var(--st-vencido)}
.kpi.c-aprovacao::after{background:var(--st-aprovacao)}   .kpi.c-aprovacao .k{color:var(--st-aprovacao)}
.kpi.c-elaboracao::after{background:var(--st-elaboracao)} .kpi.c-elaboracao .k{color:var(--st-elaboracao)}
.kpi.c-obsoleto::after{background:var(--st-obsoleto)}     .kpi.c-obsoleto .k{color:var(--st-obsoleto)}
.kpi.c-externo::after{background:var(--st-externo)}       .kpi.c-externo .k{color:var(--st-externo)}
/* Indicador zerado não chama atenção: pendência nenhuma é boa notícia. */
.kpi.zero .v{color:var(--border2)}

/* ---- Cabeçalho de tela ------------------------------------------------ */
.tela-cab{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px;
          margin-bottom:1.5rem}
.tela-cab h1{font-size:22px;font-weight:680;letter-spacing:-.025em;color:var(--dark)}
.tela-cab p{font-size:13px;color:var(--muted);margin-top:3px}
.voltar{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;color:var(--muted);
        margin-bottom:.9rem}
.voltar:hover{color:var(--red);text-decoration:none}
.voltar svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Código + título do documento no topo do detalhe e do editor. */
.doc-titulo{display:flex;flex-direction:column;gap:4px;min-width:0}
.doc-titulo .linha1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.doc-titulo .codigo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:13px;font-weight:700;
                    letter-spacing:.08em;color:var(--red)}
.doc-titulo h1{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--dark);line-height:1.3}

/* ---- Etapas do fluxo (derivado de .tl) ---------------------------------
   Uma bolinha por etapa: verde aprovada, azul pendente, cinza aguardando,
   âmbar devolvida. Horizontal no desktop, vertical no celular.          */
.etapas{display:flex;gap:0;list-style:none;counter-reset:etapa}
.etapa{flex:1;position:relative;padding:0 10px 0 0;min-width:0}
.etapa::before{content:"";position:absolute;left:9px;right:0;top:9px;height:2px;background:var(--border)}
.etapa:last-child::before{display:none}
.etapa .pino{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;background:var(--surface);
             border:2px solid var(--border2);display:flex;align-items:center;justify-content:center}
.etapa .pino svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.etapa.aprovada .pino{background:var(--st-vigente);border-color:var(--st-vigente)}
.etapa.aprovada::before{background:var(--st-vigente)}
.etapa.pendente .pino{border-color:var(--st-aprovacao);box-shadow:0 0 0 4px var(--st-aprovacao-bg)}
.etapa.pendente .pino::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--st-aprovacao);
                             animation:pulsa 1.6s ease-in-out infinite}
.etapa.reprovada .pino{background:var(--st-atencao);border-color:var(--st-atencao)}
.etapa .nome{font-size:12.5px;font-weight:700;color:var(--dark);margin-top:8px}
.etapa .quem{font-size:11.5px;color:var(--text2);margin-top:2px;line-height:1.4}
.etapa .quando{font-size:11px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums}
.etapa .coment{font-size:12px;color:var(--text2);margin-top:6px;padding:6px 9px;background:var(--st-atencao-bg);
               border-top:1.5px solid var(--st-atencao);border-radius:1px 1px var(--r-sm) var(--r-sm)}
@media(max-width:720px){
  .etapas{flex-direction:column;gap:14px}
  .etapa{padding:0 0 0 30px}
  .etapa::before{left:9px;right:auto;top:20px;bottom:-14px;width:2px;height:auto}
  .etapa .pino{position:absolute;left:0;top:0}
  .etapa .nome{margin-top:0}
}

/* ---- Leitura do conteúdo (revisão renderizada a partir do schema) ------ */
.leitura{font-size:14.5px;line-height:1.65;color:var(--text);max-width:860px}
.leitura .secao{margin-bottom:1.6rem;position:relative}
.leitura .secao.alterada h3{border-bottom-color:var(--red)}
.leitura h3{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:800;letter-spacing:.08em;
            text-transform:uppercase;color:var(--dark);padding-bottom:6px;border-bottom:1px solid var(--hair);
            margin-bottom:10px}
.leitura h3 .num{color:var(--red);font-size:14px}
.leitura h3 .alt{margin-left:auto;font-size:10px;letter-spacing:.08em;color:var(--red)}
.leitura h4{font-size:14px;font-weight:700;color:var(--dark);margin:12px 0 4px}
.leitura h4 .num{color:var(--red);margin-right:6px}
.leitura p{margin-bottom:8px}
.leitura ul,.leitura ol{margin:0 0 10px 22px}
.leitura li::marker{color:var(--red)}
.leitura .rotulo-campo{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
                       color:var(--muted);margin:10px 0 4px}
.leitura table{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 12px}
.leitura th{background:var(--dark);color:#F0E6E4;font-size:10px;font-weight:700;letter-spacing:.07em;
            text-transform:uppercase;text-align:left;padding:7px 9px}
.leitura td{padding:7px 9px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--text2)}
.leitura tr:nth-child(even) td{background:var(--surface2)}
.leitura .vazio{color:var(--muted);font-style:italic}

/* ---- Editor de texto rico (Quill) com a moldura do .field ------------- */
.rt{border:1px solid var(--border2);border-radius:var(--r);background:var(--surface);
    transition:border-color .15s,box-shadow .15s}
.rt:hover{border-color:#B3AAA0}
.rt:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.13)}
.field.err .rt{border-color:var(--red);background:var(--accent-lt)}
.rt .ql-toolbar.ql-snow{border:none;border-bottom:1px solid var(--hair);padding:6px 8px;
                        font-family:inherit;background:var(--surface2);border-radius:var(--r) var(--r) 0 0}
.rt .ql-container.ql-snow{border:none;font-family:inherit;font-size:16px}
.rt .ql-editor{min-height:120px;line-height:1.6;color:var(--text);padding:12px 14px}
.rt .ql-editor.ql-blank::before{color:#B4ADA4;font-style:normal;left:14px}
.rt .ql-snow .ql-stroke{stroke:var(--text2)} .rt .ql-snow .ql-fill{fill:var(--text2)}
.rt .ql-snow button:hover .ql-stroke,.rt .ql-snow button.ql-active .ql-stroke{stroke:var(--red)}
.rt .ql-snow button:hover .ql-fill,.rt .ql-snow button.ql-active .ql-fill{fill:var(--red)}
.rt .ql-snow .ql-picker{color:var(--text2)}
.rt.somente-leitura .ql-toolbar{display:none}

/* ---- Campo tabela e campo lista do motor de formulários --------------- */
.ct{border:1px solid var(--border);border-radius:var(--r);overflow-x:auto;background:var(--surface)}
.ct table{width:100%;border-collapse:collapse;min-width:520px}
.ct th{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
       text-align:left;padding:9px 10px;border-bottom:1.5px solid var(--dark);background:var(--surface)}
.ct td{padding:5px 6px;border-bottom:1px solid var(--hair);vertical-align:top}
.ct td textarea,.ct td input{width:100%;border:1px solid transparent;border-radius:var(--r-sm);padding:7px 8px;
       font-family:inherit;font-size:14px;color:var(--text);background:transparent;resize:vertical;min-height:36px;
       line-height:1.45}
.ct td textarea:hover,.ct td input:hover{border-color:var(--border)}
.ct td textarea:focus,.ct td input:focus{outline:none;border-color:var(--red);background:var(--surface);
       box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.ct td.acoes{width:74px;white-space:nowrap;text-align:right;vertical-align:middle}
.ct-rodape{padding:8px 10px;background:var(--surface2);border-top:1px solid var(--hair)}
.mini{background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:var(--r-sm);
      display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.mini:hover{color:var(--red);background:var(--accent-lt)}
.mini:disabled{opacity:.3;cursor:default;background:none;color:var(--muted)}
.mini svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- Rodapé fixo do editor -------------------------------------------- */
.editor-rodape{position:sticky;bottom:12px;z-index:50;margin-top:1.25rem;box-shadow:var(--sh-3)}
.salvo{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.salvo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--st-vigente)}
.salvo.salvando::before{background:var(--st-aprovacao);animation:pulsa 1s ease-in-out infinite}
.salvo.pendente::before{background:var(--st-atencao)}
.salvo.erro{color:var(--red)} .salvo.erro::before{background:var(--red)}

/* ---- Painel: pendências ------------------------------------------------ */
.pend-grupo{margin-bottom:1.25rem}
.pend-item{display:flex;align-items:center;gap:14px}
.pend-item .txt{min-width:0;flex:1}
.pend-item .t1{font-size:13.5px;font-weight:650;color:var(--dark);display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.pend-item .t2{font-size:12px;color:var(--muted);margin-top:2px}
.pend-item .dir{text-align:right;flex-shrink:0}
.tudo-certo{display:flex;align-items:center;gap:14px;padding:1.4rem;color:var(--text2);font-size:14px}
.tudo-certo svg{width:34px;height:34px;stroke:var(--st-vigente);fill:none;stroke-width:1.8;
                stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---- Modo demonstração -------------------------------------------------- */
.demo-bar{background:var(--st-atencao-bg);border-bottom:1px solid var(--border);padding:.45rem 1.75rem}
.demo-bar-inner{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
                font-size:12.5px;color:var(--text2)}
.demo-bar b{color:var(--st-atencao);letter-spacing:.06em;font-size:11px}
.demo-bar select{border:1px solid var(--border2);border-radius:var(--r-sm);padding:4px 8px;font-family:inherit;
                 font-size:12.5px;background:var(--surface);color:var(--text)}
.demo-bar .sep{flex:1}

/* ---- Diversos ----------------------------------------------------------- */
.linha-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nota-campo{font-size:11.5px;color:var(--muted);margin-top:4px}
.mono-sm{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;letter-spacing:.03em;
         color:var(--text2);word-break:break-all}
.diff{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px}
.diff .antes{background:var(--st-vencido-bg);padding:4px 7px;border-radius:var(--r-sm);color:var(--text2)}
.diff .depois{background:var(--st-vigente-bg);padding:4px 7px;border-radius:var(--r-sm);color:var(--text2)}
.previa-codigo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:20px;font-weight:700;
               letter-spacing:.1em;color:var(--dark);padding:12px;text-align:center;background:var(--surface2);
               border:1px dashed var(--border2);border-radius:var(--r)}
.json{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace!important;font-size:13px!important;
      min-height:340px!important;line-height:1.5!important;white-space:pre}
.visor-pdf{width:100%;height:72vh;border:0;border-radius:var(--r);background:var(--surface3)}

/* ---- Detalhe do documento: conteúdo à esquerda, ficha à direita -------- */
.detalhe{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:1.25rem;align-items:start}
.detalhe > div{min-width:0}
@media(max-width:1100px){ .detalhe{grid-template-columns:1fr} }
.ficha-lateral .kv{grid-template-columns:1fr 1fr}
.acoes-sec{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hash{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;color:var(--muted);
      word-break:break-all;letter-spacing:.02em}

/* Etiqueta tipográfica, não pastilha: rótulo em caixa alta e espaçado,
   sem fundo nem cantos — parte da mesma linguagem do "Acento horizontal". */
.tag{background:none;padding:0;border-radius:0;font-size:10.5px;font-weight:750;letter-spacing:.09em;
     text-transform:uppercase;color:var(--muted)}
.tag + .tag{margin-left:12px}
.tag.acento{background:none;color:var(--red)}

/* Celular: o nome do usuário não cabe ao lado do logo e do "Sair". */
@media(max-width:560px){
  .header-usuario .quem{display:none}
  .header-logo img{height:32px}
  .tela-cab h1{font-size:19px}
}

/* =====================================================================
   BARRA LATERAL — módulos do portal (components/lateral.js)

   Mesma gramática das abas: o item ativo acende o ícone em vermelho e
   ganha um traço curto SOB o nome. Módulo que ainda não existe tem o
   ícone tracejado — um esboço — e a fase do roteiro ao lado.
   ===================================================================== */
:root{--lateral:262px;--lateral-min:72px;--topo:120px}
.app{display:flex;align-items:flex-start}
.app > .wrap{flex:1;min-width:0}

.lateral{position:sticky;top:var(--topo);height:calc(100vh - var(--topo));width:var(--lateral);flex-shrink:0;
         display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--border);
         overflow:hidden;z-index:80;transition:width .38s var(--mola)}
.lat-rolagem{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 12px 10px;scrollbar-width:thin}
.lat-rolagem::-webkit-scrollbar{width:6px}
.lat-rolagem::-webkit-scrollbar-thumb{border:0;background:var(--border)}
.lat-grupo + .lat-grupo{margin-top:10px}
.lat-rotulo{height:32px;display:flex;align-items:flex-end;padding:0 14px 7px;font-size:9.5px;font-weight:800;
            letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.lat-rotulo span{transition:opacity .2s var(--saida)}

.lat-item{position:relative;display:flex;align-items:center;gap:13px;width:100%;min-height:40px;padding:0 12px 0 14px;
          border:0;background:none;border-radius:var(--r);font-family:inherit;font-size:13.5px;font-weight:600;
          color:var(--text2);text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap;
          transition:color .18s var(--saida),background .18s var(--saida)}
.lat-item:hover{background:var(--surface2);color:var(--dark);text-decoration:none}
.lat-item:focus-visible{outline-offset:-2px}
.lat-item .ic{width:19px;height:19px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.75;
              stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--mola),stroke .18s}
.lat-item:hover .ic{transform:translateX(2px)}
.lat-item .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;padding:3px 0 4px;
               background:linear-gradient(var(--red),var(--red)) left bottom / 0 2px no-repeat;
               transition:background-size .4s var(--mola),opacity .2s var(--saida)}
.lat-item:hover:not(.sel) .txt{background-image:linear-gradient(var(--border2),var(--border2));background-size:8px 2px}
.lat-item.sel{color:var(--dark);font-weight:700}
.lat-item.sel .ic{stroke:var(--red)}
.lat-item.sel .txt{background-size:18px 2px}

/* Módulo em construção: o ícone é um esboço tracejado até o módulo existir. */
.lat-item.em-obra{color:var(--muted)}
.lat-item.em-obra .ic{stroke-dasharray:2.6 2.2}
.lat-item.em-obra:hover .ic,.lat-item.em-obra.sel .ic{stroke-dasharray:none}
.lat-item.em-obra:hover,.lat-item.em-obra.sel{color:var(--dark)}
.lat-fase{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--border2);font-variant-numeric:tabular-nums;
          transition:color .18s,opacity .2s}
.lat-item:hover .lat-fase,.lat-item.sel .lat-fase{color:var(--red)}

/* Pendências: número, não pastilha. */
.lat-n{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--st-aprovacao);transition:opacity .2s}
.lat-n.warn{color:var(--st-atencao)} .lat-n.late{color:var(--st-vencido)}
.lat-ponto{position:absolute;left:29px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--st-aprovacao);
           box-shadow:0 0 0 2px var(--surface);transition:opacity .2s}
.lat-ponto.late{background:var(--st-vencido)}
.lat-sub.aberto .lat-ponto{opacity:0}

/* Grupo com telas filhas (Documentação). Abre com grid 0fr→1fr: altura real, sem medir. */
.lat-pai .chev{width:15px;height:15px;flex-shrink:0;stroke:var(--muted);fill:none;stroke-width:2.2;stroke-linecap:round;
               stroke-linejoin:round;transition:transform .34s var(--mola),opacity .2s}
.lat-sub.aberto .chev{transform:rotate(90deg)}
.lat-pai.sel-pai{color:var(--dark)} .lat-pai.sel-pai .ic{stroke:var(--red)}
.lat-filhos{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--mola)}
.lat-sub.aberto .lat-filhos{grid-template-rows:1fr}
.lat-filhos-in{overflow:hidden;min-height:0}
.lat-filho{min-height:35px;padding-left:46px;font-size:13px;font-weight:550}
.lat-filho .lat-marca{position:absolute;left:23px;top:50%;width:7px;height:7px;border-radius:50%;
                      border:1.5px solid var(--border2);transform:translateY(-50%);transition:all .3s var(--mola)}
.lat-filho:hover .lat-marca{border-color:var(--muted)}
.lat-filho.sel .lat-marca{background:var(--red);border-color:var(--red);transform:translateY(-50%) scale(1.15)}

.lat-rodape{border-top:1px solid var(--hair);padding:8px 12px 12px}
.lat-recolher{color:var(--muted);font-weight:550;font-size:12.5px}
.lat-recolher .ic{transition:transform .38s var(--mola)}

/* Entrada: os itens chegam um a um, deslizando da esquerda. */
@keyframes lat-entra{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .lateral .lat-rolagem > .lat-grupo > .lat-item,.lateral .lat-sub > .lat-pai,.lateral .lat-rodape .lat-item{
    animation:lat-entra .5s var(--mola) backwards;animation-delay:calc(var(--i, 0) * 38ms + 90ms)}
  .lat-sub.aberto .lat-filho{animation:lat-entra .34s var(--mola) backwards}
  .lat-sub.aberto .lat-filho:nth-child(2){animation-delay:.05s} .lat-sub.aberto .lat-filho:nth-child(3){animation-delay:.1s}
}

/* ---- Botão do menu no cabeçalho ---------------------------------------- */
.btn-menu{width:38px;height:38px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
          display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .16s,background .16s}
.btn-menu:hover{border-color:var(--border2);background:var(--surface2)}
.btn-menu svg{width:18px;height:18px;stroke:var(--dark);fill:none;stroke-width:2;stroke-linecap:round;overflow:visible}
.btn-menu path{transition:transform .38s var(--mola)}
.btn-menu:hover .l2{transform:translateX(-3px)}
.recolhida .btn-menu .l1{transform:translateX(5px)} .recolhida .btn-menu .l3{transform:translateX(5px)}

/* ---- Trilho recolhido (desktop) ------------------------------------------ */
@media (min-width:901px){
  .recolhida .lateral{width:var(--lateral-min)}
  .recolhida .lat-item .txt,.recolhida .lat-fase,.recolhida .lat-n,.recolhida .lat-pai .chev{opacity:0;pointer-events:none}
  .recolhida .lat-rotulo{justify-content:center;padding:0 0 12px}
  .recolhida .lat-rotulo span{opacity:0;width:0}
  .recolhida .lat-rotulo::after{content:"";width:18px;height:1.5px;background:var(--border)}
  .recolhida .lat-filhos,.recolhida .lat-sub.aberto .lat-filhos{grid-template-rows:0fr}
  .recolhida .lat-sub.aberto .lat-ponto{opacity:1}
  .recolhida .lat-recolher .ic{transform:scaleX(-1)}
  .lat-veu,.lat-topo-celular{display:none}
}

/* ---- Gaveta (celular) ------------------------------------------------------- */
.lat-topo-celular{display:none}
@media (max-width:900px){
  .lateral{position:fixed;top:0;left:0;height:100vh;height:100dvh;width:min(86vw,300px);z-index:9600;
           transform:translateX(-104%);box-shadow:var(--sh-3);transition:transform .4s var(--mola)}
  .gaveta-aberta .lateral{transform:none}
  .lat-topo-celular{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
                    border-bottom:3px solid var(--red)}
  .lat-marca-app{font-size:15px;font-weight:750;color:var(--dark);letter-spacing:-.015em}
  .lat-fechar{background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 8px;border-radius:var(--r-sm)}
  .lat-fechar:hover{color:var(--dark);background:var(--surface3)}
  .lat-veu{position:fixed;inset:0;background:rgba(21,16,16,.45);backdrop-filter:blur(3px);opacity:0;pointer-events:none;
           z-index:9500;transition:opacity .3s var(--saida)}
  .gaveta-aberta .lat-veu{opacity:1;pointer-events:auto}
  .lat-recolher{display:none}
}

/* =====================================================================
   EM CONSTRUÇÃO — pages/em-construcao.js
   ===================================================================== */
.obra{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3rem;align-items:center;padding:.5rem 0 2rem}
@media(max-width:1100px){ .obra{grid-template-columns:1fr;gap:2rem} }
.obra-fase{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.16em;
           text-transform:uppercase;color:var(--red)}
.obra-fase::after{content:"";flex:0 0 56px;height:1.5px;background:var(--red);transform-origin:left}
.obra h1{font-size:clamp(32px,4.2vw,48px);font-weight:750;letter-spacing:-.04em;line-height:1.04;color:var(--dark);margin-top:16px}
.obra-lead{font-size:17px;line-height:1.6;color:var(--text2);margin-top:14px;max-width:580px}
.obra-iso{margin-top:14px;font-size:12.5px;color:var(--muted)}
.obra-iso b{color:var(--dark);font-weight:750;letter-spacing:.04em;margin-right:8px}
.obra-lista{list-style:none;margin-top:26px;border-top:1px solid var(--border)}
.obra-lista li{display:grid;grid-template-columns:40px 1fr;column-gap:10px;row-gap:2px;padding:14px 0;border-bottom:1px solid var(--hair)}
.obra-lista .n{grid-row:span 2;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;font-weight:700;
               color:var(--red);padding-top:2px}
.obra-lista b{font-size:14.5px;color:var(--dark);font-weight:700}
.obra-lista span:not(.n){font-size:13.5px;color:var(--text2);line-height:1.55}
.obra-enquanto{margin-top:20px;font-size:13.5px;color:var(--text2);line-height:1.55}
.obra-acoes{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.planta{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
        box-shadow:var(--sh-2);overflow:hidden;aspect-ratio:4/3}
.planta svg{display:block;width:100%;height:100%}
.pl-grade{stroke:var(--hair);stroke-width:.6} .pl-grade-forte{stroke:var(--border);stroke-width:.9}
.pl-canto{stroke:var(--red);stroke-width:1.5;fill:none}
.pl-traco path{fill:none;stroke:var(--dark);stroke-width:.27;stroke-linecap:round;stroke-linejoin:round}
.pl-cota path,.pl-cota circle{fill:none;stroke:var(--red);stroke-width:1}
.pl-cota-txt{font:700 9.5px ui-monospace,"Cascadia Mono",Consolas,monospace;fill:var(--red);letter-spacing:.1em;stroke:none!important}
.pl-legenda rect,.pl-legenda line{fill:var(--surface);stroke:var(--dark);stroke-width:1}
.pl-legenda text{font:600 8.5px ui-monospace,"Cascadia Mono",Consolas,monospace;fill:var(--text2);letter-spacing:.06em}
.pl-legenda .t{font-weight:800;fill:var(--dark)}
.pl-varredura line{stroke:var(--red);stroke-width:1;opacity:0}

@keyframes pl-varre{0%{transform:translateY(8px);opacity:0}8%{opacity:.35}92%{opacity:.35}100%{transform:translateY(292px);opacity:0}}
@keyframes pl-risca{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: no-preference){
  .obra-fase::after{animation:pl-risca .9s var(--mola) .15s backwards}
  .obra h1{animation:entra .5s var(--mola) .05s backwards}
  .obra-lead,.obra-iso{animation:entra .5s var(--mola) .12s backwards}
  .obra-lista li{animation:entra .45s var(--mola) backwards;animation-delay:calc(var(--i) * 70ms + 240ms)}
  .obra-enquanto,.obra-acoes{animation:entra .45s var(--mola) .55s backwards}
  .planta{animation:surge .6s var(--mola) .1s backwards}
  .pl-traco path{stroke-dasharray:100;stroke-dashoffset:100;animation:tracejo 1.9s cubic-bezier(.6,.05,.3,1) .45s forwards}
  .pl-traco path:nth-child(2){animation-delay:.9s} .pl-traco path:nth-child(3){animation-delay:1.3s}
  .pl-traco path:nth-child(4){animation-delay:1.6s}
  .pl-cota{opacity:0;animation:aparece .6s var(--saida) 2.1s forwards}
  .pl-mira{opacity:0;animation:aparece .4s var(--saida) 2.3s forwards}
  .pl-mira circle{animation:pulsa 1.6s ease-in-out 2.7s infinite}
  .pl-legenda{opacity:0;animation:aparece .5s var(--saida) 1.2s forwards}
  .pl-varredura line{animation:pl-varre 6s ease-in-out 2.8s infinite}
}

/* Roteiro: as etapas do fluxo, reaproveitadas para as 8 fases. */
.roteiro .etapa .nome{font-size:12.5px}
.roteiro .etapa .quando{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
.roteiro .etapa .nome{margin-top:2px}
.roteiro .etapa.destaque .nome{color:var(--red)}
.roteiro .etapa.destaque .pino{border-color:var(--red);box-shadow:0 0 0 4px var(--accent-lt)}
@media(max-width:1100px){ .roteiro{flex-wrap:wrap;row-gap:18px} .roteiro .etapa{flex:0 0 25%} }

/* Células de data e pessoa dentro da tabela do motor de formulários. */
.ct td select,.ct td input[type=date]{width:100%;border:1px solid transparent;border-radius:var(--r-sm);padding:7px 8px;
  font-family:inherit;font-size:14px;color:var(--text);background:transparent;min-height:36px}
.ct td select:hover,.ct td input[type=date]:hover{border-color:var(--border)}
.ct td select:focus{outline:none;border-color:var(--red);background:var(--surface);box-shadow:0 0 0 3px rgba(192,57,43,.1)}

/* =====================================================================
   ATAS E REUNIÕES (Fase 3)
   ===================================================================== */
.g-span2{grid-column:span 2} .g-span3{grid-column:span 3}
@media(max-width:1050px){ .g-span3{grid-column:span 2} }
@media(max-width:720px){ .g-span2,.g-span3{grid-column:1} }

/* Controle segmentado (formato da reunião, presença). */
.segmento{display:inline-flex;gap:3px;background:var(--surface3);padding:3px;border-radius:var(--r);flex-wrap:wrap}
.segmento button{border:0;background:none;font-family:inherit;font-size:13px;font-weight:650;color:var(--muted);
                 padding:7px 14px;border-radius:7px;cursor:pointer;transition:color .16s,background .2s var(--saida),box-shadow .2s}
.segmento button:hover{color:var(--text)}
.segmento button.sel{color:var(--dark);background:var(--surface);box-shadow:var(--sh-1),inset 0 -2px 0 var(--red)}
.segmento.pequeno button{font-size:12px;padding:5px 10px}

/* Escolha de pessoas: cartões com iniciais. */
.escolha-pessoas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:12px;
                 max-height:340px;overflow-y:auto;padding:2px}
.pessoa{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r);
        cursor:pointer;background:var(--surface);transition:border-color .16s,background .16s,transform .2s var(--mola)}
.pessoa:hover{border-color:var(--border2);transform:translateY(-1px)}
.pessoa input{position:absolute;opacity:0;pointer-events:none}
.pessoa.sel{border-color:var(--dark);background:var(--surface2)}
.pessoa.sel .avatar{background:var(--dark);color:#fff}
.pessoa.fixo{cursor:default}
.pessoa-txt{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pessoa-txt b{font-size:13px;color:var(--dark);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pessoa-txt small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
        font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--dark);background:var(--surface3);
        transition:background .2s,color .2s}
.avatar.apagado{opacity:.45}
.pauta-n{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;color:var(--red);padding:12px 10px!important}
.ct td input:not([type]),.ct td input[type=email],.ct td input[type=url]{width:100%;border:1px solid transparent;border-radius:var(--r-sm);
  padding:7px 8px;font-family:inherit;font-size:14px;color:var(--text);background:transparent}

/* Lista de participantes (lateral) e presença (redação). */
.lista-pessoas{display:flex;flex-direction:column;gap:2px}
.lp-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--hair)}
.lp-item:first-child{border-top:0}
.lp-txt{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.lp-txt b{font-size:13px;color:var(--dark);font-weight:650}
.lp-txt small{font-size:11.5px;color:var(--muted)}
.lp-pres{font-size:11.5px;font-weight:700}
.lp-pres.p-presente{color:var(--st-vigente)} .lp-pres.p-ausente{color:var(--muted)} .lp-pres.p-justificado{color:var(--st-atencao)}
.presencas{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:4px 24px}
.pres-linha{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair)}
@media(max-width:720px){ .presencas{grid-template-columns:1fr} .pres-linha{flex-wrap:wrap} }
.pauta-lista{margin:0 0 0 22px;display:flex;flex-direction:column;gap:10px}
.pauta-lista li::marker{color:var(--red);font-weight:700}
.pauta-lista b{font-size:14.5px;color:var(--dark);font-weight:650}
.pauta-lista small{display:block;font-size:12px;color:var(--muted)}

/* Ata como formulário: convidado externo editado na própria linha; sugestões de pessoas. */
.in-linha{border:1px solid transparent;border-radius:var(--r-sm);padding:4px 6px;margin-left:-6px;font-family:inherit;
          font-size:13px;font-weight:650;color:var(--dark);background:transparent;width:100%}
.in-linha.pequeno{font-size:11.5px;font-weight:500;color:var(--muted)}
.in-linha:hover{border-color:var(--border)}
.in-linha:focus{outline:none;border-color:var(--red);background:var(--surface)}
.ac-item{display:flex;align-items:center;gap:10px}
.ac-item > .pessoa-txt{display:flex;flex-direction:column;margin-top:0;gap:0}

/* =====================================================================
   PLANOS DE AÇÃO, AUDITORIAS E PROCESSOS (Fases 4 e 5)
   Mesma gramática: acento horizontal, cor só do semáforo, nada de
   pastilha. Estrutura em traço fino, como desenho técnico.
   ===================================================================== */
.g-span4{grid-column:1/-1}
@media(max-width:720px){ .g-span4{grid-column:1} }
.field > .segmento{align-self:flex-start}
.rotulo-campo{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.trilha{margin:2px 0 0}
.trilha .etapa .quando{font-size:11px}
.card-futuro{border-style:dashed;background:transparent;box-shadow:none}
.card-futuro .card-head h2{color:var(--muted)}
.futuro{font-size:13px;color:var(--muted)}
.marcas{display:flex;flex-direction:column;gap:6px}
.marca{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text2);cursor:pointer;line-height:1.4}
.marca input{margin-top:3px;accent-color:var(--red)}
/* Caixas de marcar dentro de um .field (gestão de mudança): o input não estica, e a lista corre na horizontal. */
.field .marca input{width:auto;flex:none;padding:0;height:auto}
.field .marca{font-weight:500}
.marcas.em-linha{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
/* Histórico recolhido (06/10/2026): fechado por padrão, abre no clique (components/etapas.js › cartaoHistorico/blocoHistorico). */
details.card-hist .rec-acao::after{content:"mostrar"}
details.card-hist[open] .rec-acao::after{content:"ocultar"}
details.card-hist .rec-acao, details.bloco-hist .rec-acao{font-size:0}
details.card-hist .rec-acao::after, details.bloco-hist .rec-acao::after{font-size:12px}
details.card-hist:not([open]) > summary{border-bottom-color:transparent}
details.bloco-hist{margin-top:10px}
details.bloco-hist > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:6px 0;user-select:none;
  font-size:12px;font-weight:650;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
details.bloco-hist > summary::-webkit-details-marker{display:none}
details.bloco-hist > summary:hover .bh-titulo{color:var(--red)}
details.bloco-hist .bh-n{color:var(--muted);font-variant-numeric:tabular-nums}
details.bloco-hist .rec-acao{margin-left:auto;color:var(--muted);text-transform:none;letter-spacing:0}
details.bloco-hist .rec-acao::after{content:"mostrar"}
details.bloco-hist[open] .rec-acao::after{content:"ocultar"}
details.bloco-hist > summary svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
details.bloco-hist[open] > summary svg{transform:rotate(180deg);stroke:var(--red)}
.bloco-hist-corpo{padding-top:6px}

/* Etapa na lista: quatro traços, cheios até a etapa atual. */
.mini-trilha{display:inline-flex;gap:5px;align-items:center}
.mini-trilha i{width:18px;height:3px;border-radius:2px;background:var(--border)}
.mini-trilha i.feita{background:var(--st-vigente)}
.mini-trilha i.atual{background:var(--red)}

/* Correção imediata: fio fino em cima separa do registro. */
.contencao{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}

/* 5 porquês: cada resposta pendura na anterior, em escada. */
.porques{list-style:none;counter-reset:pq;display:flex;flex-direction:column;margin-top:4px}
.porques li{counter-increment:pq;display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:10px;position:relative;padding:5px 0;
            margin-left:calc(var(--n, 0) * 18px)}
.porques li + li::before{content:"";position:absolute;left:14px;top:-7px;height:14px;width:1.5px;background:var(--border2)}
.porques .pq{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red);white-space:nowrap}
.porques .pq::before{content:counter(pq) "  ";color:var(--muted)}
.porques input{width:100%;border:1px solid var(--border2);border-radius:var(--r-sm);padding:8px 10px;font-family:inherit;font-size:14px;
               color:var(--text);background:var(--surface)}
.porques input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.porques .mini[hidden]{display:inline-flex;visibility:hidden}
.pq-txt{font-size:14px;color:var(--text)}
.rot-aux{font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:6px;font-size:11.5px}
@media(max-width:720px){ .porques li{grid-template-columns:1fr auto;margin-left:0} .porques .pq{grid-column:1/-1} }

/* Ishikawa: categorias divididas entre cima e baixo da espinha, efeito à direita. */
.ishikawa{display:grid;grid-template-columns:repeat(var(--cols, 3),minmax(0,1fr)) 92px;grid-template-rows:auto 26px auto;gap:0 14px;margin-top:6px;position:relative}
.ish-osso{position:relative;padding:8px 0;min-width:0}
.ish-osso b{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dark);margin-bottom:5px}
.ish-osso p{font-size:13.5px;color:var(--text2)}
.ish-lista{margin:0 0 0 16px;font-size:13.5px;color:var(--text2);line-height:1.45}
.ish-lista li::marker{color:var(--red)}
.ish-cab{display:flex;align-items:center;gap:4px;margin-bottom:5px}
.ishikawa .ish-rot{flex:1;min-width:0;height:auto;box-shadow:none;border:1px solid transparent;border-bottom-color:var(--border2);border-radius:0;padding:3px 2px;background:transparent;
         font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dark)}
.ishikawa .ish-rot:focus{outline:none;box-shadow:none;border-bottom-color:var(--red)}
.ish-causas{list-style:none;display:flex;flex-direction:column;gap:4px;margin:0}
.ish-causas li{display:flex;align-items:flex-start;gap:4px}
.ishikawa .ish-causas textarea{flex:1;min-width:0;resize:none;field-sizing:content;min-height:0;height:auto;line-height:1.35;border:1px solid var(--border2);border-radius:var(--r-sm);padding:6px 8px;font-family:inherit;font-size:13.5px;
                  color:var(--text);background:var(--surface)}
.ishikawa .ish-causas textarea:focus{outline:none;border-color:var(--red)}
.ish-causas .mini[hidden]{display:inline-flex;visibility:hidden}
.ish-mais{border:0;background:none;padding:4px 0 0;font:inherit;font-size:12px;font-weight:650;color:var(--muted);cursor:pointer}
.ish-mais:hover{color:var(--red)}
.ish-cima{grid-row:1} .ish-baixo{grid-row:3}
.ish-cima::after,.ish-baixo::before{content:"";position:absolute;right:18%;width:1.5px;height:20px;background:var(--border2);transform:skewX(-28deg)}
.ish-cima::after{bottom:-20px} .ish-baixo::before{top:-18px}
.ish-espinha{grid-row:2;grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;position:relative}
.ish-espinha::before{content:"";position:absolute;left:0;right:88px;top:50%;height:2px;background:var(--dark)}
.ish-espinha span{position:relative;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);
                  padding:4px 12px;border-radius:2px}
@media(max-width:900px){ .ishikawa{grid-template-columns:1fr;grid-template-rows:none} .ish-cima,.ish-baixo,.ish-espinha{grid-row:auto;grid-column:1!important}
  .ish-cima::after,.ish-baixo::before,.ish-espinha::before{display:none} .ish-espinha{justify-content:flex-start} }

/* Evidências: miniatura + legenda; a área de anexar é tracejada, como o .file. */
.evids{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.evids .rotulo-campo{margin:4px 0 0}
.evids.vazio{font-size:12.5px;color:var(--muted)}
/* Cartão largo o bastante para a legenda ser lida: o texto quebra linha e o campo cresce com ele. */
.evid-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px}
.evid{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:start;margin:0;padding:6px 8px 6px 6px;
      border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.evids.editavel .evid{padding-right:34px}
.evid-ver{width:64px;height:52px;border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--surface2);padding:0;cursor:zoom-in;overflow:hidden;
          display:flex;align-items:center;justify-content:center}
.evid-ver img{width:100%;height:100%;object-fit:cover;display:block}
.evid:not(.img) .evid-ver{cursor:pointer}
.evid-ext{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--red)}
.evid figcaption{display:flex;flex-direction:column;gap:2px;min-width:0}
.evid-leg{width:100%;border:1px solid transparent;border-bottom-color:var(--border2);border-radius:0;padding:3px 2px;background:transparent;
          font-family:inherit;font-size:13px;color:var(--text)}
/* textarea da legenda: vence o .field textarea (88 px de altura, fonte grande) dos formulários onde o bloco aparece. */
.evids textarea.evid-leg,.field .evids textarea.evid-leg{min-height:0;height:auto;resize:none;overflow:hidden;line-height:1.4;
          padding:3px 2px;font-size:13px;border:1px solid transparent;border-bottom-color:var(--border2);border-radius:0;
          background:transparent;box-shadow:none;field-sizing:content}
.evids textarea.evid-leg:focus,.field .evids textarea.evid-leg:focus{border-bottom-color:var(--red);box-shadow:none;background:transparent}
.evids textarea.evid-leg:placeholder-shown{border-bottom-color:var(--st-atencao)}
.evid-leg:focus{outline:none;border-bottom-color:var(--red)}
.ct td .evid-leg,.ct td .evid-leg:hover,.ct td .evid-leg:focus{padding:3px 2px;border-color:transparent;border-bottom-color:var(--border2);border-radius:0;box-shadow:none;background:transparent}
.ct td .evid-leg:placeholder-shown{border-bottom-color:var(--st-atencao)}
.ct td .evid-leg:focus{border-bottom-color:var(--red)}
.ct td .evid-grade{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.evid-leg:placeholder-shown{border-bottom-color:var(--st-atencao)}
.evid-leg-txt{font-size:13px;color:var(--text);line-height:1.35}
.evid small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evid-del{position:absolute;top:6px;right:4px}
.evid-add{position:relative;display:flex;align-items:center;border:1px dashed var(--border2);border-radius:var(--r);background:var(--surface2);
          padding:9px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.evid-add:hover,.evid-add.sobre{border-color:var(--red);background:var(--accent-lt)}
.evid-add input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.evid-add span{display:flex;align-items:center;gap:8px;flex-wrap:wrap;pointer-events:none;font-size:12.5px;color:var(--muted)}
.evid-add svg{width:15px;height:15px;stroke:var(--red);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.evid-add b{font-weight:650;color:var(--text2)}
.evid-add small{font-size:11.5px}
.tarefa-ev .evids{margin-top:6px}
.tarefa-ev .evid-grade{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.warn-box .evids{margin:6px 0}

textarea.causa-raiz{border-top:2px solid var(--red)}
.causa-raiz-leitura{border-top:1.5px solid var(--red);background:var(--accent-lt);padding:10px 14px 12px;border-radius:1px 1px var(--r) var(--r)}
.causa-raiz-leitura p{font-size:14.5px;color:var(--dark);font-weight:600;line-height:1.5}
.causa-raiz-leitura .rotulo-campo{margin-top:0;color:var(--red)}

/* Plano: tarefas em linhas finas, situação à direita. */
.progresso{height:3px;background:var(--surface3);border-radius:2px;overflow:hidden;margin-bottom:12px}
.progresso i{display:block;height:100%;background:var(--st-vigente);transition:width .6s var(--mola)}
.tarefas{display:flex;flex-direction:column}
.tarefa{display:grid;grid-template-columns:28px minmax(0,1fr) 170px 230px;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--hair)}
.tarefa:first-child{border-top:0}
.tarefa-n{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;color:var(--red);padding-top:1px}
.tarefa-txt b{display:block;font-size:14px;color:var(--dark);font-weight:650;line-height:1.4}
.tarefa-txt small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.tarefa-ev{margin-top:8px;font-size:12.5px;color:var(--text2);padding:7px 10px;background:var(--surface2);border-top:1.5px solid var(--st-vigente);
           border-radius:1px 1px var(--r-sm) var(--r-sm)}
.tarefa.cancelada .tarefa-ev{border-top-color:var(--st-obsoleto)}
.tarefa-ev span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--st-vigente);margin-bottom:2px}
.tarefa.cancelada .tarefa-ev span{color:var(--st-obsoleto)}
.tarefa-ev em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}
.tarefa-quem{font-size:13px;color:var(--text2)} .tarefa-quem small{display:block;font-size:12px;color:var(--muted)}
.tarefa-sit{text-align:right}
.tarefa.cancelada .tarefa-txt b{text-decoration:line-through;color:var(--muted)}
@media(max-width:900px){ .tarefa{grid-template-columns:28px 1fr} .tarefa-quem,.tarefa-sit{grid-column:2;text-align:left} }
.ct tr.congelada td{color:var(--muted);font-size:13.5px;padding:10px}
.verificacao{display:flex;flex-direction:column;gap:14px;padding-top:14px;border-top:1px solid var(--hair)}
.ciclo{padding:8px 0;border-top:1px solid var(--hair);font-size:13px;color:var(--text2)}
.ciclo:first-child{border-top:0} .ciclo p{margin-top:3px}

/* Placar de auditoria: número grande, rótulo pequeno, fio da cor por baixo. */
.placar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:4px 0 6px}
.placar-item{padding:8px 2px 9px;border-bottom:2.5px solid currentColor}
.placar-item b{display:block;font-size:24px;font-weight:750;letter-spacing:-.02em;line-height:1.1;color:var(--dark)}
.placar-item span{font-size:11px;font-weight:700;letter-spacing:.04em;color:currentColor}
.placar-item.s-vigente{color:var(--st-vigente)} .placar-item.s-vencido{color:var(--st-vencido)} .placar-item.s-atencao{color:var(--st-atencao)}
.placar-item.s-aprovacao{color:var(--st-aprovacao)} .placar-item.s-externo{color:var(--st-externo)}
.placar-item.zero{color:var(--border2)} .placar-item.zero b{color:var(--border2)}
@media(max-width:720px){ .placar{grid-template-columns:repeat(3,1fr)} }

/* Lista de verificação: o resultado pinta só o texto da escolha. */
.checklist table{min-width:860px}
.checklist select.res{font-weight:650}
.checklist select.res-conforme{color:var(--st-vigente)} .checklist select.res-nc_maior{color:var(--st-vencido)}
.checklist select.res-nc_menor{color:var(--st-atencao)} .checklist select.res-observacao{color:var(--st-aprovacao)}
.checklist select.res-oportunidade{color:var(--st-externo)} .checklist select.res-na{color:var(--st-obsoleto)}
.checklist tr.chk-linha:has(+ tr.constat-linha:not([hidden])) td{border-bottom-color:transparent}
.checklist tr.constat-linha td{padding-top:0}
.checklist tr.constat-linha textarea{border-top:1.5px solid var(--st-atencao);border-radius:1px 1px var(--r-sm) var(--r-sm);background:var(--surface2)}
.pessoa.conflito small{color:var(--st-atencao);font-weight:650}
.checklist tr.chk-linha:has(+ tr.constat-linha[hidden] + tr.anexo-linha:not([hidden])) td{border-bottom-color:transparent}
.checklist tr.constat-linha:not([hidden]):has(+ tr.anexo-linha:not([hidden])) td{border-bottom-color:transparent}
.checklist tr.anexo-linha td{padding-top:0}
.checklist tr.anexo-linha .evids{margin-top:0}
.checklist.roteiro table{min-width:620px}
.q-orient{margin-top:4px;width:100%;border:1px solid transparent;border-bottom-color:var(--hair);border-radius:0;padding:3px 2px;background:transparent;
          font-family:inherit;font-size:12.5px;font-style:italic;color:var(--text2)}
.q-orient:focus{outline:none;border-bottom-color:var(--red)}
.q-orient-txt{font-size:12px;font-style:italic;color:var(--muted);margin-top:3px;line-height:1.35}
.q-banco{display:block;margin-top:3px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mini.clipe{position:relative}
.mini.clipe b{position:absolute;top:-3px;right:-4px;font-size:10px;font-weight:800;color:var(--red);line-height:1}
.mini.clipe.com svg{stroke:var(--red)}

/* Escolher do banco de perguntas: um grupo por banco, pergunta por linha. */
.bancos-escolha{display:flex;flex-direction:column;gap:8px;max-height:min(60vh,560px);overflow-y:auto;padding-right:4px}
.banco-grupo{border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.banco-grupo[open]{border-color:var(--border2)}
.banco-grupo summary{display:flex;align-items:baseline;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.banco-grupo summary::-webkit-details-marker{display:none}
.banco-grupo summary b{font-size:13.5px;color:var(--dark)}
.banco-grupo summary small{font-size:11.5px;color:var(--muted)}
.banco-grupo summary em{font-style:normal;color:var(--red);font-weight:700}
.banco-grupo[open] summary{border-bottom:1px solid var(--hair)}
.banco-perguntas{display:flex;flex-direction:column;padding:6px 12px 10px;gap:2px}
.banco-q{padding:5px 0;border-top:1px solid var(--hair)}
.banco-q:first-child,.banco-todas + .banco-q{border-top:0}
.banco-q small{display:block;font-size:11.5px;color:var(--muted);font-style:italic;margin-top:1px}
.banco-q.ja{color:var(--muted)}
.banco-todas{font-weight:650;color:var(--dark);padding:4px 0 6px;border-bottom:1px solid var(--hair);margin-bottom:2px}

/* Figura e tabela no corpo do documento: leitura e célula da IT. O editor (blocos editáveis no
   próprio texto) mora em "Editor de documento", no fim deste arquivo. */
.doc-tab-legenda{font-size:12px;font-weight:700;color:var(--text2);margin:10px 0 4px}
.leitura figure.doc-figura{margin:12px auto;text-align:center;max-width:560px}
.leitura figure.doc-figura img{max-width:100%;max-height:340px;border:1px solid var(--hair);border-radius:var(--r-sm)}
.leitura figure.doc-figura figcaption{font-size:12.5px;color:var(--text2);margin-top:5px}
.leitura figure.doc-figura.celula{margin:0}
.leitura figure.doc-figura.celula img{max-height:110px}
.leitura figure.doc-figura.celula figcaption{font-size:11.5px;font-style:italic}
.cel-img{display:flex;flex-direction:column;gap:4px;align-items:stretch;position:relative}
.cel-img img{width:100%;max-height:90px;object-fit:contain;border:1px solid var(--hair);border-radius:var(--r-sm);background:var(--surface2)}
.ct td .cel-img .cel-leg{font-size:12px;padding:4px 5px;border:1px solid transparent;border-bottom-color:var(--border2);border-radius:0}
.ct td .cel-img .cel-leg.vazia{border-bottom-color:var(--st-atencao)}
.cel-img [data-img-del]{position:absolute;top:2px;right:2px;background:var(--surface)}
.cel-add{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;border:1px dashed var(--border2);
         border-radius:var(--r-sm);font-size:12px;color:var(--muted);cursor:pointer;background:var(--surface2)}
.cel-add:hover{border-color:var(--red);color:var(--red)}
.cel-add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cel-add svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.fig-modal{display:flex;flex-direction:column;gap:12px}
.fig-previa{min-height:160px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);padding:8px}
.fig-previa img{max-width:100%;max-height:300px}
.fig-previa span{font-size:13px;color:var(--muted)}
.tab-editor table{min-width:0}
.tab-grade th input{font-weight:700}

/* Alterna entre Documentos internos (lista mestra) e externos (normas, legislação, cliente). */
.seg-origem{margin-bottom:14px}
.seg-origem a{border:0;background:none;font-family:inherit;font-size:13px;font-weight:650;color:var(--muted);
              padding:7px 14px;border-radius:calc(var(--r) - 3px);cursor:pointer;transition:color .15s,background .15s;text-decoration:none;display:inline-block}
.seg-origem a:hover{color:var(--text);text-decoration:none}

/* Documento novo do processo: ainda em elaboração. */
.docs-busca{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.doc-elab{font-weight:700;color:var(--st-elaboracao)}

/* Programa anual: grade de meses, mês atual com fio vermelho em cima. */
.ano-sel{display:inline-flex;align-items:center;gap:2px;margin-right:6px;font-variant-numeric:tabular-nums}
.ano-sel[hidden]{display:none}
.ano-sel b{font-size:15px;color:var(--dark);min-width:42px;text-align:center}
.programa{overflow:hidden}
.prog{width:100%;border-collapse:collapse;table-layout:fixed;min-width:1080px}
.prog th,.prog td{border-bottom:1px solid var(--hair);padding:0;font-size:12px;text-align:center;vertical-align:middle}
.prog thead th{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 0;
               border-bottom:1.5px solid var(--dark);background:var(--surface)}
.prog th.prog-proc{width:250px;text-align:left;padding:9px 12px;font-weight:600}
.prog th.prog-proc a{color:var(--dark);font-size:13px;text-decoration:none;display:block;line-height:1.35}
.prog th.prog-proc a:hover{color:var(--red)}
.prog th.prog-proc small{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:1px}
.prog .prog-ult{width:92px;font-size:12px;color:var(--text2)} .prog .prog-ult small{display:block;color:var(--muted);font-size:11px}
.prog thead th.prog-ult{font-size:10.5px;color:var(--muted)}
.prog tr.prog-grupo th{text-align:left;padding:14px 12px 6px;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
                       color:var(--red);background:transparent;border-bottom:1px solid var(--border)}
.prog td{height:52px;position:relative}
.prog td.passado{background:var(--surface2)}
.prog th.mes-atual{color:var(--red)}
.prog td.mes-atual{background:var(--accent-lt)}
.prog td.mes-atual::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--red);opacity:.5}
.prog td[data-planejar]{cursor:pointer}
.prog-mais{font-size:16px;color:var(--border2);opacity:0;transition:opacity .15s}
.prog td[data-planejar]:hover .prog-mais{opacity:1;color:var(--red)}
.prog-aud{display:flex;flex-direction:column;align-items:center;gap:1px;margin:4px 5px;padding:3px 2px 4px;text-decoration:none;
          border-bottom:2.5px solid currentColor;transition:transform .2s var(--mola)}
.prog-aud:hover{transform:translateY(-2px);text-decoration:none}
.prog-aud b{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12.5px;color:var(--dark)}
.prog-aud span{font-size:9.5px;font-weight:700;line-height:1.15;color:currentColor;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.prog-aud.s-vigente{color:var(--st-vigente)} .prog-aud.s-vencido{color:var(--st-vencido)} .prog-aud.s-atencao{color:var(--st-atencao)}
.prog-aud.s-aprovacao{color:var(--st-aprovacao)} .prog-aud.s-elaboracao{color:var(--st-elaboracao)} .prog-aud.s-obsoleto{color:var(--st-obsoleto)}

/* Mapa de processos: três faixas; a de realização é uma cadeia com setas. */
.mapa{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:14px;align-items:stretch;margin-bottom:10px}
.mapa-borda{display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--r);background:var(--surface2)}
.mapa-borda span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mapa-borda.dir span{transform:none}
.mapa-faixas{display:flex;flex-direction:column;gap:14px;min-width:0}
.faixa{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px 16px;box-shadow:var(--sh-1)}
.faixa h3{display:flex;align-items:baseline;gap:10px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dark);
          padding-bottom:6px;margin-bottom:12px;background:linear-gradient(var(--red),var(--red)) left bottom / 16px 2px no-repeat}
.faixa h3 small{font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.faixa-itens{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.faixa-itens.cadeia{display:flex;gap:26px;overflow-x:auto;padding-bottom:4px}
.faixa-itens.cadeia .proc{flex:1 0 190px;position:relative}
.faixa-itens.cadeia .proc + .proc::before{content:"";position:absolute;left:-22px;top:50%;width:16px;height:1.5px;background:var(--red)}
.faixa-itens.cadeia .proc + .proc::after{content:"";position:absolute;left:-10px;top:calc(50% - 4.5px);border:4.5px solid transparent;border-left:6px solid var(--red)}
.faixa-realizacao{border-top:2px solid var(--red)}
.proc{display:flex;flex-direction:column;gap:3px;padding:11px 13px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
      color:var(--text);text-decoration:none;transition:border-color .16s,box-shadow .25s var(--mola),transform .25s var(--mola)}
.proc:hover{border-color:var(--border2);box-shadow:var(--sh-2);transform:translateY(-2px);text-decoration:none}
.proc-cod{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--red)}
.proc b{font-size:14px;color:var(--dark);font-weight:680;line-height:1.3}
.proc small{font-size:11.5px;color:var(--muted)}
.proc-rodape{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;margin-top:6px}
.proc-v{white-space:nowrap}
.proc-rodape .bdg{font-size:11.5px}
.proc-v{font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@media (prefers-reduced-motion: no-preference){
  .faixa{animation:entra .45s var(--mola) backwards}
  .faixa-realizacao{animation-delay:.08s} .faixa-apoio{animation-delay:.16s}
  .proc{animation:entra .45s var(--mola) backwards;animation-delay:calc(var(--i, 0) * 45ms + 120ms)}
}
@media(max-width:720px){ .mapa{grid-template-columns:1fr} .mapa-borda{display:none} }

/* Tartaruga: o processo no centro, o que entra à esquerda, o que sai à direita. */
.tartaruga{display:grid;grid-template-columns:1fr 1.15fr 1fr;grid-template-areas:"rec cen pes" "ent cen sai" "como cen quanto";gap:12px;align-items:stretch}
.tt-caixa{border:1px solid var(--border);border-radius:var(--r);padding:10px 13px 11px;background:var(--surface);min-width:0}
.tt-rot{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);margin-bottom:6px;padding-bottom:5px;
        border-bottom:1px solid var(--hair)}
.tt-rot small{display:block;font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:1px}
.tt-caixa ul{margin:0 0 0 16px;font-size:13px;color:var(--text2);line-height:1.5}
.tt-caixa li::marker{color:var(--red)}
.tt-caixa .vazio{font-size:12.5px;color:var(--muted);font-style:italic}
.tt-formula{display:block;font-size:11px;color:var(--muted);font-style:italic;line-height:1.3;margin-top:1px}
.tt-recursos{grid-area:rec} .tt-pessoas{grid-area:pes} .tt-como{grid-area:como} .tt-quanto{grid-area:quanto}
.tt-entradas{grid-area:ent;border-top:2px solid var(--st-aprovacao)} .tt-saidas{grid-area:sai;border-top:2px solid var(--st-vigente)}
.tt-centro{grid-area:cen;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;padding:20px 18px;
           border:1.5px solid var(--dark);border-radius:var(--r-lg);background:var(--surface2);position:relative}
.tt-centro::before,.tt-centro::after{content:"";position:absolute;top:50%;width:12px;height:1.5px;background:var(--dark)}
.tt-centro::before{left:-13px} .tt-centro::after{right:-13px}
.tt-codigo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--red)}
.tt-centro b{font-size:17px;color:var(--dark);font-weight:720;letter-spacing:-.015em;line-height:1.25}
.tt-centro p{font-size:13px;color:var(--text2);line-height:1.5;max-width:320px}
.tt-riscos{margin-top:12px;padding-top:4px;border-top:1px solid var(--hair)}
.tt-riscos ul{margin:0 0 0 18px;font-size:13px;color:var(--text2)}
@media(max-width:900px){ .tartaruga{grid-template-columns:1fr;grid-template-areas:"cen" "ent" "sai" "rec" "pes" "como" "quanto"}
  .tt-centro::before,.tt-centro::after{display:none} }
.tt-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.tt-campo label small{display:block;font-weight:500;font-size:11.5px;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:1px}
@media(max-width:720px){ .tt-form{grid-template-columns:1fr} }

/* Documentos vinculados: linhas marcáveis, marcados primeiro. */
.doc-escolha{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:6px}
.doc-op{display:grid;grid-template-columns:18px 110px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:baseline;padding:8px 11px;
        border:1px solid var(--border);border-radius:var(--r);cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s}
.doc-op:hover{border-color:var(--border2)}
.doc-op input{accent-color:var(--red);grid-row:span 2}
.doc-op span:not(.mono-sm){font-size:13px;color:var(--text);font-weight:550}
.doc-op small{grid-column:3;font-size:11.5px;color:var(--muted)}
.doc-op.sel{border-color:var(--dark);background:var(--surface2)}

/* BPMN: moldura igual ao .field; barra de zoom flutuando no canto. */
.bpmn-caixa{position:relative;border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.bpmn-tela{height:440px;width:100%;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:18px 18px}
.bpmn-tela.alta{height:600px}
.bpmn-barra{position:absolute;top:10px;right:10px;z-index:20;display:flex;align-items:center;gap:2px;padding:3px;background:var(--surface);
            border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1)}
.bpmn-barra .sep{width:1px;height:18px;background:var(--border);margin:0 3px}
.bpmn-tela .bjs-powered-by{opacity:.55}
.bpmn-tela .djs-palette{border-radius:var(--r);border-color:var(--border);box-shadow:var(--sh-1);top:10px;left:10px}

/* Versões do processo. */
.versoes{display:flex;flex-direction:column}
.versao-linha{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;padding:9px 0;border-top:1px solid var(--hair);
              text-decoration:none;color:var(--text)}
.versao-linha:first-child{border-top:0}
.versao-linha:hover{text-decoration:none} .versao-linha:hover b{color:var(--red)}
.versao-linha b{font-size:13px;color:var(--dark)} .versao-linha .bdg{justify-self:end;font-size:11.5px}
.versao-linha small{grid-column:1/-1;font-size:11.5px;color:var(--muted);margin-top:1px}
.versao-linha.atual b{color:var(--red)}

/* =====================================================================
   GESTÃO ESTRATÉGICA (Fase 8) — SWOT, poder × interesse, matriz de risco
   e escalas de 1 a 5. Nenhuma cor nova: as faixas usam os tons do
   semáforo (design-system §8), e o acento continua horizontal.
   ===================================================================== */

/* SWOT: quatro quadrantes, cada um com um traço no topo na cor do tom. */
.swot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.swot-q{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:12px 14px 13px;min-width:0;
        border-top:2.5px solid currentColor}
.swot-q.s-vigente{color:var(--st-vigente)} .swot-q.s-atencao{color:var(--st-atencao)}
.swot-q.s-externo{color:var(--st-externo)} .swot-q.s-vencido{color:var(--st-vencido)}
.swot-rot{display:flex;align-items:baseline;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
          color:currentColor;padding-bottom:6px;margin-bottom:8px;border-bottom:1px solid var(--hair)}
.swot-rot span{margin-left:auto;font-size:15px;font-weight:750;letter-spacing:-.02em;color:var(--dark)}
.swot-q ul{margin:0 0 0 16px;padding:0;font-size:13px;line-height:1.45;color:var(--text2)}
.swot-q li{margin-bottom:7px}
.swot-q li::marker{color:currentColor}
.swot-q li small{display:block;font-size:11px;color:var(--muted)}
.swot-q .vazio{font-size:12.5px;color:var(--muted);font-style:italic;margin:0}
.swot-q .q-risco{display:inline-block;margin-top:2px;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
                 font-size:11px;font-weight:700;color:var(--red)}
@media(max-width:820px){ .swot{grid-template-columns:1fr} }

/* Poder × interesse: quatro grupos, do mais exigente ao menos. */
.pi-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pi-q{border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);padding:11px 13px 12px;min-width:0}
.pi-q:first-child{background:var(--accent-lt);border-color:var(--border2)}
.pi-rot{display:flex;align-items:baseline;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
        color:var(--dark);padding-bottom:6px;margin-bottom:8px;
        background:linear-gradient(var(--red),var(--red)) left bottom / 16px 2px no-repeat}
.pi-rot span{margin-left:auto;font-size:15px;font-weight:750;letter-spacing:-.02em;color:var(--dark)}
.pi-q ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.4}
.pi-q li{padding:4px 0;border-top:1px solid var(--hair)}
.pi-q li:first-child{border-top:0}
.pi-q li small{display:block;font-size:11px;color:var(--muted)}
.pi-q .vazio{font-size:12.5px;color:var(--muted);font-style:italic;margin:0}
@media(max-width:820px){ .pi-grade{grid-template-columns:1fr} }

/* Matriz 5 × 5: probabilidade nas linhas (5 em cima), impacto nas colunas. */
.matriz-wrap{overflow-x:auto;padding-bottom:2px}
.matriz{border-collapse:separate;border-spacing:3px;table-layout:fixed;min-width:540px;width:100%}
.mx-c-rot{width:20px} .mx-c-y{width:78px}
.mx-eixo-y,.mx-eixo-x{font-size:11px;font-weight:750;color:var(--dark);background:var(--surface2);border-radius:var(--r-sm);padding:4px 4px;
                      text-align:center;vertical-align:middle}
/* Nome do degrau em caixa normal e com hifenização: "Insignificante" e "Quase certo" cabem na coluna sem cortar. */
.mx-eixo-y small,.mx-eixo-x small{display:block;font-size:10px;font-weight:600;color:var(--muted);line-height:1.2;
                                  overflow-wrap:break-word;hyphens:auto}
.mx-rot-y{padding:0;vertical-align:middle}
.mx-rot-y span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);margin:0 auto;white-space:nowrap;
               font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mx-eixo-rot{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding-top:2px}
.mx-cel{position:relative;height:62px;border-radius:var(--r-sm);text-align:center;vertical-align:middle;
        border:1.5px solid currentColor;background:var(--surface)}
.mx-cel.s-vigente{color:var(--st-vigente)} .mx-cel.s-atencao{color:var(--st-atencao)} .mx-cel.s-vencido{color:var(--st-vencido)}
.mx-cel.vazia{opacity:.5}
.mx-cel.forte{border-width:2.5px}
.mx-cel[data-cel]{cursor:pointer;transition:transform .2s var(--mola),box-shadow .2s}
.mx-cel[data-cel]:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.mx-cel[data-cel].sel{background:var(--accent-lt);box-shadow:var(--sh-2)}
.mx-n{position:absolute;top:3px;right:5px;font-size:9.5px;font-weight:700;color:var(--muted)}
.mx-q{display:block;font-size:19px;font-weight:750;letter-spacing:-.02em;color:currentColor;line-height:1.1;margin-top:8px}
.mx-cods{display:block;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:9.5px;color:var(--muted);
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.legenda.faixas-risco small{color:var(--muted)}

/* Escala de 1 a 5 com a descrição de cada degrau à vista. */
.escala{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.escala button{display:flex;flex-direction:column;gap:2px;text-align:left;padding:8px 9px 9px;background:var(--surface);
               border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;transition:border-color .14s,box-shadow .2s,transform .2s var(--mola)}
.escala button:hover{border-color:var(--border2);transform:translateY(-1px)}
.escala button b{font-size:17px;font-weight:750;color:var(--dark);line-height:1}
.escala button span{font-size:11.5px;font-weight:700;color:var(--text2)}
.escala button small{font-size:10.5px;color:var(--muted);line-height:1.25}
.escala button.sel{border-color:var(--red);box-shadow:inset 0 -2.5px 0 var(--red)}
.escala button.sel b,.escala button.sel span{color:var(--red)}
@media(max-width:720px){ .escala{grid-template-columns:repeat(2,1fr)} }

/* Lista de opções com explicação (decisão de tratamento). */
.opcoes-lista{display:grid;gap:6px}
.opcoes-lista button{text-align:left;padding:9px 11px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
                     cursor:pointer;transition:border-color .14s,box-shadow .2s}
.opcoes-lista button b{display:block;font-size:13.5px;color:var(--dark)}
.opcoes-lista button small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.opcoes-lista button:hover{border-color:var(--border2)}
.opcoes-lista button.sel{border-color:var(--red);box-shadow:inset 0 -2.5px 0 var(--red)}
.opcoes-lista button.sel b{color:var(--red)}

/* Tabela de questões do contexto, em edição. */
.questoes{min-width:680px}
.questoes select,.questoes textarea{width:100%;font-size:12.5px}
.questoes textarea{min-height:44px;resize:vertical}
.questoes select[multiple]{height:auto;min-height:38px}
.questoes td{vertical-align:top}

/* Documentos ligados ao contexto: mesmos cartões do mapa de processos. */
.linha-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
/* Partes interessadas de uma questão: fechadas por padrão, com a contagem à vista. */
.q-partes{margin-top:5px;font-size:12px}
.q-partes > summary{cursor:pointer;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
                    list-style:none;padding:2px 0}
.q-partes > summary::-webkit-details-marker{display:none}
.q-partes > summary::before{content:"+";display:inline-block;width:11px;color:var(--red);font-weight:800}
.q-partes[open] > summary::before{content:"–"}
.q-partes > summary b{color:var(--dark)}
.q-partes.aberta{font-size:12.5px}
.q-partes label{display:flex;align-items:flex-start;gap:6px;padding:2px 0 2px 11px;color:var(--text2);line-height:1.3;cursor:pointer}
.q-partes input[type=checkbox]{width:16px;height:16px;margin-top:1px;padding:0;accent-color:var(--red);
                                flex:0 0 16px;cursor:pointer}   /* .field input tem width:100% — aqui não */

/* =====================================================================
   FASE 6 — FORNECEDORES
   Portal do Fornecedor (body.pf) e telas do SGQ. Mesmos tokens; escolha
   marcada por borda + traço embaixo (acento horizontal), nunca pastilha.
   ===================================================================== */
/* ---- Portal do Fornecedor: casca sem barra lateral ---- */
body.pf .pf-wrap{max-width:1180px}
.pf-idioma{margin-right:4px}
.pf-idioma button{min-width:40px;padding:5px 9px;letter-spacing:.06em}
@media(max-width:720px){ body.pf .header-titulo{display:none} body.pf .header-usuario .quem{display:none} }

.pf-entrada{max-width:440px;margin:1.5rem auto 0;display:flex;flex-direction:column;gap:14px}
.pf-entrada.larga{max-width:760px}
.pf-cartao h1{font-size:21px;font-weight:700;color:var(--dark);letter-spacing:-.02em}
.pf-cartao .card-body{display:flex;flex-direction:column;gap:14px}
.pf-cartao form{display:flex;flex-direction:column;gap:14px}
.pf-lead{font-size:13px;color:var(--muted);margin-top:-8px;line-height:1.5}
.pf-largo{width:100%;justify-content:center}
.pf-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted)}
.pf-link{background:none;border:0;padding:0;font:inherit;color:var(--red);cursor:pointer;font-weight:600}
.pf-link:hover{text-decoration:underline}
.pf-demo-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;background:none;border:0;
              border-top:1px solid var(--hair);padding:9px 2px;cursor:pointer;font-family:inherit}
.pf-demo-item:first-child{border-top:0}
.pf-demo-item b{font-size:13.5px;color:var(--dark)}
.pf-demo-item small{font-size:11.5px;color:var(--muted)}
.pf-demo-item:hover b{color:var(--red)}

.pf-escopos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:4px}
.pf-escopo{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-sm);
           background:var(--surface);cursor:pointer;transition:border-color .14s,box-shadow .2s}
.pf-escopo:hover{border-color:var(--border2)}
.pf-escopo:has(input:checked){border-color:var(--red);box-shadow:inset 0 -2.5px 0 var(--red)}
.pf-escopo input{width:16px;height:16px;flex:0 0 16px;margin-top:2px;accent-color:var(--red)}
.pf-escopo b{display:block;font-size:13px;color:var(--dark);line-height:1.3}
.pf-escopo small{display:block;font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:1px}
.field.err .pf-escopo{border-color:var(--red)}
.pf-decl{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--text2);line-height:1.45;cursor:pointer;font-weight:500}
.pf-decl input{width:16px;height:16px;flex:0 0 16px;margin-top:1px;accent-color:var(--red)}

/* ---- Painel do fornecedor (e visão de suprimentos) ---- */
.pf-kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px;margin-bottom:1.25rem}
@media(max-width:980px){ .pf-kpis{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .pf-kpis{grid-template-columns:1fr} }
.pf-sit .v{font-size:23px;line-height:1.2;letter-spacing:-.02em;margin:3px 0 2px}
.pf-sit.c-vigente .v{color:var(--st-vigente)} .pf-sit.c-atencao .v{color:var(--st-atencao)} .pf-sit.c-vencido .v{color:var(--st-vencido)}
.pf-sit.c-aprovacao .v{color:var(--st-aprovacao)} .pf-sit.c-elaboracao .v{color:var(--st-elaboracao)} .pf-sit.c-obsoleto .v{color:var(--st-obsoleto)}
.pf-motivo{font-size:12px;color:var(--text2);line-height:1.4;margin-top:4px;padding-top:6px;border-top:1px solid var(--hair)}
.kpi .v.pf-data{font-size:22px}
.pf-aviso{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.pf-quest .card-body{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.pf-quest-txt{flex:1 1 380px;min-width:0}
.pf-quest-txt h2{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:4px}
.pf-quest-txt p{font-size:13.5px;color:var(--text2);line-height:1.55}
.pf-quest-txt .warn-box{margin:6px 0 8px}
.pf-quest-acao{flex:0 0 auto}
.pf-progresso{margin:8px 0 6px}

.pf-notas{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;margin-bottom:8px}
@media(max-width:720px){ .pf-notas{grid-template-columns:1fr} }
.pf-final{display:flex;flex-direction:column;gap:1px;padding:10px 12px 11px;border:1px solid var(--border);border-radius:var(--r);
          box-shadow:inset 0 -3px 0 currentColor;background:var(--surface)}
.pf-final span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pf-final b{font-size:34px;font-weight:750;letter-spacing:-.03em;line-height:1.05;color:var(--dark)}
.pf-final em{font-style:normal;font-size:13px;font-weight:700}
.pf-final.s-vigente{color:var(--st-vigente)} .pf-final.s-atencao{color:var(--st-atencao)} .pf-final.s-vencido{color:var(--st-vencido)}
.pf-final.s-obsoleto{color:var(--st-obsoleto)} .pf-final.s-aprovacao{color:var(--st-aprovacao)}
.pf-parte{display:flex;flex-direction:column;gap:1px;padding:10px 2px;border-bottom:1px solid var(--hair)}
.pf-parte span{font-size:11.5px;font-weight:650;color:var(--muted)}
.pf-parte b{font-size:24px;font-weight:720;color:var(--dark);letter-spacing:-.02em}
.pf-parte small{font-size:11.5px;color:var(--muted)}
.pf-conclusao{font-size:14px;line-height:1.6;color:var(--text);white-space:pre-line}
.pf-arq{display:block;background:none;border:0;padding:1px 0;font:inherit;font-size:12.5px;color:var(--red);cursor:pointer;text-align:left;
        max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-arq:hover{text-decoration:underline}

/* ---- Questionário (fornecedor) ---- */
.pf-legenda{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:1100px){ .pf-legenda{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:720px){ .pf-legenda{grid-template-columns:1fr} }
.pf-legenda > div{display:flex;flex-direction:column;gap:2px;padding:6px 0 8px;border-bottom:2.5px solid currentColor}
.pf-legenda b{font-size:13px}
.pf-legenda span{font-size:12px;color:var(--text2);line-height:1.4}
.op-conforme{color:var(--st-vigente)} .op-parcial{color:var(--st-atencao)} .op-nao_conforme{color:var(--st-vencido)} .op-nao_aplicavel{color:var(--st-obsoleto)}
.pf-simnao{margin-top:2px}
.pf-simnao button{min-width:78px}
.pf-cert{margin-top:14px}
.pf-valor{font-size:14px;color:var(--dark);font-weight:600;padding:3px 0}
.pf-validadas > summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--st-vigente);padding:4px 0 8px}

.pq{padding:14px 0 16px;border-top:1px solid var(--hair)}
.pq:first-child{border-top:0;padding-top:2px}
.pq-cab{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.pq-n{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:800;color:var(--red);font-size:13px}
.pq-req{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.pq-texto{font-size:14.5px;font-weight:620;color:var(--dark);line-height:1.45}
.pq-orient{font-size:12.5px;color:var(--text2);margin-top:3px;line-height:1.45}
.pq-orient b{color:var(--muted);font-weight:700}
.pq-opcoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
@media(max-width:1100px){ .pq-opcoes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:720px){ .pq-opcoes{grid-template-columns:1fr} }
.pq-op{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 11px 10px;background:var(--surface);border:1px solid var(--border);
       border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:border-color .14s,box-shadow .2s,transform .2s var(--mola)}
.pq-op b{font-size:13.5px;color:var(--dark)}
.pq-op small{font-size:11.5px;color:var(--muted);line-height:1.35}
.pq-op:hover:not(:disabled){border-color:var(--border2);transform:translateY(-1px)}
.pq-op.sel{border-color:currentColor;box-shadow:inset 0 -2.5px 0 currentColor}
.pq-op.sel b{color:currentColor}
.pq-op:disabled{cursor:default}
.pq-op:disabled:not(.sel){opacity:.45}
.pq-msg{display:block;font-size:12px;font-weight:650;color:var(--red);min-height:0;margin-top:6px}
.pq-msg:empty{display:none}
.pq.err .pq-opcoes .pq-op:not(.sel){border-color:var(--red)}
.pq.err .pq-texto{color:var(--red)}
.pq-extra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;margin-top:10px;align-items:start}
@media(max-width:900px){ .pq-extra{grid-template-columns:1fr} }
.pq-extra .field textarea{min-height:64px}
.pq-coment{font-size:13px;color:var(--text2);line-height:1.5;margin:4px 0 0;white-space:pre-line;font-style:italic}
.pq.validada .pq-texto{color:var(--text2);font-weight:550}

/* ---- Análise do SGQ ---- */
.qa{padding:14px 0 16px;border-top:1px solid var(--hair)}
.qa:first-child{border-top:0;padding-top:2px}
.qa.validada{padding:9px 0}
.qa-cab{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.qa-grade{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;margin-top:10px;align-items:start}
@media(max-width:1250px){ .qa-grade{grid-template-columns:1fr} }
.qa-forn,.qa-sgq{display:flex;flex-direction:column;gap:6px;min-width:0}
.qa-sgq textarea{width:100%;min-height:62px;border:1px solid var(--border2);border-radius:var(--r-sm);padding:8px 10px;font-family:inherit;font-size:13px;resize:vertical}
.qa-sgq textarea:focus,.qa-ev-com input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.qa-evs{display:flex;flex-direction:column;gap:6px}
.qa-ev{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:6px 0;border-top:1px dashed var(--hair)}
.qa-ev:first-child{border-top:0}
.qa-ev-arq{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:inherit;min-width:0}
.qa-ev-arq img,.qa-ev-arq .evid-ext{width:44px;height:36px;flex:0 0 44px;object-fit:cover;border:1px solid var(--hair);border-radius:4px;background:var(--surface2);
                                    display:flex;align-items:center;justify-content:center}
.qa-ev-arq span{display:flex;flex-direction:column;min-width:0}
.qa-ev-arq b{font-size:12.5px;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-ev-arq small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qa-ev-arq:hover b{color:var(--red)}
.qa-ev-com{display:flex;gap:6px;align-items:center}
.qa-ev-com input{flex:1;min-width:0;border:1px solid var(--border2);border-radius:var(--r-sm);padding:6px 9px;font-family:inherit;font-size:12.5px}
.qa-ev-parecer{font-size:12.5px;color:var(--text2);font-style:italic}
.qa-res button.sel.op-conforme{color:var(--st-vigente);box-shadow:var(--sh-1),inset 0 -2px 0 var(--st-vigente)}
.qa-res button.sel.op-parcial{color:var(--st-atencao);box-shadow:var(--sh-1),inset 0 -2px 0 var(--st-atencao)}
.qa-res button.sel.op-nao_conforme{color:var(--st-vencido);box-shadow:var(--sh-1),inset 0 -2px 0 var(--st-vencido)}
.qa-res button.sel.op-nao_aplicavel{color:var(--st-obsoleto);box-shadow:var(--sh-1),inset 0 -2px 0 var(--st-obsoleto)}
.qa-res button:not(.sel){color:var(--muted)}
.qa-mudou{font-size:11.5px;font-weight:700;color:var(--st-aprovacao)}
.qa.err .pq-texto,#wa_certificado.err .card-head h2,#wa_conclusao.err .card-head h2{color:var(--red)}
.qa.err .qa-sgq textarea,.qa.err .qa-ev-com input{border-color:var(--red)}
.qa .msg,#wa_certificado .msg,#wa_conclusao .msg{display:block;font-size:12px;font-weight:650;color:var(--red)}
.qa .msg:empty,#wa_certificado .msg:empty,#wa_conclusao .msg:empty{display:none}
.qa-placar{position:sticky;top:calc(var(--topo) + 14px)}
.qa-partes{display:flex;flex-direction:column;margin:10px 0 4px}
.qa-partes > div{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;padding:7px 0;border-bottom:1px solid var(--hair)}
.qa-partes span{font-size:12.5px;font-weight:650;color:var(--text2)}
.qa-partes b{font-size:19px;font-weight:720;color:var(--dark)}
.qa-partes small{grid-column:1 / -1;font-size:11px;color:var(--muted)}
.qa-partes .sub{padding:4px 0 4px 12px}
.qa-partes .sub b{font-size:14px}
.qa-cont{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px}
.placar-item.s-obsoleto{color:var(--st-obsoleto)}

/* ---- Painel do SGQ, ficha e banco ---- */
.estrela{color:var(--st-atencao)}
.pf-hist{display:flex;flex-direction:column;gap:1px;padding:8px 0;border-top:1px solid var(--hair);font-size:12.5px}
.pf-hist:first-child{border-top:0}
.pf-hist b{font-size:11.5px;color:var(--muted);font-weight:650}
.pf-hist span{color:var(--dark);font-weight:600}
.pf-hist small{color:var(--text2);line-height:1.45}
.pf-faixas{display:flex;flex-direction:column}
.pf-faixas > div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:2px solid currentColor;font-size:13px}
.pf-faixas > div span{color:var(--text2)}
.pf-faixas .s-vigente{color:var(--st-vigente)} .pf-faixas .s-atencao{color:var(--st-atencao)} .pf-faixas .s-vencido{color:var(--st-vencido)}

.bf-grade{display:grid;grid-template-columns:280px minmax(0,1fr);gap:1.25rem;align-items:start}
@media(max-width:980px){ .bf-grade{grid-template-columns:1fr} }
.bf-lista{display:flex;flex-direction:column;padding:6px;position:sticky;top:calc(var(--topo) + 14px)}
.bf-item{display:flex;flex-direction:column;gap:2px;text-align:left;background:none;border:0;border-radius:var(--r-sm);padding:9px 10px;cursor:pointer;font-family:inherit;
         box-shadow:inset 0 -1px 0 var(--hair)}
.bf-item b{font-size:13.5px;color:var(--dark)}
.bf-item small{font-size:11.5px;color:var(--muted);line-height:1.35}
.bf-item:hover{background:var(--surface2)}
.bf-item.sel{background:var(--surface2);box-shadow:inset 0 -2.5px 0 var(--red)}
.bf-item.sel b{color:var(--red)}
.bf-item.arquivado b{color:var(--muted);text-decoration:line-through}
.bf-trad td{background:var(--surface2)}
.bf-trad .field label{font-size:11.5px}
.bf-trad textarea{min-height:44px}
.mini.sel svg{stroke:var(--red)}
.mini.falta svg{stroke:var(--st-atencao)}
.ic-inline{width:13px;height:13px;vertical-align:-2px;stroke:currentColor;fill:none;stroke-width:2}
table.tbl.pf-compacta{min-width:0}
table.tbl.pf-compacta th,table.tbl.pf-compacta td{padding-left:10px;padding-right:10px}
table.tbl.pf-docs{min-width:0}

/* ---- Parcial: observação técnica sob a descrição (tela do fornecedor) ---- */
.pq-op .pq-op-obs{display:block;margin-top:5px;padding-top:5px;border-top:1px solid var(--hair);font-size:11px;color:var(--text2);line-height:1.35}
.pf-legenda .pq-op-obs{display:block;margin-top:4px;font-size:11.5px;color:var(--text2);line-height:1.4;font-style:italic}

/* ---- Documentação administrativa: no questionário e na análise ---- */
.pq.adm .pq-n,.qa.adm .pq-n{color:var(--st-externo)}
.pf-adm-campos{display:flex;flex-direction:column;gap:10px;min-width:0}
.pf-adm-val{max-width:220px}

/* ---- Tela de documentos do fornecedor ---- */
.pf-doc{display:grid;grid-template-columns:minmax(0,1fr) 230px 130px;gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--hair)}
.pf-doc:first-child{border-top:0}
.pf-doc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-doc-txt b{font-size:14px;color:var(--dark);font-weight:650;line-height:1.35}
.pf-doc-txt small{font-size:12.5px;color:var(--text2)}
.pf-doc-arqs{display:flex;flex-wrap:wrap;gap:4px 12px}
.pf-doc-sit{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.pf-doc-acao{text-align:right}
@media(max-width:720px){ .pf-doc{grid-template-columns:1fr} .pf-doc-acao{text-align:left} }
.pf-modal-doc{font-size:14px;line-height:1.5;margin-bottom:10px}
.pf-modal-doc small{color:var(--muted)}

/* ---- Banco administrativo: caixas Obrigatório / Validade ---- */
.bf-marca{display:flex;justify-content:center;cursor:pointer;padding-top:6px}
.bf-marca input{width:16px;height:16px;accent-color:var(--red);cursor:pointer}
.ct td.centro{text-align:center}

/* ---- Processos: reorganizar o fluxo (SGQ) ---- */
.proc-ordem{cursor:default;border-style:dashed}
.proc-ordem:hover{transform:none}
.proc-setas{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}

/* ---- Assinatura eletrônica (tela) ---- */
.qa-assinatura{box-shadow:var(--sh-1),inset 0 2px 0 var(--red)}
.qa-ass-nome{display:block;font-size:17px;color:var(--dark);font-weight:700;margin-top:2px}
.pf-assinado{font-size:12.5px;color:var(--text2);margin-top:10px;padding-top:8px;border-top:1px solid var(--hair)}

/* ---- Referência ao portal dentro do documento (Manual da Qualidade) ---- */
.ref-portal{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface)}
.ref-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;
         border-bottom:1px solid var(--hair);background:var(--surface2);border-radius:var(--r-sm) var(--r-sm) 0 0}
.ref-orig{font-size:12.5px;color:var(--text2);line-height:1.45}
.ref-orig [data-ref-resumo]{color:var(--muted)}
.ref-previa{padding:12px 14px 4px;max-height:340px;overflow:auto}
.ref-previa .leitura{font-size:13px;line-height:1.55}
.ref-portal.suprimida .ref-previa{background:var(--surface2)}
.doc-nota{border-top:1px solid var(--border2);background:var(--surface2);padding:9px 12px 10px;margin:4px 0 12px;font-size:13px}
.doc-nota b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.doc-nota p{margin:3px 0 4px;color:var(--text2)}
.doc-nota a,.doc-fonte a{font-size:12px;font-weight:650}
.doc-fonte{font-size:11.5px;color:var(--muted);font-style:italic;margin:-4px 0 12px}

/* ---- Objetivos: série de medições (a meta tracejada, pontos na cor do resultado) ---- */
.serie{display:block;max-width:100%;height:auto;overflow:visible}
.serie-meta{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.serie-linha{fill:none;stroke:var(--border2);stroke-width:1.5}
.serie-pt{stroke:var(--surface);stroke-width:1}
.serie-pt.ok{fill:var(--st-vigente)} .serie-pt.fora{fill:var(--st-vencido)}
.obj-desdobra{font-size:11.5px;color:var(--muted)}
.obj-desdobra a{font-weight:650}
.obj-grupo{margin:14px 0 4px;display:flex;align-items:baseline;gap:8px}
.obj-grupo h3{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dark);margin:0}
.obj-grupo span{font-size:12px;color:var(--muted)}
.obj-meta{font-weight:700;color:var(--dark);white-space:nowrap}
.obj-res{font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.obj-res.ok{color:var(--st-vigente)} .obj-res.fora{color:var(--st-vencido)}

/* ---- Terceiros (Fase 7): documento pedido, atividades, integração, configuração ---- */
.tc-req .tc-orient{color:var(--text2)}
.tc-req .tc-regra{font-size:11.5px;color:var(--muted)}
.tc-parecer{font-size:12.5px;color:var(--st-atencao);line-height:1.45;margin-top:3px}
.tc-parecer b{font-weight:700}
.tc-atvs .tc-nr{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--red);margin-left:4px;white-space:nowrap}
.tc-atvs .tc-pede{font-weight:500}
.tc-atvs .tc-pede{color:var(--text2);margin-top:3px}
.tc-sep{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px}
.tc-passos{margin:0;padding-left:18px;font-size:13px;line-height:1.55;color:var(--text2)}
.tc-passos li{margin:3px 0}
.tc-part{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-top:4px}
.tc-part-emp{display:flex;flex-direction:column;gap:5px}
.tc-part-emp .field-inline{margin:0}
.tc-part-todos{padding-bottom:4px;border-bottom:1px solid var(--hair)}
.ct tr.arquivado td{opacity:.55}
.ct td .bf-marca input{width:16px;height:16px;padding:0;flex:0 0 16px}
.tc-cfg table{table-layout:fixed;min-width:640px}
.tc-cfg th,.tc-cfg td{padding-left:4px;padding-right:4px}
.tc-cfg select{font-size:12.5px}
.tc-cfg-meses{display:flex;align-items:center;gap:4px;margin-top:2px;font-size:12px;color:var(--muted)}
.tc-cfg-meses input{width:64px !important}
.tc-cfg .tc-cfg-nome{font-weight:650;color:var(--dark)}
.tc-cfg .tc-cfg-orient{font-size:12.5px;color:var(--text2);margin-top:2px}
.tc-cfg td.acoes{width:70px}
.ct td input[type=number]{width:100%;border:1px solid transparent;border-radius:var(--r-sm);padding:7px 8px;font:inherit;font-size:13px;background:transparent}
.ct td input[type=number]:hover{border-color:var(--border)}
.ct td input[type=number]:focus{outline:none;border-color:var(--red);background:var(--surface)}
.ct td input[type=number]:disabled{border-color:transparent;background:transparent}

/* =====================================================================
   VISUAL PRÓPRIO DO SGQ — "PLACA DE ÁREA" (01/10/2026)

   O portal fala como a sinalização da base: cada situação é dita uma
   vez, em palavra grande sobre a sua cor (placa), e o resto é tinta
   preta em chapa branca. Mesma paleta Perpec e o mesmo semáforo de sete
   tons — nenhuma cor nova. O que muda é a voz:
     · letra DIN (Bahnschrift, a DIN que vem no Windows) em títulos,
       rótulos, números, botões e placas; Segoe UI no texto corrido;
     · chapa de canto vivo (4 px), fio de 1 px, quase nenhuma sombra;
     · placa de situação cheia, nunca pastilha (design-system §8.0);
     · o item ativo do menu é uma chapa preta;
     · tela de trabalho não tem coreografia de entrada.
   Tudo aqui sobrescreve o que vem antes (style.css segue cópia fiel da
   metrologia; este bloco é o visual do SGQ).
   ===================================================================== */
:root{
  --din: Bahnschrift, "DIN Alternate", "DIN 2014", "D-DIN", "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif;
  --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --r-sm:3px; --r:4px; --r-lg:5px; --r-xl:6px;
  --sh-1:none;
  --sh-2:0 2px 8px rgba(21,16,16,.07);
  --lateral:248px; --lateral-min:64px; --topo:57px;
  --wrap:1360px;
}
body{font-family:var(--ui)}
input,textarea,select,.ql-editor{caret-color:var(--red)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Tela de trabalho não tem coreografia de entrada: o conteúdo já chega no lugar. */
@media (prefers-reduced-motion: no-preference){
  .card,.kpi,.rec,.tl-item,.faixa,.proc,
  .lateral .lat-rolagem > .lat-grupo > .lat-item,.lateral .lat-sub > .lat-pai,.lateral .lat-rodape .lat-item,
  .lat-sub.aberto .lat-filho{animation:none}
}

/* ---- Topo: uma linha só, filete vermelho Perpec em cima --------------------------- */
.site-header{border-top:3px solid var(--red);border-bottom:1px solid var(--border)}
.header-inner{max-width:none;height:54px;padding:0 16px 0 12px;gap:14px}
.header-logo{display:flex;align-items:center}
.header-logo img{height:26px}
.header-titulo{padding-left:14px;margin-right:auto}
.header-titulo .title{font-family:var(--din);font-size:16px;font-weight:600;letter-spacing:.01em;line-height:1.2}
.header-titulo .sub{font-size:11.5px}
body:not(.pf) .header-titulo .sub{display:none}
.header-usuario{margin-left:0;gap:10px}
.header-usuario .nome{font-size:13px;font-weight:600}
.header-usuario .papel{font-family:var(--din);font-size:10.5px;font-weight:600;letter-spacing:.1em}
.btn-sair{border-color:transparent;font-family:var(--din);font-size:13px;font-weight:600;padding:6px 10px}
.btn-sair:hover{border-color:var(--border)}
.btn-menu{width:36px;height:36px;border-color:transparent}
.btn-menu:hover{border-color:var(--border)}
.conn{color:var(--red);font-size:12.5px}
.conn .dot{background:var(--red)}
/* Sandbox dentro do topo: rótulo âmbar, sem faixa extra. */
.header-inner .demo-bar{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0 12px 0 0;height:30px;
                        border-right:1px solid var(--border);font-size:12.5px;color:var(--muted)}
.header-inner .demo-bar[hidden]{display:none}
.header-inner .demo-bar b{font-family:var(--din);font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--dark)}
/* Etapa pendente: o anel azul já diz "esperando"; pulsar era enfeite. */
.etapa.pendente .pino::after{animation:none}
.gate-foot{font-size:11px}
.header-inner .demo-bar select{font-size:12.5px}
@media(max-width:1280px){ #demoTexto{display:none} }
@media(max-width:760px){ .header-inner .demo-bar{display:none} .header-titulo{display:none} .header-logo{margin-right:auto} }
/* Portais externos: a faixa da sandbox continua embaixo do topo, mais fina. */
.demo-bar{padding:.35rem 1.25rem}

/* ---- Barra lateral: o módulo ativo é uma chapa preta ------------------------------ */
.lateral{background:var(--surface2)}
.lat-rolagem{padding:12px 10px 10px}
.lat-grupo + .lat-grupo{margin-top:8px}
.lat-rotulo{height:30px;padding:0 12px 6px;font-family:var(--din);font-size:11px;font-weight:600;letter-spacing:.14em}
.lat-item{min-height:38px;padding:0 10px 0 12px;gap:12px;font-size:14px;font-weight:550;border-radius:var(--r)}
.lat-item .txt,.lat-item:hover:not(.sel) .txt{background:none;padding:2px 0}
.lat-item:hover{background:var(--surface3)}
.lat-item:hover .ic{transform:none}
.lat-item.sel{background:var(--dark);color:#fff;font-weight:600}
.lat-item.sel .ic{stroke:#fff}
.lat-item.sel .lat-n,.lat-item.sel .lat-fase{color:#fff}
.lat-pai.sel-pai{color:var(--dark);font-weight:650}
.lat-pai.sel-pai .ic{stroke:var(--red)}
.lat-filho{min-height:34px;padding-left:44px;font-size:13.5px}
.lat-filho .lat-marca{left:24px;border-color:var(--border2)}
.lat-filho.sel .lat-marca{background:var(--red);border-color:var(--red)}
.lat-n{font-family:var(--din);font-size:13px;font-weight:600}
.lat-ponto{left:27px}
.lat-recolher{font-size:13px}

/* ---- Página ------------------------------------------------------------------------ */
.wrap{padding:28px 32px 80px}
@media(max-width:860px){ .wrap{padding:18px 14px 64px} }
.tela-cab{margin-bottom:22px;align-items:flex-end}
.tela-cab h1{font-family:var(--din);font-size:28px;font-weight:600;letter-spacing:0;line-height:1.15}
.tela-cab p{font-size:14px;color:var(--text2);margin-top:4px;max-width:75ch}
.voltar{font-family:var(--din);font-size:13.5px;font-weight:600;color:var(--text2);margin-bottom:12px}
.doc-titulo h1{font-family:var(--din);font-size:24px;font-weight:600;letter-spacing:0}
.doc-titulo .codigo{font-size:13.5px}
.doc-sub{font-size:13px;color:var(--muted)}
.sec-title{font-family:var(--din);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--dark)}
.page-footer{font-size:11.5px}

/* ---- Chapa (cartão) ---------------------------------------------------------------- */
.card{box-shadow:none;border-color:var(--border);border-radius:var(--r-lg)}
.card:hover{box-shadow:none}
.card-head{padding:14px 20px 12px}
.card-head h2{font-family:var(--din);font-size:16px;font-weight:600;letter-spacing:.005em;background:none;padding-bottom:0}
.card-head .right{font-family:var(--din);font-size:13px;font-weight:600}
.card-body{padding:20px}
.card-body.tight{padding:12px 16px}
.step{width:auto;min-width:16px;height:auto;background:none;border-radius:0;color:var(--red);font-family:var(--din);font-size:17px;font-weight:700}
.act-bar{box-shadow:none;border-radius:var(--r-lg);padding:14px 18px}
.tbl-wrap{box-shadow:none;border-radius:var(--r-lg)}
.modal-card{border-radius:var(--r-xl)}
.modal-head{padding:1rem 1.4rem}
.modal-head h3{font-family:var(--din);font-size:17px;font-weight:600;letter-spacing:.01em}
.gate-card{border-radius:var(--r-xl)}
.gate-top h1{font-family:var(--din);font-size:22px;font-weight:600;letter-spacing:0}

/* ---- Botões: DIN, canto vivo, sem brilho ----------------------------------------- */
.btn{font-family:var(--din);font-size:14px;font-weight:600;letter-spacing:.01em;min-height:38px;padding:8px 16px}
.btn-sm{font-size:13px;min-height:30px;padding:4px 11px}
.btn-xl{font-size:15px;letter-spacing:.05em;min-height:44px;padding:10px 24px}
.btn-red:hover,.btn-dark:hover,.btn-green:hover{box-shadow:none}
.btn-ghost.btn-perigo-suave{color:var(--muted)}
.btn-ghost.btn-perigo-suave:hover{color:var(--red);background:var(--accent-lt)}
.btn-placa{background:#fff;color:var(--dark);border-color:transparent;font-size:15px;letter-spacing:.06em;min-height:44px;padding:10px 22px}
.btn-placa:hover{background:var(--surface3)}
.subtabs,.segmento{border-radius:var(--r)}
.subtab,.segmento button{font-family:var(--din);font-size:14px;font-weight:600;border-radius:var(--r-sm)}
.subtab.sel{box-shadow:inset 0 -2px 0 var(--red)}

/* ---- Campos ------------------------------------------------------------------------ */
.field label{font-size:13px;font-weight:600}
.field input,.field textarea,.field select{font-size:15px;padding:9px 11px}
@media(max-width:720px){ .field input,.field textarea,.field select{font-size:16px} }
.field .hint{font-size:12.5px}
.file{display:block;border-radius:var(--r)}          /* <label class="file"> é inline por natureza: a moldura quebrava */
.file .txt{font-family:var(--din);font-size:13.5px}
.filtros .field input,.filtros .field select{font-size:14.5px}

/* ---- Tabela ------------------------------------------------------------------------ */
table.tbl th{font-family:var(--din);font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--text2)}
table.tbl td{font-size:13.5px}
.ct td textarea{resize:none;field-sizing:content;min-width:110px}
/* Tabela mais larga que a tela: sombra na borda de onde ainda há coluna escondida (rolagem lateral). */
.ct{background:
  linear-gradient(to right, var(--surface) 30%, transparent) left center / 28px 100% no-repeat local,
  linear-gradient(to left, var(--surface) 30%, transparent) right center / 28px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(21,16,16,.16), rgba(21,16,16,0)) left center / 10px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(21,16,16,.16), rgba(21,16,16,0)) right center / 10px 100% no-repeat scroll,
  var(--surface)}
.ct th{background:transparent}

/* ---- Situação nas listas: a cor fica no ponto; o texto é tinta. Só o vencido fala em vermelho.
   A cor cheia é da placa (adiante); lista não vira painel de alarme. */
.bdg{color:var(--text2)}
.bdg::before{background:var(--muted)}
.bdg.s-vigente::before{background:var(--st-vigente)}       .bdg.s-atencao::before{background:var(--st-atencao)}
.bdg.s-vencido::before{background:var(--st-vencido)}       .bdg.s-aprovacao::before{background:var(--st-aprovacao)}
.bdg.s-elaboracao::before{background:var(--st-elaboracao)} .bdg.s-obsoleto::before{background:var(--st-obsoleto)}
.bdg.s-externo::before{background:var(--st-externo)}       .bdg.s-ativo::before{background:var(--st-vigente)}
.bdg.s-vigente,.bdg.s-atencao,.bdg.s-aprovacao,.bdg.s-elaboracao,.bdg.s-obsoleto,.bdg.s-externo,.bdg.s-ativo{color:var(--text2)}
.bdg.s-vencido{color:var(--st-vencido)}
.bdg.s-inativo{color:var(--muted)}
.bdg.neutro::before{display:none}

/* Seta do select desenhada (a nativa muda de navegador para navegador). */
.field select,.filtros select,.ct td select{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A423F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px}
.field select[multiple]{background-image:none;padding-right:11px}

/* ---- Quadro de contagem (antes: fileira de cartões de indicador) -------------------
   Os números ficam numa chapa só, separados por fio, como o quadro de uma área:
   lê-se de uma vez, sem cinco caixas competindo. */
.kpis{gap:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);border:1px solid var(--border);
      border-radius:var(--r-lg);overflow:hidden}
.kpi{border:0;border-radius:0;box-shadow:inset -1px 0 0 var(--hair);padding:12px 16px 14px;gap:1px;background:transparent}
.kpi:hover{transform:none;box-shadow:inset -1px 0 0 var(--hair);background:var(--surface2);border-color:transparent}
.kpi .k{font-size:12.5px;font-weight:600}
.kpi .v{font-family:var(--din);font-size:23px;font-weight:600;letter-spacing:0;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .d{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi::after{height:3px;transform:scaleX(0)}
.kpi:hover::after,.kpi.sel::after{transform:scaleX(1)}
.kpi.sel{box-shadow:inset -1px 0 0 var(--hair);background:var(--surface2)}
.kpi.estatico:hover{background:transparent;box-shadow:inset -1px 0 0 var(--hair)}
.kpi.c-total::after{transform:scaleX(0)}

/* ---- Aviso: nota é texto quieto; atenção e erro continuam com a cor deles ----------- */
.warn-box{border-radius:var(--r-sm);font-size:13.5px}
.warn-box::before{font-family:var(--din);font-size:10.5px;font-weight:700}
.warn-box.i{background:transparent;border-top:1px solid var(--border2);color:var(--text2);padding:21px 2px 4px}
.warn-box.i::before{left:2px;color:var(--muted)}
.warn-box.i.sem-rotulo{padding-top:9px}
.dica > summary{padding:4px 7px}

/* ---- Placa de situação --------------------------------------------------------------
   A placa do painel (grande, com pictograma e a ação) e a faixa do topo de um registro
   (fina). Cor = semáforo; âmbar leva tinta preta, como a placa de advertência. */
.placa{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;min-height:96px;margin-bottom:30px;
       background:var(--dark);color:#fff;border-radius:var(--r-lg);overflow:hidden}
.placa-ic{display:flex;align-items:center;justify-content:center;width:96px;align-self:stretch;border-right:1px solid rgba(255,255,255,.3)}
.placa-ic svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.placa-txt{display:flex;flex-direction:column;gap:5px;padding:16px 24px;min-width:0}
.placa-txt b{font-family:var(--din);font-size:26px;font-weight:600;letter-spacing:.035em;text-transform:uppercase;line-height:1.1;text-wrap:balance}
.placa-txt span{font-size:14px;line-height:1.45;opacity:.92;max-width:80ch}
.placa .btn-placa{margin-right:24px}
.placa.s-aprovacao{background:var(--st-aprovacao)} .placa.s-vencido{background:var(--st-vencido)} .placa.s-vigente{background:var(--st-vigente)}
.placa.s-atencao{background:var(--st-atencao);color:var(--dark)}
.placa.s-atencao .placa-ic{border-right-color:rgba(21,16,16,.25)}
.placa.s-atencao .btn-placa{background:var(--dark);color:#fff}
@media(max-width:720px){
  .placa{grid-template-columns:auto minmax(0,1fr)}
  .placa-ic{width:64px} .placa-ic svg{width:30px;height:30px}
  .placa-txt{padding:14px 16px} .placa-txt b{font-size:20px}
  .placa .btn-placa{grid-column:1/-1;margin:0 16px 16px}
}
.faixa-sit{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:10px 16px;margin-bottom:14px;border-radius:var(--r-lg);
           background:var(--dark);color:#fff}
.faixa-sit b{font-family:var(--din);font-size:14.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.faixa-sit span{font-size:13.5px;line-height:1.45;opacity:.92}
.faixa-sit.s-vigente{background:var(--st-vigente)} .faixa-sit.s-aprovacao{background:var(--st-aprovacao)}
.faixa-sit.s-elaboracao{background:var(--st-elaboracao)} .faixa-sit.s-vencido{background:var(--st-vencido)}
.faixa-sit.s-obsoleto{background:var(--st-obsoleto)} .faixa-sit.s-externo{background:var(--st-externo)}
.faixa-sit.s-atencao{background:var(--st-atencao);color:var(--dark)}

/* ---- Painel: a fila -------------------------------------------------------------- */
.fila-cab{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 10px}
.fila-cab h2{font-family:var(--din);font-size:19px;font-weight:600;color:var(--dark)}
.fila-cab span{font-size:13px;color:var(--muted)}
.fila{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.fila-grupo + .fila-grupo{border-top:1px solid var(--border)}
.fila-grupo > summary{display:flex;align-items:center;gap:14px;padding:13px 18px;cursor:pointer;list-style:none;scroll-margin-top:calc(var(--topo) + 12px)}
.fila-grupo > summary::-webkit-details-marker{display:none}
/* Cabeçalho do assunto em cinza da paleta; as pendências, em branco: um não se confunde com o outro. */
.fila-grupo > summary{background:var(--surface3)}
.fila-grupo > summary:hover{background:var(--border)}
.fila-grupo:first-child > summary{border-radius:var(--r-lg) var(--r-lg) 0 0}
.fila-grupo:last-child:not([open]) > summary{border-radius:0 0 var(--r-lg) var(--r-lg)}
.fila-grupo{scroll-margin-top:calc(var(--topo) + 12px)}
.fila-t{flex:1;min-width:0;font-family:var(--din);font-size:16px;font-weight:600;color:var(--dark)}
.fila-atraso{font-size:12.5px;font-weight:650;color:var(--st-vencido);white-space:nowrap}
.fila-n{min-width:26px;text-align:right;font-family:var(--din);font-size:17px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums}
.fila-chev{width:16px;height:16px;flex-shrink:0;stroke:var(--muted);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
           transition:transform .2s var(--saida)}
.fila-grupo[open] > summary .fila-chev{transform:rotate(180deg)}
.fila-grupo[open] > summary{border-bottom:1px solid var(--hair)}
.fila-item{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) auto;align-items:center;gap:4px 18px;padding:10px 18px;
           color:var(--text);text-decoration:none;transition:background .12s}
.fila-item + .fila-item{border-top:1px solid var(--hair)}
.fila-item:hover,.fila-item:focus-visible{background:var(--surface2);text-decoration:none}
.fila-item:focus-visible{outline-offset:-2px}
.fila-cod{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-txt{min-width:0}
.fila-txt b{display:block;font-size:14px;font-weight:600;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila-txt small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
/* Só a linha em foco mostra o detalhe; o resto da lista fica quieto (no toque, o detalhe fica sempre). */
@media (hover:hover) and (pointer:fine){
  .fila-txt small{max-height:0;opacity:0;overflow:hidden;transition:opacity .15s var(--saida)}
  .fila-item:hover .fila-txt small,.fila-item:focus-visible .fila-txt small{max-height:none;opacity:1}
}
.fila-item:hover .fila-txt b,.fila-item:hover .fila-txt small,.fila-item:focus-visible .fila-txt b,.fila-item:focus-visible .fila-txt small{white-space:normal}
.fila-item:hover .fila-txt small,.fila-item:focus-visible .fila-txt small{color:var(--text2)}
.fila-dir{justify-self:end;text-align:right}
.fila-mais{display:flex;justify-content:space-between;gap:10px;padding:8px 18px 10px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
.painel-acervo{margin-top:16px;font-size:12.5px;color:var(--muted)}
@media(max-width:720px){
  .fila-item{grid-template-columns:minmax(0,1fr) auto;padding:10px 14px}
  .fila-cod{grid-column:1/-1}
  .fila-grupo > summary{padding:12px 14px}
}

/* ---- Painel: cópias controladas -------------------------------------------------------
   Indicador (quantas há na fábrica; abre a lista mestra filtrada) e a tarja vermelha de
   recolhimento, que só sai quando o recolhimento de cada cópia é registrado. */
.painel-copias{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 12px;border:1px solid var(--border);border-radius:var(--r-lg);
               background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}
.painel-copias:hover{border-color:var(--border2);background:var(--surface2);text-decoration:none}
.painel-copias b{font-family:var(--din);font-size:28px;font-weight:600;line-height:1;color:var(--dark);font-variant-numeric:tabular-nums}
.painel-copias span{display:flex;flex-direction:column;font-family:var(--din);font-size:14px;font-weight:600;line-height:1.25;color:var(--dark)}
.painel-copias small{font-family:var(--ui);font-size:12px;font-weight:500;color:var(--muted)}
.painel-copias:hover small{color:var(--red)}
.tarja-recolher{margin-bottom:18px;background:var(--status-descalibrado);color:#fff;border-radius:var(--r-lg);overflow:hidden}
.tarja-cab{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
.tarja-cab .placa-ic{width:84px;min-height:84px}
.tarja-cab .placa-txt b{font-size:23px}
.tarja-itens{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.3)}
.tarja-itens li{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr) auto auto;align-items:center;gap:6px 16px;padding:10px 18px;
                border-top:1px solid rgba(255,255,255,.18)}
.tarja-itens li:first-child{border-top:0}
.tarja-itens .mono{color:#fff;font-size:13px}
.tarja-txt b{display:block;font-size:14px;font-weight:650}
.tarja-txt small{display:block;font-size:12.5px;opacity:.9}
.tarja-link{color:#fff;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tarja-link:hover{color:#fff;opacity:.85}
.tarja-itens .btn-placa{min-height:34px;font-size:13px;padding:6px 14px}
.tarja-mais{margin:0;padding:8px 18px 12px;font-size:12.5px;opacity:.9}
@media (prefers-reduced-motion: no-preference){
  .tarja-recolher .placa-ic svg{animation:pulsa 1.8s ease-in-out 3}   /* chama o olho três vezes e para */
}
@media(max-width:720px){
  .tela-cab .painel-copias{width:100%}
  .tarja-itens li{grid-template-columns:minmax(0,1fr) auto;padding:10px 14px}
  .tarja-itens .mono,.tarja-txt{grid-column:1/-1}
  .tarja-cab .placa-ic{width:60px;min-height:60px}
  .tarja-cab .placa-txt b{font-size:19px}
}

/* ---- Leitura: subseções em três níveis ------------------------------------------- */
.leitura h3{font-family:var(--din);font-size:14px;font-weight:600;letter-spacing:.1em}
.leitura h4{font-family:var(--din);font-size:15px;font-weight:600}
.leitura h4.n2{font-size:14.5px;margin-top:10px}
.leitura h4.n3{font-size:14px;font-weight:500;font-style:italic}

/* =====================================================================
   EDITOR DE DOCUMENTO — mapa à esquerda, folha à direita
   ===================================================================== */
.ed{display:grid;grid-template-columns:236px minmax(0,1fr);gap:28px;align-items:start;counter-reset:fig tab}
@media(max-width:1180px){ .ed{grid-template-columns:minmax(0,1fr)} .ed-mapa{display:none} }

/* Mapa do documento */
.ed-mapa{position:sticky;top:calc(var(--topo) + 16px);max-height:calc(100vh - var(--topo) - 120px);overflow:auto;padding:2px 2px 12px 0;
         scrollbar-width:thin}
.mapa-tit{margin:2px 0 8px 10px;font-family:var(--din);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mapa-lista,.mapa-subs{list-style:none;margin:0;padding:0}
.ed-mapa button{display:flex;align-items:baseline;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:var(--r);background:none;
                font:inherit;font-size:13.5px;line-height:1.35;color:var(--text2);text-align:left;cursor:pointer;transition:background .12s,color .12s}
.ed-mapa button:hover{background:var(--surface3);color:var(--dark)}
.mapa-sec > button .n{min-width:16px;font-family:var(--din);font-weight:600;color:var(--red)}
.mapa-sec > button .t{flex:1;min-width:0;font-weight:600}
.mapa-sec .est{font-size:11.5px;font-weight:650;color:var(--st-atencao);white-space:nowrap}
.mapa-sec .est svg{width:14px;height:14px;vertical-align:-2px;fill:none;stroke:var(--st-vigente);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mapa-sec.atual > button{background:var(--dark);color:#fff}
.mapa-sec.atual > button .n,.mapa-sec.atual > button .est{color:#fff}
.mapa-sec.atual > button .est svg{stroke:#fff}
.mapa-subs{margin:1px 0 4px}
.mapa-subs button{padding:3px 10px 3px 34px;font-size:12.5px}
.mapa-subs .n2 button{padding-left:46px} .mapa-subs .n3 button{padding-left:58px}
.mapa-subs .n{font-family:var(--din);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mapa-subs .t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mapa-rodape{margin:12px 10px 0;padding-top:10px;border-top:1px solid var(--hair);font-size:12.5px;font-weight:600;color:var(--st-vigente)}
.mapa-rodape.falta{color:var(--st-atencao)}

/* Folha: o documento numa página só, como sai impresso */
.ed-folha{min-width:0;padding:28px 40px 36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
@media(max-width:720px){ .ed-folha{padding:18px 16px 24px} }
.ed-cab{padding-bottom:14px;border-bottom:1.5px solid var(--dark)}
.ed-id{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:12.5px;color:var(--muted)}
.ed-id .codigo{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;letter-spacing:.06em;color:var(--red)}
.field.ed-titulo{margin-top:4px}
.field.ed-titulo input{padding:4px 0 6px;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;
                       font-family:var(--din);font-size:28px;font-weight:600;line-height:1.2;color:var(--dark)}
.field.ed-titulo input:hover{border-bottom-color:var(--border2)}
.field.ed-titulo input:focus{border-bottom-color:var(--red);box-shadow:none}
.field.err.ed-titulo input{background:var(--accent-lt);border-bottom-color:var(--red)}
.folha-sec{padding:26px 0 8px;scroll-margin-top:calc(var(--topo) + 14px)}
.folha-sec + .folha-sec{border-top:1px solid var(--hair)}
.folha-sec-tit{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;font-family:var(--din);font-size:17px;font-weight:600;
               letter-spacing:.07em;text-transform:uppercase;color:var(--dark)}
.folha-sec-tit .n{min-width:22px;color:var(--red)}
.folha-sec-tit .req{font-size:15px}
.folha-sec-det{margin:-6px 0 12px 34px;font-size:13px;color:var(--muted)}
.folha-campos{display:flex;flex-direction:column;gap:18px;padding-left:34px}
@media(max-width:720px){ .folha-campos{padding-left:0} .folha-sec-det{margin-left:0} }
.folha-sec.unico .field > .hint{margin-top:2px}

/* Rodapé fixo: descartar fica longe de submeter */
.ed-rodape{position:sticky;bottom:12px;z-index:50;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:20px;
           padding:10px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-lg);box-shadow:0 10px 30px rgba(21,16,16,.14)}
.ed-rodape .sep{flex:1}
@media(max-width:720px){
  .ed-rodape{gap:8px 10px;padding:8px 10px}
  .ed-rodape .btn-perigo-suave{min-height:30px;padding:4px 8px;font-size:13px}
  .ed-rodape .sep{flex-basis:100%;height:0}
  .ed-rodape .btn-xl{flex:1 1 auto;font-size:13.5px;letter-spacing:.03em;padding:10px 12px}
  .rt.rt-longo .ql-editor{padding-left:52px} .rt.rt-longo .ql-editor.ql-blank::before{left:52px}
  .rt .ql-container .ql-editor :is(h2,h3,h4)::before{font-size:12px}
}

/* ---- Texto rico (Quill): barra fixa no topo, estilos com nome de Word ----------- */
.rt{border-radius:var(--r)}
.rt .ql-toolbar.ql-snow{position:sticky;top:var(--topo);z-index:20;display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;padding:6px 8px;
                        background:var(--surface2);border-radius:var(--r) var(--r) 0 0}
.rt .ql-toolbar.ql-snow .ql-formats{display:inline-flex;align-items:center;gap:1px;margin-right:8px;padding-right:8px;border-right:1px solid var(--border)}
.rt .ql-toolbar.ql-snow .ql-formats:last-child{margin-right:0;padding-right:0;border-right:0}
.rt .ql-snow.ql-toolbar button{width:32px;height:32px;padding:6px;border-radius:var(--r-sm);float:none}
.rt .ql-snow.ql-toolbar button:hover,.rt .ql-snow.ql-toolbar button.ql-active{background:var(--surface3)}
.rt .ql-snow.ql-toolbar button:hover .ql-stroke{stroke:var(--dark)} .rt .ql-snow.ql-toolbar button:hover .ql-fill{fill:var(--dark)}
.rt .ql-snow.ql-toolbar button.ql-active .ql-stroke{stroke:var(--red)} .rt .ql-snow.ql-toolbar button.ql-active .ql-fill{fill:var(--red)}
.rt .ql-snow.ql-toolbar .ql-picker-label:hover,.rt .ql-snow.ql-toolbar .ql-picker-item:hover,
.rt .ql-snow.ql-toolbar .ql-picker-item.ql-selected{color:var(--dark)}
.rt .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.rt .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke{stroke:var(--dark)}
.rt .ql-snow.ql-toolbar button.ql-figura,.rt .ql-snow.ql-toolbar button.ql-tabela{width:auto;display:inline-flex;align-items:center;gap:6px;
   padding:6px 10px;font-family:var(--din);font-size:13.5px;font-weight:600;color:var(--text2)}
.rt .ql-snow.ql-toolbar button.ql-figura:hover,.rt .ql-snow.ql-toolbar button.ql-tabela:hover{color:var(--dark)}
.rt .ql-toolbar .ql-figura svg,.rt .ql-toolbar .ql-tabela svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rt .ql-snow .ql-picker.ql-header{width:176px;height:32px;font-family:var(--din);font-size:14px;font-weight:600;color:var(--text2)}
.rt .ql-snow .ql-picker.ql-header .ql-picker-label{display:flex;align-items:center;padding:0 26px 0 10px;border:1px solid var(--border2);
   border-radius:var(--r-sm);background:var(--surface)}
.rt .ql-snow .ql-picker.ql-header .ql-picker-label:hover{border-color:var(--dark3)}
/* A seta dupla do Quill vira o mesmo chevron dos selects do portal. */
.rt .ql-snow .ql-picker.ql-header .ql-picker-label svg{display:none}
.rt .ql-snow .ql-picker.ql-header .ql-picker-label{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A423F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.rt .ql-snow .ql-picker.ql-header .ql-picker-label::before,
.rt .ql-snow .ql-picker.ql-header .ql-picker-item::before{content:"Texto normal"}
.rt .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:var(--rot-t1, "Título 1")}
.rt .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:var(--rot-t2, "Título 2")}
.rt .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:var(--rot-t3, "Título 3")}
.rt .ql-snow .ql-picker.ql-header .ql-picker-item::before{font-size:14px}
.rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:16px;font-weight:700}
.rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:15px;font-weight:600}
.rt .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:14px;font-weight:600}
.rt .ql-snow .ql-picker-options{padding:4px;border:1px solid var(--border)!important;border-radius:var(--r);box-shadow:var(--sh-3)}
.rt .ql-snow .ql-picker-options .ql-picker-item{padding:6px 10px;border-radius:var(--r-sm)}
.rt .ql-snow .ql-picker-options .ql-picker-item:hover{background:var(--surface3);color:var(--dark)}
.rt .ql-container.ql-snow{font-size:15.5px}

/* A folha: subseções numeradas na margem enquanto se escreve (6.1 · 6.1.1 · 6.1.1.1),
   com a mesma regra do PDF (components/conteudo.js › numeroSub). */
.rt .ql-editor{min-height:84px;padding:14px 20px 16px;line-height:1.65;counter-reset:s2 var(--s2-ini, 0) s3 s4}
.rt .ql-editor.ql-blank::before{left:20px;right:20px;font-style:normal}
/* Campo de texto longo (descrição das atividades): margem larga onde a numeração fica pendurada. */
.rt.rt-longo .ql-editor{min-height:220px;padding-left:72px}
.rt.rt-longo .ql-editor.ql-blank::before{left:72px}
.rt:not(.rt-longo) .ql-container .ql-editor :is(h2,h3,h4)::before{position:static;margin-right:10px}
.rt .ql-editor p{margin-bottom:.3em}
.rt .ql-container .ql-editor :is(h2,h3,h4){position:relative;font-family:var(--din);font-weight:600;color:var(--dark);line-height:1.3;
                             scroll-margin-top:calc(var(--topo) + 70px)}
.rt .ql-container .ql-editor h2{font-size:19px;margin:20px 0 6px;counter-increment:s2;counter-reset:s3 s4}
.rt .ql-container .ql-editor h3{font-size:17px;margin:16px 0 4px;counter-increment:s3;counter-reset:s4}
.rt .ql-container .ql-editor h4{font-size:15.5px;margin:12px 0 4px;counter-increment:s4}
.rt .ql-container .ql-editor > :is(h2,h3,h4):first-child{margin-top:2px}
.rt .ql-editor h2::before{content:var(--sec, "") "." counter(s2)}
.rt .ql-editor h3::before{content:var(--sec, "") "." counter(s2) "." counter(s3)}
.rt .ql-editor h4::before{content:var(--sec, "") "." counter(s2) "." counter(s3) "." counter(s4)}
.rt .ql-editor :is(h2,h3,h4)::before{position:absolute;right:calc(100% + 12px);top:.18em;font-size:13px;font-weight:600;color:var(--red);
                                     letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.rt .ql-editor :is(h2,h3,h4):has(> br:only-child){counter-increment:none}
.rt .ql-editor :is(h2,h3,h4):has(> br:only-child)::before{content:none}
.rt .ql-editor li > .ql-ui::before{color:var(--red)}
.rt .ql-editor ol{padding-left:0}

/* Figura no texto: imagem, legenda logo abaixo (obrigatória), trocar e excluir no canto */
.ql-editor figure.rt-figura{margin:14px 0;padding:0;border:0;background:none;max-width:none;text-align:left;cursor:default;white-space:normal;
                            counter-increment:fig}
.rt-fig-quadro{position:relative;display:inline-block;max-width:min(100%,560px);padding:6px;line-height:0;
               border:1px solid var(--border);border-radius:var(--r);background:var(--surface2)}
.rt-fig-quadro img{display:block;max-width:100%;max-height:340px;margin:0;border-radius:2px}
.rt-fig-quadro.enviando img{opacity:.5}
.rt-fig-estado{position:absolute;left:12px;bottom:12px;padding:4px 8px;line-height:1.2;font-size:12px;font-weight:650;color:#fff;
               background:var(--dark);border-radius:var(--r-sm)}
.rt-fig-vazia{display:block;max-width:420px;padding:20px;line-height:1.45;font-size:13px;color:var(--st-atencao)}
.rt-fig-acoes{position:absolute;top:10px;right:10px;display:flex;gap:4px;line-height:1.2;opacity:0;transition:opacity .15s}
.rt-figura:hover .rt-fig-acoes,.rt-figura:focus-within .rt-fig-acoes{opacity:1}
@media (hover:none){ .rt-fig-acoes{opacity:1} }
.ql-editor figure.rt-figura figcaption{display:flex;align-items:baseline;gap:8px;max-width:560px;margin-top:6px}
.rt-fig-n,.rt-tab-n{font-family:var(--din);font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap}
.rt-fig-n::after{content:" " counter(fig) " —"}
.ql-editor .rt-fig-leg{flex:1;min-width:0;min-height:0;padding:3px 4px;border:0;border-bottom:1px solid var(--border2);border-radius:0;background:transparent;
            font:inherit;font-size:13.5px;line-height:1.4;color:var(--text);resize:none;overflow:hidden;field-sizing:content}
.ql-editor .rt-fig-leg:focus{outline:none;border-bottom-color:var(--red)}
.ql-editor .rt-fig-leg.vazia{border-bottom-color:var(--st-atencao);background:var(--st-atencao-bg)}

/* Tabela no texto: a grade se edita ali mesmo; a barra aparece quando se está nela */
.ql-editor .rt-tabela{margin:14px 0;padding:0;border:0;white-space:normal;cursor:default;counter-increment:tab}
.rt-tab-cab{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.rt-tab-n::after{content:" " counter(tab) " —"}
.ql-editor .rt-tab-tit{flex:1;min-width:0;padding:3px 4px;border:0;border-bottom:1px solid transparent;background:transparent;
            font:inherit;font-size:13.5px;font-weight:600;color:var(--text)}
.ql-editor .rt-tab-tit:hover{border-bottom-color:var(--border2)}
.ql-editor .rt-tab-tit:focus{outline:none;border-bottom-color:var(--red)}
.rt-tab-rolagem{overflow-x:auto;border:1px solid var(--border2);border-radius:var(--r-sm)}
.ql-editor .rt-tabela table{width:100%;margin:0;border-collapse:collapse;font-size:14px}
.ql-editor .rt-tabela th{padding:0;background:var(--dark);border-right:1px solid rgba(255,255,255,.16)}
.ql-editor .rt-tabela td{padding:0;border-top:1px solid var(--hair);border-right:1px solid var(--hair);vertical-align:top}
.ql-editor .rt-tabela :is(th,td):last-child{border-right:0}
.ql-editor .rt-tabela textarea{display:block;width:100%;min-width:96px;min-height:34px;padding:7px 9px;border:0;border-radius:0;background:transparent;
                    font:inherit;font-size:14px;line-height:1.4;color:var(--text);resize:none;overflow:hidden;field-sizing:content}
.ql-editor .rt-tabela th textarea{font-family:var(--din);font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#F0E6E4}
.ql-editor .rt-tabela th textarea::placeholder{color:rgba(240,230,228,.45);text-transform:none;letter-spacing:0}
.ql-editor .rt-tabela textarea:focus{outline:none;background:var(--surface);box-shadow:inset 0 0 0 2px var(--red)}
.ql-editor .rt-tabela th textarea:focus{background:var(--dark2)}
.rt-tab-barra{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px;visibility:hidden}
.ql-editor .rt-tabela:hover .rt-tab-barra,.rt-tabela:focus-within .rt-tab-barra{visibility:visible}
@media (hover:none){ .rt-tab-barra{visibility:visible} }
.rt-tab-dica{margin:0 6px;font-size:12px;color:var(--muted)}
.rt-tab-barra .perigo{margin-left:auto}
.rt-bt{position:relative;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid var(--border2);
       border-radius:var(--r-sm);background:var(--surface);font-family:var(--din);font-size:12.5px;font-weight:600;line-height:1;
       color:var(--text2);white-space:nowrap;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.rt-bt:hover{border-color:var(--dark3);color:var(--dark)}
.rt-bt:disabled{opacity:.4;cursor:default}
.rt-bt.perigo{color:var(--red)}
.rt-bt.perigo:hover{border-color:var(--red);background:var(--accent-lt)}
.rt-bt input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}
/* Os campos dos blocos moram dentro de .field: o estilo de campo de formulário não vale aqui. */
.field .ql-editor .rt-tab-tit,.field .ql-editor .rt-fig-leg,.field .ql-editor .rt-tabela textarea{box-shadow:none}
.field .ql-editor .rt-tabela textarea:focus{box-shadow:inset 0 0 0 2px var(--red)}
.field.err .ql-editor .rt-tab-tit,.field.err .ql-editor .rt-tabela textarea{background:transparent;border-color:transparent}
.field.err .ql-editor .rt-fig-leg:not(.vazia){background:transparent;border-bottom-color:var(--border2)}

/* =====================================================================
   CONSTRUTOR DE FORMULÁRIO (components/construtor-formulario.js)
   Cada bloco é uma chapa com faixa cinza em cima (tipo + setas); dentro,
   os campos do bloco. "Prévia do papel" desenha o que vai sair no PDF.
   ===================================================================== */
:root{
  /* O papel é sempre papel: branco e tinta de impressão, também no modo noturno (cores do PDF). */
  --papel:#FFFFFF; --papel-tinta:#1A1210; --papel-tinta2:#4A423F; --papel-linha:#9A938D;
  --tinta-fixa:#151010;
}
.fb-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fb-el{border:1px solid var(--border2);border-radius:var(--r);background:var(--surface)}
.fb-cab{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 12px;background:var(--surface3);border-bottom:1px solid var(--border);
        border-radius:var(--r) var(--r) 0 0}
.fb-n{min-width:16px;font-family:var(--din);font-size:15px;font-weight:700;color:var(--red)}
.fb-tipo{display:inline-flex;align-items:center;gap:7px;font-family:var(--din);font-size:13px;font-weight:600;letter-spacing:.08em;
         text-transform:uppercase;color:var(--dark)}
.fb-tipo svg,.fb-add svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fb-cab .sep{flex:1}
.fb-corpo{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px}
.field .fb-corpo input.fb-titulo{font-family:var(--din);font-size:15.5px;font-weight:600}
.fb-nota{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.fb-itens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fb-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px}
.fb-acoes{display:inline-flex}
.fb-larg button{min-width:34px;justify-content:center}
.fb-num{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text2)}
.field .fb-num input{width:84px;padding:6px 9px}
.fb-grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.fb-grupo{display:flex;flex-direction:column;gap:6px;padding:8px 10px 10px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface2)}
.fb-grupo-cab{display:flex;align-items:center;gap:4px}
.field .fb-grupo-cab input{font-weight:650}
.fb-opcoes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.fb-opcoes li{display:flex;align-items:center;gap:8px}
.fb-caixa{width:14px;height:14px;flex-shrink:0;border:1.5px solid var(--text2);border-radius:2px}
.field .fb-opcoes input{padding:6px 8px;font-size:14px}
.fb-grupo .rt-bt,.fb-corpo > .rt-bt{align-self:flex-start}
.fb-grupo-novo{min-height:96px;border:1px dashed var(--border2);border-radius:var(--r);background:transparent;cursor:pointer;
               font-family:var(--din);font-size:14px;font-weight:600;color:var(--text2)}
.fb-grupo-novo:hover{border-color:var(--red);color:var(--red)}
.fb-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding:10px 12px;border:1px dashed var(--border2);border-radius:var(--r)}
.fb-add > span{margin-right:4px;font-family:var(--din);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fb-add .rt-bt{height:32px;gap:6px}
.field textarea.fb-texto{min-height:64px}
.fb-fotos-op{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.fb-previa{margin-top:12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface2)}
.fb-previa > summary{padding:9px 12px;cursor:pointer;font-family:var(--din);font-size:14px;font-weight:600;color:var(--text2)}
.fb-previa [data-previa]{padding:4px 16px 16px}
@media(max-width:720px){ .fb-item{grid-template-columns:minmax(0,1fr) auto} .fb-acoes{grid-column:1/-1;justify-content:flex-end} }

/* Prévia do papel (editor e leitura do documento) */
.papel-previa{max-width:760px;padding:18px 20px 22px;background:var(--papel);color:var(--papel-tinta);border:1px solid var(--border);box-shadow:var(--sh-2);font-size:12px}
.papel-tit{margin:10px 0 6px;font-family:var(--din);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--status-descalibrado)}
.papel-tit:first-child{margin-top:0}
.papel-linha{display:flex;gap:10px;margin-bottom:8px}
.papel-campo{display:flex;flex-direction:column;gap:3px;min-width:0}
.papel-campo span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--papel-tinta2)}
.papel-campo i{display:block;height:20px;border:1px solid var(--papel-linha)}
.papel-grade{width:100%;margin:2px 0 10px;border-collapse:collapse;font-size:10px}
.papel-grade th{padding:3px 4px;text-align:left;font-size:9px;text-transform:uppercase;color:var(--papel-tinta2);border-bottom:1.2px solid var(--papel-tinta)}
.papel-grade td{height:16px;border-bottom:1px solid var(--papel-linha)}
.papel-grade .n{width:24px;color:var(--papel-linha)}
.papel-grade tr.mais td{padding-top:3px;border:0;font-style:italic;color:var(--papel-linha)}
.papel-marcar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 10px}
.papel-marcar b{display:block;margin-bottom:4px;font-size:9.5px;text-transform:uppercase;color:var(--status-descalibrado)}
.papel-marcar span{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:11px}
.papel-marcar i{width:9px;height:9px;flex-shrink:0;border:1px solid var(--papel-tinta2)}
.papel-texto{margin:0 0 10px;font-size:11px;color:var(--papel-tinta2)}
.papel-fotos{display:grid;gap:10px;margin-bottom:10px}
.papel-foto{display:flex;align-items:center;justify-content:center;height:90px;border:1px dashed var(--papel-linha);font-size:10px;color:var(--papel-linha)}
.papel-leg{display:block;margin-top:3px;padding-bottom:2px;font-size:9px;text-transform:uppercase;color:var(--papel-tinta2);border-bottom:1px solid var(--papel-linha)}
.leitura .papel-previa{margin:4px 0 8px}

/* ---- Botão do modo noturno -------------------------------------------------------- */
.btn-tema{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid transparent;
          border-radius:var(--r);background:transparent;cursor:pointer;color:var(--text2);transition:border-color .16s,background .16s}
.btn-tema:hover{border-color:var(--border);background:var(--surface2);color:var(--dark)}
.btn-tema svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-tema .sol,html[data-tema="escuro"] .btn-tema .lua{display:none}
html[data-tema="escuro"] .btn-tema .sol{display:block}

/* =====================================================================
   MODO NOTURNO — html[data-tema="escuro"] (botão no topo; escolha guardada
   neste aparelho; tema.js aplica antes da primeira pintura). Mesmos tons
   Perpec, no escuro: neutros quentes, tinta clara, vermelho 179 C (o par
   de série da paleta) para o que é texto vermelho; o semáforo clareia o
   bastante para ser lido sobre fundo escuro, e as placas continuam nos
   tons cheios. O papel (prévia do formulário, PDF) continua papel.
   ===================================================================== */
html[data-tema="escuro"]{
  color-scheme:dark;
  --bg:#131010; --surface:#1B1716; --surface2:#211C1B; --surface3:#2A2422;
  --border:#3A312E; --border2:#4D423E; --hair:#2C2523;
  --text:#EDE7E4; --text2:#C7BDB9; --muted:#9A8F8A;
  --dark:#F5EFED; --dark2:#E6DDDA; --dark3:#CDC2BE;
  --red:#E6332C; --accent:#E6332C; --accent-lt:#3A1C18;
  --chapa:#2E2624;
  --st-vigente:#5FAE63; --st-atencao:#D9A040; --st-vencido:#E6332C; --st-aprovacao:#8097E6;
  --st-elaboracao:#A58BDB; --st-obsoleto:#9AA3AD; --st-externo:#4FA8BA;
  --status-calibrado-bg:#18261A; --status-proximo-bg:#2C2314; --status-descalibrado-bg:#2E1715; --status-solicitado-bg:#1A2036;
  --status-em-calibracao-bg:#241D33; --status-standby-bg:#23262A; --status-referencia-bg:#142629;
  --sh-2:0 2px 10px rgba(0,0,0,.45); --sh-3:0 18px 44px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.4);
  --grid:#2C2523; --eixo:#C7BDB9;
}
html[data-tema="escuro"] body{background:var(--bg)}
html[data-tema="escuro"] .btn-red{background:var(--status-descalibrado)}
html[data-tema="escuro"] .btn-red:hover{background:var(--red2)}
html[data-tema="escuro"] .btn-perigo{border-color:var(--border2)}
html[data-tema="escuro"] .field input::placeholder,html[data-tema="escuro"] .field textarea::placeholder,
html[data-tema="escuro"] .rt .ql-editor.ql-blank::before{color:var(--muted)}
/* Chapas escuras (antes pretas sobre o claro) */
html[data-tema="escuro"] :is(.btn-dark,.sel-bar,.modal-head,.toast,.gate-foot,.g-dica,.leitura th,.rt-fig-estado,.ql-editor .rt-tabela th){background:var(--chapa)}
html[data-tema="escuro"] .btn-dark:hover{background:var(--surface3)}
html[data-tema="escuro"] .ql-editor .rt-tabela th textarea:focus{background:var(--surface3)}
/* Item ativo: no escuro a chapa inverte — clara, com tinta escura. */
html[data-tema="escuro"] :is(.lat-item.sel,.mapa-sec.atual > button,.pessoa.sel .avatar){background:var(--dark);color:var(--bg)}
html[data-tema="escuro"] .lat-item.sel .ic,html[data-tema="escuro"] .mapa-sec.atual > button .est svg{stroke:var(--bg)}
html[data-tema="escuro"] :is(.lat-item.sel .lat-n,.lat-item.sel .lat-fase,.mapa-sec.atual > button .n,.mapa-sec.atual > button .est){color:var(--bg)}
html[data-tema="escuro"] .lat-filho.sel .lat-marca{background:var(--red);border-color:var(--red)}
/* Placas e faixas: tons cheios do semáforo (os mesmos do claro) */
html[data-tema="escuro"] :is(.placa,.faixa-sit){background:var(--chapa)}
html[data-tema="escuro"] :is(.placa,.faixa-sit).s-vigente{background:var(--status-calibrado)}
html[data-tema="escuro"] :is(.placa,.faixa-sit).s-aprovacao{background:var(--status-solicitado)}
html[data-tema="escuro"] :is(.placa,.faixa-sit).s-vencido{background:var(--status-descalibrado)}
html[data-tema="escuro"] :is(.placa,.faixa-sit).s-elaboracao{background:var(--status-em-calibracao)}
html[data-tema="escuro"] :is(.placa,.faixa-sit).s-obsoleto{background:var(--status-standby-pausado)}
html[data-tema="escuro"] :is(.placa,.faixa-sit).s-externo{background:var(--status-referencia)}
html[data-tema="escuro"] :is(.placa,.faixa-sit).s-atencao{background:var(--status-proximo-vencimento);color:var(--tinta-fixa)}
html[data-tema="escuro"] .btn-placa{background:#fff;color:var(--tinta-fixa)}
html[data-tema="escuro"] .placa.s-atencao .btn-placa{background:var(--tinta-fixa);color:#fff}
/* Quill e bpmn no escuro */
html[data-tema="escuro"] .rt .ql-snow .ql-picker-options{background:var(--surface)}
html[data-tema="escuro"] .rt .ql-snow .ql-picker.ql-header .ql-picker-label{background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7BDB9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-tema="escuro"] :is(.field select,.filtros select,.ct td select){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7BDB9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-tema="escuro"] .bpmn-tela{background-color:var(--papel)}
html[data-tema="escuro"] .rt-fig-quadro,html[data-tema="escuro"] .evid-ver{background:var(--surface3)}

/* =====================================================================
   PERPECNET — o topo diz o sistema e, embaixo, o módulo em que se está
   (PerpecNet / QSMS). A marca leva de volta ao menu dos módulos (/).
   O menu (hub) tem a folha própria em hub/hub.css.
   ===================================================================== */
a.header-titulo{display:block;color:inherit;text-decoration:none}
a.header-titulo:hover .title{color:var(--red)}
body:not(.pf) .header-titulo .sub{display:block}
.header-titulo .sub{font-family:var(--din);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-top:1px}
/* No celular o topo encolhe, mas continua dizendo onde se está. */
@media(max-width:760px){
  .header-titulo{display:block;padding-left:10px} .header-logo{margin-right:0}
  .header-titulo .title{font-size:14px} .header-titulo .sub{font-size:10px}
}