:root {
  --primaria: #1d1f23;
  --fundo: #f4f6f8;
  --superficie: #ffffff;
  --texto: #1d2430;
  --sutil: #5b6573;
  --borda: #dde2e8;
  --ok: #1e7a46;
  --ok-fundo: #e6f4ec;
  --erro: #b42318;
  --erro-fundo: #fdecea;
  --raio: 8px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
}
a { color: var(--primaria); }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.05rem; margin: 0 0 .25rem; }
.sutil { color: var(--sutil); }

/* Topo e menu */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .75rem;
  height: 56px; padding: 0 16px;
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.marca img { height: 26px; width: auto; display: block; }
.marca { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--texto); text-decoration: none; }
.marca-sigla {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 6px; background: var(--primaria); color: #fff; font-size: .8rem; font-weight: 700;
}
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.topo-usuario form { margin: 0; }
.topo-nome { color: var(--sutil); font-size: .9rem; }
.menu-botao { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; padding: 4px 8px; }

.estrutura { display: flex; min-height: calc(100vh - 56px); }
.menu {
  width: 220px; flex-shrink: 0; padding: 16px 8px;
  background: var(--superficie); border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 2px;
}
.menu a, .menu-em-breve { display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none; color: var(--texto); }
.menu a:hover { background: var(--fundo); }
.menu a.ativo { background: var(--primaria); color: #fff; box-shadow: inset 3px 0 0 #b9bcc1; }
.menu-em-breve { color: #9aa3ae; cursor: default; }
.menu-secao { margin: 16px 12px 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sutil); }
.conteudo { flex: 1; min-width: 0; padding: 24px; }

/* Componentes */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.cartao-futuro p { color: var(--sutil); margin: 0 0 .75rem; }
.etiqueta { display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--fundo); color: var(--sutil); }
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cabecalho-pagina h1 { margin: 0; }

.botao {
  display: inline-block; padding: 9px 16px; border: 0; border-radius: 6px;
  background: var(--primaria); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.botao:hover { filter: brightness(1.08); }
.botao-link { background: none; border: 0; color: var(--primaria); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

.aviso { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; }
.aviso ul { margin: 0; padding-left: 1.2rem; }
.aviso-ok { background: var(--ok-fundo); color: var(--ok); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); }

.formulario { display: grid; gap: 14px; max-width: 520px; }
label { display: grid; gap: 4px; font-weight: 500; }
label.caixa { display: flex; align-items: center; gap: 8px; }
input:not([type=checkbox]), select, textarea {
  width: 100%; padding: 9px 10px; font: inherit;
  border: 1px solid var(--borda); border-radius: 6px; background: #fff; color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaria); outline-offset: 0; border-color: var(--primaria); }
.acoes { display: flex; align-items: center; gap: 16px; }

.tabela-rolagem { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borda); }
.tabela th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sutil); background: #fafbfc; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr.inativo td { color: #9aa3ae; }

