:root {
  --azul: #0d619b; --azul-escuro: #0a4c7a; --azul-claro: #e8f1f8; --amarelo: #f9bd00; --amarelo-claro: #fff6d6;
  --preto: #1d1d1b; --texto: #33363b; --cinza: #6b7079; --linha: #dde3ea; --fundo: #f6f8fb;
  --verde: #1a7f37; --verde-claro: #e3f4e8; --vermelho: #b42318; --vermelho-claro: #fdecea;
  --raio: 12px;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; font-family: Inter, "Segoe UI", Roboto, system-ui, sans-serif; color: var(--texto); background: var(--fundo); line-height: 1.5; font-size: 16px }
h1, h2, h3 { color: var(--preto); line-height: 1.25; margin: 0 0 8px }
h1 { font-size: 26px } h2 { font-size: 19px } h3 { font-size: 16px }
a { color: var(--azul) }
button, input, select, textarea { font: inherit }
.escondido { display: none !important }

.topo { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5 }
.topo img { height: 34px; display: block }
.topo .titulo { display: flex; flex-direction: column; border-left: 1px solid var(--linha); padding-left: 14px; min-width: 0 }
.topo .titulo b { color: var(--preto); font-size: 15px }
.topo .titulo span { font-size: 12.5px; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.topo .direita { margin-left: auto; display: flex; gap: 8px; align-items: center }

main { max-width: 860px; margin: 0 auto; padding: 20px 16px 60px }
main.largo { max-width: 1180px }
.sub { color: var(--cinza); margin: 0 0 16px }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin: 0 0 14px }

