/* BRIDA · Controle de Licenças — identidade: azul #21275A, laranja #EE662F */
:root {
  --azul: #21275A;
  --azul-2: #4A55C8;
  --azul-claro: #F2F3F8;
  --laranja: #EE662F;
  --laranja-escuro: #C74D21;
  --laranja-claro: #FDEEE7;
  --fundo: #E2E6F6;
  --superficie: #FFFFFF;
  --separador: #E4E6F0;
  --cinza-cab: #F2F3F8;
  --texto: #1B2050;
  --texto-2: #6A6F93;
  --verde: #1E8E5A;   --verde-bg: rgba(30, 142, 90, .1);
  --ambar: #9A6700;   --ambar-bg: #FFF1D6;
  --vermelho: #C8412B; --vermelho-bg: rgba(200, 65, 43, .1);
  --ardosia: #6A6F93; --ardosia-bg: #F2F3F8;
  --raio: 16px;
  --raio-sm: 10px;
  --sombra: 0 1px 2px rgba(33, 39, 90, .05), 0 8px 24px -12px rgba(33, 39, 90, .12);
  --fonte: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-num: "Sora", "Figtree", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: var(--fonte); font-size: 15px; line-height: 1.5; color: var(--texto); background: var(--fundo); }
a { color: var(--azul); }
a:hover { color: var(--laranja-escuro); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cabeçalho ---------- */
.topo { background: var(--azul); color: #fff; border-bottom: 3px solid var(--laranja); position: sticky; top: 0; z-index: 20; }
.topo__in { max-width: 1320px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; gap: 28px; }
.marca-brida { display: flex; align-items: baseline; gap: 10px; color: #fff; text-decoration: none; white-space: nowrap; }
.marca-brida:hover { color: #fff; }
.marca-brida__nome { font-weight: 800; font-size: 25px; letter-spacing: -.5px; line-height: 1; }
.marca-brida__nome span { color: var(--laranja); }
.marca-brida__app { font-weight: 500; font-size: 15px; opacity: .85; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.3); }
.nav { display: flex; gap: 4px; flex: 1; }
.nav a { color: rgba(255,255,255,.82); text-decoration: none; padding: 8px 12px; border-radius: var(--raio-sm); font-weight: 500; display: flex; align-items: center; gap: 8px; position: relative; }
.nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 3px; background: #fff; }
.contador { background: var(--laranja); color: #fff; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 0 7px; line-height: 19px; }
.usuario { display: flex; align-items: center; gap: 10px; }
.usuario__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--laranja); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.usuario__txt { line-height: 1.2; font-size: 13px; }
.usuario__txt small { display: block; opacity: .7; font-size: 12px; }
.usuario form button { background: none; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: var(--raio-sm); padding: 6px 8px; cursor: pointer; display: flex; }
.usuario form button:hover { background: rgba(255,255,255,.1); }
.menu-btn { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }

.faixa-demo { background: var(--laranja-claro); color: var(--laranja-escuro); text-align: center; font-size: 13px; padding: 6px 12px; border-bottom: 1px solid #f7cdb9; }

/* ---------- Página ---------- */
.pagina { margin: 0; }
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cab h1 { font-size: 26px; font-weight: 700; color: var(--azul); margin: 0; line-height: 1.2; letter-spacing: -.3px; }
.cab p { margin: 4px 0 0; color: var(--texto-2); }
.trilha { font-size: 13px; color: var(--texto-2); margin-bottom: 6px; }
.trilha a { color: var(--texto-2); }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: var(--raio-sm); border: 1px solid transparent; text-decoration: none; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.btn--prim { background: var(--laranja); color: #fff; }
.btn--prim:hover { background: var(--laranja-escuro); color: #fff; }
.btn--azul { background: var(--azul); color: #fff; }
.btn--azul:hover { background: var(--azul-2); color: #fff; }
.btn--sec { background: #fff; color: var(--azul); border-color: var(--separador); }
.btn--sec:hover { border-color: var(--azul); color: var(--azul); }
.btn--perigo { background: #fff; color: var(--vermelho); border-color: #f1b8b2; }
.btn--perigo:hover { background: var(--vermelho-bg); color: var(--vermelho); }
.btn--peq { padding: 6px 10px; font-size: 13px; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; align-self: flex-start; }

/* ---------- Cards superiores ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 20px 16px; text-decoration: none; color: inherit; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; border: 1px solid transparent; transition: border-color .15s; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--azul)); }
.card:hover { border-color: var(--c, var(--azul)); color: inherit; }
.card__rotulo { font-weight: 600; color: var(--texto-2); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.card__rotulo i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.card__valor { font-family: var(--fonte-num); font-size: 44px; font-weight: 700; color: var(--azul); line-height: 1.05; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.card__nota { font-size: 13px; color: var(--texto-2); }
.card__ir { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--azul); display: flex; align-items: center; gap: 4px; }
.card--vigente { --c: var(--verde); }
.card--a_vencer { --c: #E39A1B; }
.card--vencida { --c: var(--vermelho); }
.card--pendente { --c: var(--laranja); }
.card--sem_informacao { --c: var(--ardosia); }
.card.ativo { border-color: var(--c); }

/* ---------- Painéis/blocos ---------- */
.bloco { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 20px; }
.bloco__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--separador); }
.bloco__cab h2 { font-size: 17px; margin: 0; color: var(--azul); font-weight: 700; }
.bloco__cab a { font-size: 14px; font-weight: 600; }
.bloco__corpo { padding: 18px 20px; }
.grade-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }

/* ---------- Filtros ---------- */
.filtros { padding: 16px 20px; display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 12px 14px; align-items: end; }
.filtros .campo--busca { grid-column: span 1; }
.filtros__mais { display: contents; }
.filtros__barra { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--azul-claro); color: var(--azul); border-radius: 20px; padding: 3px 6px 3px 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.chip b { font-weight: 600; }
.chip span { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; line-height: 1; }
.chip:hover span { background: var(--azul); color: #fff; }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo label, .campo > span.rot { font-size: 13px; font-weight: 600; color: var(--texto); }
.campo .ajuda { font-size: 12.5px; color: var(--texto-2); }
.campo .erro { font-size: 13px; color: var(--vermelho); font-weight: 500; }
input[type=text], input[type=search], input[type=date], input[type=password], input[type=number], select, textarea {
  font: inherit; font-size: 14.5px; color: var(--texto); background: #fff; border: 1px solid #C9CDD6; border-radius: var(--raio-sm); padding: 8px 10px; width: 100%; min-height: 38px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: 2px solid rgba(33,39,90,.18); outline-offset: 0; }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--vermelho); }
input[type=file] { font: inherit; font-size: 14px; padding: 10px; border: 1px dashed #B7BCC8; border-radius: var(--raio-sm); background: #FAFBFC; width: 100%; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--azul); }
.form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.form-grade .largo { grid-column: 1 / -1; }
.secao-form { padding: 20px; border-bottom: 1px solid var(--separador); }
.secao-form:last-of-type { border-bottom: 0; }
.secao-form h2 { font-size: 16px; color: var(--azul); margin: 0 0 4px; }
.secao-form > p { margin: 0 0 16px; color: var(--texto-2); font-size: 14px; }
.rodape-form { padding: 16px 20px; display: flex; gap: 10px; justify-content: flex-end; background: var(--cinza-cab); border-radius: 0 0 var(--raio) var(--raio); flex-wrap: wrap; }
.opcoes-radio { display: flex; gap: 10px; flex-wrap: wrap; }
.opcoes-radio label { display: flex; align-items: center; gap: 8px; border: 1px solid #C9CDD6; border-radius: var(--raio-sm); padding: 10px 14px; cursor: pointer; font-weight: 600; }
.opcoes-radio input { accent-color: var(--azul); width: 17px; height: 17px; }
.opcoes-radio label:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.opcoes-radio ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Listview ---------- */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.tabela th { background: var(--cinza-cab); color: var(--azul); text-align: left; font-weight: 600; font-size: 13px; padding: 10px 14px; border-bottom: 1px solid var(--separador); white-space: nowrap; }
.tabela th a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.tabela th a:hover { color: var(--laranja-escuro); }
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--separador); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: #F8F9FC; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lic-nome { font-weight: 600; color: var(--azul); text-decoration: none; display: block; }
.lic-nome:hover { color: var(--laranja-escuro); text-decoration: underline; }
.lic-sub { font-size: 12.5px; color: var(--texto-2); }
.dias--vencida { color: var(--vermelho); font-weight: 600; }
.dias--a_vencer { color: var(--ambar); font-weight: 600; }
.etq-arq { font-size: 11.5px; font-weight: 600; background: var(--ardosia-bg); color: var(--ardosia); border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.etq-demo { font-size: 11px; font-weight: 600; color: var(--laranja-escuro); border: 1px solid #f3b79c; border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.etq-renov { display: inline-block; font-size: 12px; color: var(--azul); margin-top: 3px; }

/* Selo de validade (preenchido) */
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 20px; white-space: nowrap; }
.selo i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo--vigente { background: var(--verde-bg); color: var(--verde); }
.selo--a_vencer { background: var(--ambar-bg); color: var(--ambar); }
.selo--vencida { background: var(--vermelho-bg); color: var(--vermelho); }
.selo--sem_vencimento, .selo--vazio { background: var(--ardosia-bg); color: var(--ardosia); }
.selo--sem_informacao { background: var(--ardosia-bg); color: var(--ardosia); }
/* Marca de validação (contornada) — dimensão diferente da validade */
.marca { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 2px 9px 2px 3px; border-radius: 4px; border: 1px solid; white-space: nowrap; background: #fff; }
.marca b { width: 17px; height: 17px; border-radius: 3px; display: grid; place-items: center; color: #fff; font-size: 11px; }
.marca--pendente { color: var(--laranja-escuro); border-color: #f3b79c; }
.marca--pendente b { background: var(--laranja); }
.marca--aprovada { color: var(--azul); border-color: #B9BCD8; }
.marca--aprovada b { background: var(--azul); }
.marca--ajustes { color: var(--vermelho); border-color: #f1b8b2; }
.marca--ajustes b { background: var(--vermelho); }
.marca--rascunho { color: var(--ardosia); border-color: #D0D5DD; }
.marca--rascunho b { background: var(--ardosia); }

/* Menu de ações por linha (details/summary: funciona sem JS) */
.menu-acoes { position: relative; display: inline-block; }
.menu-acoes summary { list-style: none; cursor: pointer; border: 1px solid var(--separador); border-radius: var(--raio-sm); padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--azul); background: #fff; display: inline-flex; gap: 6px; align-items: center; }
.menu-acoes summary::-webkit-details-marker { display: none; }
.menu-acoes[open] summary { border-color: var(--azul); }
.menu-acoes ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; background: #fff; border: 1px solid var(--separador); border-radius: var(--raio-sm); box-shadow: 0 8px 24px rgba(33,39,90,.14); list-style: none; padding: 4px; margin: 0; min-width: 196px; }
.menu-acoes li + li { border-top: 1px solid #EEF0F4; }
.menu-acoes a, .menu-acoes span { display: flex; gap: 10px; align-items: center; padding: 8px 10px; font-size: 14px; text-decoration: none; color: var(--texto); border-radius: 4px; }
.menu-acoes a:hover { background: var(--azul-claro); color: var(--azul); }
.menu-acoes span { color: #A2A7B5; cursor: not-allowed; }
.menu-acoes .ico { width: 16px; height: 16px; }

/* Paginação */
.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--separador); flex-wrap: wrap; font-size: 14px; color: var(--texto-2); }
.paginacao nav { display: flex; gap: 4px; }
.paginacao a, .paginacao b { min-width: 34px; height: 34px; padding: 0 10px; display: grid; place-items: center; border-radius: var(--raio-sm); border: 1px solid var(--separador); text-decoration: none; background: #fff; }
.paginacao b { background: var(--azul); color: #fff; border-color: var(--azul); }

/* Listas simples do painel */
.lista-linhas { list-style: none; margin: 0; padding: 0; }
.lista-linhas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--separador); }
.lista-linhas li:last-child { border-bottom: 0; }
.vazio { padding: 32px 20px; text-align: center; color: var(--texto-2); }
.vazio strong { display: block; color: var(--texto); font-size: 16px; margin-bottom: 4px; }

/* Detalhe */
.cab-lic { background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px; border-left: 5px solid var(--azul); }
.cab-lic__topo { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cab-lic h1 { margin: 0; font-size: 24px; color: var(--azul); line-height: 1.2; }
.cab-lic__meta { display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--separador); }
.cab-lic__meta div { font-size: 13px; color: var(--texto-2); }
.cab-lic__meta strong { display: block; color: var(--texto); font-size: 15px; font-weight: 600; }
.estados { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--separador); margin-bottom: 16px; overflow-x: auto; }
.abas a { padding: 10px 16px; text-decoration: none; color: var(--texto-2); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas a[aria-current="page"] { color: var(--azul); border-bottom-color: var(--laranja); }
.abas a span { font-weight: 500; font-size: 12px; background: var(--cinza-cab); border-radius: 10px; padding: 1px 7px; margin-left: 4px; }
.dl { display: grid; grid-template-columns: 220px 1fr; margin: 0; }
.dl dt, .dl dd { padding: 11px 20px; border-bottom: 1px solid var(--separador); margin: 0; }
.dl dt { color: var(--texto-2); font-size: 14px; background: #FAFBFC; }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }
.aviso { border-radius: var(--raio-sm); padding: 12px 16px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.aviso--info { background: var(--azul-claro); color: var(--azul); }
.aviso--alerta { background: var(--ambar-bg); color: #6E4100; }
.aviso--erro { background: var(--vermelho-bg); color: #7A1810; }
.aviso--ok { background: var(--verde-bg); color: #0F5132; }
.aviso p { margin: 0; }

.versao { border-bottom: 1px solid var(--separador); }
.versao:last-child { border-bottom: 0; }
.versao__cab { padding: 16px 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.versao__num { font-family: var(--fonte-num); font-weight: 700; font-size: 15px; background: var(--azul); color: #fff; border-radius: 6px; padding: 2px 9px; margin-right: 8px; }
.versao--vigente .versao__num { background: var(--verde); }
.versao--analise .versao__num { background: var(--laranja); }
.versao__titulo { font-weight: 700; color: var(--azul); }
.versao__sit { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.versao__dados { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px 18px; padding: 0 20px 14px; font-size: 14px; }
.versao__dados small { display: block; color: var(--texto-2); font-size: 12.5px; }
.sub { padding: 0 20px 16px; }
.sub h3 { font-size: 13px; color: var(--texto-2); margin: 0 0 6px; font-weight: 600; }
.docs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--separador); border-radius: var(--raio-sm); }
.docs li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--separador); font-size: 14px; flex-wrap: wrap; }
.docs li:last-child { border-bottom: 0; }
.doc-arquivo-info { display: flex; flex: 1 1 260px; min-width: 0; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.doc-datahora { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin-top: 5px; padding: 4px 9px; border: 1px solid #D9DDF0; border-radius: 6px; background: #F1F3FB; color: var(--azul); font-size: 12.5px; line-height: 1.35; }
.doc-datahora strong { font-family: var(--fonte-num); font-size: 13px; font-weight: 800; }
.doc-tipo { font-family: var(--fonte-num); font-size: 11px; font-weight: 700; color: #fff; background: var(--vermelho); border-radius: 3px; padding: 1px 5px; margin-right: 8px; }
.doc-tipo--img { background: var(--azul-2); }
.decisao { font-size: 14px; border-left: 3px solid var(--azul); padding: 6px 12px; background: #FAFBFC; margin-bottom: 6px; }
.decisao--ajustes { border-color: var(--vermelho); }

/* Linha do tempo do histórico */
.tempo { list-style: none; margin: 0; padding: 8px 20px 12px; }
.tempo li { position: relative; padding: 10px 0 14px 30px; border-bottom: 1px solid var(--separador); }
.tempo li:last-child { border-bottom: 0; }
.tempo li::before { content: ""; position: absolute; left: 6px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--t, var(--azul)); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--t, var(--azul)); }
.tempo__topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tempo__tipo { font-weight: 700; color: var(--t, var(--azul)); font-size: 13px; }
.tempo__quando { font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.tempo__desc { margin: 2px 0 0; }
.tempo__obs { margin: 6px 0 0; font-size: 14px; background: #FAFBFC; border: 1px solid var(--separador); border-radius: var(--raio-sm); padding: 8px 10px; white-space: pre-line; }
.tempo__mud { margin: 6px 0 0; font-size: 13px; border-collapse: collapse; }
.tempo__mud td { padding: 3px 10px 3px 0; vertical-align: top; }
.tempo__mud del { color: var(--vermelho); }
.tempo__mud ins { color: var(--verde); text-decoration: none; }
.t-cadastro { --t: var(--azul); } .t-alteracao { --t: #5B6075; } .t-documento { --t: #2E6DB4; }
.t-aprovacao { --t: var(--verde); } .t-ajustes { --t: var(--vermelho); } .t-renovacao { --t: var(--laranja); }
.t-arquivamento, .t-reativacao { --t: var(--ardosia); } .t-alerta { --t: #C27C0E; }

.filtro-hist { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--separador); }
.filtro-hist a { font-size: 13px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--separador); text-decoration: none; color: var(--texto-2); }
.filtro-hist a[aria-current="true"] { background: var(--azul); color: #fff; border-color: var(--azul); }

.bloco-config { border: 1px solid var(--separador); border-radius: var(--raio-sm); padding: 14px; margin: 14px 0; min-width: 0; }
.bloco-config legend { padding: 0 6px; color: var(--azul); font-weight: 700; }
.grupo-check { border: 1px solid var(--separador); border-radius: var(--raio-sm); padding: 14px; margin: 16px 0 0; }
.grupo-check legend { padding: 0 6px; font-weight: 600; color: var(--azul); }
.grupo-check .check { display: flex; padding: 8px 0; }
.lista-cliente { display: grid; gap: 14px; }
.card-cliente { display: grid; grid-template-columns: minmax(0,2fr) minmax(150px,1fr) minmax(170px,1fr) minmax(120px,1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); min-width: 0; }
.card-cliente > * { min-width: 0; }
.rotulo-cliente { display: block; color: var(--texto-2); font-size: 12px; font-weight: 600; margin-bottom: 4px; }

/* Mensagens */
.mensagens { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.msg { padding: 12px 16px; border-radius: var(--raio-sm); font-size: 14px; border-left: 4px solid; background: #fff; box-shadow: var(--sombra); }
.msg--success { border-color: var(--verde); }
.msg--error { border-color: var(--vermelho); }
.msg--warning { border-color: #E39A1B; }
.msg--info { border-color: var(--azul); }

/* Login */
.demo-contas { margin-top: 28px; font-size: 13px; color: var(--texto-2); border-top: 1px solid var(--separador); padding-top: 16px; }
.demo-contas table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.demo-contas td { padding: 5px 0; border-bottom: 1px solid #EEF0F4; }
.demo-contas code { font-size: 12.5px; color: var(--azul); }

.pre-img { max-width: 100%; border: 1px solid var(--separador); border-radius: var(--raio-sm); }
.pre-pdf { width: 100%; height: 520px; border: 1px solid var(--separador); border-radius: var(--raio-sm); }

/* ---------- Layout compartilhado ----------
   Uma só régua de largura para todas as telas. O grid .app já desconta o menu
   (84 px recolhido, 260 px expandido); dentro da área restante, barra superior e
   conteúdo usam o mesmo recuo lateral e o conteúdo ocupa toda a área útil
   (limite só para monitores ultralargos, --conteudo-max). Os componentes se adaptam à largura real dessa área
   (container queries), e não à janela: abrir ou recolher o menu recalcula
   cards, filtros, grades e listas. */
:root { --conteudo-max: 2560px; --margem: clamp(12px, 2.6vw, 48px); }

/* Texto longo quebra em vez de cortar ou empurrar a página */
.cab > div, .cab-lic__topo > div:first-child { min-width: 0; }
.cab h1, .cab-lic h1, .lic-nome, .situacao__item strong, .proximo__txt strong, .dl dd, .docs a { overflow-wrap: anywhere; }

/* Cards: 4 -> 2 -> 1 colunas conforme o espaço real */
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container area (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@container area (max-width: 440px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .card { padding: 14px 16px; }
}

/* Grades de duas colunas e listas internas */
@container area (max-width: 1000px) {
  .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .versao__dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container area (max-width: 640px) {
  .form-grade { grid-template-columns: minmax(0, 1fr); }
  .dl { grid-template-columns: minmax(0, 1fr); }
  .dl dt { border-bottom: 0; padding-bottom: 2px; background: none; font-size: 12.5px; }
  .dl dd { padding-top: 0; }
  .menu-acoes ul { left: 0; right: auto; }
}

/* Filtros: busca mais larga no desktop; colunas diminuem sem comprimir campos */
.btn-mais-filtros { display: none; }
@container area (max-width: 1000px) {
  .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtros .campo--busca:first-child { grid-column: 1 / -1; }
}
@container area (max-width: 680px) {
  .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
  .filtros:not(.expandido) .f-extra { display: none; }
  .btn-mais-filtros { display: inline-flex; justify-content: center; }
}
@container area (max-width: 420px) {
  .filtros { grid-template-columns: minmax(0, 1fr); }
}

/* Listview: colunas no desktop; linhas empilhadas com rótulos quando falta espaço */
.tabela .cel-nome { min-width: 220px; }
/* Tabela de largura fixa: a coluna do nome recebe a maior fatia; ações ficam do tamanho do botão */
.tabela thead th:first-child { width: 26%; }
.tabela thead th:last-child { width: 156px; }
.tabela--alertas thead th:last-child { width: 186px; }
.tabela .cel-acoes { text-align: right; }
.tabela td[data-rot] { overflow-wrap: break-word; }
.tabela th, .tabela td { padding-left: 10px; padding-right: 10px; }
.tabela th:first-child, .tabela td:first-child { padding-left: 18px; }
.tabela th:last-child, .tabela td:last-child { padding-right: 16px; }
.menu-acoes summary { white-space: nowrap; }
.tabela .cel-acoes { width: 1%; }
@container area (max-width: 1080px) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border-bottom: 1px solid var(--separador); padding: 14px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .tabela tbody tr:last-child { border-bottom: 0; }
  .tabela td, .tabela td:first-child, .tabela td:last-child { border: 0; padding: 0; min-width: 0; }
  .tabela td[data-rot]::before { content: attr(data-rot); display: block; font-size: 11.5px; color: var(--texto-2); font-weight: 600; margin-bottom: 2px; }
  .tabela td.cel-nome, .tabela td.cel-acoes { grid-column: 1 / -1; }
  .tabela .cel-nome { min-width: 0; }
  .tabela .num { text-align: left; }
  .tabela-wrap { overflow: visible; }
  .tabela td .selo, .tabela td .marca { max-width: 100%; white-space: normal; }
  .tabela td.cel-acoes { width: auto; }
  .tabela td.cel-acoes .btn { width: 100%; justify-content: center; }
}
@container area (max-width: 400px) {
  .tabela tr { grid-template-columns: minmax(0, 1fr); }
}

/* Cartões do cliente */
@container area (max-width: 900px) {
  .card-cliente { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; }
  .card-cliente > div:first-child, .card-cliente > .btn { grid-column: 1 / -1; }
  .card-cliente > .btn { justify-content: center; }
}
@container area (max-width: 440px) {
  .card-cliente { grid-template-columns: minmax(0, 1fr); }
}

/* Somente o que depende da janela (não da área): menu antigo do topo e login */
@media (max-width: 900px) {
  .menu-btn { display: flex; margin-left: auto; }
  .usuario__txt { display: none; }
  .nav { display: none; position: absolute; top: 63px; left: 0; right: 0; background: var(--azul); flex-direction: column; padding: 8px 12px 14px; border-bottom: 3px solid var(--laranja); }
  .topo.aberto .nav { display: flex; }
  .nav a[aria-current="page"]::after { display: none; }
  .topo__in { gap: 12px; }
}
@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .cab h1 { font-size: 22px; }
  .marca-brida__app { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.bloco__cab a { white-space: nowrap; }

/* App shell adapted from the navigation prototype. */
html, body { min-height: 100%; }
body { overflow-x: clip; font-size: 15px; -webkit-font-smoothing: antialiased; }
.app { min-height: 100vh; display: grid; grid-template-columns: 84px minmax(0, 1fr); transition: grid-template-columns .25s ease; }
.app.expandido { grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 30; height: 100vh; height: 100dvh; min-width: 0; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid rgba(33,39,90,.08); background: var(--nav-bg-c); color: var(--azul); transition: background-color .25s ease; }
.app.expandido .sidebar { background: var(--nav-bg); }
.sidebar__brand { flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0 10px; }
.sidebar__logo { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--azul); font-size: 10.5px; text-decoration: none; white-space: nowrap; }
.sidebar__logo img { width: 36px; height: 36px; object-fit: contain; background: transparent; }
.sidebar__toggle { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--azul); background: transparent; cursor: pointer; }
.sidebar__toggle:hover { background: rgba(255,255,255,.55); }
.menu-lateral { min-width: 0; flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.menu-lateral a { position: relative; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 2px; border-radius: 10px; color: var(--azul); text-align: center; text-decoration: none; font-size: 10.5px; font-weight: 600; line-height: 1.15; }
.menu-lateral a:hover { background: rgba(255,255,255,.72); }
.menu-lateral a[aria-current="page"] { background: rgba(33,39,90,.13); }
.menu-lateral a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--laranja); }
.menu-lateral .ico { width: 21px; height: 21px; }
.menu-lateral .contador { position: absolute; top: 3px; right: 3px; font-size: 10px; line-height: 16px; padding: 0 5px; }
.sidebar__foot { display: none; flex: none; padding: 14px 20px 18px; border-top: 1px solid rgba(33,39,90,.08); color: rgba(33,39,90,.58); font-size: 11.5px; }
.app.expandido .sidebar__brand { flex-direction: row; justify-content: space-between; gap: 8px; height: 104px; padding: 18px 14px; }
.app.expandido .sidebar__logo { flex-direction: row; gap: 10px; font-size: 15px; font-weight: 700; }
.app.expandido .sidebar__logo img { width: 40px; height: 40px; }
.app.expandido .menu-lateral { padding: 10px 16px 16px; gap: 5px; }
.app.expandido .menu-lateral a { min-height: 48px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; text-align: left; font-size: 14px; }
.app.expandido .menu-lateral a[aria-current="page"] { background: rgba(255,255,255,.68); }
.app.expandido .menu-lateral .contador { position: static; margin-left: auto; }
.app.expandido .sidebar__foot { display: block; }
.app__main { min-width: 0; }
.topbar-app { position: sticky; top: 0; z-index: 20; min-height: 68px; display: flex; align-items: center; gap: 16px; padding-block: 0; padding-inline: max(var(--margem), calc((100% - var(--conteudo-max)) / 2)); border-bottom: 1px solid var(--separador); background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(10px); }
.crumb-app { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--texto-2); font-size: 12.5px; }
.crumb-app strong { color: var(--texto); font-weight: 600; }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.usuario__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); border: 1px solid var(--separador); color: var(--azul); font-size: 13px; font-weight: 700; }
.usuario__txt { font-size: 13px; line-height: 1.2; }
.usuario__txt small { display: block; color: var(--texto-2); font-size: 11.5px; }
.usuario form { margin: 0; }
.usuario form button { display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 8px; border: 1px solid var(--separador); border-radius: var(--raio-sm); color: var(--azul); background: var(--superficie); cursor: pointer; }
.menu-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--separador); border-radius: 10px; color: var(--texto); background: var(--superficie); cursor: pointer; }
.btn-voltar { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 8px; border: 1px solid var(--separador); border-radius: 10px; background: #fff; color: var(--azul); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-voltar .ico { width: 18px; height: 18px; transform: rotate(180deg); }
.btn-voltar:hover { border-color: var(--azul); }
.voltar-pagina { margin: 0 0 16px; }
.scrim { display: none; }
.pagina { width: 100%; max-width: none; margin: 0; padding-block: 24px 56px; padding-inline: max(var(--margem), calc((100% - var(--conteudo-max)) / 2)); container: area / inline-size; }
.faixa-demo { margin: 0; border-bottom-color: var(--separador); }
.cab h1 { font-family: var(--fonte-num); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.02em; }
.card { border: 1px solid var(--separador); border-radius: var(--raio); box-shadow: var(--sombra); }
.card::before { display: none; }
.card__valor { font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -.02em; }
.card--pendente .card__valor { color: #fff; }
.card--pendente { background: var(--azul); border-color: var(--azul); color: #fff; }
.card--pendente .card__rotulo, .card--pendente .card__nota, .card--pendente .card__ir { color: rgba(255,255,255,.75); }
.card--pendente .card__rotulo i { background: var(--laranja); }
.bloco { border: 1px solid var(--separador); border-radius: var(--raio); box-shadow: var(--sombra); }
.btn { min-height: 40px; border-radius: 10px; }
.filtros input, .filtros select, .campo input, .campo select, .campo textarea { min-height: 44px; border-radius: 10px; border: 1.5px solid #A9B0CC; background-color: #fff; box-shadow: inset 0 1px 2px rgba(33,39,90,.06); }
.filtros input:hover, .filtros select:hover, .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #7C84AE; }
.filtros input:focus, .filtros select:focus, .campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px rgba(74,85,200,.22); background-color: #fff; }
.campo input::placeholder, .campo textarea::placeholder, .filtros input::placeholder { color: #8A90AE; }
.campo input[type=file] { padding: 8px 10px; border-style: dashed; background-color: var(--azul-claro); cursor: pointer; }
.campo input[type=checkbox], .campo input[type=radio] { min-height: 0; box-shadow: none; }
.campo textarea { min-height: auto; }
.btn--prim { background: var(--laranja); }
.btn--prim:hover { background: var(--laranja-escuro); }

@media (max-width: 760px) {
  .app, .app.expandido { display: block; min-height: 100vh; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100dvh; transform: translateX(-100%); background: var(--nav-bg); transition: transform .25s ease; }
  .app.menu-aberto .sidebar { transform: translateX(0); }
  .app.menu-aberto .scrim { display: block; position: fixed; inset: 0; z-index: 25; width: 100%; height: 100%; border: 0; background: rgba(13,16,39,.45); }
  .sidebar__brand, .app.expandido .sidebar__brand { height: 96px; flex-direction: row; justify-content: space-between; padding: 14px 18px; }
  .sidebar__logo, .app.expandido .sidebar__logo { flex-direction: row; gap: 10px; font-size: 15px; font-weight: 700; }
  .menu-lateral, .app.expandido .menu-lateral { padding: 8px 14px 16px; gap: 5px; }
  .menu-lateral a, .app.expandido .menu-lateral a { min-height: 48px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px; text-align: left; font-size: 14px; }
  .app.expandido .sidebar__foot { display: block; }
  .menu-btn { display: flex; flex: none; }
  .topbar-app { min-height: 62px; gap: 10px; }
  .usuario__txt { display: none; }
  .usuario { gap: 6px; }
  .usuario form button { min-width: 36px; min-height: 36px; }
  .pagina { padding-block: 18px 40px; }
}
@media (max-width: 420px) {
  .crumb-app { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .app, .sidebar, .menu-lateral a { transition: none; } }

/* ==========================================================================
   Orientação para usuários leigos (situação, próximo passo, ajuda nos campos)
   Usa somente os tokens da identidade do protótipo.
   ========================================================================== */
[hidden] { display: none !important; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--azul); color: #fff; padding: 10px 14px; border-radius: var(--raio-sm); font-weight: 600; }
.pular:focus { top: 12px; color: #fff; }
.pagina:focus { outline: none; }

/* Campos: obrigatório / opcional, ajuda, exemplo e erro */
.exig { font-size: 11.5px; font-weight: 600; color: var(--texto-2); background: var(--ardosia-bg); border-radius: 10px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
.exig--obrig { color: var(--laranja-escuro); background: var(--laranja-claro); }
.exig--envio { color: var(--azul); background: var(--azul-claro); }
.campo .ajuda { line-height: 1.45; }
.campo .exemplo { display: block; color: var(--texto-2); font-style: italic; }
.campo .erro { display: flex; gap: 6px; align-items: flex-start; }
.campo .erro b, .msg b, .ajuste h2 b { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; color: #fff; background: var(--vermelho); }
.campo--erro label, .campo--erro .rot { color: var(--vermelho); }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-width: 2px; background: #FFFBFA; }
fieldset.secao-form { border: 0; border-bottom: 1px solid var(--separador); margin: 0; min-width: 0; }
fieldset.secao-form legend { font-size: 16px; font-weight: 700; color: var(--azul); padding: 0; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; float: left; width: 100%; }
fieldset.secao-form legend + * { clear: both; }
.passo { width: 26px; height: 26px; border-radius: 50%; background: var(--azul); color: #fff; display: inline-grid; place-items: center; font-size: 13px; font-family: var(--fonte-num); flex: none; }
.opcoes-radio { flex-direction: column; gap: 8px; }
.opcoes-radio label { font-weight: 500; min-height: 44px; }
.rodape-form--explicado { flex-direction: column; align-items: stretch; gap: 12px; }
.rodape-form__nota { margin: 0; font-size: 14px; color: var(--texto); }
.rodape-form__botoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.resumo-erros { flex-direction: column; }
.resumo-erros ul { margin: 8px 0; padding-left: 20px; }
.resumo-erros a { color: inherit; font-weight: 600; }
.resumo-erros p + p { margin-top: 4px; }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg--success b { background: var(--verde); }
.msg--warning b { background: #E39A1B; }
.msg--info b { background: var(--azul); }

/* Situação agora */
.situacao { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--separador); }
.situacao__item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.situacao__item strong { font-size: 16px; color: var(--azul); }
.situacao__rot { font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--texto-2); }
.situacao__desc { font-size: 13.5px; color: var(--texto-2); line-height: 1.4; }
.proximo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border-radius: var(--raio-sm); background: var(--azul-claro); border-left: 4px solid var(--azul); }
.proximo--agir { background: var(--laranja-claro); border-left-color: var(--laranja); }
.proximo__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.proximo__txt strong { color: var(--azul); font-size: 15.5px; }
.proximo__voce { font-size: 14px; color: var(--texto); }
.proximo--agir .proximo__voce { font-weight: 700; color: var(--laranja-escuro); }
.proximo__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.proximo__acoes form { margin: 0; }

/* Ajustes solicitados: destaque junto da ação de corrigir */
.ajuste { background: #fff; border: 1px solid #f1b8b2; border-left: 5px solid var(--vermelho); border-radius: var(--raio); padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--sombra); }
.ajuste h2 { font-size: 16px; color: var(--vermelho); margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.ajuste blockquote { margin: 0 0 6px; padding: 10px 14px; background: var(--vermelho-bg); border-radius: var(--raio-sm); color: #7A1810; font-size: 15px; }
.ajuste p { margin: 6px 0; }
.ajuste__acoes, .envio__acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Lista do que falta / documentos pedidos */
.envio { margin-bottom: 20px; }
.envio .bloco__corpo { padding: 16px 20px; }
.envio p { margin: 0 0 10px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checklist li { display: flex; gap: 8px; align-items: baseline; font-size: 14.5px; }
.checklist b { width: 18px; flex: none; text-align: center; color: var(--texto-2); }
.checklist__falta b { color: var(--laranja-escuro); }
.checklist__ok b, b.ok { color: var(--verde); }
.checklist__ok { color: var(--texto-2); }
.checklist--info { margin-bottom: 14px; }
.sub-titulo { font-size: 14px; color: var(--azul); margin: 18px 0 6px; }

/* Visão geral: grupos de indicadores */
.grupo-cab { margin: 4px 0 10px; }
.grupo-cab h2 { font-size: 15px; color: var(--azul); margin: 0; }
.grupo-cab p { margin: 2px 0 0; font-size: 13.5px; color: var(--texto-2); }
.card__nota { line-height: 1.4; }
.vazio--grande { padding: 48px 24px; }
.vazio__acao { margin-top: 14px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* Legenda das situações (sem depender de tooltip) */
.legenda { border-top: 1px solid var(--separador); }
.legenda summary { padding: 12px 20px; cursor: pointer; font-weight: 600; color: var(--azul); font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.legenda__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 4px 20px 18px; }
.legenda h3 { font-size: 13.5px; color: var(--azul); margin: 0 0 8px; }
.legenda dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; margin: 0; align-items: center; }
.legenda dd { margin: 0; font-size: 13.5px; color: var(--texto); }

/* Conferência e configurações */
.decisoes-explicadas { margin: 0 0 16px; padding-left: 18px; font-size: 14px; display: grid; gap: 6px; }
.passos-config { list-style: none; display: flex; gap: 10px 24px; flex-wrap: wrap; padding: 0; margin: -6px 0 18px; font-size: 14px; color: var(--texto); }
.passos-config li { display: flex; gap: 8px; align-items: center; }
.passos-config b { width: 22px; height: 22px; border-radius: 50%; background: var(--laranja); color: #fff; display: inline-grid; place-items: center; font-size: 12px; }
.lista-linhas li.ativo { background: var(--azul-claro); }
.nota-rodape { margin-top: 16px; }
.grade-2--form { align-items: start; }

/* Toque confortável e leitura no celular */
@media (pointer: coarse) {
  .btn, .chip, .paginacao a, .paginacao b { min-height: 44px; }
  .btn--peq { min-height: 40px; padding: 8px 14px; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
}
@container area (max-width: 900px) {
  .situacao { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container area (max-width: 700px) {
  .legenda__grade { grid-template-columns: minmax(0, 1fr); }
}
@container area (max-width: 600px) {
  .rodape-form__botoes { justify-content: stretch; }
  .rodape-form__botoes .btn { flex: 1 1 100%; justify-content: center; white-space: normal; text-align: center; }
  .proximo__acoes { width: 100%; }
  .proximo__acoes .btn, .proximo__acoes form, .proximo__acoes form .btn { flex: 1 1 100%; justify-content: center; width: 100%; }
  .cab-lic .acoes .btn { white-space: normal; }
}
@container area (max-width: 440px) {
  .situacao { grid-template-columns: minmax(0, 1fr); }
  .btn { white-space: normal; }
}

@container area (max-width: 760px) {
  .bloco__cab { flex-wrap: wrap; }
}
.tabela td .selo, .tabela td .marca { white-space: normal; line-height: 1.3; }


/* ---------- Temas do portal (os mesmos três do protótipo: laranja, azul, cinza) ---------- */
:root, :root[data-skin="azul"] { --fundo: #E2E6F6; --nav-bg: #C2C9EA; --nav-bg-c: color-mix(in srgb, #C2C9EA 80%, #21275A); }
:root[data-skin="laranja"] { --fundo: #F4EEE7; --nav-bg: #FCE3D8; --nav-bg-c: color-mix(in srgb, #FCE3D8 80%, #EE662F); }
:root[data-skin="cinza"] { --fundo: #ECEDF3; --nav-bg: #D3D4DE; --nav-bg-c: color-mix(in srgb, #D3D4DE 80%, #3A3D4F); }
body { transition: background-color .3s ease; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.topo-direita .usuario { margin-left: 0; }
.sync-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sync { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.sync .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.skins { display: flex; gap: 8px; justify-content: flex-end; }
.skins button { width: 26px; height: 14px; border-radius: 5px; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform .15s; }
.skins button:hover { transform: translateY(-1px); }
.skins button[aria-pressed="true"] { border-color: var(--azul); box-shadow: 0 0 0 2px var(--superficie) inset; }
@media (max-width: 1000px) { .sync { display: none; } }
@media (max-width: 760px) { .sync-wrap { display: none; } }

/* ---------- Indicadores do painel (cópia dos cards .kpi do protótipo) ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--laranja); font-weight: 700; margin-bottom: 6px; }
.cab__desc { white-space: pre-line; line-height: 1.5; }
.kpis { gap: 16px; margin-bottom: 24px; }
.kpi { background: var(--superficie); border: 1px solid var(--separador); border-radius: 16px; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; min-width: 0; transition: border-color .15s, transform .15s; }
.kpi:hover { border-color: var(--laranja); color: inherit; }
.kpi:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }
.kpi .k-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; }
.kpi .k-lbl { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); font-weight: 600; }
.kpi .k-val { font-family: var(--fonte-num); font-weight: 600; font-size: clamp(28px, 2.8vw, 36px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--azul); line-height: 1.1; }
.kpi .k-sub { font-size: 12px; color: #9DA1BD; }
.kpi .k-go { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--laranja); margin-top: auto; }
.kpi .k-go .ico { width: 14px; height: 14px; }
.kpi .k-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul); }
.kpi .k-ico .ico { width: 18px; height: 18px; }
.kpi.k-vencida .k-ico { background: var(--vermelho-bg); color: var(--vermelho); }
.kpi.k-avencer .k-ico { background: rgba(214,158,46,.14); color: #B7791F; }
.kpi.k-vigente .k-ico { background: var(--verde-bg); color: var(--verde); }
.kpi.hero { background: var(--azul); border-color: var(--azul); color: #fff; }
.kpi.hero .k-val { color: #fff; }
.kpi.hero .k-lbl, .kpi.hero .k-sub { color: rgba(255,255,255,.62); }
.kpi.hero .k-go { color: #FFB29C; }
.kpi.hero .k-ico { background: rgba(255,255,255,.12); color: #fff; }
.kpi.hero:hover { border-color: var(--laranja); }
.chip.up, .chip.warn, .chip.down { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip.up { color: var(--verde); background: var(--verde-bg); }
.chip.warn { color: #B7791F; background: rgba(214,158,46,.14); }
.chip.down { color: var(--vermelho); background: var(--vermelho-bg); }

/* ==========================================================================
   Login — Portal SSMA (arte "Portal SSMA Brida em tela cheia.png")
   Esquerda: foto recortada da arte + textos em HTML (nítidos em qualquer tamanho).
   Direita: formulário. Tudo cabe na altura da tela; no celular empilha.
   ========================================================================== */
.ssma { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 54%) minmax(0, 1fr); background: #E3E8F6; }
.ssma__arte { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: #1C2458; border-right: 5px solid #FE4D01; color: #fff; overflow: hidden; }
.ssma__foto { position: relative; flex: 1 1 auto; min-height: 240px; background-size: cover; background-position: left 30%; background-repeat: no-repeat; }
.ssma__foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to bottom, rgba(28,36,88,0), #1C2458); }
.ssma__texto { flex: none; padding: 0 clamp(24px, 3.4vw, 56px) clamp(20px, 2.4vh, 32px); }
.ssma__texto h2 { margin: 0; font-family: var(--fonte-num); font-weight: 700; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.08; letter-spacing: -.015em; color: #fff; }
.ssma__texto > p { margin: 10px 0 0; font-size: clamp(14px, 1.05vw, 18px); color: rgba(255,255,255,.88); }
.ssma__pilares { list-style: none; margin: clamp(18px, 3vh, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ssma__pilares li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 600; font-size: clamp(12.5px, .95vw, 16px); padding: 0 6px; }
.ssma__pilares li + li { border-left: 1px solid rgba(255,255,255,.3); }
.ssma__pilares svg { width: clamp(28px, 2.4vw, 40px); height: clamp(28px, 2.4vw, 40px); fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ssma__restrito { display: flex; align-items: center; gap: 8px; margin: clamp(18px, 3vh, 34px) 0 0 !important; font-size: 13px !important; color: rgba(255,255,255,.82) !important; }
.ssma__restrito svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.ssma__lado { display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; padding: clamp(24px, 5vh, 56px) clamp(20px, 4vw, 72px) clamp(16px, 3vh, 28px); background: linear-gradient(180deg, #E8ECF8 0%, #DDE4F5 100%); }
.ssma__caixa { width: 100%; max-width: 440px; margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ssma__marca { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: clamp(16px, 3vh, 28px); }
.ssma__marca img { width: clamp(56px, 4.2vw, 72px); height: auto; }
.ssma__marca span { font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #141A55; }
.ssma h1 { font-family: var(--fonte-num); font-weight: 700; font-size: clamp(26px, 2.1vw, 36px); line-height: 1.12; letter-spacing: -.01em; color: #0E1450; margin: 0; max-width: 14ch; }
.ssma__sub { margin: 8px 0 clamp(18px, 3vh, 28px); font-size: 15px; color: #3B4170; }
.ssma .aviso { width: 100%; text-align: left; margin: 0 0 14px; }
.ssma__form { width: 100%; display: grid; gap: 16px; text-align: left; }
.ssma__campo { display: grid; gap: 6px; }
.ssma__campo label { font-weight: 700; font-size: 14px; color: #141A55; }
.ssma__campo input { width: 100%; min-height: 48px; padding: 0 14px; font: inherit; font-size: 15px; color: #141A55; background: #fff; border: 1.5px solid #A9B0CC; border-radius: 10px; box-shadow: inset 0 1px 2px rgba(20,26,85,.06); }
.ssma__campo input:hover { border-color: #7C84AE; }
.ssma__campo input::placeholder { color: #8A90AE; opacity: 1; }
.ssma__campo input:focus { outline: none; border-color: #FE4D01; box-shadow: 0 0 0 3px rgba(254,77,1,.18); }
.ssma__senha { position: relative; }
.ssma__senha input { padding-right: 52px; }
.ssma__olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #4B5080; cursor: pointer; }
.ssma__olho svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ssma__olho[aria-pressed="true"] { color: #FE4D01; }
.ssma__olho:focus-visible { outline: 3px solid rgba(254,77,1,.45); }
.ssma__entrar { margin-top: 4px; width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 10px; background: #FE4D01; color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(254,77,1,.7); transition: background-color .15s; }
.ssma__entrar:hover { background: #E84500; }
.ssma__entrar:focus-visible { outline: 3px solid #141A55; outline-offset: 3px; }
.ssma__entrar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ssma__ajuda { margin: clamp(16px, 3vh, 28px) 0 0; font-size: 14px; color: #3B4170; }
.ssma__demo { margin: 10px 0 0; font-size: 12.5px; color: #3B4170; opacity: .8; }
.ssma__rodape { margin-top: 20px; font-size: 13.5px; color: #3B4170; text-align: center; }
.ssma__rodape b { color: #141A55; }
.ssma__rodape span { color: #FE4D01; margin: 0 6px; }

/* Telas baixas (notebook com zoom, 768 px de altura): compacta a coluna da arte */
@media (max-height: 760px) and (min-width: 901px) {
  .ssma__pilares li { flex-direction: row; justify-content: center; gap: 6px; }
  .ssma__pilares svg { width: 22px; height: 22px; }
}
/* Tablet e celular: a arte vira uma faixa compacta acima do formulário */
@media (max-width: 900px) {
  .ssma { grid-template-columns: minmax(0, 1fr); }
  .ssma__arte { min-height: 0; border-right: 0; border-bottom: 5px solid #FE4D01; }
  .ssma__foto { flex: none; height: clamp(150px, 30vw, 260px); min-height: 0; background-position: left top; }
  .ssma__texto { padding: 0 20px 18px; margin-top: -24px; position: relative; }
  .ssma__texto h2 { font-size: clamp(22px, 5.4vw, 32px); }
  .ssma__restrito { display: none !important; }
  .ssma__lado { min-height: 0; padding: 28px 20px 24px; }
  .ssma__caixa { margin: 0; }
}
@media (max-width: 520px) {
  .ssma__texto > p { display: none; }
  .ssma__pilares { margin-top: 14px; }
  .ssma__pilares li { font-size: 11.5px; gap: 5px; padding: 0 2px; }
  .ssma__pilares svg { width: 24px; height: 24px; }
  .ssma h1 { font-size: 24px; }
}

/* ---------- Usuários e acessos / destinatários dos avisos ---------- */
.filtros--3 { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto; }
@container area (max-width: 680px) { .filtros--3 { grid-template-columns: minmax(0, 1fr); } }
.perfil { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--azul-claro); color: var(--azul); white-space: nowrap; }
.perfis-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.perfil-opcao { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid #A9B0CC; border-radius: 10px; background: #fff; cursor: pointer; }
.perfil-opcao:hover { border-color: #7C84AE; }
.perfil-opcao:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.perfil-opcao input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--azul); flex: none; }
.perfil-opcao span { display: grid; gap: 2px; }
.perfil-opcao b { color: var(--azul); }
.perfil-opcao small { color: var(--texto-2); font-size: 12.5px; line-height: 1.35; }
.unidades-opcoes, .destinatarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; padding: 10px 12px; border: 1.5px solid #A9B0CC; border-radius: 10px; background: #fff; max-height: 240px; overflow-y: auto; }
.unidades-opcoes .check, .destinatarios .check { min-height: 36px; }
.campo--erro .unidades-opcoes, .campo--erro .destinatarios, .campo--erro .perfil-opcao { border-color: var(--vermelho); }
.grade-2--interna { gap: 0; }
.grade-2--interna > form { border-bottom: 0; }
.form-senha { max-width: 720px; }
.atividade { display: block; color: var(--azul); }
.atividade--entrada_recusada { color: var(--vermelho); }
.atividade--usuario_desativado { color: var(--laranja-escuro); }

.relatorio-pdf { display: block; width: 100%; height: calc(100vh - 220px); min-height: 640px; border: 1px solid var(--separador); border-radius: 12px; background: #fff; }

/* ---------- Lista detalhada: ícones de contexto ---------- */
.marca { gap: 7px; padding: 3px 11px 3px 4px; border-radius: 999px; font-size: 12.5px; }
.marca b { width: 20px; height: 20px; border-radius: 50%; }
.marca b .ico { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; }
.marca--aprovada { color: #17663F; border-color: #A8D9BE; background: #EAF7F0; }
.marca--aprovada b { background: var(--verde); }
.marca--pendente { background: var(--laranja-claro); }
.marca--ajustes { background: var(--vermelho-bg); }
.marca--rascunho { background: var(--ardosia-bg); }
.tabela--licencas thead th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-2); font-weight: 700; }
.tabela--licencas tbody td { padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
.tabela--licencas tbody tr { transition: background-color .12s; }
.tabela--licencas tbody tr:hover td { background: #F5F6FC; }
.item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.item__ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul); border: 1px solid #DCE0F0; }
.item__ico .ico { width: 19px; height: 19px; }
.item__ico--seguro { background: var(--laranja-claro); color: var(--laranja-escuro); border-color: #F7D3C2; }
.item__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item__txt .lic-nome { font-weight: 700; }
.item__txt .etq-renov, .item__txt .etq-arq, .item__txt .etq-demo { align-self: flex-start; margin-top: 2px; }
.venc { display: flex; gap: 8px; align-items: flex-start; }
.venc > .ico { width: 16px; height: 16px; margin-top: 2px; flex: none; color: var(--texto-2); }
.acao-ctx { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 500; line-height: 1.35; }
.acao-ctx .ico { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.acao-ctx--verde .ico { color: var(--verde); }
.acao-ctx--ambar .ico { color: #C98500; }
.acao-ctx--vermelha .ico { color: var(--vermelho); }
.acao-ctx--laranja .ico { color: var(--laranja); }
.acao-ctx--azul .ico { color: var(--azul-2); }
.acao-ctx--neutra .ico { color: var(--ardosia); }
.acao-ctx--vermelha, .acao-ctx--ambar { font-weight: 600; }
.resp { display: inline-flex; align-items: center; gap: 9px; }
.resp__av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--azul); background: var(--azul-claro); border: 1px solid #DCE0F0; }
.btn--olho .ico { width: 16px; height: 16px; }
.btn--olho:hover { border-color: var(--azul); background: var(--azul-claro); }
@container area (max-width: 1080px) {
  .tabela--licencas tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 16px; }
  .tabela--licencas tbody td { padding: 0 !important; }
  .tabela--licencas td[data-rot="Próxima ação"] { grid-column: 1 / -1; order: 5; }
  .tabela--licencas td.cel-acoes { order: 6; }
}
.resp__avs { display: inline-flex; flex: none; }
.resp__avs .resp__av + .resp__av { margin-left: -5px; }
.resp__avs .resp__av { box-shadow: 0 0 0 2px var(--superficie); }
.resp__avs .resp__av:nth-child(2) { background: var(--laranja-claro); color: var(--laranja-escuro); border-color: #F7D3C2; }
.resp__nomes { line-height: 1.35; }

/* ---------- Documento atual (acesso rápido no detalhe) ---------- */
.docs-rapidos .bloco__cab h2 { display: flex; align-items: center; gap: 8px; }
.docs-rapidos .bloco__cab h2 .ico { width: 18px; height: 18px; color: var(--laranja); }
.docs-rapidos__cab-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.docs-rapidos__cab-acoes > a:not(.btn) { font-size: 13px; }
.docs-rapidos__grupo { margin: 12px 20px 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.docs-rapidos__lista { list-style: none; margin: 0; padding: 6px 0; }
.docs-rapidos__lista li { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--separador); flex-wrap: wrap; }
.docs-rapidos__lista li:last-child { border-bottom: 0; }
.docs-rapidos__nome { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.docs-rapidos__nome a { font-weight: 700; overflow-wrap: anywhere; }
.docs-rapidos__nome small { color: var(--texto-2); font-size: 12.5px; }
.docs-rapidos__acoes { display: flex; gap: 8px; }
.docs-rapidos__acoes form { margin: 0; }
.docs-rapidos__acoes .btn { white-space: nowrap; }
.docs-rapidos__nome .doc-datahora { margin-top: 6px; }
.docs-rapidos__vazio { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; }
.docs-rapidos__vazio p { margin: 0; color: var(--texto-2); }
.docs-rapidos__vazio strong { color: var(--texto); }