.subtitulo { margin: 32px 0 4px; font-size: 1.15rem; }
.cartao-numero { text-decoration: none; color: var(--texto); display: block; }
.cartao-numero:hover { border-color: var(--primaria); }
.numero { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: 8px; }
.vazio { color: var(--sutil); text-align: center; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtros input { flex: 1 1 240px; width: auto; }
.filtros select { flex: 0 1 220px; width: auto; }
.selo { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--fundo); color: var(--sutil); white-space: nowrap; }
.selo-em_analise, .selo-sol-nova { background: #fff4d6; color: #7a5600; }
.selo-aprovado, .selo-sol-convertida { background: var(--ok-fundo); color: var(--ok); }
.selo-bloqueado { background: var(--erro-fundo); color: var(--erro); }
.selo-sol-em_atendimento { background: #e6eefc; color: #1d4ea8; }
.selo-sol-cancelada { background: #eceef1; color: #6b7480; }
.grade-detalhe { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 16px 0; }
.grade-detalhe h2, .formulario h2 { font-size: 1rem; margin-bottom: 10px; }
.dados { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.dados dt { color: var(--sutil); }
.dados dd { margin: 0; }
textarea { resize: vertical; }
.abas { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.abas a { padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--sutil); background: var(--superficie); border: 1px solid var(--borda); font-size: .9rem; }
.abas a.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.solicitacao { margin-bottom: 12px; }
.solicitacao header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.solicitacao p { margin: 6px 0; }
.observacao { color: var(--sutil); font-style: italic; }
.linha-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.linha-form select { flex: 0 1 220px; width: auto; }
.linha-form input { flex: 1 1 220px; width: auto; }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-cartao { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.login-marca { display: flex; justify-content: center; padding: 6px 0 4px; }
.login-marca img { width: 100%; max-width: 280px; height: auto; }
.login-cartao h1 { margin: 0; }
.login-voltar { text-align: center; font-size: .9rem; color: var(--sutil); }

/* Celular */
@media (max-width: 760px) {
  .menu-botao { display: block; }
  .topo-nome { display: none; }
  .menu {
    position: fixed; top: 56px; left: 0; bottom: 0; z-index: 9;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,.08);
  }
  .menu.aberto { transform: none; }
  .conteudo { padding: 16px; }
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { border-bottom: 1px solid var(--borda); padding: 8px 0; }
  .tabela td { border: 0; padding: 4px 12px; }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--sutil); font-size: .85rem; }
}

/* Veículos */
.aviso-info { background: #eef3fb; color: #24467a; }
.form-veiculo { display: grid; gap: 16px; }
.form-veiculo h2 { font-size: 1rem; margin-bottom: 12px; }
.form-veiculo section { display: grid; gap: 12px; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.grade-campos .largo { grid-column: span 2; }
.maiusculas { text-transform: uppercase; }
.selo-veic-disponivel { background: var(--ok-fundo); color: var(--ok); }
.selo-veic-locado { background: #e6eefc; color: #1d4ea8; }
.selo-veic-manutencao { background: #fff4d6; color: #7a5600; }
.selo-veic-inativo { background: #eceef1; color: #6b7480; }
.linha-form input[type=date] { flex: 0 1 170px; width: auto; }
@media (max-width: 760px) { .grade-campos .largo { grid-column: auto; } }

/* Financeiro */
.cartao-alerta .numero { color: var(--erro); }
.selo-cob-atraso { background: var(--erro-fundo); color: var(--erro); }
.selo-cob-a_vencer { background: #fff4d6; color: #7a5600; }
.selo-cob-paga { background: var(--ok-fundo); color: var(--ok); }
.selo-cob-cancelada { background: #eceef1; color: #6b7480; }
.linha-form input[type=number] { flex: 0 0 90px; width: 90px; }
.vincular { align-items: center; }
.vincular-nome { flex: 1 1 260px; }
.recibo-valor { font-size: 1.6rem; font-weight: 700; text-align: right; }

/* Contratos e vistorias */
.selo-ctr-rascunho { background: #fff4d6; color: #7a5600; }
.selo-ctr-ativo { background: #e6eefc; color: #1d4ea8; }
.selo-ctr-encerrado { background: var(--ok-fundo); color: var(--ok); }
.selo-ctr-cancelado { background: #eceef1; color: #6b7480; }
.etapa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-left: 4px solid var(--primaria); }
.texto-erro { color: var(--erro); }
.botao-perigo { background: var(--erro); }
.botao-secundario { background: var(--superficie); color: var(--primaria); box-shadow: inset 0 0 0 1.5px var(--primaria); }
.subtitulo-acoes { margin: 28px 0 8px; }
.subtitulo-acoes .subtitulo { margin: 0; }
.a-definir { background: #fff1a8; color: #5c4700; padding: 0 .35em; border-radius: 4px; font-weight: 600; }
.opcoes-linha { border: 0; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes-linha legend { font-weight: 500; margin-bottom: 6px; width: 100%; }
.opcao { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borda); padding: 8px 14px; border-radius: 6px; font-weight: 500; cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--primaria); background: var(--fundo); }
.checklist td, .checklist th { text-align: center; }
.checklist td:first-child, .checklist th:first-child { text-align: left; }
.opcao-tabela { display: flex; justify-content: center; padding: 6px; cursor: pointer; }
.opcao-tabela input { width: 20px; height: 20px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--borda); display: block; }
@media (max-width: 760px) { .checklist thead { display: table-header-group; } .checklist, .checklist tbody, .checklist tr { display: revert; } .checklist td { display: table-cell; padding: 6px; } }

/* Financeiro: abas de seção, listas de cadastro, linha em destaque */
.abas-secao { border-bottom: 1px solid var(--borda); padding-bottom: 12px; }
.lista-simples { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.lista-simples li.inativo { color: #9aa3ae; }
.lista-simples form { margin: 0; }
.tabela tr.linha-atual td { background: var(--fundo); font-weight: 600; }

/* Vitrine do site */
.vitrine-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 16px 0; }
.vitrine-cartao { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.vitrine-cartao img, .vitrine-foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: #1b1c1f; }
.vitrine-cartao .selo { align-self: flex-start; }
.opcao-linha { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.opcao-linha input { width: auto; }

/* Verificação das locações */
.verificacao { border-left: 4px solid var(--erro); }
.verificacao p { margin: .3em 0; }
.verificacao-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.verificacao-acoes .linha-form { margin-top: 0; align-items: flex-end; }
.aviso-link { display: block; text-decoration: none; color: inherit; }
.aviso-link:hover { filter: brightness(.97); }

/* Central de pendências */
.selo-pend-alta { background: var(--erro-fundo); color: var(--erro); }
.selo-pend-media { background: #fff4d6; color: #7a5600; }
.selo-pend-info { background: #eceef1; color: #4b5563; }
.pendencia { border-left: 4px solid #c9ced6; }
.pendencia-alta { border-left-color: var(--erro); }
.pendencia-media { border-left-color: #e0a800; }
.pendencia-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pendencia-cabeca h2 { margin: 6px 0 4px; }
.pendencia-qtd { display: inline-block; min-width: 1.6em; padding: 0 .45em; border-radius: 999px; background: var(--primaria); color: #fff; font-size: .8em; text-align: center; }
.pendencias-painel { margin-bottom: 16px; }
.pendencias-painel .cabecalho-pagina { margin-bottom: 4px; }
.etapa-alerta { border-left-color: var(--erro); }