/* =========================================================================
   componentes.css — painéis, KPIs, tabelas, formulários, modais, gráficos
   Sistema de Gestão — Fazenda Dileta
   ========================================================================= */

/* ------------------------------------------------------------- seções */
.secao-cab {
  margin: 32px 0 14px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.secao-cab:first-child { margin-top: 0; }
.secao-cab__texto { flex: 1 1 320px; min-width: 0; }
.secao-cab h2 { font-size: 18px; font-weight: 700; }
.secao-cab p { margin: 3px 0 0; font-size: 13.5px; color: var(--cinza-600); max-width: 80ch; }

/* -------------------------------------------------------------- painel */
.painel {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  margin-bottom: 16px;
}

.painel__cab {
  padding: 16px 20px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.painel__cab h3 {
  font-size: 15px;
  font-weight: 650;
  color: var(--cinza-900);
}

.painel__acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.painel__corpo { padding: 14px 20px 20px; }
.painel__corpo--zero { padding: 0; }

/* ----------------------------------------------------------------- KPI */
.kpi {
  --kpi-cor: var(--ouro-500);
  position: relative;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 18px 15px;
  box-shadow: var(--sombra-1);
  min-width: 0;
}

.kpi--ambar    { --kpi-cor: var(--ouro-600); }
.kpi--verde    { --kpi-cor: var(--verde-600); }
.kpi--vermelho { --kpi-cor: var(--vermelho-600); }
.kpi--azul     { --kpi-cor: var(--azul-600); }
.kpi--terra    { --kpi-cor: var(--terra-700); }
.kpi--cinza    { --kpi-cor: var(--cinza-400); }

.kpi__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cinza-600);
  margin-bottom: 6px;
}

.kpi__rotulo::before {
  content: '';
  width: 8px; height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--kpi-cor);
}

.kpi__valor {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--cinza-900);
  font-variant-numeric: tabular-nums;
}

.kpi__valor small { font-size: 14px; font-weight: 600; color: var(--cinza-600); letter-spacing: 0; }

.kpi__complemento {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--cinza-600);
  line-height: 1.4;
}

/* destaque escuro (topo do Painel) -------------------------------------- */
.destaque {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 28px;
  align-items: center;
  padding: 24px 26px;
  border-radius: var(--raio-g);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 209, 0, .18) 0%, rgba(255, 209, 0, 0) 55%),
    linear-gradient(135deg, #1b1a17 0%, #0b0b0a 100%);
  color: #d9d7cf;
  box-shadow: var(--sombra-2);
  margin-bottom: 20px;
}

.destaque__rotulo { font-size: 13px; font-weight: 600; color: #a9a69c; letter-spacing: .02em; }
.destaque__valor {
  font-family: var(--fonte-titulo);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ouro-500);
  margin: 6px 0 6px;
  font-variant-numeric: tabular-nums;
}
.destaque__valor small { font-size: 18px; color: #d9d7cf; font-weight: 600; letter-spacing: 0; margin-left: 6px; }
.destaque__sub { font-size: 13.5px; color: #b4b1a7; }

.destaque__barra {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: #2a2925;
  gap: 2px;
}
.destaque__barra i { display: block; height: 100%; }

.destaque__legenda {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 16px;
}
.destaque__legenda a {
  display: block;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  border-radius: 8px;
}
.destaque__legenda a:hover { text-decoration: none; }
.destaque__legenda a:hover b { color: var(--ouro-400); }
.destaque__legenda span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #a9a69c; }
.destaque__legenda span i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.destaque__legenda b { display: block; font-size: 22px; color: #fff; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ações rápidas ----------------------------------------------------------- */
.acoes-rapidas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.acao-rapida {
  --acao-cor: var(--preto-800);
  --acao-fundo: var(--cinza-100);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--cinza-900);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.acao-rapida:hover { box-shadow: var(--sombra-2); border-color: var(--cinza-300); transform: translateY(-1px); }
.acao-rapida:active { transform: scale(.98); }

.acao-rapida__icone {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--acao-fundo);
  color: var(--acao-cor);
}
.acao-rapida__icone .ic { width: 20px; height: 20px; }

.acao-rapida--verde    { --acao-cor: var(--verde-700);    --acao-fundo: var(--verde-100); }
.acao-rapida--vermelho { --acao-cor: var(--vermelho-600); --acao-fundo: var(--vermelho-100); }
.acao-rapida--ambar    { --acao-cor: #8a6200;             --acao-fundo: var(--ouro-100); }
.acao-rapida--azul     { --acao-cor: var(--azul-600);     --acao-fundo: var(--azul-100); }
.acao-rapida--terra    { --acao-cor: var(--terra-700);    --acao-fundo: var(--terra-100); }
.acao-rapida--neutro   { --acao-cor: var(--preto-800);    --acao-fundo: var(--cinza-200); }

.acao-rapida__texto { min-width: 0; line-height: 1.25; }
.acao-rapida__texto small { display: block; font-size: 12.5px; font-weight: 400; color: var(--cinza-600); margin-top: 2px; }

/* ------------------------------------------------------------- botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s, transform .1s;
  white-space: nowrap;
  text-decoration: none;
}
.botao:hover { text-decoration: none; }
.botao:active:not(:disabled) { transform: scale(.98); }
.botao:disabled { opacity: .45; cursor: default; }

.botao--primario { background: var(--preto-800); color: #fff; }
.botao--primario:hover:not(:disabled) { background: var(--preto-600); }

.botao--neutro { background: var(--branco); color: var(--cinza-800); border-color: var(--cinza-300); }
.botao--neutro:hover:not(:disabled) { background: var(--cinza-050); border-color: var(--cinza-400); }

.botao--perigo { background: var(--vermelho-600); color: #fff; }
.botao--perigo:hover:not(:disabled) { background: var(--vermelho-700); }

.botao--ambar { background: var(--ouro-500); color: var(--preto-900); }
.botao--ambar:hover:not(:disabled) { background: var(--ouro-400); }

.botao--pequeno { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.botao--pequeno .ic { width: 16px; height: 16px; }

.botao-icone {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--cinza-600);
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
}
.botao-icone:hover { background: var(--cinza-100); color: var(--cinza-900); }
.botao-icone .ic { width: 20px; height: 20px; }

.barra-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* ----------------------------------------------------------- etiquetas */
.etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.etiqueta--neutro   { background: var(--cinza-200); color: var(--cinza-700); }
.etiqueta--verde    { background: var(--verde-100); color: var(--verde-700); }
.etiqueta--ambar    { background: var(--ouro-100); color: #765400; }
.etiqueta--vermelho { background: var(--vermelho-100); color: #922f21; }
.etiqueta--azul     { background: var(--azul-100); color: #255a80; }

/* ------------------------------------------------------------- tabelas */
.tabela-caixa {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  margin-bottom: 16px;
}

.tabela-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--cinza-200);
  flex-wrap: wrap;
}

.campo-busca { position: relative; flex: 1 1 240px; max-width: 380px; }
.campo-busca__icone {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--cinza-500); pointer-events: none; display: inline-flex;
}
.campo-busca input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 38px;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  font-size: 14px;
  background: var(--cinza-100);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.campo-busca input:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--ouro-500);
  box-shadow: 0 0 0 4px rgba(255, 209, 0, .18);
}

.tabela-barra__info { font-size: 13px; color: var(--cinza-600); white-space: nowrap; }
.tabela-barra__acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.tabela-barra__ordem { display: none; }

.tabela-rolagem { overflow: auto; max-height: 68vh; }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cinza-050);
  border-bottom: 1px solid var(--cinza-200);
  padding: 11px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cinza-600);
  white-space: nowrap;
}

.tabela thead th.ordenavel { cursor: pointer; user-select: none; }
.tabela thead th.ordenavel:hover { color: var(--cinza-900); }
.tabela thead th.ordenado { color: var(--cinza-900); }
.tabela thead th .seta-ordem { color: var(--ouro-600); margin-left: 3px; }

.tabela tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cinza-200);
  vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: none; }

