/* Cofre de Certificados · identidade da família ClassIVA */
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(fontes/manrope-400.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(fontes/manrope-500.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(fontes/manrope-600.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(fontes/manrope-700.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:800;font-display:swap;src:url(fontes/manrope-800.woff2) format("woff2")}

:root{
  --topo:#0B3D45; --topo2:#082E34; --topo-texto:#FFFFFF; --topo-sub:#9EC2C7;
  --ac:#11606C; --ac-esc:#0D4F5A; --ac-claro:#E7F1F2; --link:#0F6A76; --destaque:#B5E14A; --destaque-esc:#7DB82E;
  --fundo:#F2F6F7; --card:#FFFFFF; --borda:#DFE8EA; --borda2:#EDF2F3;
  --texto:#24343A; --tit:#0A1E22; --muted:#5F7276; --whats:#25D366;
  --vermelho:#C0392B; --vermelho-claro:#FCEDEB;
  --laranja:#C2521A; --laranja-claro:#FDEEE5;
  --ambar:#A9620F; --ambar-claro:#FCF3E4;
  --ouro:#8A6D00; --ouro-claro:#FBF6DC;
  --verde:#2A7A4B; --verde-claro:#E8F5EC;
  --sombra:0 1px 2px rgba(11,61,69,.06),0 10px 28px -16px rgba(11,61,69,.22);
  --raio:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Manrope,'Segoe UI',Arial,sans-serif;background:var(--fundo);color:var(--texto);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
h1{font-size:24px;color:var(--tit);margin:0 0 4px;font-weight:800;letter-spacing:-.02em}
h2{font-size:15.5px;color:var(--tit);margin:0 0 14px;font-weight:700;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 22px}
.mono{font-family:Consolas,'SFMono-Regular',monospace;font-size:12.5px;letter-spacing:.02em}
::selection{background:var(--destaque);color:var(--tit)}

/* marca */
.wm{font-weight:500;letter-spacing:-.015em;white-space:nowrap}
.wm b{font-weight:800}

/* ---------------- estrutura ---------------- */
.app{display:flex;min-height:100vh}
.lateral{width:248px;flex:none;background:linear-gradient(180deg,var(--topo) 0%,var(--topo2) 100%);color:var(--topo-texto);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:20px 14px 16px;overflow:hidden;z-index:20}
.lateral::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:22px 22px;mask-image:linear-gradient(180deg,#000 0%,transparent 70%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%)}
.lateral>*{position:relative}
.lateral .marca{display:flex;align-items:center;gap:11px;padding:0 6px 20px}
.lateral .marca img{width:38px;height:38px;flex:none}
.lateral .marca .wm{font-size:15.5px;line-height:1.15;white-space:normal}
.lateral .marca small{display:block;font-size:11px;color:var(--topo-sub);margin-top:2px;letter-spacing:.01em}
.novo-rapido{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 4px 18px;padding:10px 12px;border-radius:11px;
  background:var(--destaque);color:var(--tit);font-weight:800;font-size:13.5px;box-shadow:0 8px 20px -10px rgba(181,225,74,.7)}
.novo-rapido:hover{text-decoration:none;filter:brightness(1.05)}
.novo-rapido svg{width:16px;height:16px}
.menu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:#D7E8EA;font-weight:600;margin-bottom:2px;transition:background .15s}
.menu a:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.menu a.ativo{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 3px 0 0 var(--destaque)}
.menu svg{width:18px;height:18px;flex:none;opacity:.9}
.menu .grupo{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--topo-sub);margin:18px 12px 6px;font-weight:700}
.selo{margin-top:auto;display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-size:12px;color:#D7E8EA}
.selo i{width:8px;height:8px;border-radius:50%;background:var(--destaque);flex:none;box-shadow:0 0 0 0 rgba(181,225,74,.6);animation:pulso 2.4s infinite}
.selo b{display:block;color:#fff;font-size:12.5px}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(181,225,74,.55)}70%{box-shadow:0 0 0 8px rgba(181,225,74,0)}100%{box-shadow:0 0 0 0 rgba(181,225,74,0)}}
.lateral .rodape{font-size:11px;color:var(--topo-sub);padding:12px 6px 0;line-height:1.55}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.topo{display:flex;align-items:center;gap:14px;padding:12px 30px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:10}
.busca{flex:1;max-width:460px;position:relative}
.busca svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.busca input[type=search]{width:100%;padding:9px 40px 9px 38px;border-radius:11px;border:1px solid var(--borda);background:var(--fundo);font:inherit}
.busca input[type=search]:focus{background:#fff}
.busca kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 11px Manrope,sans-serif;color:var(--muted);border:1px solid var(--borda);border-radius:6px;padding:1px 6px;background:#fff}
.chip-esc{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);background:var(--ac-claro);border-radius:10px;padding:5px 6px 5px 11px}
.chip-esc b{color:var(--tit)}
.chip-esc select{border:0;background:#fff;border-radius:8px;padding:5px 8px;font:600 13px Manrope,sans-serif;color:var(--tit);width:auto}
.chip-esc.fixo{padding:7px 12px}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--ac),var(--topo));color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.quem{font-size:13px;line-height:1.25;font-weight:700;color:var(--tit)}
.quem small{display:block;color:var(--muted);font-size:11.5px;font-weight:500}
.ico-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--borda);background:#fff}
.ico-btn:hover{color:var(--ac);border-color:var(--ac);text-decoration:none}
.ico-btn svg{width:17px;height:17px}
.menu-movel{display:none}
.conteudo{padding:28px 30px 48px;max-width:1320px;width:100%}

/* ---------------- componentes ---------------- */
.card{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);padding:20px 22px;margin-bottom:18px;box-shadow:var(--sombra)}
.card.lista{padding:4px 8px}
.card h2 .cont{color:var(--muted);font-weight:600;font-size:13px;margin-left:6px}
.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.lado-a-lado{display:grid;gap:18px;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}

.cabeca{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.cabeca .sub{margin:0}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);font-weight:800;margin:0 0 6px}

/* KPI */
.kpi{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);padding:15px 16px 14px;display:flex;flex-direction:column;color:inherit;font-weight:500;box-shadow:var(--sombra);position:relative;transition:transform .15s,border-color .15s}
.kpi:hover{text-decoration:none;transform:translateY(-2px);border-color:#C6D8DB}
.kpi .r{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;font-weight:600}
.kpi .r i{width:9px;height:9px;border-radius:3px;background:var(--cor,var(--ac));flex:none}
.kpi .n{font-size:30px;font-weight:800;color:var(--tit);line-height:1.1;margin-top:8px;letter-spacing:-.03em}
.kpi .barra{height:4px;border-radius:4px;background:var(--borda2);margin-top:auto;overflow:hidden}
.kpi .n{margin-bottom:12px}
.kpi .barra span{display:block;height:100%;border-radius:4px;background:var(--cor,var(--ac))}
.kpi.vencido{--cor:var(--vermelho)} .kpi.critico{--cor:var(--laranja)} .kpi.atencao{--cor:var(--ambar)}
.kpi.aviso{--cor:#C9A400} .kpi.ok{--cor:var(--verde)} .kpi.neutro{--cor:#8AA3A8}

/* faixa de destaque do painel */
.hero{position:relative;overflow:hidden;border-radius:18px;padding:26px 28px;margin-bottom:18px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,#1A7A86 0%,transparent 55%),linear-gradient(135deg,#0E4C55 0%,var(--topo) 60%,var(--topo2) 100%);
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;box-shadow:0 18px 40px -24px rgba(11,61,69,.7)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;
  mask-image:linear-gradient(90deg,transparent 30%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 100%)}
.hero>*{position:relative;z-index:1}
.hero h1{color:#fff;font-size:26px}
.hero p{margin:4px 0 0;color:#CFE3E6;max-width:560px}
.hero .eyebrow{color:var(--destaque)}
.anel{width:118px;height:118px;position:relative}
.anel svg{width:100%;height:100%;transform:rotate(-90deg)}
.anel .v{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.05}
.anel .v b{font-size:28px;font-weight:800;letter-spacing:-.03em}
.anel .v small{display:block;font-size:10.5px;color:var(--topo-sub);font-weight:600;letter-spacing:.04em;margin-top:3px}
.hero .acoes .btn.sec{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.hero .acoes .btn.sec:hover{background:rgba(255,255,255,.18)}
.hero .mini{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap;font-size:12.5px;color:#CFE3E6}
.hero .mini b{color:#fff;font-size:15px;margin-right:4px}

/* linha do tempo de vencimentos */
.tempo{position:relative;padding:34px 6px 8px}
.tempo .trilho{position:relative;height:56px}
.tempo .eixo{position:absolute;left:0;right:0;top:27px;height:2px;background:var(--borda)}
.tempo .faixa{position:absolute;top:22px;height:12px;border-radius:6px;opacity:.16}
.tempo .marca-t{position:absolute;top:36px;font-size:11px;color:var(--muted);transform:translateX(-50%);white-space:nowrap;font-weight:600}
.tempo .marca-t.ini{transform:none}.tempo .marca-t.ini::before{left:0}
.tempo .marca-t.fim{transform:translateX(-100%)}.tempo .marca-t.fim::before{left:auto;right:0}
.tempo .marca-t::before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:6px;background:#C4D3D6}
.tempo .hoje{position:absolute;top:-24px;bottom:22px;width:2px;background:var(--ac);transform:translateX(-1px)}
.tempo .hoje span{position:absolute;top:-2px;left:6px;font-size:11px;font-weight:800;color:var(--ac);white-space:nowrap}
.ponto{position:absolute;top:19px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--cor);border:2px solid #fff;box-shadow:0 0 0 1px var(--cor),0 4px 10px -3px rgba(0,0,0,.25);cursor:pointer;transition:transform .15s;display:block}
.ponto:hover,.ponto:focus{transform:scale(1.25);z-index:3;outline:none}
.ponto .dica{display:none;position:absolute;bottom:26px;left:50%;transform:translateX(-50%);background:var(--tit);color:#fff;padding:8px 11px;border-radius:9px;font-size:12px;font-weight:500;white-space:nowrap;line-height:1.4;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);z-index:5}
.ponto .dica b{display:block;font-weight:700}
.ponto:hover .dica,.ponto:focus .dica{display:block}
.ponto.vencido{--cor:var(--vermelho)} .ponto.critico{--cor:var(--laranja)} .ponto.atencao{--cor:var(--ambar)} .ponto.aviso{--cor:#C9A400} .ponto.ok{--cor:var(--verde)}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:600}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:10px;height:10px;border-radius:50%}

/* tabelas */
table{width:100%;border-collapse:separate;border-spacing:0}
th{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);text-align:left;font-weight:700;padding:11px 12px;border-bottom:1px solid var(--borda)}
td{padding:12px;border-bottom:1px solid var(--borda2);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.clica td{transition:background .12s}
tr.clica:hover td{background:#F4F9F9;cursor:pointer}
td .sec{display:block;color:var(--muted);font-size:12px;font-weight:500}
td b.nome{color:var(--tit);font-weight:700}
.direita{text-align:right}
.vazio{color:var(--muted);padding:34px 10px;text-align:center}
.vazio svg{display:block;margin:0 auto 10px;width:40px;height:40px;color:#B7CBCF}

/* vida útil */
.vida{display:flex;align-items:center;gap:8px;min-width:120px}
.vida .t{flex:1;height:6px;border-radius:6px;background:var(--borda2);overflow:hidden}
.vida .t span{display:block;height:100%;border-radius:6px;background:var(--cor,var(--ac))}
.vida small{font-size:11.5px;color:var(--muted);font-weight:700;width:32px;text-align:right}
.vida.vencido{--cor:var(--vermelho)} .vida.critico{--cor:var(--laranja)} .vida.atencao{--cor:var(--ambar)} .vida.aviso{--cor:#C9A400} .vida.ok{--cor:var(--verde)}

/* selos de situação */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px 4px 8px;border-radius:20px;white-space:nowrap;line-height:1.3}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.vencido{background:var(--vermelho-claro);color:var(--vermelho)}
.pill.critico{background:var(--laranja-claro);color:var(--laranja)}
.pill.atencao{background:var(--ambar-claro);color:var(--ambar)}
.pill.aviso{background:var(--ouro-claro);color:var(--ouro)}
.pill.ok{background:var(--verde-claro);color:var(--verde)}
.pill.sem,.pill.substituido,.pill.revogado{background:#EEF2F3;color:var(--muted)}
.pill.grande{font-size:13px;padding:7px 14px 7px 12px}
.tag{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:6px;background:var(--ac);color:#fff;letter-spacing:.04em}
.tag.a3{background:#5B7479}

/* formulários */
label{display:block;font-weight:700;font-size:13px;margin:0 0 6px;color:var(--tit)}
.campo{margin-bottom:15px}
.ajuda{font-size:12px;color:var(--muted);margin-top:5px}
input[type=text],input[type=password],input[type=email],input[type=date],input[type=number],input[type=search],select,textarea{
  width:100%;padding:10px 12px;border:1px solid #CBD9DC;border-radius:10px;font:inherit;background:#fff;color:var(--texto);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(17,96,108,.15)}
input[type=file]{font:inherit;width:100%;padding:16px;border:1.5px dashed #B7CBCF;border-radius:12px;background:#F8FBFB;cursor:pointer}
input[type=file]:hover{border-color:var(--ac);background:var(--ac-claro)}
input[type=file]::file-selector-button{font:700 13px Manrope,sans-serif;border:0;border-radius:8px;padding:8px 14px;margin-right:12px;background:var(--ac);color:#fff;cursor:pointer}
textarea{min-height:76px}
.check{display:flex;gap:9px;align-items:flex-start;font-weight:600}
.check input{margin-top:3px;accent-color:var(--ac);width:16px;height:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 17px;border-radius:10px;border:1px solid transparent;font:inherit;font-weight:700;cursor:pointer;
  background:var(--ac);color:#fff;text-decoration:none;transition:background .15s,transform .1s,box-shadow .15s;box-shadow:0 6px 16px -10px rgba(17,96,108,.8)}
.btn:hover{background:var(--ac-esc);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--destaque)}
.btn svg{width:16px;height:16px}
.btn.sec{background:#fff;border-color:#CBD9DC;color:var(--tit);box-shadow:none}
.btn.sec:hover{border-color:var(--ac);color:var(--ac)}
.btn.perigo{background:#fff;border-color:#E9BDB6;color:var(--vermelho);box-shadow:none}
.btn.perigo:hover{background:var(--vermelho-claro)}
.btn.lima{background:var(--destaque);color:var(--tit);box-shadow:0 6px 16px -10px rgba(125,184,46,.9)}
.btn.lima:hover{background:#A6D53A}
.btn.peq{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn:disabled{opacity:.55;cursor:default}
.acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px;background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:12px 14px}
.filtros .campo{margin:0}
.filtros label.check{text-transform:none;letter-spacing:0;font-size:13px;color:var(--tit);margin-bottom:9px}
.filtros label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.filtros input,.filtros select{width:auto;min-width:160px;padding:8px 10px}

/* avisos (caixas) */
div.aviso:not(.vida){padding:12px 15px;border-radius:12px;margin-bottom:16px;border:1px solid;font-weight:500}
div.aviso:not(.vida).ok{background:var(--verde-claro);border-color:#A9D9BA;color:#1F5E39}
div.aviso:not(.vida).erro{background:var(--vermelho-claro);border-color:#EDBBB3;color:#8E2A1F}
div.aviso:not(.vida).atencao{background:var(--ambar-claro);border-color:#EDCD9C;color:#7A4508}
div.aviso:not(.vida).info{background:var(--ac-claro);border-color:#B8D4D8;color:#0D4F5A}

.dados{display:grid;grid-template-columns:160px 1fr;gap:9px 14px;margin:0}
.dados dt{color:var(--muted);font-weight:500}
.dados dd{margin:0;color:var(--tit);font-weight:600;word-break:break-word}
.segredo{font-family:Consolas,monospace;font-size:17px;background:var(--fundo);border:1px dashed #A9C2C7;padding:10px 14px;border-radius:10px;display:inline-block;letter-spacing:.04em;user-select:all;word-break:break-all;max-width:100%;color:var(--tit)}
details.acao{border:1px solid var(--borda);border-radius:12px;padding:13px 16px;margin-bottom:10px;background:#fff;box-shadow:var(--sombra)}
details.acao summary{cursor:pointer;font-weight:700;color:var(--tit);list-style:none;display:flex;align-items:center;gap:10px}
details.acao summary::-webkit-details-marker{display:none}
details.acao summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details.acao[open] summary::after{transform:rotate(-135deg)}
details.acao summary .ic{width:30px;height:30px;border-radius:9px;background:var(--ac-claro);color:var(--ac);display:grid;place-items:center;flex:none}
details.acao summary .ic svg{width:16px;height:16px}
details.acao summary .ic.v{background:var(--vermelho-claro);color:var(--vermelho)}
details.acao[open] summary{margin-bottom:14px}

/* cartão do certificado (detalhe) */
.certcard{position:relative;overflow:hidden;border-radius:18px;padding:24px 26px;color:#fff;margin-bottom:18px;
  background:radial-gradient(90% 120% at 100% 0%,rgba(181,225,74,.16) 0%,transparent 50%),linear-gradient(135deg,#14707C 0%,var(--topo) 55%,var(--topo2) 100%);
  box-shadow:0 18px 40px -24px rgba(11,61,69,.75)}
.certcard::after{content:"";position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;border:38px solid rgba(255,255,255,.04)}
.certcard>*{position:relative;z-index:1}
.certcard .lin1{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.certcard .chip{width:42px;height:32px;border-radius:7px;background:linear-gradient(135deg,#E8F3C4,#B5E14A);position:relative;flex:none}
.certcard .chip::before{content:"";position:absolute;inset:7px 9px;border:1.5px solid rgba(11,61,69,.35);border-radius:3px}
.certcard .tipo{font-size:12px;font-weight:700;color:#CFE3E6;letter-spacing:.08em;text-transform:uppercase}
.certcard .icp{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.certcard h1{color:#fff;font-size:23px;margin:0}
.certcard .doc{font-family:Consolas,monospace;font-size:15px;color:#E6F1F2;letter-spacing:.06em;margin-top:4px}
.certcard .lin3{display:flex;gap:34px;margin-top:22px;flex-wrap:wrap;align-items:flex-end}
.certcard .lin3 small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--topo-sub);font-weight:700;margin-bottom:3px}
.certcard .lin3 b{font-size:15px}
.certcard .contagem{margin-left:auto;text-align:right}
.certcard .contagem b{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--destaque)}
.certcard .contagem b.mal{color:#FFB4A8}
.certcard .vida .t{background:rgba(255,255,255,.15)}
.certcard .vida small{color:#CFE3E6}

/* linha do histórico */
.hist{list-style:none;margin:0;padding:0}
.hist li{position:relative;padding:0 0 16px 22px}
.hist li::before{content:"";position:absolute;left:5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px var(--ac-claro)}
.hist li::after{content:"";position:absolute;left:8.5px;top:17px;bottom:2px;width:1px;background:var(--borda)}
.hist li:last-child::after{display:none}
.hist li.sens::before{background:var(--laranja);box-shadow:0 0 0 3px var(--laranja-claro)}
.hist b{color:var(--tit);font-weight:700}
.hist .sec{display:block;color:var(--muted);font-size:12px}

/* ---------------- login e páginas públicas ---------------- */
.tela-login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:#fff}
.vitrine{position:relative;overflow:hidden;color:#fff;padding:44px 52px;display:flex;flex-direction:column;
  background:radial-gradient(80% 70% at 85% 15%,#1A7A86 0%,transparent 60%),linear-gradient(160deg,#0E4C55 0%,var(--topo) 50%,var(--topo2) 100%)}
.vitrine::before{content:"";position:absolute;inset:0;opacity:.7;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:30px 30px;
  mask-image:radial-gradient(90% 80% at 70% 40%,#000 0%,transparent 80%);-webkit-mask-image:radial-gradient(90% 80% at 70% 40%,#000 0%,transparent 80%)}
.vitrine>*{position:relative;z-index:1}
.vitrine .marca{display:flex;align-items:center;gap:12px}
.vitrine .marca img{width:44px;height:44px}
.vitrine .marca .wm{font-size:19px}
.vitrine .chamada{margin-top:auto;max-width:470px}
.vitrine h1{color:#fff;font-size:36px;line-height:1.12;letter-spacing:-.03em;margin:0 0 14px}
.vitrine h1 em{font-style:normal;color:var(--destaque)}
.vitrine p{color:#CFE3E6;font-size:15px;margin:0 0 26px}
.vitrine ul{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:12px}
.vitrine li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:#E6F1F2}
.vitrine li svg{width:20px;height:20px;flex:none;color:var(--destaque);margin-top:1px}
.vitrine li b{display:block;color:#fff}
.vitrine .assin{margin-top:34px;font-size:11.5px;color:var(--topo-sub)}
.flutua{position:absolute;right:-30px;top:120px;width:270px;display:grid;gap:12px;transform:rotate(-6deg);opacity:.92;z-index:0}
.flutua div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:14px;padding:13px 15px;font-size:12px;color:#E6F1F2;animation:boia 7s ease-in-out infinite}
.flutua div:nth-child(2){margin-left:34px;animation-delay:-2.5s}
.flutua div:nth-child(3){margin-left:12px;animation-delay:-5s}
.flutua b{display:block;color:#fff;font-size:13px}
.flutua i{display:inline-block;font-style:normal;font-weight:800;font-size:10.5px;padding:2px 7px;border-radius:6px;margin-top:7px}
.flutua .ok{background:var(--destaque);color:var(--tit)} .flutua .al{background:#FFD9A8;color:#6A3A05} .flutua .vc{background:#FFC2B8;color:#7A1F14}
@keyframes boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.lado-form{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--fundo)}
.caixa-login{width:100%;max-width:410px;background:#fff;border:1px solid var(--borda);border-radius:18px;padding:32px 32px 26px;box-shadow:var(--sombra)}
.caixa-login .topo-c{text-align:center;margin-bottom:22px}
.caixa-login .topo-c img{width:58px;height:58px;display:none}
.caixa-login h2{font-size:22px;font-weight:800;text-align:center;margin:0 0 4px}
.caixa-login .btn{width:100%;padding:12px}
.caixa-login .rodape{text-align:center;font-size:11.5px;color:var(--muted);margin-top:24px;padding-top:16px;border-top:1px solid var(--borda2)}
.qr{display:flex;justify-content:center;margin:12px 0}
.qr svg{width:196px;height:196px;padding:10px;background:#fff;border:1px solid var(--borda);border-radius:14px}
.codigo{font-size:24px!important;letter-spacing:.35em;text-align:center;font-weight:800!important;font-family:Consolas,monospace!important}
.arquivos-lote td input{min-width:140px}
.opcao-2fa{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--borda);border-radius:14px;padding:15px 16px;margin-bottom:10px;color:var(--texto);font-weight:500;transition:border-color .15s,background .15s}
.opcao-2fa:hover{border-color:var(--ac);background:var(--ac-claro);text-decoration:none}
.opcao-2fa .ic{width:40px;height:40px;border-radius:11px;background:var(--ac-claro);color:var(--ac);display:grid;place-items:center;flex:none}
.opcao-2fa .ic svg{width:20px;height:20px}
.opcao-2fa b{display:block;color:var(--tit);margin-bottom:2px}
.opcao-2fa span{font-size:12.5px;color:var(--muted)}
.opcao-2fa.desligada{opacity:.6}
.opcao-2fa.desligada:hover{border-color:var(--borda);background:none}

/* entrada suave */
@media (prefers-reduced-motion:no-preference){
  .conteudo>*{animation:sobe .45s ease both}
  .conteudo>*:nth-child(2){animation-delay:.04s}.conteudo>*:nth-child(3){animation-delay:.08s}.conteudo>*:nth-child(4){animation-delay:.12s}.conteudo>*:nth-child(5){animation-delay:.16s}
}
@media (prefers-reduced-motion:reduce){.selo i,.flutua div{animation:none}}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* responsivo */
@media(max-width:1180px){.g6{grid-template-columns:repeat(3,1fr)}.hero{grid-template-columns:auto 1fr}.hero .acoes{grid-column:1/-1}}
@media(max-width:980px){.lado-a-lado{grid-template-columns:1fr}.tela-login{grid-template-columns:1fr}.vitrine{display:none}.caixa-login .topo-c img{display:inline-block}}
@media(max-width:860px){
  .lateral{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s}
  body.menu-aberto .lateral{transform:none;box-shadow:20px 0 40px rgba(0,0,0,.25)}
  .menu-movel{display:grid}
  .topo{padding:10px 16px}.busca kbd,.quem{display:none}
  .conteudo{padding:20px 16px}.g2,.g3,.g4{grid-template-columns:1fr}.g6{grid-template-columns:1fr 1fr}
  .hero{grid-template-columns:1fr;text-align:left}.dados{grid-template-columns:1fr}
}

/* quadro de renovações */
.quadro{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px}
.coluna{background:#E9F0F1;border-radius:var(--raio);padding:12px;min-height:220px}
.coluna header{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;padding:2px 4px}
.coluna header b{color:var(--tit);font-size:13.5px;flex:1;min-width:0}
.coluna header .n{margin-left:auto;background:#fff;border-radius:20px;font-size:11.5px;font-weight:800;padding:1px 9px;color:var(--ac)}
.coluna header small{width:100%;color:var(--muted);font-size:11.5px}
.coluna::before{content:"";display:block;height:3px;border-radius:3px;margin:-2px 2px 10px;background:var(--cor-col,#8AA3A8)}
.col-aberta{--cor-col:var(--laranja)} .col-avisado{--cor-col:var(--ambar)} .col-agendada{--cor-col:var(--ac)} .col-emitida{--cor-col:#3B8C99} .col-concluida{--cor-col:var(--verde)}
.cartao{display:block;background:#fff;border:1px solid var(--borda);border-radius:12px;padding:12px 13px;margin-bottom:10px;color:var(--texto);font-weight:500;box-shadow:0 1px 2px rgba(11,61,69,.06);transition:transform .12s,border-color .12s}
.cartao:hover{text-decoration:none;border-color:var(--ac);transform:translateY(-1px)}
.cartao b{display:block;color:var(--tit);font-size:13.5px;line-height:1.3}
.cartao .sec{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.cartao .rod{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.cartao.parado{border-color:#EDBBB3;box-shadow:0 0 0 3px var(--vermelho-claro)}
.alerta-parada{display:block;margin-top:9px;font-size:11.5px;font-weight:700;color:var(--vermelho)}
.mini-av{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--ac),var(--topo));color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:800}
.sem-resp{font-size:11px;color:var(--muted);font-style:italic;white-space:nowrap}
.vazia{color:var(--muted);font-size:12.5px;text-align:center;padding:18px 0;border:1.5px dashed #C9D8DB;border-radius:12px}

/* etapas da renovação no detalhe */
.passos{display:flex;gap:0;margin:4px 0 18px;counter-reset:p}
.passos li{list-style:none;flex:1;position:relative;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);padding-top:34px}
.passos li::before{counter-increment:p;content:counter(p);position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #C9D8DB;display:grid;place-items:center;font-size:12px;color:var(--muted);z-index:1}
.passos li::after{content:"";position:absolute;top:12px;left:-50%;width:100%;height:2px;background:#C9D8DB}
.passos li:first-child::after{display:none}
.passos li.feito{color:var(--ac)}
.passos li.feito::before{content:"✓";background:var(--ac);border-color:var(--ac);color:#fff}
.passos li.feito::after,.passos li.atual::after{background:var(--ac)}
.passos li.atual{color:var(--tit)}
.passos li.atual::before{border-color:var(--ac);color:var(--ac);box-shadow:0 0 0 4px var(--ac-claro)}
.passos{padding:0}
.bloco-acoes{display:grid;gap:10px}
.bloco-acoes form{margin:0}
.linha-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.linha-form .campo{margin:0;flex:1;min-width:140px}
.integridade{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:12px;margin-bottom:16px;font-weight:600}
.integridade.ok{background:var(--verde-claro);color:#1F5E39;border:1px solid #A9D9BA}
.integridade.mal{background:var(--vermelho-claro);color:#8E2A1F;border:1px solid #EDBBB3}
.integridade svg{width:22px;height:22px;flex:none}
@media(max-width:1180px){.quadro{grid-template-columns:repeat(5,240px)}}