:root {
  --fundo: #f4f5f7; --cartao: #ffffff; --texto: #1c2530; --suave: #5d6b7a; --linha: #e3e7ec;
  --marca: #001f4c; --dourado: #c9a03a; --dourado-claro: #f3dc8a; --acao: #0f3b82; --acao-escura: #001f4c;
  --verde: #127a45; --verde-fundo: #e5f5ec; --vermelho: #b42318; --vermelho-fundo: #fdecea;
  --amarelo: #8a5a00; --amarelo-fundo: #fff4d6; --azul: #1453a8; --azul-fundo: #e6efff;
  --cinza-fundo: #eef0f3;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--fundo); color: var(--texto); }
a { color: var(--acao); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }
.sub { color: var(--suave); margin: 0 0 20px; }

/* Topo */
.topo { background: var(--marca); color: #fff; display: flex; align-items: center; gap: 24px; padding: 0 24px; min-height: 56px; flex-wrap: wrap; }
.topo .marca { font-weight: 700; font-size: 15px; white-space: nowrap; }
.topo nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.topo nav a { color: #c9d6e6; padding: 16px 12px; display: inline-flex; gap: 6px; align-items: center; }
.topo nav a:hover, .topo nav a.ativo { color: #fff; text-decoration: none; background: rgba(255,255,255,.08); }
.topo .usuario { color: #c9d6e6; font-size: 13px; white-space: nowrap; }
.topo .usuario a { color: #fff; margin-left: 8px; }
.contador { background: #fff; color: var(--marca); border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.contador.alerta { background: #fdb022; color: #3a2600; }
.faixa-teste { background: var(--amarelo-fundo); color: var(--amarelo); padding: 8px 24px; font-size: 13px; border-bottom: 1px solid #f3d58a; }

main { max-width: 1240px; margin: 0 auto; padding: 24px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cabecalho .sub { margin: 0; }

/* Indicadores */
.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.indicador { background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; display: block; color: inherit; }
a.indicador:hover { text-decoration: none; border-color: var(--acao); }
.indicador .rotulo { color: var(--suave); font-size: 12px; }
.indicador .numero { font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.indicador .extra { color: var(--suave); font-size: 12px; }
.indicador.atencao .numero { color: var(--vermelho); }

/* Tabelas */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--suave); padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .pequeno, .pequeno { font-size: 12px; color: var(--suave); }
.vazio { text-align: center; color: var(--suave); padding: 32px; }

/* Etiquetas de status */
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.etiqueta.verde { background: var(--verde-fundo); color: var(--verde); }
.etiqueta.verde-claro { background: #eef8f2; color: #2d7a52; }
.etiqueta.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.etiqueta.amarelo { background: var(--amarelo-fundo); color: var(--amarelo); }
.etiqueta.azul { background: var(--azul-fundo); color: var(--azul); }
.etiqueta.azul-claro { background: #f0f5ff; color: #3d6bb3; }
.etiqueta.cinza { background: var(--cinza-fundo); color: var(--suave); }
.etiqueta.cinza-escuro { background: #e4e7eb; color: #3c4653; }

/* Formulários e botões */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.abas { display: flex; gap: 4px; flex-wrap: wrap; }
.abas a { padding: 6px 12px; border-radius: 16px; color: var(--suave); background: var(--cinza-fundo); font-size: 13px; }
.abas a.ativo { background: var(--marca); color: #fff; }
.abas a:hover { text-decoration: none; }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid #c8d0da; border-radius: 6px; background: #fff; color: var(--texto); min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #a9c5f5; border-color: var(--acao); }
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.campo { margin-bottom: 14px; }
.campo small { display: block; color: var(--suave); font-weight: 400; }
.botao { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; padding: 8px 14px; border-radius: 6px; border: 1px solid transparent; background: var(--acao); color: #fff; cursor: pointer; white-space: nowrap; }
.botao:hover { background: var(--acao-escura); text-decoration: none; }
.botao.secundario { background: #fff; color: var(--texto); border-color: #c8d0da; }
.botao.secundario:hover { background: var(--cinza-fundo); }
.botao.perigo { background: #fff; color: var(--vermelho); border-color: #f1b7b0; }
.botao.perigo:hover { background: var(--vermelho-fundo); }
.botao.pequeno-btn { padding: 4px 10px; font-size: 12px; }
form.inline { display: inline; }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--linha); border-radius: 8px; margin-bottom: 8px; cursor: pointer; font-weight: 400; }
.radio input { margin-top: 3px; }
.radio strong { display: block; }
.zona-arquivos { border: 2px dashed #c8d0da; border-radius: 10px; padding: 28px; text-align: center; background: #fafbfc; }
.zona-arquivos.ativa { border-color: var(--acao); background: var(--azul-fundo); }

/* Avisos */
.aviso { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.aviso.ok { background: var(--verde-fundo); color: var(--verde); }
.aviso.erro { background: var(--vermelho-fundo); color: var(--vermelho); }
.aviso.info { background: var(--azul-fundo); color: var(--azul); }

/* Fila */
.grupo { border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 14px; background: #fff; }
.grupo-topo { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.grupo-topo .assunto { color: var(--suave); font-size: 12px; }
.linha-tempo { list-style: none; padding: 0; margin: 0; }
.linha-tempo li { padding: 8px 0 8px 18px; border-left: 2px solid var(--linha); position: relative; }
.linha-tempo li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--acao); position: absolute; left: -6px; top: 14px; }
.linha-tempo li.ruim::before { background: var(--vermelho); }
.linha-tempo li.bom::before { background: var(--verde); }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .duas-colunas { grid-template-columns: 1fr; } main { padding: 16px; } .topo { padding: 0 12px; } }

/* Login */
.login { max-width: 360px; margin: 10vh auto; }
.login .marca-login { text-align: center; font-weight: 700; font-size: 18px; color: var(--marca); margin-bottom: 16px; }
.login input { width: 100%; }
.login .botao { width: 100%; justify-content: center; margin-top: 4px; }

/* Avisos fixos no topo da tela, para não ficarem escondidos ao rolar a página */
.avisos-fixos { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: min(900px, calc(100% - 32px)); z-index: 100; }
.avisos-fixos .aviso { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; box-shadow: 0 6px 20px rgba(16,24,40,.18); border: 1px solid rgba(0,0,0,.06); }
.fechar-aviso { background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: .7; padding: 0 2px; }
.fechar-aviso:hover { opacity: 1; }

/* Identidade visual: azul-marinho + dourado */
.topo { border-bottom: 3px solid var(--dourado); }
.topo .marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.topo .marca:hover { text-decoration: none; }
.topo .marca img { height: 28px; width: auto; display: block; }
.topo nav a.ativo { box-shadow: inset 0 -3px 0 var(--dourado); }
.logo-login { background: var(--marca); border-radius: 10px; padding: 22px 18px; margin-bottom: 10px; border-bottom: 3px solid var(--dourado); }
.logo-login img { width: 230px; max-width: 100%; display: block; margin: 0 auto; }

/* Cobranças internas */
.botao.verde { background: var(--verde); }
.botao.verde:hover { background: #0d5c34; }
.cob-nums { display: flex; gap: 22px; align-items: flex-end; }
.cob-nums div { text-align: right; } .cob-nums b { display: block; font-size: 22px; line-height: 1.1; } .cob-nums span { font-size: 12px; color: var(--suave); }
.cob-add { background: #fff; border: 1.5px solid var(--marca); border-radius: 12px; padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 18px; }
.cob-add .cob-add-tit { flex: 1 1 280px; border: 0; font-size: 15px; outline: none !important; }
.cob-add select, .cob-add input[type=date] { font-size: 13px; padding: 7px 8px; }
.cob-mais { flex-basis: 100%; padding: 0 8px 4px; } .cob-mais summary { font-size: 12.5px; color: var(--acao); cursor: pointer; }
.cob-mais input, .cob-mais textarea { width: 100%; margin-top: 6px; }
.cob-lay { display: grid; grid-template-columns: minmax(320px, 520px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .cob-lay { grid-template-columns: 1fr; } .cob-nums { gap: 14px; } }
.cob-col { background: #fff; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.cob-tabs { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 16px 0; border-bottom: 1px solid #eef0f3; font-size: 13.5px; }
.cob-tabs a { padding-bottom: 9px; color: var(--suave); } .cob-tabs a:hover { text-decoration: none; color: var(--texto); }
.cob-tabs a.on { color: var(--marca); font-weight: 700; box-shadow: inset 0 -2px 0 var(--marca); }
.cob-tabs .cob-meus { margin-left: auto; }
.cob-gh { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--suave); padding: 14px 16px 6px; display: flex; gap: 8px; align-items: center; }
.cob-gh b { color: #fff; border-radius: 9px; padding: 0 7px; font-size: 11px; } .c-r { background: var(--vermelho); } .c-n { background: #98a2b3; } .c-v { background: var(--verde); }
.cob-it { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid #f1f3f6; border-left: 3px solid transparent; color: inherit; }
.cob-it:hover { background: #fafbfc; text-decoration: none; }
.cob-it.sel { background: #f3f6fb; border-left-color: var(--dourado); }
.cob-it.atr .cob-pz { color: var(--vermelho); font-weight: 700; }
.cob-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .cob-dot.on { background: var(--azul); }
.cob-it.ok .cob-o { color: #98a2b3; text-decoration: line-through; } .cob-it.ok .cob-dot { background: var(--verde); }
.cob-tx { flex: 1; min-width: 0; display: block; }
.cob-o { font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .cob-m { display: block; font-size: 12.5px; color: var(--suave); }
.cob-alerta { color: var(--amarelo); }
.cob-urg { font-size: 11px; font-weight: 700; border-radius: 9px; padding: 0 7px; } .u-urgente { background: #fdecea; color: #b42318; } .u-alta { background: #fff0e6; color: #c4320a; }
.cob-rec { font-size: 11px; font-weight: 600; color: #8a5a00; background: #fff4d6; border-radius: 9px; padding: 0 7px; }
.cob-pz { font-size: 12.5px; color: var(--suave); white-space: nowrap; }
.cob-det { padding: 20px 22px; }
.cob-dt { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.cob-dt h2 { font-size: 19px; margin: 0; } .cob-dm { color: var(--suave); font-size: 13px; margin-top: 3px; }
.cob-acoes { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.cob-pop { position: relative; } .cob-pop > summary { list-style: none; cursor: pointer; } .cob-pop > summary::-webkit-details-marker { display: none; }
.cob-pop[open] > form, .cob-pop[open] > .cob-edit { position: absolute; right: 0; z-index: 20; width: 360px; max-width: 80vw; background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 14px; box-shadow: 0 12px 30px rgba(16,24,40,.18); display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.cob-ferr .cob-pop[open] > form { left: 0; right: auto; }
.cob-edit-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cob-edit-g select, .cob-edit-g input { width: 100%; }
.cob-resp { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--suave); }
.cob-chip { display: inline-flex; align-items: center; gap: 4px; background: #f1f3f6; border-radius: 14px; padding: 3px 6px 3px 11px; color: var(--texto); }
.cob-star { color: var(--dourado); } .cob-x { background: none; border: 0; cursor: pointer; color: #98a2b3; font-size: 14px; padding: 0 3px; } .cob-x:hover { color: var(--texto); }
.cob-incluir select { font-size: 12.5px; padding: 3px 6px; border-radius: 14px; color: var(--acao); }
.cob-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 10px; }
.cob-tag { font-size: 12.5px; border-radius: 8px; padding: 5px 10px; background: #f6f7f9; border: 1px solid #eef0f3; color: var(--suave); } .cob-tag b { color: var(--texto); }
.cob-tag.rec { background: #fff8e6; border-color: #f3dfa6; color: #6b4a00; } .cob-tag.red { background: #fdecea; border-color: #f6cfcb; color: #b42318; } .cob-tag.red b { color: #b42318; }
.cob-ferr { display: flex; gap: 8px; margin-bottom: 14px; }
.cob-hist { border-top: 1px solid #eef0f3; padding-top: 14px; }
.cob-ht { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; color: var(--suave); margin-bottom: 12px; display: flex; justify-content: space-between; }
.cob-ht a { font-weight: 500; letter-spacing: 0; }
.cob-ev { display: flex; gap: 10px; margin-bottom: 12px; } .cob-ev.velho { display: none; }
.cob-av { width: 30px; height: 30px; border-radius: 50%; background: var(--acao); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cob-evb { flex: 1; background: #f8f9fb; border-radius: 0 10px 10px 10px; padding: 9px 12px; min-width: 0; }
.cob-evh { display: flex; justify-content: space-between; font-size: 12px; color: #98a2b3; } .cob-evh b { color: var(--texto); font-size: 13px; }
.cob-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.cob-cobr .cob-evb { background: #fdf3f2; } .cob-cobr .cob-av { background: var(--vermelho); }
.cob-sis { font-size: 12px; color: #98a2b3; margin-left: 40px; display: block; }
.cob-men { color: var(--acao); font-weight: 600; }
.cob-anx { display: inline-block; margin: 6px 6px 0 0; font-size: 12.5px; border: 1px solid var(--linha); background: #fff; border-radius: 6px; padding: 2px 8px; }
.cob-comp { border: 1.5px solid #c8d0da; border-radius: 10px; margin-top: 8px; overflow: hidden; }
.cob-comp textarea { width: 100%; border: 0; border-radius: 0; resize: vertical; outline: none !important; }
.cob-comp-b { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid #eef0f3; background: #fafbfc; font-size: 12.5px; }
.cob-it.conf .cob-dot { background: var(--dourado); }
.cob-comp-b { flex-wrap: wrap; } .cob-comp-b input[type=file] { min-width: 0; max-width: 100%; }

/* Menu em dois níveis: módulos em cima, abas do módulo embaixo */
.topo .nav-sep { width: 1px; background: rgba(255,255,255,.18); margin: 12px 8px; align-self: stretch; }
.subtopo { background: #fff; border-bottom: 1px solid var(--linha); display: flex; gap: 4px; padding: 0 24px; flex-wrap: wrap; }
.subtopo a { color: var(--suave); padding: 12px 12px 10px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; border-bottom: 2px solid transparent; }
.subtopo a:hover { color: var(--texto); text-decoration: none; }
.subtopo a.ativo { color: var(--marca); font-weight: 700; border-bottom-color: var(--marca); }
.subtopo .contador { background: var(--marca); color: #fff; }
.subtopo .contador.alerta { background: #fdb022; color: #3a2600; }
@media (max-width: 800px) { .subtopo { padding: 0 8px; } }
.cob-filtro { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #eef0f3; flex-wrap: wrap; font-size: 13px; }
.cob-filtro label { margin: 0; font-weight: 600; font-size: 12.5px; color: var(--suave); }
.cob-filtro select { font-size: 13px; padding: 5px 8px; }
.cob-filtro .cob-chk { display: inline-flex; gap: 5px; align-items: center; font-weight: 500; color: var(--texto); }
.cob-filtro a { margin-left: auto; }

/* Documentos DP */
.dp-form { background: #f8f9fb; border: 1px solid var(--linha); border-radius: 8px; padding: 12px 14px; }
.dp-form label { margin-top: 6px; }
.dp-chk { display: inline-flex !important; gap: 6px; align-items: center; font-weight: 600; }
.cob-add .cob-add-cli { flex: 0 1 230px; font-size: 13px; padding: 7px 8px; }
.cob-cli { color: var(--texto); font-weight: 600; }
.cob-add .cob-add-tit { flex: 1 1 100%; padding: 8px 10px; }
.cob-add .cob-add-cli { flex: 1 1 220px; }