.tabela tbody tr:hover { background: var(--cinza-050); }
.tabela tbody tr.clicavel { cursor: pointer; }
.tabela tbody tr.clicavel:hover { background: var(--ouro-050); }
.tabela tbody tr.clicavel:hover td:first-child { box-shadow: inset 3px 0 0 var(--ouro-500); }

.tabela tfoot td {
  padding: 12px 16px;
  border-top: 2px solid var(--cinza-200);
  background: var(--cinza-050);
  font-weight: 700;
}

.tabela .dir, .tabela th.dir { text-align: right; }
.tabela .centro, .tabela th.centro { text-align: center; }
.tabela .num { font-variant-numeric: tabular-nums; }
.tabela__traco { color: var(--cinza-400); }

.tabela__vazio {
  padding: 44px 16px !important;
  text-align: center;
  color: var(--cinza-500);
}

.tabela--compacta tbody td { padding: 8px 12px; font-size: 13.5px; }
.tabela--compacta thead th { padding: 9px 12px; }

.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--cinza-200);
}
.paginacao:empty { display: none; }
.paginacao__rotulo { font-size: 13px; color: var(--cinza-600); margin: 0 8px; }

/* lista compacta (substitui a tabela no celular) ------------------------ */
.lista-cartoes { display: none; }

.cartao-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cinza-200);
  min-height: 64px;
}
.cartao-linha:last-child { border-bottom: none; }
.cartao-linha.clicavel { cursor: pointer; }
.cartao-linha.clicavel:active { background: var(--ouro-050); }

.cartao-linha__selo {
  min-width: 58px;
  height: 40px;
  padding: 0 8px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--preto-800);
  color: var(--ouro-500);
  font-weight: 700;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cartao-linha__selo--apagado { background: var(--cinza-200); color: var(--cinza-700); }
.cartao-linha__selo .ic { width: 20px; height: 20px; }

.cartao-linha__texto { flex: 1; min-width: 0; line-height: 1.3; }
.cartao-linha__texto b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--cinza-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cartao-linha__texto small {
  display: block;
  font-size: 13px;
  color: var(--cinza-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.cartao-linha__direita { text-align: right; font-size: 14px; font-weight: 600; color: var(--cinza-900); line-height: 1.3; }
.cartao-linha__direita small { display: block; font-size: 12.5px; font-weight: 500; color: var(--cinza-600); margin-top: 3px; }

/* atalhos de filtro em "pílulas" ----------------------------------------- */
.pilulas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  margin-bottom: 14px;
  scrollbar-width: none;
}
.pilulas::-webkit-scrollbar { display: none; }
.pilula {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--cinza-300);
  background: var(--branco);
  font-size: 14px;
  font-weight: 600;
  color: var(--cinza-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.pilula small { font-size: 12.5px; color: var(--cinza-500); font-weight: 600; }
.pilula:hover { border-color: var(--cinza-400); }
.pilula--ativa, .pilula--ativa:hover { background: var(--preto-800); border-color: var(--preto-800); color: #fff; }
.pilula--ativa small { color: var(--ouro-500); }

/* botão que abre os filtros no celular (inserido pelo app.js) */
.botao-filtros { display: none; }

/* --------------------------------------------------------- formulários */
.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
}

.form__grupo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form__grupo--total { grid-column: 1 / -1; }

.form__grupo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cinza-700);
}

.form__grupo input,
.form__grupo select,
.form__grupo textarea,
.modal__corpo textarea,
.modal__corpo > input,
.modal__corpo select:not(.filtros select) {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio-p);
  font-size: 14.5px;
  background: var(--branco);
  color: var(--cinza-900);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.form__grupo input:focus,
.form__grupo select:focus,
.form__grupo textarea:focus,
.modal__corpo textarea:focus {
  outline: none;
  border-color: var(--ouro-500);
  box-shadow: 0 0 0 4px rgba(255, 209, 0, .2);
}

.form__grupo textarea, .modal__corpo textarea { resize: vertical; line-height: 1.45; }
.form__dica { font-size: 12.5px; color: var(--cinza-600); line-height: 1.4; }

.form__separador {
  grid-column: 1 / -1;
  border-top: 1px solid var(--cinza-200);
  margin-top: 4px;
  padding-top: 14px;
}
.form__separador span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ouro-texto);
}

.form__check {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}
.form__check input { width: 20px; height: 20px; accent-color: var(--preto-800); }

/* --------------------------------------------------------------- modal */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 10, .5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
  z-index: 80;
  animation: entrar .18s ease;
}
.modal-fundo--saindo { animation: sair .18s ease forwards; }

@keyframes entrar { from { opacity: 0; } to { opacity: 1; } }
@keyframes sair   { to { opacity: 0; } }

.modal {
  background: var(--branco);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-3);
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: subir .22s cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
}

@keyframes subir { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }

.modal__cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px 24px;
  border-bottom: 1px solid var(--cinza-200);
}
.modal__cab h2 { font-size: 18px; flex: 1; min-width: 0; }

.modal__corpo { padding: 22px 24px; overflow-y: auto; max-height: 70vh; }

.modal__rodape {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--cinza-200);
  background: var(--cinza-050);
}
.modal__rodape:empty { display: none; }

/* -------------------------------------------------------------- avisos */
#avisos {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--raio);
  box-shadow: var(--sombra-3);
  font-size: 14px;
  font-weight: 500;
  background: var(--preto-800);
  color: #f2f1ec;
  animation: entrarAviso .22s cubic-bezier(.2, .8, .2, 1);
}

.aviso__icone { display: inline-flex; color: var(--ouro-500); margin-top: 1px; }
.aviso__icone .ic { width: 18px; height: 18px; }

.aviso--erro    { background: var(--vermelho-600); color: #fff; }
.aviso--erro .aviso__icone { color: #fff; }
.aviso--atencao { background: var(--ouro-500); color: var(--preto-900); }
.aviso--atencao .aviso__icone { color: var(--preto-900); }
.aviso--saindo  { animation: sair .3s ease forwards; }

@keyframes entrarAviso { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- alertas */
.alertas-lista {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.alerta {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--cinza-200);
  background: var(--branco);
}
.alerta:last-child { border-bottom: none; }

/* alerta solto (fora da lista) mantém a aparência de cartão */
div:not(.alertas-lista) > .alerta {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 10px;
}

.alerta__icone {
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--cinza-100);
  color: var(--cinza-600);
}
.alerta__icone .ic { width: 19px; height: 19px; }
.alerta--critico .alerta__icone { background: var(--vermelho-100); color: var(--vermelho-600); }
.alerta--alerta  .alerta__icone { background: var(--ouro-100); color: #9a6f00; }
.alerta--info    .alerta__icone { background: var(--azul-100); color: var(--azul-600); }

.alerta__corpo { flex: 1; min-width: 0; }
.alerta__titulo { font-weight: 650; font-size: 14.5px; color: var(--cinza-900); line-height: 1.35; }
.alerta__detalhe { font-size: 13px; color: var(--cinza-600); margin-top: 3px; line-height: 1.5; }

.alerta__itens {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.alerta__itens span,
.alerta__itens button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--cinza-100);
  border: 1px solid var(--cinza-200);
  border-radius: 8px;
  padding: 3px 9px;
  color: var(--cinza-800);
  line-height: 1.4;
}
.alerta__itens button { cursor: pointer; }
.alerta__itens button:hover { background: var(--ouro-100); border-color: var(--ouro-200); }
.alerta__itens .alerta__mais { background: none; border-style: dashed; color: var(--ouro-texto); }

.alerta__link {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 650;
}
.alerta__link .ic { width: 16px; height: 16px; }

.erro-modulo {
  background: var(--vermelho-100);
  border: 1px solid #f0c2b9;
  border-radius: var(--raio);
  padding: 22px;
}

.vazio-amigavel {
  text-align: center;
  padding: 36px 20px;
  color: var(--cinza-600);
  background: var(--branco);
  border: 1px dashed var(--cinza-300);
  border-radius: var(--raio);
}
.vazio-amigavel .ic { width: 30px; height: 30px; color: var(--verde-600); margin-bottom: 6px; }

/* ------------------------------------------------------------ gráficos */
.grafico { width: 100%; height: auto; display: block; }
.grafico__grade { stroke: var(--cinza-200); stroke-width: 1; }
.grafico__base  { stroke: var(--cinza-300); stroke-width: 1.2; }
.grafico__eixo  { font-size: 11px; fill: var(--cinza-600); font-family: var(--fonte); }
.grafico__valor { font-size: 11px; fill: var(--cinza-700); font-weight: 600; font-family: var(--fonte); }

.grafico-vazio {
  padding: 40px 14px;
  text-align: center;
  color: var(--cinza-500);
  font-size: 13.5px;
}

.grafico-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--cinza-700);
}
.grafico-legenda--coluna { flex-direction: column; justify-content: flex-start; gap: 7px; margin-top: 0; }
.grafico-legenda span { display: flex; align-items: center; gap: 7px; }
.grafico-legenda i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; flex: 0 0 11px; }
.grafico-legenda b { margin-left: auto; font-variant-numeric: tabular-nums; }