.barra-mes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px }
.barra-mes select { padding: 8px 10px; border: 1px solid #c9d2dc; border-radius: 8px; background: #fff; color: var(--preto); font-weight: 600; min-width: 0 }
.barra-mes .setas { display: flex; gap: 4px }

.etq { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; background: var(--azul-claro); color: var(--azul); white-space: nowrap }
.etq.submetido { background: var(--amarelo-claro); color: #7a5b00 }
.etq.devolvido { background: var(--vermelho-claro); color: var(--vermelho) }
.etq.aprovado { background: var(--verde-claro); color: var(--verde) }
.etq.pago { background: var(--verde); color: #fff }

.aviso { border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; background: var(--azul-claro); color: var(--azul-escuro); font-size: 15px }
.aviso.mau { background: var(--vermelho-claro); color: var(--vermelho) }
.aviso.bom { background: var(--verde-claro); color: var(--verde) }
.aviso.atencao { background: var(--amarelo-claro); color: #6b5000 }
.aviso b { color: inherit }

.totais { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
@media (min-width: 640px) { .totais { grid-template-columns: repeat(4, 1fr) } }
.totais div { background: var(--fundo); border-radius: 10px; padding: 10px 12px }
.totais span { display: block; font-size: 12.5px; color: var(--cinza) }
.totais b { font-size: 19px; color: var(--preto); font-variant-numeric: tabular-nums }
.totais .total { background: var(--azul); }
.totais .total span, .totais .total b { color: #fff }

.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--azul); background: var(--azul); color: #fff; border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2 }
.btn:hover { background: var(--azul-escuro) }
.btn.sec { background: #fff; color: var(--azul) }
.btn.sec:hover { background: var(--azul-claro) }
.btn.amarelo { background: var(--amarelo); border-color: var(--amarelo); color: var(--preto) }
.btn.amarelo:hover { background: #e6ad00 }
.btn.perigo { background: #fff; color: var(--vermelho); border-color: #e7b4ae }
.btn.perigo:hover { background: var(--vermelho-claro) }
.btn.peq { padding: 6px 10px; font-size: 14px; border-radius: 8px }
.btn[disabled] { opacity: .5; cursor: not-allowed }
.acoes .btn { flex: 1 1 200px }

.lista { display: grid; gap: 10px }
.item { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: start }
.item .tipo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--azul) }
.item .tipo.km { color: #8a6a00 }
.item h3 { margin: 2px 0 2px; font-size: 16px }
.item .det { font-size: 14px; color: var(--cinza) }
.item .valor { text-align: right; font-weight: 700; color: var(--preto); font-variant-numeric: tabular-nums; white-space: nowrap }
.item .valor small { display: block; font-weight: 500; color: var(--cinza); font-size: 12.5px }
.item .avisos { grid-column: 1 / -1; font-size: 13px; color: #6b5000; background: var(--amarelo-claro); border-radius: 8px; padding: 6px 10px }
.item .botoes { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px }
.vazio { text-align: center; color: var(--cinza); padding: 24px 12px; border: 2px dashed var(--linha); border-radius: var(--raio) }

details.regras { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 16px; margin-top: 18px }
details.regras summary { cursor: pointer; font-weight: 600; color: var(--azul) }
details.regras li { margin: 6px 0 }

/* formulários em diálogo */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(560px, 100vw - 16px); max-height: calc(100vh - 24px); box-shadow: 0 20px 60px rgba(0,0,0,.25); color: var(--texto) }
dialog::backdrop { background: rgba(15, 30, 45, .45) }
@media (max-width: 600px) { dialog { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100%; margin: 0; border-radius: 0 } }
dialog form { display: flex; flex-direction: column; max-height: inherit; height: 100% }
dialog .cab { padding: 16px 18px 8px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--linha) }
dialog .cab h2 { margin: 0; font-size: 18px; flex: 1 }
dialog .corpo { padding: 12px 18px; overflow-y: auto; flex: 1 }
dialog .rodape { padding: 12px 18px; border-top: 1px solid var(--linha); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; background: #fafbfc }
dialog .rodape .btn.perigo { margin-right: auto }
.fechar { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--cinza); cursor: pointer; padding: 4px 8px }

.campo { margin: 12px 0 }
.campo label, .rot { display: block; font-weight: 600; color: var(--preto); margin-bottom: 4px; font-size: 14.5px }
.campo .ajuda { font-size: 13px; color: var(--cinza); margin-top: 4px }
.campo input[type=text], .campo input[type=email], .campo input[type=number], .campo input[type=date], .campo input[type=time], .campo input[type=password], .campo select, .campo textarea, .entrada {
  width: 100%; padding: 10px 12px; border: 1px solid #c9d2dc; border-radius: 8px; background: #fff; color: var(--preto); min-height: 44px
}
.campo textarea { resize: vertical; min-height: 64px }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul) }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.duas .campo, .tres .campo { margin: 6px 0 }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 8px; cursor: pointer; margin: 10px 0; background: #fff }
.check:has(input:checked) { border-color: var(--azul); background: var(--azul-claro) }
.check input { margin-top: 3px; accent-color: var(--azul); width: 18px; height: 18px; flex: none }
.check span small { display: block; color: var(--cinza); font-size: 13px }
fieldset { border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px 10px; margin: 12px 0 }
legend { font-weight: 600; color: var(--preto); padding: 0 6px; font-size: 14.5px }
.previa { border-radius: 10px; padding: 12px 14px; background: var(--azul-claro); color: var(--azul-escuro); margin: 12px 0 4px; font-size: 15px }
.previa b { font-size: 18px }
.previa.mau { background: var(--vermelho-claro); color: var(--vermelho) }
.previa.nulo { background: var(--fundo); color: var(--cinza) }
.previa ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px }
.linha-km { display: flex; gap: 8px; align-items: stretch }
.linha-km input { flex: 1 }
.declaracao { background: var(--fundo); border-radius: 10px; padding: 12px 14px; font-size: 14.5px }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--preto); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 100; max-width: calc(100vw - 32px); box-shadow: 0 8px 30px rgba(0,0,0,.25); font-size: 15px }
.toast.mau { background: var(--vermelho) }

/* assinatura do mapa */
.cartao.assinar { border: 2px solid var(--amarelo); background: #fffdf5 }
.cartao.assinar h2 { margin-bottom: 4px }
.opcoes-assinatura { display: grid; gap: 12px }
@media (min-width: 640px) { .opcoes-assinatura { grid-template-columns: 1fr 1fr } }
.opcao-assinatura { background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start }
.opcao-assinatura h3 { margin: 0; color: var(--azul) }
.opcao-assinatura ol { margin: 0; padding-left: 20px; font-size: 15px }
.opcao-assinatura li { margin: 4px 0 }
.opcao-assinatura p { margin: 0; font-size: 15px }

/* separadores da página de cada pessoa */
.modulos { display: flex; gap: 6px; margin: 0 0 16px; border-bottom: 1px solid var(--linha) }
.modulos a { padding: 10px 14px; font-weight: 600; color: var(--cinza); text-decoration: none; border-bottom: 3px solid transparent }
.modulos a.ativo { color: var(--azul); border-bottom-color: var(--amarelo) }

/* férias */
.grelha-ferias { overflow-x: auto; margin: 8px 0 }
.grelha-ferias table { border-collapse: separate; border-spacing: 2px; font-size: 12px }
.grelha-ferias th { font-weight: 600; color: var(--cinza); text-align: center; min-width: 22px; padding: 2px 0; line-height: 1.1 }
.grelha-ferias th small { display: block; font-weight: 500; font-size: 10px }
.grelha-ferias th.nome { text-align: left; min-width: 76px; padding-right: 6px; color: var(--preto); position: sticky; left: 0; background: #fff; z-index: 1; white-space: nowrap }
.grelha-ferias td { height: 24px; min-width: 22px; background: #f3f5f8; border-radius: 4px }
.grelha-ferias .fds { background: #e3e7ec }
.grelha-ferias th.fds, .grelha-ferias th.feriado { background: none; color: #9aa1ab }
.grelha-ferias td.feriado { background: repeating-linear-gradient(45deg, #fff1c2, #fff1c2 3px, #fbe39a 3px, #fbe39a 6px) }
.grelha-ferias td.aprovado { background: var(--azul) }
.grelha-ferias td.pedido { background: var(--amarelo) }
.grelha-ferias .hoje { outline: 2px solid var(--preto); outline-offset: -2px }
.legenda-ferias { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--cinza) }
.legenda-ferias span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: #f3f5f8 }
.legenda-ferias .aprovado::before { background: var(--azul) }
.legenda-ferias .pedido::before { background: var(--amarelo) }
.legenda-ferias .fds::before { background: #e3e7ec }
.legenda-ferias .feriado::before { background: repeating-linear-gradient(45deg, #fff1c2, #fff1c2 3px, #fbe39a 3px, #fbe39a 6px) }
.item .tipo.ferias { color: var(--verde) }

/* admin */
.separadores { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 16px; border-bottom: 1px solid var(--linha) }
.separadores button { background: none; border: 0; padding: 10px 14px; font-weight: 600; color: var(--cinza); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap }
.separadores button.ativo { color: var(--azul); border-bottom-color: var(--amarelo) }
.tabela-rolar { overflow-x: auto; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio) }
table.dados { border-collapse: collapse; width: 100%; font-size: 14px }
table.dados th { text-align: left; background: var(--azul); color: #fff; font-weight: 600; padding: 8px 10px; white-space: nowrap; font-size: 13px }
table.dados td { padding: 8px 10px; border-top: 1px solid var(--linha); vertical-align: top }
table.dados td.num, table.dados th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
table.dados tr.total td { font-weight: 700; background: var(--azul-claro) }
table.dados tr:hover td { background: #fafcfe }
.grelha-pessoas { display: grid; gap: 14px }
.ligacao { display: flex; gap: 8px; align-items: center }
.ligacao input { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 13px }
.simples { max-width: 520px; text-align: center; padding-top: 60px }
.logo-grande { height: 60px; margin-bottom: 20px }
.login { max-width: 420px; margin: 40px auto }
.pequeno { font-size: 13px; color: var(--cinza) }
.hist td { font-size: 13px }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px }