:root {
  --azul: #0B2545; --azul-2: #13315C; --azul-claro: #E8EEF6; --texto: #1B2430; --cinza: #6B7480; --borda: #D6DCE4;
  --fundo: #F4F6F9; --branco: #fff; --verde: #1E7B4A; --vermelho: #B42318; --amarelo: #B26B00;
  --raio: 8px; font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; color: var(--texto);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; border: 1px solid var(--borda); background: var(--branco); color: var(--texto); border-radius: var(--raio); padding: 7px 14px; }
button:hover { border-color: var(--azul-2); }
button.primario { background: var(--azul); color: #fff; border-color: var(--azul); }
button.primario:hover { background: var(--azul-2); }
button.perigo { color: var(--vermelho); border-color: #f0c4c0; }
button.link { border: 0; background: none; color: inherit; text-decoration: underline; padding: 0 4px; }
button:disabled { opacity: .55; cursor: wait; }
input, select, textarea { font: inherit; width: 100%; padding: 7px 9px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid #9db4d6; border-color: var(--azul-2); }
label { display: block; font-size: 13px; color: var(--cinza); }
label > input, label > select, label > textarea { margin-top: 3px; color: var(--texto); }
.marca { font-weight: 800; letter-spacing: .5px; color: var(--azul); font-size: 18px; }
.marca span { font-weight: 400; }
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 20px; }
.login-cartao { width: min(380px, 100%); display: grid; gap: 12px; }
.sub { margin: -6px 0 6px; color: var(--cinza); }
.msg { min-height: 1.2em; color: var(--vermelho); margin: 0; }
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 18px; padding: 10px 16px; background: var(--azul); color: #fff; flex-wrap: wrap; }
.topo .marca { color: #fff; }
#abas { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
#abas button { background: transparent; color: #cfd9e8; border: 0; }
#abas button.ativa { background: rgba(255,255,255,.14); color: #fff; }
.quem { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.selo { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #fff3cd; color: #6b4b00; font-weight: 600; }
.selo.producao { background: #d1f2df; color: #0c5132; }
main { padding: 18px 16px 40px; max-width: 1200px; margin: 0 auto; }
.barra { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.barra h2 { margin: 0 auto 0 0; font-size: 20px; color: var(--azul); }
.barra input[type=search] { width: 260px; max-width: 100%; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #edf0f4; vertical-align: top; font-size: 14px; }
th { background: var(--azul-claro); color: var(--azul); font-weight: 600; font-size: 13px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.tabela-rolagem { overflow-x: auto; }
.st { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.st-autorizada, .st-faturada { background: #d1f2df; color: #0c5132; }
.st-rejeitada, .st-denegada { background: #fde2df; color: #8a1c12; }
.st-processando, .st-aberta { background: #fff3cd; color: #6b4b00; }
.st-cancelada { background: #e7e9ee; color: #4a5260; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; }
.grade .largo { grid-column: span 2; }
.grade .inteiro { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px 12px; margin: 0 0 12px; }
legend { color: var(--azul); font-weight: 600; padding: 0 6px; }
.acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.modal { position: fixed; inset: 0; background: rgba(11,37,69,.45); display: grid; place-items: center; padding: 16px; z-index: 20; }
.modal-caixa { background: #fff; border-radius: 12px; width: min(980px, 100%); max-height: 92vh; overflow: auto; padding: 18px; }
.modal-caixa h3 { margin: 0 0 12px; color: var(--azul); }
.aviso { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 30; max-width: calc(100% - 32px); }
.aviso.erro { background: var(--vermelho); }
.pendencias { background: #fff6f5; border: 1px solid #f3c1bb; border-radius: var(--raio); padding: 10px 14px; color: #6d1a12; }
.pendencias ul { margin: 6px 0 0; padding-left: 20px; }
.ok-box { background: #effaf3; border: 1px solid #b7e2c7; border-radius: var(--raio); padding: 10px 14px; color: #0c5132; }
.itens-os td input, .itens-os td select { min-width: 70px; }
.total-os { text-align: right; font-size: 18px; font-weight: 700; color: var(--azul); margin-top: 8px; }
.vazio { text-align: center; color: var(--cinza); padding: 26px; }
.dica { font-size: 12px; color: var(--cinza); margin-top: 3px; }
code { font-size: 12px; word-break: break-all; }
@media (max-width: 640px) { .grade .largo { grid-column: auto; } .barra input[type=search] { width: 100%; } }
.seletor-empresa { color: #cfd9e8; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.seletor-empresa select { width: auto; margin: 0; padding: 4px 8px; font-weight: 700; color: var(--azul); }
.seletor-empresa b { color: #fff; }

/* chamados do EducaDF */
.contador { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-left: 4px; }
.st-aguardando { background: #fff3cd; color: #6b4b00; }
.st-aceito, .st-os_criada { background: #d1f2df; color: #0c5132; }
.st-recusado, .st-expirado { background: #e7e9ee; color: #4a5260; }
.prazo-urgente { color: #8a1c12; font-weight: 700; }
.prazo-ok { color: #0c5132; }
a.botao { display: inline-block; font: inherit; border: 1px solid var(--borda); background: var(--branco); color: var(--texto); border-radius: var(--raio); padding: 7px 14px; text-decoration: none; }
a.botao:hover { border-color: var(--azul-2); }

/* XML de compra e anexos */
label.botao { display: inline-block; cursor: pointer; border: 1px solid var(--borda); background: var(--branco); border-radius: var(--raio); padding: 7px 14px; }
label.botao:hover { border-color: var(--azul-2); }
.item-xml { margin-bottom: 10px; }
.marcas { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
label.marca { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.lista-anexos { margin: 0 0 8px; padding-left: 18px; }
.lista-anexos li { margin: 3px 0; }
button.link.perigo { color: var(--vermelho); }

/* mapa comparativo da cotação */
table.mapa td.melhor { background: #d1f2df; }
table.mapa tfoot td { border-top: 2px solid var(--borda); }
.aviso-importado { background: #fff7e0; border: 1px solid #f0c36d; border-radius: var(--raio); padding: 8px 12px; margin: 0 0 10px; }
.fin-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 800px) { .fin-grade { grid-template-columns: 1fr; } }
table.dre td:first-child { padding-left: 4px; }
table.dre tr.dre-total td { border-top: 1px solid var(--borda); }
table.dre tr.dre-final td { border-top: 2px solid var(--texto); font-size: 1.05em; }
table.dre tr.dre-final.neg td { color: var(--vermelho); }
.fin-saldo { font-size: 1.6em; font-weight: 700; margin: 4px 0; }
/* contas a pagar */
.cp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 14px; background: #fff; border: 1px solid #dde2ea; border-left: 4px solid #8a94a6; border-radius: var(--raio); font: inherit; color: inherit; }
button.cp-card { cursor: pointer; }
.cp-card b { font-size: 20px; } .cp-card span { color: #5a6475; font-size: 13px; }
.cp-card.vermelho { border-left-color: #c0392b; } .cp-card.vermelho b { color: #c0392b; }
.cp-card.laranja { border-left-color: #d35400; } .cp-card.laranja b { color: #d35400; }
.cp-card.azul { border-left-color: #2563eb; } .cp-card.azul b { color: #2563eb; }
.cp-card.verde { border-left-color: #16a34a; } .cp-card.verde b { color: #16a34a; font-size: 17px; }
.cp-card.ativo { outline: 2px solid currentColor; outline-color: #2563eb; }
.cp-filtros { flex-wrap: wrap; } .cp-filtros select { max-width: 260px; }
.cp-meses { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cp-meses button { flex: 1; min-width: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; }
.cp-meses button span { font-size: 11px; opacity: .85; text-transform: uppercase; }
tr.cp-linha { cursor: pointer; } tr.cp-linha:hover td { background: #f6f8fb; }
td.cp-acoes { white-space: nowrap; } td.cp-acoes button { padding: 3px 8px; margin-right: 3px; }
.cp-rodape { display: flex; gap: 22px; flex-wrap: wrap; background: #f8faff; border: 1px solid #e5e7eb; border-radius: var(--raio); padding: 10px 16px; margin-top: 10px; font-size: 13px; }
.cp-rodape div { display: flex; flex-direction: column; }
/* marca (28/10/2026) */
.tela-login { align-content: center; gap: 14px; }
.logo-login { display: block; width: 190px; height: auto; margin: 4px auto 0; }
.login-cartao > .marca { text-align: center; letter-spacing: 4px; font-size: 13px; color: var(--cinza); margin-top: -6px; }
.login-cartao .sub { text-align: center; }
.webmail { padding-top: 12px; padding-bottom: 12px; }
.webmail summary { cursor: pointer; font-weight: 600; color: var(--azul); }
.webmail form { display: grid; gap: 12px; margin-top: 12px; }
.topo .marca { display: flex; align-items: center; gap: 8px; }
.logo-topo { height: 32px; width: auto; display: block; }
.link-topo { color: #fff; font-size: 14px; }