.rosca-caixa { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.grafico-rosca { width: 200px; height: 200px; flex: 0 0 200px; }
.rosca__total  { font-size: 28px; font-weight: 700; fill: var(--cinza-900); font-family: var(--fonte-titulo); }
.rosca__rotulo { font-size: 11px; fill: var(--cinza-600); text-transform: uppercase; letter-spacing: .06em; font-family: var(--fonte); }

.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ranking li { display: grid; grid-template-columns: minmax(96px, 1.2fr) 3fr minmax(58px, auto); gap: 12px; align-items: center; font-size: 13.5px; }
.ranking__rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cinza-700); }
.ranking__barra { background: var(--cinza-100); border-radius: 6px; height: 14px; overflow: hidden; }
.ranking__barra i { display: block; height: 100%; border-radius: 6px; }
.ranking__valor { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }

.piramide { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.piramide__cab { display: grid; grid-template-columns: 1fr 112px 1fr; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza-600); margin-bottom: 4px; }
.piramide__cab span:first-child { text-align: right; }
.piramide__linha { display: grid; grid-template-columns: 1fr 112px 1fr; align-items: center; gap: 8px; }
.piramide__faixa { text-align: center; color: var(--cinza-700); font-size: 12px; }
.piramide__lado { display: flex; align-items: center; gap: 6px; }
.piramide__lado--esq { flex-direction: row-reverse; }
.piramide__lado i { display: block; height: 16px; border-radius: 5px; }
.piramide__lado--esq i { background: var(--preto-600); }
.piramide__lado--dir i { background: var(--ouro-500); }
.piramide__lado b { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--cinza-700); min-width: 26px; }
.piramide__lado--esq b { text-align: left; }

/* ----------------------------------------------------- ficha do animal */
.ficha-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.ficha-hero__brinco {
  min-width: 84px;
  height: 72px;
  padding: 0 16px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--preto-800);
  color: var(--ouro-500);
  font-family: var(--fonte-titulo);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

.ficha-hero__texto { flex: 1; min-width: 180px; }
.ficha-hero__texto h3 { font-size: 20px; font-weight: 700; }
.ficha-hero__texto p { margin: 4px 0 0; color: var(--cinza-600); font-size: 13.5px; }
.ficha-hero__etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.ficha-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ficha-numero {
  background: var(--cinza-050);
  border: 1px solid var(--cinza-200);
  border-radius: 12px;
  padding: 10px 14px;
}
.ficha-numero span { display: block; font-size: 12px; font-weight: 600; color: var(--cinza-600); }
.ficha-numero b { display: block; font-size: 19px; font-weight: 700; color: var(--cinza-900); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ficha-numero b small { font-size: 12.5px; font-weight: 500; color: var(--cinza-600); }

.ficha-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.ficha-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 20px;
  margin-bottom: 16px;
}

.ficha-campo__rotulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--cinza-600);
}
.ficha-campo__valor { font-size: 14.5px; color: var(--cinza-900); font-weight: 500; margin-top: 2px; }

.ficha-secao { margin: 20px 0 8px; font-size: 15px; }
.ficha-secao:first-child { margin-top: 0; }

.abas {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--cinza-100);
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.abas button {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 0 14px;
  height: 36px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cinza-600);
  cursor: pointer;
  white-space: nowrap;
}
.abas button:hover { color: var(--cinza-900); }
.abas button.ativa { color: var(--cinza-900); background: var(--branco); box-shadow: var(--sombra-1); }
.abas button small { font-weight: 500; color: var(--cinza-500); margin-left: 3px; }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li {
  padding: 10px 0;
  border-bottom: 1px solid var(--cinza-200);
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 14px;
}
.lista-simples li:last-child { border-bottom: none; }
.lista-simples time { color: var(--cinza-600); font-size: 13px; flex: 0 0 86px; font-variant-numeric: tabular-nums; }

.aviso-inline {
  background: var(--ouro-050);
  border: 1px solid var(--ouro-200);
  border-radius: var(--raio-p);
  padding: 12px 14px;
  font-size: 13.5px;
  color: #5e4700;
  margin-bottom: 14px;
}
.aviso-inline b { font-weight: 700; }
.aviso-inline a { color: #6b4f00; }

/* -------------------------------------------------- cartões de ação */
.cartao-acao {
  --acao-cor: var(--preto-800);
  --acao-fundo: var(--cinza-200);
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  padding: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow .15s, transform .12s, border-color .15s;
}

.cartao-acao:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-1px);
  border-color: var(--cinza-300);
}
.cartao-acao:active { transform: scale(.99); }

.cartao-acao--verde    { --acao-cor: var(--verde-700);    --acao-fundo: var(--verde-100); }
.cartao-acao--vermelho { --acao-cor: var(--vermelho-600); --acao-fundo: var(--vermelho-100); }
.cartao-acao--ambar    { --acao-cor: #8a6200;             --acao-fundo: var(--ouro-100); }
.cartao-acao--azul     { --acao-cor: var(--azul-600);     --acao-fundo: var(--azul-100); }
.cartao-acao--neutro   { --acao-cor: var(--preto-800);    --acao-fundo: var(--cinza-200); }

.cartao-acao__icone {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--acao-fundo);
  color: var(--acao-cor);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.cartao-acao__icone .ic { width: 22px; height: 22px; }

.cartao-acao__corpo { display: block; min-width: 0; flex: 1; }
.cartao-acao__corpo b { display: block; font-size: 15px; font-weight: 650; color: var(--cinza-900); margin-bottom: 2px; }
.cartao-acao__corpo small { display: block; font-size: 13px; color: var(--cinza-600); line-height: 1.4; }

.cartao-acao__seta { color: var(--cinza-400); display: inline-flex; }

/* folha "Lançar" -------------------------------------------------------- */
.grade-lancar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.grade-lancar__grupo {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cinza-500);
  margin-top: 8px;
}
.grade-lancar__grupo:first-child { margin-top: 0; }
.grade-lancar .acao-rapida { box-shadow: none; min-height: 58px; }

/* ------------------------------------------- conferência de brincos */
.conferencia { margin-top: 6px; font-size: 13px; }
.conferencia:empty { display: none; }

.conferencia__linha {
  background: var(--verde-100);
  border-radius: var(--raio-p);
  padding: 8px 12px;
  color: #1f5139;
}
.conferencia__linha b { color: #123826; }

.conferencia__erro {
  background: var(--vermelho-100);
  border-radius: var(--raio-p);
  padding: 8px 12px;
  margin-top: 6px;
  color: #7a2a1e;
}

/* --------------------------------------------------- croqui de pastos */
.croqui { width: 100%; height: auto; display: block; background: var(--cinza-050); border-radius: var(--raio-p); }
.croqui__nome { font-size: 11px; fill: var(--cinza-800); font-weight: 600; font-family: var(--fonte); }
.croqui__info { font-size: 10px; fill: var(--cinza-600); font-family: var(--fonte); }

/* ------------------------------------------------------ mapa dos pastos */
.mapa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
}

.mapa__quadro {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(75, 74, 68, .12) 1px, transparent 0) 0 0 / 22px 22px,
    #eef0e8;
  border: 1px solid var(--cinza-200);
  height: clamp(420px, 68vh, 760px);
}

