/* MobiFiscal — identidade MobiPhone: azul-marinho no menu e nas ações principais,
   fundo cinza bem claro, conteúdo em áreas brancas. Tema claro sempre (o logo oficial tem letras escuras). */
:root {
  --marca:#14284b; --marca-escuro:#0e1c36; --marca-hover:#1d3766; --marca-claro:#e9eef6; --marca-texto:#1f3a6b;
  --fundo:#f4f6f9; --cartao:#fff; --texto:#1a2233; --suave:#5b6475; --fraco:#8a93a3; --borda:#dde2ea; --linha:#edf0f4; --realce:#f6f8fb;
  --erro:#b42318; --erro-fundo:#fef3f2; --erro-borda:#fecdca;
  --ok:#067647; --ok-fundo:#ecfdf3; --ok-borda:#abefc6;
  --alerta:#b54708; --alerta-fundo:#fff6e5; --alerta-borda:#fedf89;
  --neutro:#4a5466; --neutro-fundo:#f1f3f6; --neutro-borda:#d5dae2;
  --raio:10px; --sombra:0 1px 2px rgba(16,24,40,.05);
  --esp:16px; /* espaçamento entre blocos */
  color-scheme: light;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--fundo); }
body { margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background:var(--fundo); color:var(--texto); -webkit-font-smoothing:antialiased; }
.icones { position:absolute; width:0; height:0; overflow:hidden; }
.ic { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
a { color:var(--marca-texto); }

/* ---------------------------------------------------------------- botões e campos */
button { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 14px; border:1px solid var(--borda); border-radius:8px;
  background:var(--cartao); color:var(--marca); font:inherit; font-weight:500; cursor:pointer; line-height:1.3; }
button:hover { background:var(--realce); }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline:2px solid var(--marca-hover); outline-offset:1px; }
button:disabled { opacity:.55; cursor:default; }
button.principal { background:var(--marca); border-color:var(--marca); color:#fff; }
button.principal:hover:not(:disabled) { background:var(--marca-hover); border-color:var(--marca-hover); }
button.secundario { background:var(--cartao); color:var(--marca); border-color:var(--borda); }
button.secundario:hover:not(:disabled) { border-color:#b9c3d3; background:var(--realce); }
button.discreto { background:transparent; color:var(--suave); border-color:transparent; }
button.discreto:hover:not(:disabled) { background:var(--linha); color:var(--texto); }
button.largo { width:100%; }
button.link { border:0; background:none; padding:0; color:var(--marca-texto); text-decoration:underline; text-underline-offset:2px; font:inherit; font-weight:500; }
button .seta { width:14px; height:14px; margin-right:-4px; }
input, select { height:36px; padding:6px 10px; border:1px solid var(--borda); border-radius:8px; background:var(--cartao); color:var(--texto); font:inherit; }
input[type=checkbox] { height:auto; accent-color:var(--marca); }
input[type=file] { height:auto; }
input:hover, select:hover { border-color:#c3cbd8; }
label { font-size:13px; color:var(--suave); }
.rotulo { display:block; font-size:12px; font-weight:600; color:var(--suave); margin-bottom:4px; }

/* ---------------------------------------------------------------- cabeçalho */
.topo { display:flex; align-items:center; gap:14px; height:56px; padding:0 20px; background:var(--cartao); border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:15; }
.marca { display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; }
.logo { height:30px; width:auto; display:block; }
.marca-divisor { width:1px; height:24px; background:var(--borda); }
.marca-nome { font-weight:700; font-size:16px; color:var(--marca); letter-spacing:.01em; white-space:nowrap; }
.topo-espaco { flex:1; }
.empresa-area { display:flex; align-items:center; gap:8px; max-width:340px; min-width:0; padding:5px 10px; border:1px solid var(--linha); border-radius:8px; background:var(--realce); color:var(--suave); }
.empresa-area .ic { width:16px; height:16px; }
.empresa-txt { display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.empresa { font-size:12.5px; font-weight:600; color:var(--texto); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empresa-cnpj { font-size:11px; color:var(--suave); font-variant-numeric:tabular-nums; }

/* sininho de avisos */
.sino-area { position:relative; }
.sino { position:relative; width:36px; height:36px; padding:0; background:transparent; border:1px solid transparent; color:var(--suave); border-radius:8px; }
.sino:hover { background:var(--linha); color:var(--texto); }
.sino .ic { width:20px; height:20px; }
.sino-n { position:absolute; top:-3px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--alerta); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.sino.critico { color:var(--erro); } .sino.critico .sino-n { background:var(--erro); }
.avisos { position:absolute; right:0; top:calc(100% + 8px); width:min(440px, calc(100vw - 32px)); max-height:70vh; overflow-y:auto; background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:0 12px 32px rgba(16,24,40,.16); z-index:30; }
.avisos-topo { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--linha); position:sticky; top:0; background:var(--cartao); }
.avisos-topo a { font-size:12px; }
.avisos-situacao { padding:8px 14px; font-size:12px; color:var(--suave); border-bottom:1px solid var(--linha); background:var(--realce); }
.aviso { display:block; width:100%; text-align:left; background:transparent; color:var(--texto); border:0; border-bottom:1px solid var(--linha); border-radius:0; padding:9px 14px; font-size:13px; font-weight:400; }
.aviso:hover { background:var(--realce); }
.aviso .quando { display:block; font-size:11px; color:var(--suave); margin-top:2px; }
.aviso .marca-g { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px; }
.marca-g.critico { background:var(--erro); } .marca-g.alto { background:var(--alerta); } .marca-g.medio { background:var(--fraco); }
.avisos .vazio { padding:14px; }

/* menu do perfil */
.perfil-area { position:relative; }
.perfil-btn { gap:4px; padding:3px 6px 3px 3px; border-color:transparent; background:transparent; color:var(--suave); border-radius:20px; }
.perfil-btn:hover { background:var(--linha); }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--marca); color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; }
.menu-perfil { position:absolute; right:0; top:calc(100% + 8px); min-width:240px; background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:0 12px 32px rgba(16,24,40,.16); z-index:30; padding:6px; }
.perfil-dados { display:flex; flex-direction:column; padding:8px 10px 10px; border-bottom:1px solid var(--linha); margin-bottom:6px; }
.quem { font-size:13px; font-weight:600; color:var(--texto); white-space:nowrap; }
.quem-perfil { font-size:12px; color:var(--suave); }
.item-menu { width:100%; justify-content:flex-start; border:0; background:transparent; color:var(--texto); padding:8px 10px; font-weight:400; }
.item-menu:hover { background:var(--linha); }

/* ---------------------------------------------------------------- estrutura */
.app { display:grid; grid-template-columns:208px minmax(0, 1fr); min-height:calc(100vh - 56px); }
.menu { background:var(--marca); color:#c9d3e6; padding:14px 10px; position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto; }
.menu-titulo { margin:14px 10px 6px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:#8d9bb8; }
.menu-titulo:first-child { margin-top:4px; }
.menu a, .menu-off { position:relative; display:flex; align-items:center; gap:10px; padding:9px 12px; margin:2px 0; border-radius:8px; color:#dbe3f1; text-decoration:none; font-size:14px; }
.menu a:hover { background:rgba(255,255,255,.08); color:#fff; }
.menu a.ativo { background:rgba(255,255,255,.14); color:#fff; font-weight:600; }
.menu a.ativo::before { content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:#fff; }
.menu-off { color:#8291ad; cursor:default; }
.menu-off small { margin-left:auto; font-size:10.5px; padding:1px 7px; border-radius:9px; background:rgba(255,255,255,.08); color:#a7b3ca; }
.conteudo { padding:22px 28px 40px; min-width:0; }

/* ---------------------------------------------------------------- blocos */
.cartao { background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio); padding:16px 18px; margin-bottom:var(--esp); box-shadow:var(--sombra); }
.pagina-topo { display:flex; align-items:flex-start; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:14px; }
h1 { font-size:22px; line-height:1.25; margin:0; color:var(--marca); font-weight:700; letter-spacing:-.005em; }
.descricao { margin:4px 0 0; color:var(--suave); font-size:13.5px; max-width:720px; }
h2 { font-size:15px; margin:0 0 10px; color:var(--texto); }
.grade { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:var(--esp); margin-bottom:var(--esp); }
.grade .cartao { margin-bottom:0; }
.nota { color:var(--suave); font-size:12.5px; }
.msg { font-size:13px; white-space:pre-wrap; word-break:break-word; margin:8px 0 0; }
.msg:empty { display:none; }
.erro { color:var(--erro); } .ok { color:var(--ok); }
.critico { color:var(--erro); font-weight:600; } .alto { color:var(--alerta); font-weight:600; }
.vazio { color:var(--suave); font-size:13px; }
.acoes { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
pre.resposta { background:var(--realce); border:1px solid var(--borda); border-radius:8px; padding:10px; font-size:12px; max-height:320px; overflow:auto; white-space:pre-wrap; word-break:break-all; }
#cert-atual td { white-space:normal; word-break:break-word; }
#form-cert label { display:block; margin:8px 0; } #form-cert input { display:block; width:100%; margin-top:4px; }

/* login */
.login { max-width:380px; margin:64px auto; padding:28px 28px 22px; }
.login-marca { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:18px; }
.login-marca .logo { height:44px; }
.login h2 { font-size:16px; text-align:center; margin-bottom:6px; }
.login label { display:block; margin:12px 0; } .login input { display:block; width:100%; margin-top:4px; }
.login button { margin-top:6px; height:38px; }

/* ambiente (no Painel técnico) e aviso de homologação (na consulta) */
.ambiente { display:inline-flex; border:1px solid var(--borda); border-radius:8px; overflow:hidden; margin-bottom:4px; }
.ambiente button { border:0; border-radius:0; background:transparent; color:var(--suave); padding:7px 16px; }
.ambiente button + button { border-left:1px solid var(--borda); }
.ambiente button.ativo { background:var(--marca); color:#fff; }
.ambiente button[data-amb="homologacao"].ativo { background:var(--alerta); }
.aviso-homolog { margin:2px 0 0; padding:5px 12px; border-radius:16px; background:var(--alerta-fundo); color:var(--alerta); border:1px solid var(--alerta-borda); font-size:12.5px; font-weight:600; white-space:nowrap; }

/* ---------------------------------------------------------------- abas */
.abas { display:flex; gap:2px; border-bottom:1px solid var(--borda); margin-bottom:var(--esp); }
.abas button { background:transparent; border:0; border-bottom:2px solid transparent; border-radius:0; color:var(--suave); padding:9px 16px; margin-bottom:-1px; font-weight:500; }
.abas button:hover { color:var(--texto); background:transparent; }
.abas button.ativo { color:var(--marca); border-bottom-color:var(--marca); font-weight:700; }

/* ---------------------------------------------------------------- filtros */
.bloco-filtros { padding:14px 18px; }
.barra { display:flex; flex-direction:column; gap:12px; }
.barra-linha { display:flex; align-items:flex-end; gap:12px 14px; flex-wrap:wrap; }
.linha-periodo { padding-top:12px; border-top:1px solid var(--linha); }
.campo { display:flex; flex-direction:column; min-width:0; }
.campo-busca { flex:1 1 300px; }
.com-icone { position:relative; display:block; }
.com-icone .ic { position:absolute; left:10px; top:9px; width:17px; height:17px; color:var(--fraco); pointer-events:none; }
.com-icone input { width:100%; padding-left:34px; }
.par { display:flex; align-items:center; gap:6px; }
.ate-txt { font-size:12.5px; color:var(--suave); }
#periodo { min-width:190px; }
.campo-periodo-txt { margin-left:6px; }
.campo-periodo-txt .periodo-txt { display:flex; align-items:center; height:36px; font-size:13px; color:var(--suave); white-space:nowrap; }
.periodo-txt b { color:var(--texto); font-weight:600; margin:0 3px; }
.periodo-txt b:first-child { margin-left:0; }
.barra-acoes { display:flex; gap:8px; margin-left:auto; }
.barra-acoes button { height:36px; }
.contador { display:inline-block; min-width:18px; padding:0 6px; border-radius:9px; background:var(--marca); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; }
.menu-suspenso-area { position:relative; }
.menu-suspenso { position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:260px; background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio); box-shadow:0 12px 32px rgba(16,24,40,.16); padding:6px; }
.menu-suspenso .alcance { margin:4px 8px 8px; font-size:12px; color:var(--suave); }
.menu-suspenso button { display:flex; width:100%; justify-content:flex-start; background:transparent; color:var(--texto); border:0; padding:8px 10px; font-size:13.5px; font-weight:400; }
.menu-suspenso button:hover { background:var(--linha); }

.filtros { display:flex; flex-wrap:wrap; gap:16px 28px; align-items:flex-start; margin-top:14px; padding-top:14px; border-top:1px solid var(--linha); }
.filtros fieldset { border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; min-width:150px; }
.filtros legend { font-size:12px; font-weight:600; color:var(--suave); margin-bottom:6px; padding:0; }
.filtros .check { display:flex; align-items:center; gap:7px; color:var(--texto); font-size:13px; cursor:pointer; }
.filtros-col { display:flex; flex-direction:column; gap:10px; min-width:240px; }
.filtros-col select { width:100%; max-width:340px; }
.filtros-acoes { display:flex; gap:8px; align-self:flex-end; margin-left:auto; }
.filtros-ativos { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; color:var(--suave); }
.filtros-ativos .chip { display:inline-flex; align-items:center; gap:4px; padding:3px 4px 3px 10px; border:1px solid #cdd6e4; border-radius:14px; background:var(--marca-claro); color:var(--marca); font-weight:500; }
.filtros-ativos .chip button { border:0; background:transparent; padding:0 6px; font-size:12px; line-height:1.4; color:var(--marca); }
.filtros-ativos .chip button:hover { background:rgba(20,40,75,.08); border-radius:10px; }
.filtros-ativos > button.discreto { padding:3px 8px; font-size:12.5px; color:var(--marca-texto); text-decoration:underline; text-underline-offset:2px; }

/* ---------------------------------------------------------------- indicadores */
.indicadores { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--esp); margin-bottom:12px; }
.ind { display:flex; flex-direction:column; gap:2px; background:var(--cartao); border:1px solid var(--borda); border-radius:var(--raio); padding:14px 18px; box-shadow:var(--sombra); min-width:0; }
.ind-rotulo { font-size:12px; font-weight:600; color:var(--suave); text-transform:uppercase; letter-spacing:.04em; }
.ind b { font-size:24px; font-weight:700; color:var(--marca); font-variant-numeric:tabular-nums; line-height:1.25; margin-top:2px; }
.ind small { font-size:12px; color:var(--suave); min-height:1.45em; }

/* faixa de situação (cancelados e pendências) */
.faixa-situacao { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:var(--esp); font-size:13px; color:var(--suave); }
.faixa-situacao:empty { display:none; }
.faixa-situacao .faixa-rotulo { font-weight:600; margin-right:2px; }
.sit-cont { gap:7px; padding:4px 12px 4px 5px; border-radius:16px; font-size:12.5px; font-weight:500; background:var(--cartao); border:1px solid var(--neutro-borda); color:var(--neutro); }
.sit-cont b { display:inline-block; min-width:22px; padding:0 7px; border-radius:11px; background:var(--neutro-fundo); color:var(--texto); font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.sit-cont:hover { background:var(--realce); border-color:#b9c3d3; }
.sit-cont.pendencia { border-color:var(--alerta-borda); color:var(--alerta); background:var(--alerta-fundo); }
.sit-cont.pendencia b { background:#fde7c3; color:var(--alerta); }
.sit-cont.pendencia:hover { background:#ffefcf; }
.sit-cont .extra { color:var(--suave); font-weight:400; }
.sit-ok { display:inline-flex; align-items:center; gap:6px; color:var(--suave); }
.sit-ok .ic { width:15px; height:15px; color:var(--ok); }

/* ---------------------------------------------------------------- tabela */
.cartao-tabela { padding:0; overflow:clip; }
.tabela-rolagem { overflow-x:auto; }
.rolagem-cte { overflow:visible; }
table { border-collapse:collapse; width:100%; font-size:13px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--linha); white-space:nowrap; vertical-align:top; }
th { color:var(--suave); font-weight:600; font-size:12px; background:var(--realce); }
th.num, td.num { text-align:right; font-variant-numeric:tabular-nums; }
th .ordenar { background:transparent; border:0; padding:0; color:inherit; font:inherit; font-weight:600; gap:3px; }
th .ordenar:hover { color:var(--marca); background:transparent; }
th .ordenar.ativo { color:var(--marca); }
th .ordenar.ativo::after { content:"▾"; font-size:11px; } th .ordenar.ativo.asc::after { content:"▴"; }
td .secundaria { display:block; color:var(--suave); font-size:11.5px; margin-top:1px; }

table.lista { table-layout:fixed; min-width:1000px; }
table.lista thead th { position:sticky; top:56px; z-index:2; height:40px; vertical-align:middle; white-space:normal; line-height:1.2; border-bottom:1px solid var(--borda); }
table.lista th, table.lista td { padding:9px 10px; }
table.lista tbody td { height:64px; padding-top:7px; padding-bottom:7px; vertical-align:middle; }
table.lista tbody tr { cursor:pointer; transition:background-color .08s; }
table.lista tbody tr:hover { background:#f3f6fb; }
table.lista tbody tr:last-child td { border-bottom:0; }
table.lista tbody tr.marcada { background:var(--marca-claro); }
table.lista tbody tr:focus-visible { outline:2px solid var(--marca-hover); outline-offset:-2px; }
/* larguras fixas; a transportadora fica com o espaço que sobra */
col.c-sel { width:38px; } col.c-emissao { width:98px; } col.c-numero { width:96px; } col.c-tomador { width:160px; }
col.c-classe { width:142px; } col.c-valor { width:116px; } col.c-situacao { width:126px; } col.c-acoes { width:88px; }
table.lista th.sel, table.lista td.sel { padding-right:0; cursor:default; }
table.lista td.sel input, table.lista th.sel input { width:16px; height:16px; cursor:pointer; margin:0; vertical-align:middle; }
table.lista td { overflow:hidden; text-overflow:ellipsis; }
table.lista .nome { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; line-height:1.3; word-break:break-word; }
table.lista .transp .nome { font-weight:600; color:var(--texto); }
table.lista .cnpj-so { white-space:nowrap; font-variant-numeric:tabular-nums; }
table.lista .doc { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; color:var(--fraco); font-variant-numeric:tabular-nums; margin-top:1px; display:block; }
table.lista td.quebra { white-space:normal; }
table.lista td.papel { white-space:normal; font-size:12px; line-height:1.3; color:var(--suave); }
table.lista td.num { font-size:13.5px; }
.nao-informado { color:var(--fraco); font-style:italic; font-size:12.5px; }

/* classificação: etiqueta com contorno (o que a empresa é no CT-e) */
.tag-tomado { display:inline-block; white-space:nowrap; padding:1px 8px; border:1px solid currentColor; border-radius:5px; font-size:11.5px; font-weight:600; line-height:1.5; background:transparent; margin-bottom:3px; }
td .tag-tomado + .papel-txt { display:block; }
.tag-tomado.sim { color:var(--marca); }
.tag-tomado.nao { color:var(--neutro); }
.tag-tomado.ni { color:var(--alerta); border-style:dashed; }
.tag-tomado.inline { margin:0 0 0 0; }
/* situação fiscal: selo preenchido com ponto */
.selo { display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 8px; border-radius:12px; font-size:12px; font-weight:600; line-height:1.5; }
.selo::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.selo.autorizado { background:var(--ok-fundo); color:var(--ok); }
.selo.cancelado, .selo.denegado { background:var(--erro-fundo); color:var(--erro); }
.selo.nao_confirmado { background:var(--alerta-fundo); color:var(--alerta); }
.selo.a_confirmar { background:var(--neutro-fundo); color:var(--neutro); }

/* ações de cada linha */
table.lista td.acoes-linha { text-align:right; white-space:nowrap; overflow:visible; padding-left:4px; padding-right:10px; }
.acao { width:30px; height:30px; padding:0; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--suave); vertical-align:middle; }
.acao + .acao { margin-left:2px; }
.acao .ic { width:17px; height:17px; }
.acao:hover, .acao:focus-visible { background:var(--marca-claro); color:var(--marca); border-color:#cdd6e4; }

/* seleção para exportar */
.barra-lote { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 14px; background:var(--marca-claro); color:var(--marca); font-size:13px; font-weight:600; border-bottom:1px solid #cdd6e4; }
.barra-lote .barra-lote-acoes { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.barra-lote button { padding:4px 11px; font-size:12.5px; }

.vazio-grande { text-align:center; padding:40px 12px; color:var(--suave); }
.vazio-grande p { margin:4px 0 10px; }
.paginacao { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-top:1px solid var(--borda); background:var(--realce); font-size:13px; color:var(--suave); }
#pag-info b { color:var(--texto); }
.pag-controles { display:flex; align-items:center; gap:8px; }
.pag-pagina { margin-right:4px; }
.paginacao button { padding:5px 12px; font-size:12.5px; }
#msg-cte { margin-top:10px; }
details.faltantes { margin:10px 0; font-size:13px; background:var(--cartao); border:1px solid var(--alerta-borda); border-radius:var(--raio); padding:10px 14px; }
details.faltantes summary { cursor:pointer; color:var(--alerta); font-weight:600; }
details.faltantes .chave { font-size:12px; }

/* ---------------------------------------------------------------- detalhe do CT-e */
.detalhe-fundo { position:fixed; inset:0; background:rgba(14,28,54,.28); z-index:20; }
.detalhe { position:fixed; top:0; right:0; bottom:0; width:min(640px, 100vw); background:var(--cartao); border-left:1px solid var(--borda); z-index:21; overflow-y:auto; padding:18px 22px 32px; box-shadow:-12px 0 32px rgba(16,24,40,.14); }
.detalhe-topo { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; padding-bottom:10px; border-bottom:1px solid var(--linha); }
.detalhe-topo h2 { margin:0; font-size:17px; color:var(--marca); }
.detalhe h3 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--suave); margin:22px 0 8px; }
.detalhe table th { background:transparent; }
.chave { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px; word-break:break-all; }
.dados { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px 18px; }
.dados div span { display:block; font-size:12px; color:var(--suave); }
.dados div .tag-tomado { display:inline-block; }
.linha-chave { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
.linha-chave button { padding:3px 9px; font-size:12px; }
.detalhe .acoes { margin-top:20px; }
.detalhe .acoes button:first-child { background:var(--marca); border-color:var(--marca); color:#fff; }

/* ---------------------------------------------------------------- faixa de problema crítico na captura */
.saude { border-radius:var(--raio); padding:10px 14px; margin-bottom:var(--esp); border:1px solid; font-size:13px; }
.saude.ok { background:var(--ok-fundo); color:var(--ok); }
.saude.atencao { background:var(--alerta-fundo); color:var(--alerta); }
.saude.problema { background:var(--erro-fundo); color:var(--erro); border-color:var(--erro-borda); }
.saude .titulo { font-weight:700; margin-right:6px; }
.saude ul { margin:6px 0 0; padding-left:18px; color:var(--texto); }
.saude li { margin:2px 0; }
.saude a { color:inherit; font-weight:600; margin-left:6px; }

/* ---------------------------------------------------------------- visualizador do DACTE */
.visor-fundo { position:fixed; inset:0; background:rgba(14,28,54,.5); z-index:40; }
.visor { position:fixed; inset:24px 6vw; z-index:41; background:var(--cartao); border-radius:var(--raio); display:flex; flex-direction:column; box-shadow:0 16px 48px rgba(0,0,0,.3); overflow:hidden; }
.visor-topo { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--borda); gap:12px; }
.visor-topo h2 { font-size:14.5px; margin:0; color:var(--marca); }
.visor-acoes { display:flex; gap:8px; }
.visor iframe { flex:1; border:0; width:100%; background:#525659; }
.visor .msg:empty { display:none; }

/* página pública simples (política de privacidade) */
.pagina-simples { max-width:780px; margin:0 auto; padding:28px 16px; }

/* ---------------------------------------------------------------- telas menores */
@media (max-width:1300px) {
  .conteudo { padding:18px 18px 32px; }
  .rolagem-cte { overflow:auto; max-height:calc(100vh - 120px); }
  table.lista thead th { top:0; }
  .app { grid-template-columns:184px minmax(0, 1fr); }
  col.c-emissao { width:90px; } col.c-numero { width:88px; } col.c-tomador { width:146px; } col.c-classe { width:120px; }
  col.c-valor { width:104px; } col.c-situacao { width:114px; } col.c-acoes { width:80px; }
  table.lista { font-size:12.5px; } table.lista td.num { font-size:12.5px; }
  table.lista th, table.lista td { padding-left:8px; padding-right:8px; }
  table.lista .nao-informado { font-size:11.5px; }
}
@media (max-width:980px) {
  .empresa-area { display:none; }
  .indicadores { grid-template-columns:1fr; gap:10px; }
  .barra-acoes { margin-left:0; }
}
@media (max-width:760px) {
  .topo { padding:0 12px; gap:10px; }
  .marca-divisor, .marca .marca-nome { display:none; }
  .app { grid-template-columns:1fr; }
  .menu { position:static; height:auto; display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:6px 10px; }
  .menu-titulo { display:none; }
  .menu a.ativo::before { display:none; }
  .conteudo { padding:14px 12px 28px; }
  .avisos, .menu-perfil { position:fixed; left:12px; right:12px; top:60px; width:auto; }
}