/* ==========================================================================
   Eliot Engenharia — Gestão da Qualidade
   Direção: prancha técnica. O carimbo (title block) do desenho de engenharia
   é a assinatura visual; o triângulo de revisão marca a Rev; o amarelo de
   etiqueta de inspeção aparece só onde existe uma ação SUA pendente.
   ========================================================================== */

:root {
    --papel: #F3F5F4;
    --folha: #FFFFFF;
    --grafite: #1C2329;
    --grafite-2: #4A5560;
    --grafite-3: #7A8590;
    --linha: #D5DBE0;
    --linha-2: #E7EBEE;
    --prussia: #12436B;
    --prussia-escuro: #0B2E4D;
    --prussia-claro: #E4ECF4;
    --etiqueta: #E8B400;
    --etiqueta-claro: #FFF5D1;
    --etiqueta-texto: #6B5200;
    --conforme: #1F8A4C;
    --conforme-claro: #E3F3E9;
    --nc: #C8372D;
    --nc-claro: #FBE7E5;
    --na: #6B7680;
    --na-claro: #ECEFF1;
    --info: #1F6FB2;
    --info-claro: #E3EFF9;
    --roxo: #5B4691;
    --roxo-claro: #EEEAF6;

    --f-titulo: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
    --f-corpo: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --raio: 6px;
    --sombra: 0 1px 2px rgba(28, 35, 41, .06), 0 4px 14px rgba(28, 35, 41, .05);
    --largura: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--papel);
    color: var(--grafite);
    font: 400 15px/1.5 var(--f-corpo);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--prussia); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--prussia-escuro); }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: .005em; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
p { margin: 0 0 .8em; }
hr { border: 0; border-top: 1px solid var(--linha); margin: 20px 0; }
.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: -.01em; }
.mudo { color: var(--grafite-2); }
.sutil { color: var(--grafite-3); font-size: 13px; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--etiqueta); outline-offset: 2px; border-radius: 3px; }
.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- Topo */
.topo {
    background: var(--prussia-escuro);
    color: #fff;
    position: sticky; top: 0; z-index: 40;
    border-bottom: 3px solid var(--prussia);
}
.topo-in {
    max-width: var(--largura); margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 28px; height: 58px;
}
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex-shrink: 0; }
.marca img { height: 30px; width: auto; }
.marca-nome { font: 600 17px/1.05 var(--f-titulo); letter-spacing: .02em; }
.marca-nome small { display: block; font: 500 10.5px/1.2 var(--f-corpo); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.marca:hover { color: #fff; }

.nav { display: flex; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.nav a {
    display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 100%;
    color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 500; white-space: nowrap;
    border-bottom: 3px solid transparent; margin-bottom: -3px;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav a.ativo { color: #fff; border-bottom-color: var(--etiqueta); }
.nav .contador {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--etiqueta); color: var(--grafite); font: 600 12px/20px var(--f-mono); text-align: center;
}
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sino { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; }
.sino:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sino .ponto { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--etiqueta); box-shadow: 0 0 0 2px var(--prussia-escuro); }
.usuario-menu { position: relative; }
.usuario-btn {
    display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 22px;
    background: rgba(255, 255, 255, .06); border: 0; color: #fff; font: inherit; cursor: pointer;
}
.usuario-btn:hover { background: rgba(255, 255, 255, .12); }
.avatar {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--prussia-claro); color: var(--prussia-escuro); font: 600 12px/1 var(--f-titulo); letter-spacing: .04em;
}
.usuario-btn .quem { text-align: left; line-height: 1.15; font-size: 13px; }
.usuario-btn .quem small { display: block; opacity: .65; font-size: 11px; }
.menu-suspenso {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--folha); color: var(--grafite);
    border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 6px; display: none;
}
.menu-suspenso.aberto { display: block; }
.menu-suspenso a, .menu-suspenso button {
    display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 4px;
    background: none; border: 0; font: inherit; color: var(--grafite); text-decoration: none; cursor: pointer; text-align: left;
}
.menu-suspenso a:hover, .menu-suspenso button:hover { background: var(--papel); }

/* ---------------------------------------------------------------- Página */
.pagina { max-width: var(--largura); margin: 0 auto; padding: 26px 24px 64px; }
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.cabecalho-pagina .sub { color: var(--grafite-2); margin-top: 4px; }
.sobretitulo {
    font: 600 11px/1 var(--f-corpo); letter-spacing: .16em; text-transform: uppercase; color: var(--grafite-3);
    margin-bottom: 8px; display: block;
}
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.trilha { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; color: var(--grafite-3); margin-bottom: 14px; }
.trilha a { color: var(--grafite-2); text-decoration: none; }
.trilha a:hover { color: var(--prussia); text-decoration: underline; }
.trilha .sep { opacity: .6; }

.painel { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); }
.painel + .painel, .painel + .secao, .secao + .painel { margin-top: 18px; }
.grade > .painel, .grade > div > .painel:first-child { margin-top: 0; }
.painel-cab {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--linha-2);
}
.painel-cab h2, .painel-cab h3 { font-size: 17px; }
.painel-corpo { padding: 18px; }
.painel-corpo > :last-child { margin-bottom: 0; }
.secao { margin-top: 26px; }
.secao > h2 { margin-bottom: 12px; }