.mapa__svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.mapa__svg--arrastando { cursor: grabbing; }

.mapa__pasto {
  stroke: #ffffff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill .15s, opacity .15s;
}
.mapa__pasto:hover { opacity: .85; }
/* vazio com a mesma cor dos ocupados: o mapa fica uniforme como o KML e o
   rótulo diz "vazio" (pedido do usuário em 24/10/2026: Pasto Novo, UTI e
   Piquete Cavalos destoavam). Só a capacidade (verde/âmbar/vermelho) muda a cor. */
.mapa__pasto--vazio   { fill: #f2c94c; }
.mapa__pasto--ocupado { fill: #f2c94c; }
.mapa__pasto--dentro  { fill: #6fb08a; }
.mapa__pasto--limite  { fill: #f0b429; }
.mapa__pasto--acima   { fill: #d9654f; }
.mapa__pasto--sel { stroke: var(--preto-900); stroke-width: 3.5; }

/* com satélite: o preenchimento fica translúcido para a foto aparecer */
.mapa--satelite .mapa__quadro { background: #2b2f26; }
.mapa--satelite .mapa__pasto { fill-opacity: .38; stroke: #ffffff; stroke-width: 2.5; }
/* vazio pintado como os outros (antes 8% branco: pasto de terra exposta, como
   o Pasto Novo, parecia "sem pintura" — pedido do usuário em 24/10/2026) */
.mapa--satelite .mapa__pasto--vazio { fill: #f2c94c; }
.mapa--satelite .mapa__pasto--sel { stroke: var(--ouro-500); stroke-width: 4; fill-opacity: .5; }

/* rótulos: o JS define o font-size do grupo a cada zoom (tamanho fixo na tela) */
.mapa__rotulos { pointer-events: none; }
.mapa__rotulo text {
  font-family: var(--fonte);
  font-weight: 700;
  fill: var(--preto-900);
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: .28em;
  stroke-linejoin: round;
}
.mapa__rotulo .mapa__rotulo-num { font-size: .88em; font-weight: 600; fill: var(--cinza-700); }
.mapa__rotulo--pequeno text { font-size: .8em; }
.mapa__rotulo--pequeno .mapa__rotulo-num { display: none; }
.mapa__rotulo--oculto { display: none; }

/* localização atual */
.mapa__gps { pointer-events: none; }
.mapa__gps-precisao { fill: rgba(47, 128, 237, .16); stroke: rgba(47, 128, 237, .55); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mapa__gps-ponto { fill: #2f80ed; stroke: #ffffff; }

.mapa__zoom.mapa__zoom--baixo { top: auto; bottom: 34px; }
.mapa__zoom button.ativo { color: #1d6fd8; background: #e8f1fd; }
.mapa__zoom button[data-satelite].ativo { color: var(--preto-900); background: var(--ouro-200); }

.mapa__onde {
  position: absolute;
  left: 12px;
  right: 66px;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--sombra-2);
  font-size: 14px;
  color: var(--cinza-900);
}
.mapa__onde .ic { color: #2f80ed; }
.mapa__onde small { color: var(--cinza-600); font-size: 12px; }

.mapa__aviso {
  position: absolute;
  left: 12px;
  right: 66px;
  top: 52px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 246, 220, .96);
  color: #5e4700;
  font-size: 12.5px;
  box-shadow: var(--sombra-1);
}

.mapa__credito {
  position: absolute;
  right: 6px;
  bottom: 6px;
  font-size: 10px;
  color: #f2f1ec;
  background: rgba(0, 0, 0, .45);
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: none;
}

.mapa__zoom {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border-radius: 12px;
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.mapa__zoom button {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--cinza-800);
  cursor: pointer;
}
.mapa__zoom button + button { border-top: 1px solid var(--cinza-200); }
.mapa__zoom button:hover { background: var(--cinza-050); }

.mapa__norte {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cinza-700);
  background: rgba(255, 255, 255, .85);
  border-radius: 8px;
  padding: 3px 8px;
}

.mapa__lado {
  border: 1px solid var(--cinza-200);
  border-radius: 12px;
  padding: 16px;
  background: var(--cinza-050);
  min-width: 0;
  max-height: clamp(420px, 68vh, 760px);
  overflow-y: auto;
}
.mapa__lado .ficha-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mapa__lado .ficha-numero { background: var(--branco); }

.mapa__dica {
  height: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  color: var(--cinza-600);
}
.mapa__dica .ic { width: 30px; height: 30px; color: var(--cinza-400); }
.mapa__dica b { color: var(--cinza-900); font-size: 15px; }

.mapa__info h3 { font-size: 19px; }
.mapa__composicao { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13.5px; }
.mapa__composicao li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--cinza-200); }
.mapa__composicao li:last-child { border-bottom: none; }
.mapa__botoes { display: flex; flex-direction: column; gap: 8px; }
.mapa__botoes .botao { width: 100%; }

/* dividir pasto: linha de corte e as duas partes sobre o satélite */
.mapa--cortando .mapa__svg { cursor: crosshair; }
.mapa--cortando .mapa__pasto { cursor: crosshair; }
.mapa__corte { pointer-events: none; }
.mapa__linha-corte { fill: none; stroke: #ff3b30; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: none; }
.mapa__ponto-corte { fill: #ffffff; stroke: #ff3b30; }
.mapa__parte { stroke: #ffffff; stroke-width: 3; vector-effect: non-scaling-stroke; fill-opacity: .45; }
.mapa__parte--a { fill: var(--ouro-500); }
.mapa__parte--b { fill: #2f80ed; }
.mapa__parte-selo { fill: var(--preto-900); stroke: var(--ouro-500); }
.mapa__parte-letra { fill: var(--ouro-500); font-family: var(--fonte); font-weight: 800; text-anchor: middle; }
.mapa__ficha-a { box-shadow: inset 4px 0 0 var(--ouro-500); }
.mapa__ficha-b { box-shadow: inset 4px 0 0 #2f80ed; }
.mapa__escolha { display: flex; gap: 18px; margin: 4px 0 12px; font-size: 14.5px; }
.mapa__escolha label { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.mapa__escolha input { width: 20px; height: 20px; accent-color: var(--preto-900); }
.mapa__info .form__grupo { margin-bottom: 14px; }

.mapa__barra-corte {
  position: absolute;
  left: 12px;
  right: 66px;
  bottom: 30px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--sombra-2);
  font-size: 13px;
  color: var(--cinza-900);
  z-index: 2;
}
.mapa__barra-corte p { margin: 0 0 6px; line-height: 1.35; }
.mapa__barra-corte-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mapa__barra-corte-botoes .botao { flex: 1 1 auto; min-height: 40px; }
.mapa--cortando .mapa__onde { display: none; }

.mapa__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--cinza-700);
}
.mapa__legenda span { display: inline-flex; align-items: center; gap: 7px; }
.mapa__cor { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.mapa__cor--vazio   { background: #f2c94c; }
.mapa__cor--ocupado { background: #f2c94c; }
.mapa__cor--dentro  { background: #6fb08a; }
.mapa__cor--limite  { background: #f0b429; }
.mapa__cor--acima   { background: #d9654f; }

.mapa__vazio {
  text-align: center;
  padding: 36px 16px 30px;
  max-width: 520px;
  margin: 0 auto;
}
.mapa__vazio .ic { width: 40px; height: 40px; color: var(--ouro-600); margin-bottom: 8px; }
.mapa__vazio h3 { font-size: 17px; margin-bottom: 6px; }
.mapa__vazio p { color: var(--cinza-600); margin-bottom: 16px; }

/* janela de importação do KML */
.kml-lista { display: flex; flex-direction: column; gap: 8px; }
.kml-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cinza-200);
  border-radius: 12px;
}
.kml-item__num {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: var(--preto-800);
  color: var(--ouro-500);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}
.kml-item__corpo { flex: 1; min-width: 0; }
.kml-item__corpo input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--cinza-300);
  border-radius: 9px;
  font-size: 14.5px;
}
.kml-item__corpo input:focus { outline: none; border-color: var(--ouro-500); box-shadow: 0 0 0 4px rgba(255, 209, 0, .2); }
.kml-item__dica { display: block; font-size: 12.5px; color: var(--cinza-600); margin-top: 4px; }
.kml-item__dica--liga { color: var(--verde-700); font-weight: 600; }
.kml-item__area { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------- filtros */
/* no computador os filtros são uma barra leve acima da lista, sem caixa
   própria — evita a pilha de cartões brancos */
.filtros {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0;
  margin-bottom: 16px;
}
.filtros label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--cinza-600); }
.filtros select, .filtros input {
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--cinza-300);
  border-radius: var(--raio-p);
  font-size: 14px;
  min-width: 140px;
  background: var(--branco);
  color: var(--cinza-900);
}
.filtros select:focus, .filtros input:focus {
  outline: none;
  border-color: var(--ouro-500);
  box-shadow: 0 0 0 4px rgba(255, 209, 0, .2);
}
.filtros .botao { margin-left: auto; }

/* ====================================================== celular / tablet */
@media (max-width: 860px) {
  .secao-cab { margin: 26px 0 12px; }
  .secao-cab h2 { font-size: 17px; }

  .painel__cab { padding: 14px 16px 2px; }
  .painel__corpo { padding: 12px 16px 16px; }

  .kpi { padding: 14px 14px 13px; }
  .kpi__valor { font-size: 25px; }
  .kpi__rotulo { font-size: 12.5px; }
  .kpi__complemento { font-size: 12px; }

  .destaque { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .destaque__valor { font-size: 46px; }
  .destaque__legenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .destaque__legenda b { font-size: 19px; }

  .acoes-rapidas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .acao-rapida {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 8px;
    min-height: 92px;
    padding: 12px 6px;
    font-size: 13px;
  }
  .acao-rapida__icone { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
  .acao-rapida__texto small { display: none; }

  .grade-lancar { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .mapa { grid-template-columns: minmax(0, 1fr); }
  .mapa__quadro { height: 62vh; }
  .kml-item__corpo input { font-size: 16px; height: 44px; }

  /* grades de cartões de ação (Lançamentos, Baixa) viram atalhos 3 × N */
  .grade:has(> .cartao-acao) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .grade > .cartao-acao {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 8px;
    min-height: 92px;
    padding: 12px 6px;
  }
  .grade > .cartao-acao .cartao-acao__corpo b { font-size: 13px; margin: 0; }
  .grade > .cartao-acao .cartao-acao__corpo small { display: none; }

  .botao { height: 44px; }
  .botao--pequeno { height: 38px; }

  /* formulário: 16 px impede o zoom automático do celular ao focar */
  .form__grupo input, .form__grupo select, .form__grupo textarea,
  .modal__corpo textarea, .filtros select, .filtros input, .campo-busca input { font-size: 16px; }
  .form__grupo input, .form__grupo select { min-height: 48px; }

  .secao-cab p { display: none; }
  .secao-cab--manter p { display: block; }

  .botao-filtros { display: inline-flex; width: 100%; margin-bottom: 12px; }
  .botao-filtros b {
    background: var(--ouro-500);
    color: var(--preto-900);
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    font-size: 12.5px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
  }
  .filtros {
    display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px;
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1);
  }
  .filtros.filtros--aberto { display: grid; }

  .tabela-caixa--cartoes .tabela-rolagem { display: none; }
  .tabela-caixa--cartoes .lista-cartoes { display: block; }
  .lista-cartoes .tabela__vazio { padding: 40px 16px; text-align: center; color: var(--cinza-500); }
  .filtros select, .filtros input { min-width: 0; width: 100%; height: 44px; }
  .filtros .botao { grid-column: 1 / -1; margin-left: 0; width: 100%; }

  /* modal vira folha que sobe de baixo */
  .modal-fundo { align-items: flex-end; padding: 0; overflow: hidden; }
  .modal {
    max-width: none !important;
    max-height: calc(100% - 24px - var(--seguro-topo));
    border-radius: 22px 22px 0 0;
    animation: subirFolha .28s cubic-bezier(.2, .8, .2, 1);
  }
  .modal::before {
    content: '';
    display: block;
    width: 42px; height: 5px;
    border-radius: 3px;
    background: var(--cinza-300);
    margin: 8px auto 0;
    flex: 0 0 auto;
  }
  .modal__cab { padding: 10px 12px 12px 18px; }
  .modal__cab h2 { font-size: 17px; }
  .modal__corpo { padding: 18px; max-height: none; flex: 1; min-height: 0; }
  .modal__rodape { padding: 12px 14px calc(12px + var(--seguro-baixo)); flex-wrap: wrap; }
  .modal__rodape .botao { flex: 1 1 0; min-width: 0; }

  #avisos {
    left: 14px; right: 14px;
    bottom: calc(var(--alt-barra-inferior) + 14px + var(--seguro-baixo));
    max-width: none;
    align-items: center;
  }

  .alerta { padding: 14px; gap: 12px; }

  .ficha-hero__brinco { height: 60px; min-width: 70px; font-size: 24px; border-radius: 14px; }
  .ficha-hero__texto h3 { font-size: 18px; }
  .ficha-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .ficha-acoes .botao { flex: 1 1 calc(50% - 8px); }

  /* --- tabela vira lista de cartões --- */
  .tabela-barra { padding: 12px; gap: 10px; }
  .campo-busca { max-width: none; flex-basis: 100%; }
  .tabela-barra__ordem {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    color: var(--cinza-600);
  }
  .tabela-barra__ordem select {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: 1px solid var(--cinza-300);
    border-radius: 9px;
    background: var(--branco);
    padding: 0 8px;
    font-size: 14px;
  }
  .tabela-barra__info { display: none; }
  .tabela-barra__acoes { margin-left: 0; }

  .tabela-rolagem { max-height: none; overflow: visible; }
  .tabela, .tabela tbody { display: block; }
  .tabela thead { display: none; }
  .tabela tfoot { display: block; }
  .tabela tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 12px 14px; background: var(--cinza-050); }
  .tabela tfoot td { border: none; padding: 0; background: none; }
  .tabela tfoot td:empty { display: none; }

  .tabela tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    padding: 14px;
    border-bottom: 1px solid var(--cinza-200);
  }
  .tabela tbody tr:last-child { border-bottom: none; }
  .tabela tbody tr.clicavel:hover td:first-child { box-shadow: none; }
  .tabela tbody tr.clicavel:active { background: var(--ouro-050); }

  .tabela tbody td {
    display: block;
    padding: 0;
    border: none;
    text-align: left !important;
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .tabela tbody td::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cinza-500);
    margin-bottom: 1px;
  }
  .tabela tbody td:first-child {
    grid-column: 1 / -1;
    font-size: 16px;
    font-weight: 650;
  }
  .tabela tbody td:first-child::before { display: none; }
  .tabela tbody td.so-tela-grande { display: none; }
  .tabela tbody td.tabela__vazio { grid-column: 1 / -1; }
  .tabela tbody td.tabela__vazio::before { display: none; }
  .tabela tbody tr:has(.tabela__vazio) { display: block; }

  .paginacao .botao { width: 44px; padding: 0; }
}

/* ---------------------------------------------------- revisão 14/10/2026 */
/* Valor do KPI numa linha só: encolhe conforme a largura do cartão em vez de
   quebrar "R$" sozinho na primeira linha. */
.kpi { container-type: inline-size; }
.kpi__valor { white-space: nowrap; font-size: min(30px, 15cqi); }
.kpi__complemento { font-size: 13px; }
.kpi__alerta { color: var(--ouro-texto); font-weight: 700; }

/* Com dois botões nos filtros, só o primeiro empurra para a direita. */
.filtros .botao ~ .botao { margin-left: 0; }

/* Legenda das cores do ranking */
.ranking__nota { margin: 14px 0 0; font-size: 13px; color: var(--cinza-600); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ranking__cor { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ranking__cor--neg { background: var(--vermelho-600); }
.ranking__cor--baixo { background: var(--ouro-600); margin-left: 8px; }

/* Gráficos SVG têm 640 de largura no desenho: no celular encolhem para metade
   e o texto de 11px virava ~5px. Aqui o texto acompanha. */
@media (max-width: 700px) {
  .grafico__eixo, .grafico__valor { font-size: 19px; }
  .rosca__rotulo { font-size: 15px; }
}

/* ---- revisão estética 14/10/2026 ---------------------------------------- */

/* Atalhos no padrão da marca (preto sobre ouro claro). Só o Óbito mantém o
   vermelho, porque é a única ação de perda. */
.acao-rapida--verde, .acao-rapida--ambar, .acao-rapida--azul,
.acao-rapida--terra, .acao-rapida--neutro {
  --acao-cor: var(--preto-800);
  --acao-fundo: var(--ouro-100);
}
.acao-rapida { box-shadow: none; }
.acao-rapida:hover { box-shadow: none; border-color: var(--ouro-500); }
.acao-rapida:hover .acao-rapida__icone { background: var(--ouro-500); }
.acao-rapida--vermelho:hover { border-color: var(--vermelho-600); }
.acao-rapida--vermelho:hover .acao-rapida__icone { background: var(--vermelho-100); }
.acao-rapida__icone { transition: background .15s; }

/* Cartões de indicador sem sombra: a borda já separa do fundo. */
.kpi { box-shadow: none; }

/* Pontos de atenção: faixa lateral pela gravidade */
.alerta { position: relative; }
.alerta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: transparent; }
.alerta--critico::before { background: var(--vermelho-600); }
.alerta--alerta::before  { background: var(--ouro-500); }
.alerta--info::before    { background: var(--azul-600); }
.alertas-lista { box-shadow: none; }

/* Resumo por gravidade (também é filtro) */
.alertas-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.alertas-resumo button {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--branco); color: var(--cinza-800);
  transition: background .15s, border-color .15s, color .15s;
}
.alertas-resumo button b { font-variant-numeric: tabular-nums; }
.alertas-resumo button::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-400); }
.alertas-resumo .alertas-resumo--critico::before { background: var(--vermelho-600); }
.alertas-resumo .alertas-resumo--alerta::before  { background: var(--ouro-500); }
.alertas-resumo .alertas-resumo--info::before    { background: var(--azul-600); }
.alertas-resumo button:hover { border-color: var(--cinza-400); }
.alertas-resumo button.ativo { background: var(--preto-800); border-color: var(--preto-800); color: #fff; }
.alertas-ver-todos { margin-top: 12px; width: 100%; justify-content: center; }

/* Ações da tabela de lotes: botões só de ícone, numa linha */
.tabela__acoes { display: inline-flex; gap: 6px; white-space: nowrap; }
.botao--icone { width: 34px; padding: 0; justify-content: center; }
/* Tabela de lotes (12 colunas): espaçamento menor para caber na tela sem
   rolagem lateral. Só vale nas tabelas que têm os botões de ação. */
@media (min-width: 861px) {
  .tabela:has(.tabela__acoes) thead th,
  .tabela:has(.tabela__acoes) tbody td,
  .tabela:has(.tabela__acoes) tfoot td { padding-left: 9px; padding-right: 9px; }
}
@media (min-width: 861px) and (max-width: 1400px) {
  .tabela:has(.tabela__acoes) thead th,
  .tabela:has(.tabela__acoes) tbody td,
  .tabela:has(.tabela__acoes) tfoot td { padding-left: 6px; padding-right: 6px; }
  .tabela:has(.tabela__acoes) thead th { letter-spacing: .02em; }
}

/* =========================================================================
   CAMPO — rotina do dia a dia no celular (modulos/campo.js)
   Alvos grandes (>= 56 px), contraste alto para sol, uma mão.
   ========================================================================= */
.campo { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.campo-titulo { font-size: 16px; margin: 10px 0 0; }

.campo-gps {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 14px;
  background: var(--branco); border: 1px solid var(--cinza-200);
  font-size: 15px; color: var(--cinza-900);
}
.campo-gps .ic { color: #1d6fd8; width: 20px; height: 20px; }
.campo-gps small { color: var(--cinza-600); }


.campo-retomar {
  display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 14px;
  border: none; border-radius: 14px; background: var(--preto-900); color: var(--ouro-500);
  font-family: var(--fonte); font-size: 15px; font-weight: 700; cursor: pointer;
}

.campo-selo {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
  font-size: 13.5px; background: var(--cinza-050); color: var(--cinza-700); border: 1px solid var(--cinza-200);
}
.campo-selo .ic { width: 18px; height: 18px; flex: none; }
.campo-selo--verde { background: var(--verde-100); color: var(--verde-700); border-color: transparent; }
.campo-selo--ambar { background: var(--ouro-100); color: #5e4700; border-color: var(--ouro-200); }

/* folhas de lançamento */
.modal-fundo--campo .modal__corpo { padding-bottom: 8px; }
.campo-folha { display: flex; flex-direction: column; gap: 14px; }
.campo-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-f label { font-size: 14px; font-weight: 700; color: var(--cinza-900); }
.campo-f input, .campo-f select {
  min-height: 52px; padding: 10px 14px; width: 100%;
  border: 2px solid var(--cinza-300); border-radius: 12px;
  font-size: 18px; font-family: var(--fonte); background: var(--branco); color: var(--cinza-900);
}
.campo-f input:focus, .campo-f select:focus { outline: none; border-color: var(--preto-900); box-shadow: 0 0 0 4px rgba(255, 209, 0, .35); }
.campo-f input:disabled { background: var(--cinza-050); color: var(--cinza-600); }
.campo-f__dica { font-size: 13.5px; color: var(--cinza-700); line-height: 1.45; }
.campo-f__dica:empty { display: none; }
.campo-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo-esperado { font-size: 14.5px; padding: 10px 12px; border-radius: 10px; background: var(--cinza-050); }
.campo-esperado:empty { display: none; }
.erro-txt { color: var(--vermelho-600); font-weight: 700; }
.aviso-txt { color: #8a5a00; font-weight: 700; }

.escolha { border: none; margin: 0; padding: 0; min-width: 0; }
.escolha legend { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--cinza-900); }
.escolha__ops { display: flex; flex-wrap: wrap; gap: 8px; }
.escolha__op { position: relative; cursor: pointer; }
.escolha__op input { position: absolute; opacity: 0; pointer-events: none; }
.escolha__op span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--cinza-300); border-radius: 24px; background: var(--branco);
  font-size: 15.5px; font-weight: 600; color: var(--cinza-900);
}
.escolha__op input:checked + span { background: var(--preto-900); border-color: var(--preto-900); color: var(--ouro-500); }
.escolha__op--ruim input:checked + span { background: var(--vermelho-600); border-color: var(--vermelho-600); color: #fff; }
.escolha__op input:focus-visible + span { box-shadow: 0 0 0 4px rgba(255, 209, 0, .45); }

.marcar { display: flex; align-items: center; gap: 12px; min-height: 52px; font-size: 16px; font-weight: 600; cursor: pointer; }
.marcar input { width: 26px; height: 26px; accent-color: var(--preto-900); flex: none; }

.contador { display: grid; grid-template-columns: 64px 1fr 64px; gap: 8px; }
.contador button {
  min-height: 56px; border: 2px solid var(--cinza-300); border-radius: 12px; background: var(--branco);
  font-size: 28px; font-weight: 700; cursor: pointer; color: var(--cinza-900);
}
.contador input { text-align: center; font-size: 24px; font-weight: 800; }

.campo-mais summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.campo-mais[open] { display: flex; flex-direction: column; gap: 12px; }

/* curral */
.curral { display: flex; flex-direction: column; gap: 12px; }
.curral__resumo { font-size: 15px; padding: 8px 12px; border-radius: 10px; background: var(--ouro-100); }
.curral__entrada { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.curral__entrada input:only-of-type { grid-column: 1 / -1; }
.curral__brinco, .curral__peso {
  min-height: 64px; padding: 0 14px; width: 100%;
  border: 3px solid var(--preto-900); border-radius: 14px;
  font-size: 28px; font-weight: 800; font-family: var(--fonte);
}
.curral__peso { border-color: var(--cinza-300); }
.curral__animal { min-height: 22px; font-size: 15px; }
.curral__destinos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.curral-destino {
  min-height: 72px; padding: 8px; border: none; border-radius: 14px;
  font-family: var(--fonte); font-size: 17px; font-weight: 800; cursor: pointer; color: #fff;
}
.curral-destino:active { transform: scale(.97); }
.curral-destino--0 { background: var(--azul-600); }
.curral-destino--1 { background: var(--verde-700); }
.curral-destino--2 { background: var(--terra-700); }
.curral-destino--3 { background: #6b4fa0; }
.curral-destino--fica { background: var(--cinza-200); color: var(--cinza-900); grid-column: 1 / -1; min-height: 56px; }
.curral__lista { margin: 0; padding-left: 22px; font-size: 14.5px; max-height: 220px; overflow-y: auto; }
.curral__lista li { padding: 6px 0; border-bottom: 1px solid var(--cinza-200); }
.curral__lista button { border: none; background: none; color: var(--vermelho-600); font-size: 16px; padding: 4px 8px; cursor: pointer; }

/* pendências */
.pend { padding: 12px 14px; border-radius: 14px; background: var(--branco); border: 1px solid var(--cinza-200); }
.pend p { margin: 4px 0 10px; font-size: 15px; }
.pend--alerta { border-color: var(--vermelho-600); background: var(--vermelho-100); }
.pend--leve p { margin: 0; }
.pend__tipo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-600); }
.pend .botao { min-height: 44px; }

/* =========================================================================
   INÍCIO (tela de abertura no celular, modulos/campo.js): resumo da fazenda
   + rotina do campo. Pedido do usuário em 24/10/2026: "a tela do campo está
   muito simples; o painel geral não aparece de cara".
   ========================================================================= */
.inicio { gap: 14px; }

.inicio-resumo {
  border-radius: 20px; padding: 18px 18px 14px; color: var(--fundo);
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(255, 209, 0, .18), transparent 70%),
    var(--preto-900);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.inicio-resumo__topo { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: rgba(247, 246, 242, .75); }
.inicio-resumo__topo span:first-child { color: var(--ouro-500); font-weight: 700; }
.inicio-resumo__total { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 14px; }
.inicio-resumo__total b { font-size: 46px; line-height: 1; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.inicio-resumo__total span { font-size: 15px; color: rgba(247, 246, 242, .8); }
.inicio-resumo__cat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.inicio-resumo__cat div { padding: 10px 8px; border-radius: 12px; background: rgba(255, 255, 255, .07); text-align: center; }
.inicio-resumo__cat b { display: block; font-size: 20px; color: #fff; }
.inicio-resumo__cat small { font-size: 11.5px; color: rgba(247, 246, 242, .7); }
.inicio-resumo__rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: rgba(247, 246, 242, .8);
}
.inicio-resumo__rodape a { margin-left: auto; color: var(--ouro-500); font-weight: 700; }

.inicio-acoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.inicio-acao {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; min-height: 84px;
  border: 1px solid var(--cinza-200); border-radius: 16px; background: var(--branco); cursor: pointer;
  font: 700 13px var(--fonte); color: var(--cinza-900); text-align: center; -webkit-tap-highlight-color: transparent;
}
.inicio-acao:active { transform: scale(.96); }
.inicio-acao__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cinza-050); }
.inicio-acao__ic .ic { width: 22px; height: 22px; }
.inicio-acao--verde .inicio-acao__ic { background: var(--verde-100); color: var(--verde-700); }
.inicio-acao--azul .inicio-acao__ic { background: var(--azul-100); color: var(--azul-600); }
.inicio-acao--ambar .inicio-acao__ic { background: var(--ouro-100); color: #8a5a00; }
.inicio-acao--terra .inicio-acao__ic { background: var(--terra-100); color: var(--terra-700); }

.inicio-bloco { padding: 14px 14px 10px; border-radius: 18px; background: var(--branco); border: 1px solid var(--cinza-200); }
.inicio-bloco h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15.5px; }
.inicio-bloco h3 small {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center;
  background: var(--preto-900); color: var(--ouro-500); font-size: 12px; font-weight: 800;
}
.inicio-vazio { margin: 0 0 6px; color: var(--verde-700); font-weight: 600; font-size: 14px; }
.inicio-vazio .ic { width: 16px; height: 16px; vertical-align: -3px; }
.inicio-mais { display: block; padding: 10px 0 4px; font-size: 13.5px; color: var(--ouro-texto); font-weight: 700; }
.inicio-nota { margin: 8px 0 4px; font-size: 13px; color: var(--cinza-600); }

/* painel de notificações (#/notificacoes) */
.notif-tema { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--borda); cursor: pointer; }
.notif-tema input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--preto-800); }
.notif-tema b { display: block; font-size: 15px; }
.notif-tema small { display: block; font-size: 13px; color: var(--cinza-600); margin-top: 2px; }
.notif-item { margin: 0; padding: 8px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.notif-item b { margin-right: 6px; }
.inicio-seta { margin-left: auto; color: var(--cinza-400, #a8a59c); font-size: 20px; }

.inicio-alerta {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px; min-height: 52px;
  border-top: 1px solid var(--cinza-200); color: var(--cinza-900); text-decoration: none; font-weight: 400;
}
.inicio-alerta:first-of-type { border-top: none; }
.inicio-alerta__ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--azul-600); }
.inicio-alerta--critico .inicio-alerta__ponto { background: var(--vermelho-600); }
.inicio-alerta--alerta .inicio-alerta__ponto { background: var(--ouro-500); box-shadow: 0 0 0 1px #b08800; }
.inicio-alerta__txt { display: flex; flex-direction: column; min-width: 0; }
.inicio-alerta__txt b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.inicio-alerta__txt small { font-size: 12.5px; color: var(--cinza-600); }

.inicio-pasto {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--cinza-200); color: var(--cinza-900); text-decoration: none; font-weight: 400;
}
.inicio-pasto:first-of-type { border-top: none; }
.inicio-pasto__nome { display: flex; flex-direction: column; font-weight: 600; font-size: 14px; min-width: 0; }
.inicio-pasto__nome small { font-weight: 400; font-size: 12px; color: var(--cinza-600); }
.inicio-pasto__barra { height: 8px; border-radius: 4px; background: var(--cinza-200); overflow: hidden; }
.inicio-pasto__barra i { display: block; height: 100%; border-radius: 4px; }
.inicio-pasto__nivel--verde { background: var(--verde-600); }
.inicio-pasto__nivel--ambar { background: #e0a200; }
.inicio-pasto__nivel--vermelho { background: var(--vermelho-600); }
.inicio-pasto__nivel--neutro { background: var(--cinza-300); }
.inicio-pasto > b { font-size: 15px; text-align: right; min-width: 52px; }
.inicio-pasto > b small { display: block; font-size: 10.5px; font-weight: 500; color: var(--cinza-600); }

.inicio-mes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.inicio-mes__item { padding: 10px 6px; border-radius: 12px; text-align: center; background: var(--cinza-050); }
.inicio-mes__item b { display: block; font-size: 22px; }
.inicio-mes__item small { font-size: 11.5px; color: var(--cinza-600); }
.inicio-mes__item--verde b { color: var(--verde-700); }
.inicio-mes__item--vermelho b { color: var(--vermelho-600); }
.inicio-mes__item--azul b { color: var(--azul-600); }

.inicio-ultimo {
  display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--cinza-200);
  color: var(--cinza-900); text-decoration: none; font-weight: 400;
}
.inicio-ultimo:first-of-type { border-top: none; }
.inicio-ultimo > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.inicio-ultimo b { font-size: 14px; font-weight: 600; }
.inicio-ultimo small { font-size: 12.5px; color: var(--cinza-600); }
.inicio-ultimo__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--cinza-050); }
.inicio-ultimo__ic .ic { width: 18px; height: 18px; }
.inicio-ultimo__ic--verde { background: var(--verde-100); color: var(--verde-700); }
.inicio-ultimo__ic--vermelho { background: var(--vermelho-100); color: var(--vermelho-600); }
.inicio-ultimo__ic--azul { background: var(--azul-100); color: var(--azul-600); }
.inicio-ultimo__ic--ambar { background: var(--ouro-100); color: #8a5a00; }
.inicio-ultimo__ic--terra { background: var(--terra-100); color: var(--terra-700); }

.inicio-parado {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px;
  background: var(--ouro-100); border: 2px solid var(--ouro-500); color: var(--cinza-900);
}
.inicio-parado > .ic { width: 26px; height: 26px; flex: none; color: #8a5a00; margin-top: 2px; }
.inicio-parado b { font-size: 15.5px; }
.inicio-parado p { margin: 4px 0 10px; font-size: 14px; line-height: 1.45; }
.inicio-confirmar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: none;
  border-radius: 12px; background: var(--preto-900); color: var(--ouro-500); font: 700 15px var(--fonte); cursor: pointer;
}
.inicio-confirmar .ic { width: 18px; height: 18px; }
.papel-consulta .inicio-parado .inicio-confirmar { display: none !important; }
.inicio-push {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px;
  background: var(--azul-100); border: 1px solid rgba(47, 111, 159, .35); color: var(--cinza-900);
}
.inicio-push > .ic { width: 24px; height: 24px; flex: none; color: var(--azul-600); margin-top: 2px; }
.inicio-push b { font-size: 15.5px; }
.inicio-push p { margin: 4px 0 10px; font-size: 14px; line-height: 1.45; }

.inicio-buscar {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  border: 1px dashed var(--cinza-300); border-radius: 14px; background: transparent; cursor: pointer;
  font: 600 14.5px var(--fonte); color: var(--cinza-700);
}
.inicio-buscar .ic { width: 18px; height: 18px; }
@media (max-width: 340px) { .inicio-resumo__cat, .inicio-mes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================================
   LOGIN e usuário de consulta (app.js, core/acesso.js)
   ========================================================================= */
.tela-login {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  padding: 32px 16px calc(32px + env(safe-area-inset-bottom));
  color: var(--fundo);
  /* preto da marca, brilho dourado no alto e linhas de curva de nível do pasto */
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255, 209, 0, .16), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 209, 0, .07), transparent 70%),
    repeating-radial-gradient(ellipse 140% 90% at 50% 120%, transparent 0 34px, rgba(255, 255, 255, .025) 34px 35px),
    var(--preto-900);
}
.tela-login__marca { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tela-login__marca img { width: min(300px, 72vw); height: auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .5)); }
.tela-login__slogan {
  margin: 0; font-family: var(--fonte-titulo); font-size: 12px; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--ouro-500);
  display: flex; align-items: center; gap: 12px;
}
.tela-login__slogan::before, .tela-login__slogan::after {
  content: ''; width: 28px; height: 1px; background: rgba(255, 209, 0, .5);
}
.tela-login__caixa {
  width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 6px;
  padding: 30px 26px 22px; border-radius: 22px;
  background: var(--fundo); color: var(--cinza-900);
  border-top: 4px solid var(--ouro-500);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .04) inset;
}
.tela-login__caixa h1 { font-family: var(--fonte-marca); font-size: 28px; font-weight: 700; margin: 0; }
.tela-login__sub { margin: 2px 0 10px; font-size: 14px; color: var(--cinza-600); line-height: 1.45; }
.tela-login__caixa label { font-size: 13px; font-weight: 700; margin-top: 8px; letter-spacing: .02em; }
.tela-login__campo {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 6px 0 14px;
  border: 2px solid var(--cinza-300); border-radius: 14px; background: var(--branco);
  transition: border-color .15s, box-shadow .15s;
}
.tela-login__campo:focus-within { border-color: var(--preto-900); box-shadow: 0 0 0 4px rgba(255, 209, 0, .35); }
.tela-login__campo .ic { width: 20px; height: 20px; color: var(--cinza-600); flex: none; }
.tela-login__campo input {
  flex: 1; min-width: 0; height: 50px; border: none; outline: none; background: transparent;
  font-size: 17px; font-family: var(--fonte); color: var(--cinza-900);
}
.tela-login__ver {
  flex: none; min-height: 40px; padding: 0 12px; border: none; border-radius: 10px;
  background: var(--cinza-050); color: var(--cinza-700); font: 600 13px var(--fonte); cursor: pointer;
}
.tela-login__entrar {
  margin-top: 16px; min-height: 56px; border: none; border-radius: 14px;
  background: var(--ouro-500); color: var(--preto-900);
  font: 800 17px var(--fonte-titulo); letter-spacing: .03em; cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 209, 0, .35);
  transition: transform .1s, box-shadow .15s, background .15s;
}
.tela-login__entrar:hover { background: var(--ouro-400); }
.tela-login__entrar:active { transform: scale(.98); }
.tela-login__entrar:focus-visible { outline: 3px solid var(--preto-900); outline-offset: 2px; }
.tela-login__entrar--carregando { opacity: .75; cursor: progress; }
.tela-login__rodape { margin: 12px 0 0; font-size: 12.5px; color: var(--cinza-600); text-align: center; line-height: 1.5; }
.tela-login__rodape .ic { width: 16px; height: 16px; color: var(--verde-600); vertical-align: -3px; }
.tela-login__erro { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--vermelho-100); color: var(--vermelho-700); font-size: 14px; font-weight: 600; }
@media (max-height: 640px) { .tela-login { justify-content: flex-start; } .tela-login__marca img { width: 200px; } }

