/* JAGMAQ · Grupo 2B — vermelho e amarelo da marca, grafite para texto.
   As telas são organizadas em BLOCOS: cada bloco tem moldura, cabeçalho com
   cor de fundo própria e tabelas com linhas de grade, para as informações não
   se misturarem. Cadastros ficam recolhidos até o clique. */
:root {
  --marca: #EC3034;
  --marca-escura: #C8242A;
  --amarelo: #FCCC28;
  --grafite: #1F2328;
  --texto: #1F2328;
  --suave: #59616D;
  --fundo: #E7EAEE;          /* fundo da página: os blocos brancos se destacam */
  --borda: #CBD1D9;          /* moldura dos blocos */
  --grade: #DDE1E7;          /* linhas das tabelas */
  --zebra: #F6F7F9;          /* linhas alternadas */
  --realce: #FFF6D6;         /* linha sob o mouse */
  --ok: #1E7A46;      --ok-fundo: #E0F1E7;
  --alerta: #8A4F00;  --alerta-fundo: #FFEFC4;
  --erro: #B3261E;    --erro-fundo: #FCE7E6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
}

a { color: var(--marca-escura); }
code { font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #EEF0F2; padding: .05rem .3rem; border-radius: 4px; }

/* ---------------------------------------------------------------- cabeçalho */
.topo {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1.25rem; background: #fff;
  border-bottom: 1px solid var(--borda);
  position: relative;
}
.topo::after { /* faixa vermelha e amarela da marca */
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px;
  background: linear-gradient(90deg, var(--marca) 0 70%, var(--amarelo) 70% 100%);
}
.marca { display: flex; align-items: center; flex: none; }
.marca img { display: block; height: 40px; width: auto; }
.topo-simples .marca img { height: 36px; }

.menu { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.menu a {
  color: var(--grafite); text-decoration: none; padding: .45rem .55rem; border-radius: 6px;
  white-space: nowrap; font-weight: 500; font-size: .95rem;
}
.menu a:hover { background: #F3F4F6; }
.menu a.on { color: var(--marca-escura); background: #FDEBEC; }
.menu a .contagem { /* despesas esperando reembolso */
  background: var(--amarelo); border-color: #E2B000; color: #4A3300; min-width: 1.5em;
  padding: 0 .4rem; margin-left: .15rem; font-size: .72rem;
}

.conta { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex: none; }
.conta .nome { color: var(--suave); text-decoration: none; font-size: .9rem; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta .nome:hover, .conta .nome.on { color: var(--marca-escura); }
.conta form { margin: 0; }

main { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.25rem 3rem; }
h1 { font-size: 1.45rem; margin: .2rem 0 1.1rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; }
.voltar { margin: 0 0 .4rem; font-size: .9rem; }
.voltar a { text-decoration: none; }

/* ---------------------------------------------------------------- avisos */
.aviso { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1.1rem; font-weight: 500; border: 1px solid transparent; }
.aviso.ok { background: var(--ok-fundo); color: var(--ok); border-color: #B6DBC4; }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); border-color: #F1BFC2; }
.aviso.alerta { background: var(--alerta-fundo); color: var(--alerta); font-weight: 400; border-color: #ECD27E; }

/* ---------------------------------------------------------------- blocos */
.bloco {
  --tinta: #EEF0F3; --tinta-borda: var(--borda); --tinta-texto: var(--grafite);
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 12px;
  margin: 0 0 1.4rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(31, 35, 40, .06), 0 6px 16px rgba(31, 35, 40, .04);
}
.bloco.vermelho { --tinta: #FDEBEC; --tinta-borda: #EFC0C3; --tinta-texto: #8F1B20; }
.bloco.amarelo  { --tinta: #FFF2C2; --tinta-borda: #E9CF7A; --tinta-texto: #664400; }
.bloco.azul     { --tinta: #E4ECF8; --tinta-borda: #BBCDEA; --tinta-texto: #1D4785; }
.bloco.verde    { --tinta: #E1F1E7; --tinta-borda: #B3D9C1; --tinta-texto: #1B6239; }
.bloco.cinza    { --tinta: #EEF0F3; --tinta-borda: var(--borda); --tinta-texto: var(--grafite); }

.bloco-topo {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1.1rem;
  background: var(--tinta);
  border-bottom: 1px solid var(--tinta-borda);
  color: var(--tinta-texto);
}
.bloco-topo h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.contagem {
  display: inline-block; min-width: 1.7em; padding: .05rem .5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--tinta-borda, var(--borda));
  font-size: .78rem; font-weight: 700; text-align: center; color: var(--tinta-texto, var(--suave));
}
.bloco-acao { margin-left: auto; font-size: .88rem; font-weight: 600; color: var(--tinta-texto); }
.bloco-corpo { padding: 1.1rem 1.15rem; }
.bloco-corpo.encostado { padding: 0; overflow-x: auto; }
.bloco-corpo > :last-child { margin-bottom: 0; }
.bloco-corpo .vazio { margin: 0; }

/* cadastro recolhido: abre ao clicar no cabeçalho */
.novo { --tinta: #FFFFFF; --tinta-borda: var(--grade); }
.novo > summary { cursor: pointer; list-style: none; }
.novo > summary::-webkit-details-marker { display: none; }
.novo > summary:hover { background: #FAFAFB; }
.novo:not([open]) > summary { border-bottom: 0; }
.novo .sinal { width: 1.6rem; height: 1.6rem; border-radius: 7px; background: var(--marca); position: relative; flex: none; }
.novo .sinal::before, .novo .sinal::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%);
}
.novo .sinal::before { width: 11px; height: 2.5px; }
.novo .sinal::after { width: 2.5px; height: 11px; }
.novo[open] .sinal::after { display: none; }
.novo .dica { margin-left: auto; font-size: .82rem; color: var(--suave); font-weight: 400; }
.novo[open] .dica { display: none; }

/* bloco de exclusão */
.perigo .excluir { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }

/* ---------------------------------------------------------------- abas */
.abas {
  display: flex; gap: .3rem; margin: 0 0 1.1rem; padding: .35rem;
  background: #fff; border: 1px solid var(--borda); border-radius: 12px; overflow-x: auto;
}
.abas a {
  display: flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 8px;
  text-decoration: none; color: var(--grafite); font-weight: 600; white-space: nowrap;
}
.abas a:hover { background: #F2F3F5; }
.abas a.on { background: var(--grafite); color: #fff; }
.abas a.on .contagem { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }

/* ---------------------------------------------------------------- KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }
.kpi { border-radius: 12px; padding: 1rem 1.15rem; border: 1px solid; }
.kpi b { display: block; font-size: 2.1rem; line-height: 1.1; }
.kpi span { display: block; font-weight: 600; margin-top: .1rem; }
.kpi small { display: block; margin-top: .2rem; opacity: .85; font-size: .82rem; }
.kpi a { color: inherit; font-weight: 700; }
.kpi.cinza    { background: #fff;    border-color: var(--borda); }
.kpi.azul     { background: #E4ECF8; border-color: #BBCDEA; color: #1D4785; }
.kpi.amarelo  { background: #FFF2C2; border-color: #E9CF7A; color: #664400; }
.kpi.vermelho { background: #FDEBEC; border-color: #EFC0C3; color: #8F1B20; }
.kpi.verde    { background: #E1F1E7; border-color: #B3D9C1; color: #1B6239; }

.kpis.compacto b { font-size: 1.6rem; }
.bloco-corpo > .kpis { margin-bottom: 1rem; }
.bloco-corpo > .kpis:last-child { margin-bottom: 0; }

/* relatório: demonstrativo (receita, despesas, resultado) */
.demonstrativo td:first-child { padding-left: 1.6rem; }
.demonstrativo tr.secao th {
  text-align: left; background: #F0F2F5; color: var(--grafite); font-size: .78rem;
  border-bottom: 1px solid var(--borda); padding-left: .8rem;
}
.demonstrativo tbody tr:nth-child(even) td { background: #fff; }
.demonstrativo tr.subtotal td { font-weight: 700; border-top: 2px solid var(--borda); }
.demonstrativo tr.resultado td { font-weight: 800; font-size: 1.12rem; border-top: 2px solid var(--grafite); }
.demonstrativo tr.resultado td:first-child { padding-left: .8rem; }
.demonstrativo tr.resultado.positivo td { background: var(--ok-fundo); color: var(--ok); }
.demonstrativo tr.resultado.negativo td { background: var(--erro-fundo); color: var(--erro); }
.demonstrativo tbody tr:hover td { background: inherit; }

/* relatórios: filtro de período e atalhos */
.filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .85rem; }
.filtro label { min-width: 170px; }
.btn-principal {
  display: inline-block; padding: .55rem 1.1rem; border-radius: 6px; background: var(--marca);
  color: #fff; text-decoration: none; font-weight: 700; margin-left: auto;
}
.btn-principal:hover { background: var(--marca-escura); }
.atalhos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.atalhos a {
  padding: .3rem .75rem; border: 1px solid var(--borda); border-radius: 999px; background: #fff;
  color: var(--grafite); text-decoration: none; font-size: .85rem; font-weight: 600;
}
.atalhos a:hover { border-color: var(--grafite); }
.atalhos a.on { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.notas { margin: 0; padding-left: 1.1rem; }
/* navegação por mês (custos fixos) */
.meses { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.1rem; }
.meses a {
  padding: .4rem .85rem; border: 1px solid var(--borda); border-radius: 999px; background: #fff;
  color: var(--grafite); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.meses a:hover { border-color: var(--grafite); }
.meses strong { font-size: 1.1rem; text-transform: capitalize; }
.aviso.com-acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
/* filtro do relatório por veículo */
.filtro label.veiculo { min-width: 280px; }
.subtitulo { margin: -.6rem 0 1.1rem; color: var(--suave); }
.notas li { margin: .35rem 0; color: var(--suave); }
.notas strong { color: var(--texto); }
.aviso.faixa { border-radius: 0; margin: 0; border-width: 0 0 1px; }
.aviso.dica-faixa { background: #F6F7F9; color: var(--suave); font-weight: 400; border-color: var(--grade); font-size: .88rem; padding: .5rem 1rem; }
a.link-veiculo { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--suave); }
a.link-veiculo:hover { color: var(--marca-escura); border-bottom-color: var(--marca-escura); }

.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 1.4rem; align-items: start; }
.duas-colunas + .bloco { margin-top: 1.4rem; }
.duas-colunas > .bloco { margin-bottom: 0; }
.duas-colunas > .coluna > .bloco:last-child { margin-bottom: 0; }

.mini-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.mini-card { border: 1px solid var(--grade); border-radius: 10px; padding: .7rem .9rem; background: var(--zebra); }
.mini-card strong { display: block; margin-bottom: .15rem; }
.mini-card .valor { font-size: 1.4rem; font-weight: 700; }

/* ---------------------------------------------------------------- formulários */
label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--suave); }
input, select, button { font: inherit; }
input, select {
  padding: .5rem .6rem; border: 1px solid var(--borda); border-radius: 6px;
  background: #fff; color: var(--texto); min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--marca); outline-offset: -1px; border-color: var(--marca); }
button {
  padding: .5rem 1.1rem; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--marca); color: #fff; font-weight: 600;
}
button:hover { background: var(--marca-escura); }
button:disabled { opacity: .6; cursor: progress; }
button.btn-linha { background: #fff; color: var(--grafite); border: 1px solid var(--borda); font-weight: 500; }
button.btn-linha:hover { border-color: var(--grafite); background: #fff; }
button.btn-perigo { background: var(--erro); }
button.btn-perigo:hover { background: #8E1C16; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .85rem; align-items: end; }
.grade > .largo { grid-column: span 2; }
.grade.alinhar-topo { align-items: start; }
.acoes-form { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding-top: .3rem; }
.campo-fixo { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--suave); }
.campo-arquivo { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; font-size: .88rem; color: var(--suave); }
.campo-arquivo input[type="file"] { padding: .35rem; max-width: 100%; }
.campo-fixo strong { color: var(--texto); font-size: 1rem; padding: .5rem .6rem; background: var(--zebra); border: 1px dashed var(--borda); border-radius: 6px; font-weight: 600; }
label.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--texto); font-size: .95rem; }
label.check input { width: 1.1rem; height: 1.1rem; }

.inline { display: flex; gap: .4rem; align-items: center; margin: 0; }
.inline button { padding: .35rem .7rem; font-size: .85rem; }
.inline select, .inline input { padding: .3rem .45rem; font-size: .88rem; }
.inline .pct { display: inline-flex; align-items: center; gap: .2rem; color: var(--suave); font-size: .88rem; }
.inline .pct input { width: 3.4rem; text-align: right; }
tfoot td { background: #FFF8DD; font-weight: 700; border-top: 2px solid var(--borda); }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-editar {
  display: inline-block; padding: .32rem .75rem; border: 1px solid var(--borda); border-radius: 6px;
  background: #fff; color: var(--grafite); text-decoration: none; font-size: .85rem; font-weight: 600;
}
.btn-editar:hover { border-color: var(--grafite); background: #fff; }

.engates { min-width: 300px; }
.carreta-engatada { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.engates > .inline { margin-top: .3rem; }

/* ---------------------------------------------------------------- tabelas com grade */
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: .62rem .8rem; text-align: left; vertical-align: middle; border: 1px solid var(--grade); }
th {
  background: #F0F2F5; color: var(--suave);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--borda);
}
tbody tr:nth-child(even) td { background: var(--zebra); }
tbody tr:hover td { background: var(--realce); }
/* dentro do bloco, a moldura do bloco faz a borda externa da tabela */
.encostado > table { border-style: hidden; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
td.n { white-space: nowrap; }          /* "R$ 14.200,00" não quebra em duas linhas */
/* tabelas largas do relatório: um pouco mais justas */
table.compacta th, table.compacta td { padding: .5rem .55rem; }
table.compacta td { font-size: .9rem; }
td.acao { width: 1%; white-space: nowrap; text-align: center; }
td.falta, tbody tr:nth-child(even) td.falta { background: var(--alerta-fundo); }   /* frete a informar */
/* tabela agrupada (despesas a reembolsar por motorista) */
table.agrupada tr.grupo td { background: #FFF8DD; border-top: 2px solid #E9CF7A; }
table.agrupada tbody tr:nth-child(even):not(.grupo) td { background: var(--zebra); }
table.agrupada tbody tr:nth-child(odd):not(.grupo) td { background: #fff; }
table.agrupada tbody tr:not(.grupo):hover td { background: var(--realce); }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- etiquetas */
.tag { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #ECEFF3; color: var(--suave); white-space: nowrap; border: 1px solid transparent; }
.tag.ativo { background: var(--ok-fundo); color: var(--ok); border-color: #B6DBC4; }
.tag.manutencao, .tag.proxima, .tag.próxima { background: var(--alerta-fundo); color: var(--alerta); border-color: #ECD27E; }
.tag.vencida, .tag.inativo { background: var(--erro-fundo); color: var(--erro); border-color: #F1BFC2; }
.tag.edicao { background: #E4ECF8; color: #1D4785; border-color: #BBCDEA; }
/* despesas de viagem */
.tag.pendente { background: var(--alerta-fundo); color: var(--alerta); border-color: #ECD27E; }
.tag.reembolsada { background: var(--ok-fundo); color: var(--ok); border-color: #B6DBC4; }
.tag.recusada { background: var(--erro-fundo); color: var(--erro); border-color: #F1BFC2; }
a.tag { text-decoration: none; }
/* recebimento dos fretes */
.tag.a_receber { background: var(--alerta-fundo); color: var(--alerta); border-color: #ECD27E; }
.tag.adiantamento, .tag.em_lote { background: #E4ECF8; color: #1D4785; border-color: #BBCDEA; }
.tag.recebido { background: var(--ok-fundo); color: var(--ok); border-color: #B6DBC4; }
th.sel, td.sel { width: 1%; text-align: center; }
td.sel input { width: 1.15rem; height: 1.15rem; }
.barra-lote {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; padding: .9rem 1.1rem;
  background: #F6F7F9; border-top: 2px solid var(--borda);
}
.barra-lote strong { align-self: center; }
.barra-lote label.descricao { flex: 1; min-width: 240px; }
.atalhos.espaco { margin: 0 0 1rem; }
/* destino do frete */
.tag.rede_2b { background: var(--grafite); color: #fff; }
.tag.terceiros { background: #E4ECF8; color: #1D4785; border-color: #BBCDEA; }

.positivo { color: var(--ok); }
.negativo { color: var(--erro); }

.vazio { color: var(--suave); font-style: italic; }
.pequeno, small { color: var(--suave); font-size: .85rem; }
.pequeno { margin: .9rem 0 0; }
.sem-margem { margin: 0; }
.centro { text-align: center; }
.estreito { max-width: 480px; }
.centralizado { margin: 2rem auto 0; }

/* ---------------------------------------------------------------- login */
.pagina-login {
  background: linear-gradient(var(--marca) 0 230px, var(--amarelo) 230px 236px, var(--fundo) 236px);
  min-height: 100vh;
}
.pagina-login main { max-width: 440px; padding-top: 3.5rem; }
.cartao-login {
  background: #fff; border-radius: 16px; padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 12px 32px rgba(31, 35, 40, .16), 0 2px 6px rgba(31, 35, 40, .08);
}
.logo-login { display: block; margin: 0 auto .75rem; width: 236px; max-width: 80%; height: auto; }
.cartao-login h1 { text-align: center; font-size: 1.05rem; font-weight: 600; color: var(--suave); margin: 0 0 1.25rem; letter-spacing: .02em; }
.cartao-login form > label { margin-bottom: .8rem; }
.cartao-login input { font-size: 1rem; padding: .7rem; }
.cartao-login .aviso code { display: block; margin-top: .4rem; }

/* ---------------------------------------------------------------- app do motorista */
.btn-grande {
  display: block; width: 100%; padding: .95rem 1rem; font-size: 1.05rem; text-align: center;
  background: var(--marca); color: #fff; border-radius: 10px; text-decoration: none; font-weight: 700; border: 0;
}
.btn-grande:hover { background: var(--marca-escura); }
.pagina-app main { max-width: 560px; }
.pagina-app .bloco-corpo form > label { margin-bottom: .75rem; }
.pagina-app .bloco-corpo input, .pagina-app .bloco-corpo select { font-size: 1rem; padding: .7rem; }
.pagina-app .conjunto { font-size: 1.15rem; font-weight: 700; margin: 0 0 .25rem; }
.pagina-app .rota { margin: 0 0 .25rem; font-size: 1.05rem; }
.pagina-app .pequeno { margin: 0 0 1rem; }
.pagina-app .explica { margin: 0 0 1rem; color: var(--suave); }
/* escolha grande (frete para a rede 2B ou terceiros) */
.escolha { border: 0; padding: 0; margin: 0 0 .75rem; min-width: 0; }
.escolha legend { padding: 0; margin-bottom: .3rem; font-size: .88rem; color: var(--suave); }
.escolha .opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.escolha .opcao {
  flex-direction: row; align-items: center; gap: .55rem; padding: .8rem .75rem;
  border: 2px solid var(--borda); border-radius: 10px; background: #fff; cursor: pointer;
  color: var(--texto); font-size: 1rem; font-weight: 600; line-height: 1.2;
}
.escolha .opcao input { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--marca); }
.escolha .opcao:has(input:checked) { border-color: var(--marca); background: #FDEBEC; }
.escolha .opcoes.tres { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.escolha .opcoes.tres .opcao { padding: .7rem .5rem; font-size: .95rem; gap: .4rem; }
.pagina-app input[type="file"] { padding: .55rem; background: var(--zebra); }
.lista-despesas { list-style: none; margin: 0; padding: 0; }
.lista-despesas li { padding: .8rem 1.1rem; border-bottom: 1px solid var(--grade); }
.lista-despesas li:nth-child(even) { background: var(--zebra); }
.lista-despesas li:last-child { border-bottom: 0; }
.lista-despesas .linha { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lista-despesas .linha > span { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lista-despesas .valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.lista-despesas .detalhe { margin: .15rem 0 .45rem; color: var(--suave); font-size: .88rem; }
.lista-despesas .motivo { margin: .45rem 0 0; color: var(--erro); font-size: .88rem; }
.cte-depois { margin: 0 0 1rem; padding: .7rem .8rem; border: 1px dashed #E9CF7A; border-radius: 10px; background: #FFFBEA; }
.cte-depois label { margin: 0; }
.linha-cte { display: flex; gap: .5rem; }
.linha-cte input { flex: 1; }
.linha-cte button { flex: none; }
details.extra { margin: 0 0 .9rem; border: 1px dashed var(--borda); border-radius: 10px; padding: .55rem .8rem; }
details.extra > summary { cursor: pointer; color: var(--marca-escura); font-weight: 600; }
details.extra[open] > summary { margin-bottom: .6rem; }
details.extra label { margin-bottom: .6rem; }
details.extra .pequeno { margin: 0; }
.confirmar-mini > summary { cursor: pointer; color: var(--erro); font-size: .88rem; font-weight: 600; list-style: none; }
.confirmar-mini > summary::-webkit-details-marker { display: none; }
.confirmar-mini[open] > summary { color: var(--suave); }
.confirmar-mini form { margin-top: .4rem; }
.confirmar-mini button { padding: .4rem .8rem; font-size: .88rem; }
.estreito .bloco-corpo form > label { margin-bottom: .75rem; }
.rodape { text-align: center; margin-top: 1.5rem; color: var(--suave); font-size: .9rem; }

/* ---------------------------------------------------------------- telas estreitas */
@media (max-width: 1440px) {   /* o menu desce para uma linha própria */
  .topo { flex-wrap: wrap; gap: .5rem .75rem; }
  .menu { order: 3; width: 100%; }
}
@media (max-width: 600px) {
  main { padding: 1rem .8rem 2rem; }
  .novo .dica { display: none; }      /* no celular o "+" já indica que abre */
  .grade > .largo { grid-column: auto; }
  .duas-colunas { grid-template-columns: 1fr; }
  table { white-space: nowrap; }
}