.grade { display: grid; gap: 18px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.com-lateral { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; align-items: start; }
.com-lateral-dir { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }

/* ---------------------------------------------------------------- Carimbo (assinatura visual) */
.carimbo {
    background: var(--folha);
    border: 1.5px solid var(--grafite);
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr 1.1fr;
    margin-bottom: 22px;
    position: relative;
}
.carimbo .cel { padding: 9px 14px 10px; border-left: 1px solid var(--grafite); border-top: 1px solid var(--grafite); min-width: 0; }
.carimbo .cel:nth-child(-n+5) { border-top: 0; }
.carimbo .cel:first-child { border-left: 0; }
.carimbo .rot {
    display: block; font: 600 9.5px/1.2 var(--f-corpo); letter-spacing: .14em; text-transform: uppercase;
    color: var(--grafite-3); margin-bottom: 3px;
}
.carimbo .val { font: 600 15px/1.25 var(--f-titulo); overflow-wrap: anywhere; }
.carimbo .val.mono { font: 500 14px/1.25 var(--f-mono); }
.carimbo .titulo-doc { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
.carimbo .titulo-doc .val { font-size: 23px; line-height: 1.1; }
.carimbo .titulo-doc .subt { color: var(--grafite-2); font-size: 14px; margin-top: 4px; }
.carimbo .cel-larga { grid-column: span 2; }

/* Triângulo de revisão (delta de desenho técnico) */
.rev { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.rev svg { width: 26px; height: 23px; color: var(--grafite); flex-shrink: 0; }
.rev svg text { font: 600 10px var(--f-mono); fill: currentColor; }
.rev-rotulo { font: 500 13px var(--f-mono); color: var(--grafite-2); }

/* ---------------------------------------------------------------- Selos de situação */
.selo {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 3px;
    font: 600 12px/1.3 var(--f-corpo); letter-spacing: .02em; white-space: nowrap;
    background: var(--na-claro); color: var(--grafite-2);
}
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.selo.neutro { background: var(--na-claro); color: #48525B; }
.selo.info { background: var(--info-claro); color: var(--info); }
.selo.atencao { background: #FDF0D5; color: #8A5A00; }
.selo.roxo { background: var(--roxo-claro); color: var(--roxo); }
.selo.sucesso { background: var(--conforme-claro); color: var(--conforme); }
.selo.perigo { background: var(--nc-claro); color: var(--nc); }

/* Etiqueta de inspeção: só para "é a sua vez" / NOVO */
.etiqueta {
    position: relative; display: inline-flex; align-items: center; height: 20px; padding: 0 8px 0 15px;
    background: var(--etiqueta); color: var(--grafite); border-radius: 2px 4px 4px 2px;
    font: 700 10.5px/1 var(--f-corpo); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.etiqueta::before {
    content: ""; position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%; background: var(--folha); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* ---------------------------------------------------------------- Botões */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 38px; padding: 0 16px; border-radius: 5px; border: 1px solid var(--prussia);
    background: var(--prussia); color: #fff; font: 600 14px/1 var(--f-corpo); letter-spacing: .01em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--prussia-escuro); border-color: var(--prussia-escuro); color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; }
.btn-sec { background: var(--folha); color: var(--prussia); border-color: var(--linha); }
.btn-sec:hover { background: var(--prussia-claro); color: var(--prussia-escuro); border-color: #B9CBDD; }
.btn-fantasma { background: transparent; color: var(--grafite-2); border-color: transparent; }
.btn-fantasma:hover { background: var(--linha-2); color: var(--grafite); border-color: transparent; }
.btn-aprovar { background: var(--conforme); border-color: var(--conforme); }
.btn-aprovar:hover { background: #17703D; border-color: #17703D; }
.btn-reprovar { background: var(--folha); color: var(--nc); border-color: #E9B4AF; }
.btn-reprovar:hover { background: var(--nc-claro); color: #A42A21; border-color: var(--nc); }
.btn-perigo { background: var(--folha); color: var(--nc); border-color: var(--linha); }
.btn-perigo:hover { background: var(--nc-claro); border-color: #E9B4AF; color: #A42A21; }
.btn-p { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn-g { min-height: 46px; padding: 0 22px; font-size: 15px; }
.btn-icone { width: 32px; min-height: 32px; padding: 0; }
.btn-bloco { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--prussia); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- Formulários */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.campo > label, .rotulo { font: 600 13px/1.3 var(--f-corpo); color: var(--grafite-2); }
.campo .ajuda { font-size: 12.5px; color: var(--grafite-3); }
.obrig::after { content: " *"; color: var(--nc); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search],
input[type=tel], input[type=file], select, textarea {
    width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--linha); border-radius: 5px;
    background: var(--folha); color: var(--grafite); font: 400 15px/1.35 var(--f-corpo);
}
textarea { min-height: 90px; resize: vertical; }
input[type=file] { padding: 7px; min-height: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--prussia); box-shadow: 0 0 0 3px rgba(18, 67, 107, .15); }
input[readonly] { background: var(--papel); color: var(--grafite-2); }
.linha-campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--prussia); }
.contador-car { font: 400 12px var(--f-mono); color: var(--grafite-3); text-align: right; }
fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px 4px; margin: 0 0 16px; }
legend { font: 600 13px var(--f-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--grafite-3); padding: 0 6px; }

.busca { position: relative; flex: 1; min-width: 220px; }
.busca svg { position: absolute; left: 11px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--grafite-3); }
.busca input { padding-left: 36px; border-radius: 20px; background: var(--folha); }
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filtros select { width: auto; min-width: 170px; }

/* ---------------------------------------------------------------- Mensagens */
.flash { padding: 12px 16px; border-radius: 5px; margin-bottom: 16px; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.flash.sucesso { background: var(--conforme-claro); border-color: #B9E0C8; color: #155F35; }
.flash.erro { background: var(--nc-claro); border-color: #F0C2BD; color: #8E241C; }
.flash.aviso { background: var(--etiqueta-claro); border-color: #F1D98A; color: var(--etiqueta-texto); }
.flash svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }

.aviso-bloco { border-left: 4px solid var(--etiqueta); background: var(--etiqueta-claro); padding: 12px 16px; border-radius: 0 5px 5px 0; color: var(--etiqueta-texto); }
.aviso-bloco.erro { border-left-color: var(--nc); background: var(--nc-claro); color: #8E241C; }
.aviso-bloco.info { border-left-color: var(--info); background: var(--info-claro); color: #174F80; }
.aviso-bloco ul { margin: 6px 0 0; padding-left: 18px; }

.vazio { text-align: center; padding: 42px 20px; color: var(--grafite-2); }
.vazio svg { width: 40px; height: 40px; color: var(--linha); margin-bottom: 10px; }
.vazio strong { display: block; color: var(--grafite); font: 600 17px var(--f-titulo); margin-bottom: 4px; }

/* ---------------------------------------------------------------- Tabelas */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
    text-align: left; font: 600 10.5px/1.2 var(--f-corpo); letter-spacing: .12em; text-transform: uppercase;
    color: var(--grafite-3); padding: 10px 14px; border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--linha-2); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #FAFBFB; }
.tabela .titulo-linha { font-weight: 600; color: var(--grafite); text-decoration: none; }
.tabela .titulo-linha:hover { color: var(--prussia); text-decoration: underline; }
.tabela .num { text-align: right; font-family: var(--f-mono); }
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--linha-2); font-size: 13px; color: var(--grafite-2); flex-wrap: wrap; }
.paginacao .acoes a, .paginacao .acoes span { min-width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 4px; text-decoration: none; padding: 0 8px; }
.paginacao .acoes a:hover { background: var(--linha-2); }
.paginacao .acoes .atual { background: var(--prussia); color: #fff; }

/* ---------------------------------------------------------------- Árvore de pastas */
.arvore, .arvore ul { list-style: none; margin: 0; padding: 0; }
.arvore ul { padding-left: 14px; margin-left: 9px; border-left: 1px dashed var(--linha); }
.arvore li { margin: 1px 0; }
.no { display: flex; align-items: center; gap: 4px; border-radius: 4px; }
.no > a {
    flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; min-width: 0;
    color: var(--grafite); text-decoration: none; font-size: 14px;
}
.no > a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.no > a:hover { background: var(--linha-2); }
.no.ativo > a { background: var(--prussia-claro); color: var(--prussia-escuro); font-weight: 600; box-shadow: inset 3px 0 0 var(--prussia); }
.no svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--grafite-3); }
.no.disciplina svg { color: var(--prussia); }
.no .qtd { font: 500 11px var(--f-mono); color: var(--grafite-3); margin-left: auto; }
.alternar { width: 22px; height: 22px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--grafite-3); border-radius: 3px; flex-shrink: 0; }
.alternar:hover { background: var(--linha-2); }
.alternar svg { width: 14px; height: 14px; transition: transform .15s; }
li.fechado > .no .alternar svg { transform: rotate(-90deg); }
li.fechado > ul { display: none; }
.alternar-vazio { width: 22px; flex-shrink: 0; }

/* Linhas de pasta na listagem do Explorar */
.lista-pastas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.cartao-pasta {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio);
    background: var(--folha); text-decoration: none; color: var(--grafite);
}
.cartao-pasta:hover { border-color: #B9CBDD; background: #FBFCFD; color: var(--prussia-escuro); }
.cartao-pasta svg { width: 22px; height: 22px; color: var(--grafite-3); flex-shrink: 0; }
.cartao-pasta.disciplina svg { color: var(--prussia); }
.cartao-pasta small { display: block; color: var(--grafite-3); font-size: 12px; }

/* ---------------------------------------------------------------- Lateral do protocolo */
.menu-lateral { position: sticky; top: 76px; }
.menu-lateral nav { display: flex; flex-direction: column; gap: 2px; }
.menu-lateral nav a {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 5px;
    color: var(--grafite-2); text-decoration: none; font-weight: 500;
}
.menu-lateral nav a svg { width: 18px; height: 18px; }
.menu-lateral nav a:hover { background: var(--linha-2); color: var(--grafite); }
.menu-lateral nav a.ativo { background: var(--folha); color: var(--prussia-escuro); box-shadow: inset 3px 0 0 var(--prussia), 0 0 0 1px var(--linha); font-weight: 600; }
.menu-lateral .rotulo-grupo { font: 600 10.5px var(--f-corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--grafite-3); margin: 18px 12px 6px; }
.menu-lateral .sub-itens a { padding-left: 40px; font-size: 14px; }

/* ---------------------------------------------------------------- Linha do fluxo */
.fluxo { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0 0 22px; padding: 0; }
.fluxo li { list-style: none; position: relative; padding: 12px 10px 0 0; font-size: 12.5px; color: var(--grafite-3); }
.fluxo li::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--linha); border-radius: 2px; margin-right: 6px;
}
.fluxo li strong { display: block; font: 600 13.5px var(--f-titulo); color: var(--grafite-2); margin-bottom: 1px; }
.fluxo li.feito::before { background: var(--prussia); }
.fluxo li.feito strong { color: var(--prussia-escuro); }
.fluxo li.atual::before { background: repeating-linear-gradient(-45deg, var(--etiqueta) 0 6px, #F5CF4A 6px 12px); }
.fluxo li.atual strong { color: var(--grafite); }

/* ---------------------------------------------------------------- Próxima ação */
.proxima {
    display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
    padding: 16px 18px; background: var(--folha); border: 1px solid var(--linha); border-left: 5px solid var(--etiqueta);
    border-radius: var(--raio); margin-bottom: 18px;
}
.proxima.neutra { border-left-color: var(--prussia); }
.proxima.ok { border-left-color: var(--conforme); }
.proxima h3 { margin-bottom: 2px; }
.proxima p { margin: 0; color: var(--grafite-2); }

/* ---------------------------------------------------------------- Tarefas */
.tarefa {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--linha-2); text-decoration: none; color: var(--grafite);
}
.tarefa:last-child { border-bottom: 0; }
.tarefa:hover { background: #FAFBFB; }
.tarefa .marcador { width: 4px; align-self: stretch; border-radius: 2px; background: var(--linha); }
.tarefa.novo .marcador { background: var(--etiqueta); }
.tarefa .t-titulo { font: 600 16px/1.25 var(--f-titulo); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tarefa .t-meta { color: var(--grafite-2); font-size: 13px; margin-top: 3px; display: flex; gap: 14px; flex-wrap: wrap; }
.tarefa .t-dir { text-align: right; font-size: 13px; color: var(--grafite-2); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--linha);
    background: var(--folha); color: var(--grafite-2); text-decoration: none; font-size: 13.5px; font-weight: 500;
}
.chip:hover { border-color: #B9CBDD; color: var(--prussia); }
.chip.ativo { background: var(--prussia); color: #fff; border-color: var(--prussia); }
.chip .n { font: 600 11.5px var(--f-mono); opacity: .8; }

/* ---------------------------------------------------------------- Checklist */
.formulario-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tag-form { display: inline-block; border: 1px solid var(--linha); border-radius: 18px; padding: 4px 14px; font-size: 13px; color: var(--grafite-2); background: var(--papel); margin-top: 8px; }
.questao { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 10px; scroll-margin-top: 80px; }
.questao:target { box-shadow: 0 0 0 3px rgba(232, 180, 0, .45); }
.questao-cab { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; }
.questao .numero { font: 600 15px/1.4 var(--f-mono); color: var(--prussia); }
.questao .q-titulo { font-weight: 500; line-height: 1.45; }
.questao .q-flags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.flag { font: 600 11px var(--f-corpo); letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; background: var(--prussia-claro); color: var(--prussia); }
.flag.desvio { background: #FDF0D5; color: #8A5A00; }
.questao-corpo { padding: 0 16px 14px 84px; }
.sub-lista { display: grid; gap: 8px; }
.sub-item { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px; background: var(--papel); border-radius: 5px; align-items: start; }
.sub-item .enun { font: 600 12.5px/1.35 var(--f-corpo); letter-spacing: .04em; text-transform: uppercase; color: var(--grafite-2); }
.sub-item .apoio { font-size: 14px; color: var(--grafite); white-space: pre-line; }
.questao.r-conforme { border-left: 4px solid var(--conforme); }
.questao.r-nao_conforme { border-left: 4px solid var(--nc); }
.questao.r-na { border-left: 4px solid var(--na); }
.resultado { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--f-corpo); padding: 3px 9px; border-radius: 3px; }
.resultado.conforme { background: var(--conforme-claro); color: var(--conforme); }
.resultado.nao_conforme { background: var(--nc-claro); color: var(--nc); }
.resultado.na { background: var(--na-claro); color: var(--na); }
.resultado.pendente { background: var(--papel); color: var(--grafite-3); border: 1px dashed var(--linha); }
.evidencias { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.evidencias a { display: block; width: 96px; height: 72px; border-radius: 4px; overflow: hidden; border: 1px solid var(--linha); background: var(--papel); }
.evidencias img { width: 100%; height: 100%; object-fit: cover; }
.desvio-box { margin-top: 12px; border: 1px solid #F1D98A; background: #FFFBEB; border-radius: 5px; padding: 12px 14px; }
.desvio-box h4 { font: 600 14px var(--f-titulo); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.desvio-box dl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.desvio-box dt { color: var(--grafite-2); font-weight: 600; font-size: 13px; }
.desvio-box dd { margin: 0; white-space: pre-line; }

.progresso { height: 6px; background: var(--linha-2); border-radius: 3px; overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--prussia); }
.progresso.ok > span { background: var(--conforme); }

.cartao-form {
    display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--linha-2); text-decoration: none; color: var(--grafite);
}
.cartao-form:last-child { border-bottom: 0; }
.cartao-form:hover { background: #FAFBFB; }
.cartao-form .num-form {
    width: 40px; height: 40px; border: 1.5px solid var(--grafite); display: grid; place-items: center;
    font: 600 16px var(--f-mono);
}
.cartao-form .f-titulo { font: 600 16px var(--f-titulo); }
.cartao-form .f-meta { font-size: 13px; color: var(--grafite-2); display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }

/* ---------------------------------------------------------------- Modelo do documento */
.etapas-modelo { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; margin-bottom: 18px; background: var(--folha); }
.etapas-modelo button {
    background: none; border: 0; border-left: 1px solid var(--linha); padding: 12px; font: inherit; cursor: pointer;
    color: var(--grafite-2); display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.etapas-modelo button:first-child { border-left: 0; }
.etapas-modelo button strong { font: 600 15px var(--f-titulo); }
.etapas-modelo button small { font: 500 11px var(--f-mono); color: var(--grafite-3); }
.etapas-modelo button.ativa { background: var(--prussia); color: #fff; }
.etapas-modelo button.ativa small { color: rgba(255, 255, 255, .7); }

.cab-preview { width: 100%; border-collapse: collapse; background: var(--folha); font-size: 12px; table-layout: fixed; }
.cab-preview td { border: 1px solid #9CA3AF; padding: 5px 8px; vertical-align: top; }
.cab-preview .r { display: block; font-size: 9.5px; color: #6B7280; }
.cab-preview .v { display: block; text-align: center; font-weight: 600; font-size: 13px; min-height: 17px; overflow-wrap: anywhere; }
.cab-preview .lado .v { text-align: left; }
.cab-preview .logo-cel { width: 22%; text-align: center; vertical-align: middle; }
.cab-preview .logo-cel img { max-height: 70px; }
.folha-doc { background: var(--folha); border: 1px solid var(--linha); box-shadow: var(--sombra); padding: 26px 30px; }
.conteudo-doc { line-height: 1.55; }
.conteudo-doc table { border-collapse: collapse; }
.conteudo-doc td, .conteudo-doc th { border: 1px solid #9CA3AF; padding: 4px 8px; }
.conteudo-doc img { height: auto; }

.jodit-container:not(.jodit_inline) { border-color: var(--linha) !important; border-radius: 5px !important; }

/* ---------------------------------------------------------------- Usuários associados */
.assoc { display: grid; gap: 6px; max-height: 420px; overflow: auto; padding-right: 4px; }
.assoc-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 210px); gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--linha-2); border-radius: 5px; }
.assoc-linha.marcado { border-color: #B9CBDD; background: #F7FAFC; }
.assoc-linha .quem { display: flex; gap: 10px; align-items: center; min-width: 0; }
.assoc-linha .quem div { min-width: 0; }
.assoc-linha .quem strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.assoc-linha .quem small { color: var(--grafite-3); }
.assoc-linha select { min-height: 34px; padding: 4px 8px; font-size: 14px; }
.pessoas { display: grid; gap: 8px; }
.pessoa { display: flex; gap: 10px; align-items: center; }
.pessoa .avatar { width: 32px; height: 32px; }
.pessoa div { line-height: 1.25; min-width: 0; }
.pessoa small { color: var(--grafite-3); display: block; }

/* ---------------------------------------------------------------- Anexos */
.anexos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.anexo { border: 1px solid var(--linha); border-radius: 5px; padding: 12px; display: flex; gap: 10px; align-items: center; background: var(--folha); min-width: 0; }
.anexo svg { width: 28px; height: 28px; color: var(--prussia); flex-shrink: 0; }
.anexo a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.anexo small { display: block; color: var(--grafite-3); }

/* ---------------------------------------------------------------- Linha do tempo (revisões) */
.linha-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linha-tempo::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px; background: var(--linha); }
.linha-tempo li { position: relative; padding: 0 0 18px 40px; }
.linha-tempo li .rev { position: absolute; left: 0; top: -2px; background: var(--papel); }
.linha-tempo .ponto { position: absolute; left: 9px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--folha); border: 2px solid var(--grafite-3); }
.linha-tempo .ponto.reprovado { border-color: var(--nc); }
.linha-tempo .ponto.aprovado { border-color: var(--conforme); }
.linha-tempo time { font: 400 12.5px var(--f-mono); color: var(--grafite-3); }

/* ---------------------------------------------------------------- Modal */
dialog.modal {
    border: 0; border-radius: 8px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
    box-shadow: 0 20px 60px rgba(11, 46, 77, .28); color: var(--grafite);
}
dialog.modal.largo { width: min(820px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(11, 30, 48, .45); }
.modal-cab { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--linha-2); }
.modal-cab h2 { font-size: 19px; color: var(--prussia-escuro); }
.modal-corpo { padding: 18px 20px; overflow: auto; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--linha-2); background: #FAFBFB; flex-wrap: wrap; }
.fechar { background: none; border: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; color: var(--grafite-2); display: grid; place-items: center; }
.fechar:hover { background: var(--linha-2); }
.fechar svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- Métricas */
.indicador { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; }
.indicador .valor { font: 600 34px/1 var(--f-titulo); margin: 6px 0 4px; }
.indicador .rot { font: 600 10.5px var(--f-corpo); letter-spacing: .14em; text-transform: uppercase; color: var(--grafite-3); }
.barras { display: grid; gap: 10px; }
.barra { display: grid; grid-template-columns: 190px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 14px; }
.barra .trilho { height: 14px; background: var(--linha-2); border-radius: 2px; overflow: hidden; display: flex; }
.barra .trilho span { display: block; height: 100%; }
.barra .n { font-family: var(--f-mono); text-align: right; color: var(--grafite-2); }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--grafite-2); margin-bottom: 12px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* ---------------------------------------------------------------- Acesso (login / assinatura) */
.publico { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.publico-arte {
    background: var(--prussia-escuro); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.publico-arte .marca img { height: 40px; }
.publico-arte h1 { font-size: 44px; line-height: 1.05; max-width: 15ch; font-weight: 600; }
.publico-arte .carimbo-mini { border: 1.5px solid rgba(255, 255, 255, .7); display: grid; grid-template-columns: 1.6fr 1fr 1fr; max-width: 520px; }
.publico-arte .carimbo-mini div { padding: 8px 12px; border-left: 1px solid rgba(255, 255, 255, .5); }
.publico-arte .carimbo-mini div:first-child { border-left: 0; }
.publico-arte .carimbo-mini span { display: block; font: 600 9px var(--f-corpo); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.publico-arte .carimbo-mini strong { font: 500 13px var(--f-mono); }
.publico-form { display: grid; place-items: center; padding: 40px 24px; }
.publico-caixa { width: min(420px, 100%); }
.publico-caixa h2 { font-size: 26px; margin-bottom: 6px; }
.publico-caixa .sub { color: var(--grafite-2); margin-bottom: 24px; }
.publico-unico { min-height: 100vh; padding: 28px 16px 60px; }
.publico-unico .caixa { max-width: 720px; margin: 0 auto; }
.publico-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--prussia-escuro); }
.publico-topo img { height: 32px; }

.passos { display: flex; gap: 8px; margin-bottom: 18px; }
.passos span { flex: 1; height: 4px; border-radius: 2px; background: var(--linha); }
.passos span.feito { background: var(--prussia); }
.quadro-assinatura { border: 1px dashed #9CA3AF; border-radius: 6px; background: #FCFCFD; position: relative; touch-action: none; }
.quadro-assinatura canvas { display: block; width: 100%; height: 190px; cursor: crosshair; }
.quadro-assinatura .linha-base { position: absolute; left: 24px; right: 24px; bottom: 44px; border-top: 1px solid var(--linha); pointer-events: none; }
.codigo-input { font: 600 26px var(--f-mono) !important; letter-spacing: .5em; text-align: center; }
.lista-signatarios { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.lista-signatarios li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--papel); border-radius: 5px; align-items: center; }

/* ---------------------------------------------------------------- Responsivo */
@media (max-width: 1080px) {
    .com-lateral, .com-lateral-dir { grid-template-columns: minmax(0, 1fr); }
    .menu-lateral { position: static; }
    .menu-lateral nav { flex-direction: row; flex-wrap: wrap; }
    .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carimbo { grid-template-columns: 1fr 1fr; }
    .carimbo .cel { border-left: 0 !important; border-top: 1px solid var(--grafite) !important; }
    .carimbo .cel:first-child { border-top: 0 !important; }
    .carimbo .titulo-doc { grid-column: 1 / -1; grid-row: auto; }
    .carimbo .cel:nth-child(2n+1):not(.titulo-doc) { border-left: 1px solid var(--grafite) !important; }
    .fluxo { grid-template-columns: repeat(3, 1fr); row-gap: 12px; }
}
@media (max-width: 760px) {
    .topo-in { padding: 0 12px; gap: 12px; }
    .marca-nome small, .usuario-btn .quem { display: none; }
    .pagina { padding: 18px 16px 48px; }
    .grade-2, .grade-3, .grade-4 { grid-template-columns: minmax(0, 1fr); }
    .publico { grid-template-columns: 1fr; }
    .publico-arte { padding: 28px 20px; gap: 24px; }
    .publico-arte h1 { font-size: 30px; }
    .questao-cab { grid-template-columns: 44px minmax(0, 1fr); }
    .questao-cab > :last-child { grid-column: 1 / -1; }
    .questao-corpo { padding-left: 16px; }
    .sub-item { grid-template-columns: 1fr; }
    .desvio-box dl { grid-template-columns: 1fr; }
    .assoc-linha { grid-template-columns: 1fr; }
    .barra { grid-template-columns: 110px minmax(0, 1fr) 36px; }
    .tarefa { grid-template-columns: auto minmax(0, 1fr); }
    .tarefa .t-dir { grid-column: 2; text-align: left; }
    .fluxo { grid-template-columns: repeat(2, 1fr); }
}

@media print {
    .topo, .menu-lateral, .acoes, .btn { display: none !important; }
    body { background: #fff; }
    .com-lateral { grid-template-columns: 1fr; }
}

/* Botões de escolha (ex.: número do formulário) */
.btn-sec.ativo { background: var(--prussia); color: #fff; border-color: var(--prussia); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.flag svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }

@media (max-width: 760px) {
    .marca-nome { display: none; }
    .topo-in { gap: 6px; }
    .nav a { padding: 0 10px; }
    .fluxo { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 4px; }
    .fluxo li { padding-right: 0; font-size: 0; }
    .fluxo li::before { margin-right: 0; }
    .fluxo li strong { display: none; }
    .fluxo li.atual strong { display: block; position: absolute; left: 0; top: 10px; white-space: nowrap; font-size: 13px; }
    .fluxo { margin-bottom: 34px; position: relative; }
    .menu-lateral nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
    .menu-lateral nav a { white-space: nowrap; border: 1px solid var(--linha); background: var(--folha); }
    .menu-lateral .sub-itens { display: none; }
    .carimbo .titulo-doc .val { font-size: 20px; }
}
.sino svg { width: 22px; height: 22px; }
.publico-topo .sutil { display: inline-flex; align-items: center; gap: 6px; }