/* pontos do sistema: só aparecem no layout de duas colunas */
.tela-login__pontos { display: none; }

/* PC / tela larga: duas colunas — marca à esquerda (preto), entrada à direita (off white) */
@media (min-width: 960px) {
  .tela-login {
    flex-direction: row; align-items: stretch; justify-content: stretch; gap: 0; padding: 0;
  }
  .tela-login__marca {
    flex: 1 1 56%; align-items: center; justify-content: center; gap: 18px;
    padding: 56px clamp(40px, 6vw, 100px);
  }
  .tela-login__marca img { width: min(440px, 34vw); }
  .tela-login__slogan { font-size: 13px; letter-spacing: .3em; }
  .tela-login__slogan::before, .tela-login__slogan::after { width: 40px; }
  .tela-login__pontos {
    display: flex; flex-direction: column; gap: 18px; margin: 26px 0 0; padding: 26px 0 0; list-style: none;
    border-top: 1px solid rgba(255, 209, 0, .25); width: 100%; max-width: 440px;
  }
  .tela-login__pontos li { display: flex; gap: 14px; align-items: flex-start; }
  .tela-login__pontos .ic {
    width: 40px; height: 40px; padding: 9px; flex: none; border-radius: 12px;
    background: rgba(255, 209, 0, .12); color: var(--ouro-500);
  }
  .tela-login__pontos b { display: block; font-size: 16px; color: #fff; }
  .tela-login__pontos small { font-size: 14px; color: rgba(247, 246, 242, .7); }
  .tela-login__caixa {
    flex: 0 0 min(520px, 44%); max-width: none; justify-content: center;
    padding: 56px clamp(36px, 5vw, 80px); border-radius: 0; border-top: none;
    border-left: 4px solid var(--ouro-500); box-shadow: -24px 0 60px rgba(0, 0, 0, .35);
  }
  .tela-login__caixa h1 { font-size: 34px; }
}
@media (max-width: 440px) {
  .tela-login__slogan { white-space: nowrap; font-size: 10.5px; letter-spacing: .2em; }
  .tela-login__slogan::before, .tela-login__slogan::after { width: 16px; }
}
body.sem-login { overflow: hidden; }

.menu__usuario { margin-bottom: 8px; font-size: 12.5px; }
.menu__usuario a { color: var(--ouro-500); }

/* consulta (escritório): vê tudo, não lança */
.papel-consulta .botao-lancar,
.papel-consulta .barra-inferior__lancar,
.papel-consulta .inicio-acoes [data-campo],
.papel-consulta .campo-retomar,
.papel-consulta [data-mover], .papel-consulta [data-area], .papel-consulta [data-dividir],
.papel-consulta [data-importar-kml], .papel-consulta [data-transferir],
.papel-consulta [data-resolver] { display: none !important; }