/* =============================================================================
   Console do Parceiro (parceiro.<dominio>) — spec 2026-09-26 console-parceiro.
   Carregado DEPOIS de style.css (tokens, reset, .form-control, .skeleton).
   NÃO carregar layout.css aqui: é onde vive a appbar/drawer do consumidor.
   Leiautes aprovados: boards 1–7 + mobile da Fase 1.
   ============================================================================= */

.console-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to left, #222222, #191919, #101010, #0A0A0A);
  color: var(--color-text);
}

/* ---- Header ---------------------------------------------------------------- */
.console-header {
  height: 72px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #141414;
  border-bottom: 1px solid #2A2A2A;
}
.console-header__logo { height: 28px; width: auto; display: block; }
.console-header__sep { width: 1px; height: 26px; background: #2F2F2F; }
.console-header__marca {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-primary);
}
.console-header__marca-curta { display: none; }
.console-header__espaco { flex-grow: 1; }
.console-contexto {
  display: flex; align-items: center; gap: 9px;
  height: 44px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid #2F2F2F; border-radius: 10px; background: #1A1A1A;
  font-size: 15px; font-weight: 700;
}
.console-contexto[hidden] { display: none; }
.console-contexto i { color: var(--color-text-muted); }

/* "Atuando em" — seletor de estabelecimento ativo (2+ vínculos, brief 2026-09-29).
   Substitui o texto "N estabelecimentos": a pessoa escolhe em vez de só contar. */
.console-contexto__select { display: flex; align-items: center; gap: 8px; }
.console-contexto__select[hidden] { display: none; }
.console-contexto__select label {
  font-size: 11px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.console-contexto__select select {
  /* Mais baixo que o pill ao redor de propósito: .console-contexto (o pill do
     header) tem altura FIXA de 44px com box-sizing:border-box e 1px de borda
     em cima/embaixo — um filho da MESMA altura do pill estoura por 2px
     (review round 1, 2026-09-29). No celular o pill vira altura automática e
     o alvo de toque volta ao padrão de 44px (media query abaixo). */
  height: 42px; min-width: 160px; max-width: 240px; box-sizing: border-box;
  background: #1A1A1A; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 8px; padding: 0 10px; font-size: 14px;
}

/* Selo de papel ("Responsável" / "Atendente") no estabelecimento ativo. */
.console-papel-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--color-border); color: var(--color-text-secondary);
}
.console-papel-badge[hidden] { display: none; }
.console-papel-badge--owner { color: var(--color-primary); border-color: var(--color-primary); }

.console-usuario { font-size: 14px; color: var(--color-text-secondary); }
.console-sair {
  height: 44px; min-width: 44px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: 10px;
  font-size: 14px; cursor: pointer;
}
.console-sair:hover { border-color: var(--color-border-light); color: var(--color-text); }

/* ---- Navegação (abas no desktop, barra inferior no celular) ---------------- */
.console-nav {
  height: 56px; flex-shrink: 0; box-sizing: border-box; padding: 0 32px;
  display: flex; gap: 6px;
  background: #111111; border-bottom: 1px solid #1F1F1F;
}
.console-nav__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted); font-size: 15px; cursor: pointer;
}
.console-nav__tab[aria-current="page"] {
  color: var(--color-text); font-weight: 700;
  border-bottom-color: var(--color-primary);
}
/* A regra acima já é display:flex sem media query — [hidden] do DOM sozinho
   perde para um display de autor, então precisa deste override explícito. */
.console-nav[hidden] { display: none; }
/* Revisão brief-baixas (2026-09-29): a barra em si não some mais para o
   atendente (agora tem Validar + Baixas) — quem some são os BOTÕES individuais
   de Dashboard/Equipe. `.console-nav__tab` tem `display: inline-flex` de
   autor, então precisa do mesmo override de `[hidden]`. */
.console-nav__tab[hidden] { display: none; }

/* ---- Conteúdo --------------------------------------------------------------- */
.console-main { flex-grow: 1; box-sizing: border-box; padding: 48px 32px; }
.console-secao[hidden] { display: none; }
.console-card {
  width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box;
  background: #171717; border: 1px solid #2A2A2A; border-radius: 18px; padding: 36px;
}
.console-card__titulo { margin: 0 0 6px; font-size: 24px; font-weight: 700; text-align: center; }
.console-card__sub { margin: 0 0 28px; font-size: 15px; color: var(--color-text-muted); text-align: center; }

/* ---- Botões ------------------------------------------------------------------ */
.console-btn {
  height: 56px; min-width: 44px; box-sizing: border-box; padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer;
  text-decoration: none;
}
.console-btn:disabled { opacity: 0.6; cursor: default; }
/* Texto ESCURO no laranja: branco dá 2,9:1, #1A1A1A dá 6,9:1. */
.console-btn--primario { background: var(--color-primary); color: #1A1A1A; border: none; }
.console-btn--primario:hover:not(:disabled) { background: var(--color-primary-light); }
.console-btn--contorno { background: transparent; color: var(--color-text); border: 1px solid var(--color-border-light); }
.console-btn--contorno:hover:not(:disabled) { border-color: var(--color-text-muted); }

/* ---- Validar ----------------------------------------------------------------
   Desktop: campo em cima; Ler QR (contorno) e Validar (primário) lado a lado.
   Celular: Ler QR é o PRIMÁRIO no topo (90% das baixas), "ou digite", campo,
   Validar em contorno. Mesma marcação, ordem por grid-template-areas.
   ------------------------------------------------------------------------------ */
.validar-grid {
  display: grid; gap: 14px 12px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "campo campo" "scan validar" "aviso aviso";
}
.validar-grid__scan { grid-area: scan; }
.validar-grid__ou { grid-area: ou; display: none; }
.validar-grid__campo { grid-area: campo; }
.validar-grid__validar { grid-area: validar; }
.validar-grid__aviso { grid-area: aviso; margin: 0; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.validar-grid__aviso[hidden] { display: none; }
.validar-grid.sem-scanner { grid-template-areas: "campo campo" "validar validar" "aviso aviso"; }
.validar-grid.sem-scanner .validar-grid__scan { display: none; }

.validar-grid__campo label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--color-text-secondary); margin-bottom: 8px;
}
.validar-codigo {
  box-sizing: border-box; width: 100%; height: 66px;
  background: #0F0F0F; border: 1px solid var(--color-border); border-radius: 12px;
  color: var(--color-text); font-size: 26px; font-weight: 700;
  letter-spacing: 0.18em; text-align: center; text-transform: uppercase; padding: 0 16px;
}
.validar-codigo:focus { outline: none; border-color: var(--color-primary); }

/* ---- Resultado da validação ------------------------------------------------ */
.console-resultado {
  margin-bottom: 26px; padding: 18px 20px; border-radius: 14px;
  display: flex; gap: 14px; align-items: flex-start;
}
.console-resultado[hidden] { display: none; }
.console-resultado__titulo { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.console-resultado__texto { font-size: 15px; line-height: 1.5; color: var(--color-text); }
.console-resultado__meta { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; }
.console-resultado--sucesso { background: rgba(60,219,192,0.12); border: 1px solid rgba(60,219,192,0.42); }
.console-resultado--sucesso .console-resultado__titulo,
.console-resultado--sucesso i { color: var(--color-success); }
.console-resultado--aviso { background: rgba(255,184,0,0.11); border: 1px solid rgba(255,184,0,0.42); }
.console-resultado--aviso .console-resultado__titulo,
.console-resultado--aviso i { color: var(--color-warning); }
.console-resultado--erro { background: rgba(255,77,77,0.12); border: 1px solid rgba(255,77,77,0.42); }
.console-resultado--erro .console-resultado__titulo,
.console-resultado--erro i { color: var(--color-danger); }

/* ---- Dashboard ------------------------------------------------------------- */
.console-dashboard { max-width: 1200px; margin: 0 auto; }
.console-dashboard__topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.console-dashboard__titulo { margin: 0 0 5px; font-size: 23px; font-weight: 700; }
.console-dashboard__sub { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.console-filtros { display: flex; gap: 14px; flex-wrap: wrap; }
.console-filtros[hidden], .console-filtros [hidden] { display: none; }
.console-filtros label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 7px; }
.console-filtros select {
  height: 46px; min-width: 180px; box-sizing: border-box;
  background: #1A1A1A; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 10px; padding: 0 12px; font-size: 15px;
}

.console-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.parceiro-kpi {
  position: relative; border-radius: 20px; padding: 22px 26px; min-height: 104px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(241.63deg, #2C2C2C 2%, #242424 40%, #1C1C1C 75%, #151515 100%);
}
.parceiro-kpi::before {
  content: ''; position: absolute; inset: 0; padding: 1px; border-radius: 20px;
  background: var(--gradient-border);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.parceiro-kpi > * { position: relative; z-index: 1; }
.parceiro-kpi__label { font-size: 16px; line-height: 1.35; }
.parceiro-kpi__value { font-size: 32px; font-weight: 700; white-space: nowrap; }
.parceiro-kpi--error .parceiro-kpi__value { color: var(--color-danger); }
.skeleton-kpi-number { display: inline-block; width: 40%; min-width: 80px; height: 1.6em; }

/* ---- Estados de página inteira (carregando / sem vínculo / erro) ----------- */
.console-estado {
  flex-grow: 1; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 40px 16px;
}
.console-estado[hidden] { display: none; }
.console-estado__card {
  width: 100%; max-width: 540px; box-sizing: border-box;
  background: #171717; border: 1px solid #2A2A2A; border-radius: 18px; padding: 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.console-estado__icone {
  width: 68px; height: 68px; border-radius: 50%; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  background: rgba(255,184,0,0.12); border: 1px solid rgba(255,184,0,0.35); color: var(--color-warning);
}
.console-estado__titulo { margin: 0 0 12px; font-size: 25px; font-weight: 700; line-height: 1.3; }
.console-estado__texto { margin: 0 0 32px; font-size: 15px; color: var(--color-text-muted); line-height: 1.6; }
.console-estado__acoes { display: flex; gap: 12px; align-self: stretch; }
.console-estado__acoes > * { flex: 1; }

/* ---- Login ------------------------------------------------------------------ */
.console-login {
  min-height: 100vh; box-sizing: border-box; padding: 40px 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to left, #222222, #191919, #101010, #0A0A0A);
}
.console-login__box { width: 100%; max-width: 440px; display: flex; flex-direction: column; }
.console-login__logo { height: 54px; width: auto; align-self: center; }
.console-login__marca {
  align-self: center; margin-top: 22px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary);
}
.console-login__titulo { margin: 14px 0 6px; font-size: 30px; font-weight: 700; text-align: center; }
.console-login__sub { margin: 0 0 30px; font-size: 15px; color: var(--color-text-muted); text-align: center; line-height: 1.5; }
.console-login__box > section { display: flex; flex-direction: column; }
.console-login__box > section[hidden] { display: none; }
.console-login form { display: flex; flex-direction: column; gap: 18px; align-self: stretch; }
.console-login label { display: block; font-size: 13px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 8px; }
.console-login input {
  box-sizing: border-box; width: 100%; height: 56px;
  background: #1A1A1A; border: 1px solid var(--color-border); border-radius: 12px;
  color: var(--color-text); font-size: 17px; padding: 0 16px;
}
.console-login input:focus { outline: none; border-color: var(--color-primary); }
.console-login__link {
  align-self: center; margin-top: 22px; font-size: 14px;
  background: none; border: none; color: var(--color-primary);
  cursor: pointer; text-decoration: underline; min-height: 44px;
}
.console-login__rodape {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid #262626;
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  font-size: 13px; color: var(--color-text-muted);
}
.console-login__rodape a { color: var(--color-text-muted); }
.console-login [hidden] { display: none; }

/* ---- Celular ---------------------------------------------------------------- */
@media (max-width: 767px) {
  .console-header { height: 56px; padding: 0 14px; gap: 10px; flex-wrap: wrap; }
  .console-header__logo { height: 22px; }
  .console-header__marca-longa, .console-usuario, .console-sair__texto { display: none; }
  .console-header__marca-curta { display: inline; }
  .console-sair { width: 44px; padding: 0; }
  /* Contexto vira faixa própria abaixo do header (board ValidarMobile).
     height:auto + flex-wrap: com o select "Atuando em" + selo de papel a faixa
     de altura fixa (46px) não cabe mais tudo numa linha só. */
  .console-contexto {
    order: 10; flex-basis: 100%; margin: 0 -14px; min-height: 46px; height: auto;
    border: none; border-top: 1px solid #242424; border-radius: 0;
    background: #161616; padding: 8px 16px; font-size: 14px;
    flex-wrap: wrap; row-gap: 8px;
  }
  .console-header:has(.console-contexto:not([hidden])) { height: auto; padding-top: 6px; }
  /* Select ocupa a linha toda — alvo de toque generoso (≥44px). A regra base
     é 42px (cabe no pill de 44px do desktop); aqui o pill vira height:auto,
     então o alvo de toque volta a 44px de verdade. */
  .console-contexto__select { flex: 1 1 100%; }
  .console-contexto__select select { width: 100%; max-width: none; height: 44px; }
  .console-papel-badge { margin-left: auto; }

  /* Abas viram barra inferior (polegar). safe-area-inset-bottom: no iPhone com
     home indicator a barra fixa fica embaixo dele sem a folga; console-main
     ganha o mesmo respiro extra para o conteúdo não ficar coberto. */
  .console-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(74px + env(safe-area-inset-bottom)); padding: 0;
    padding-bottom: env(safe-area-inset-bottom); gap: 0;
    background: #141414; border-top: 1px solid #2A2A2A; border-bottom: none;
  }
  /* Repetida aqui: a barra fixa do celular também precisa sumir de verdade
     (a especificidade de .console-nav[hidden] já vence sem isto, mas deixa
     explícito perto da regra mobile que redefine position/display). */
  .console-nav[hidden] { display: none; }
  .console-nav__tab {
    flex: 1; flex-direction: column; justify-content: center; gap: 6px;
    font-size: 12px; border-bottom: none;
  }
  .console-nav__tab i { font-size: 20px; }
  .console-nav__tab[aria-current="page"] { color: var(--color-primary); }
  .console-main { padding: 22px 16px calc(110px + env(safe-area-inset-bottom)); }

  .console-card { padding: 0; background: none; border: none; }
  .console-card__titulo, .console-card__sub { text-align: left; }

  .validar-grid { grid-template-columns: 1fr; grid-template-areas: "scan" "ou" "campo" "validar" "aviso"; }
  .validar-grid__ou {
    display: flex; align-items: center; gap: 12px; margin: 6px 0;
    font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.12em;
  }
  .validar-grid__ou::before, .validar-grid__ou::after { content: ''; flex: 1; height: 1px; background: #2A2A2A; }
  .validar-grid.sem-scanner { grid-template-areas: "campo" "validar" "aviso"; }
  .validar-grid.sem-scanner .validar-grid__ou { display: none; }
  /* No celular a leitura é o gesto primário; digitar vira alternativa. */
  .validar-grid:not(.sem-scanner) .validar-grid__scan {
    height: 62px; background: var(--color-primary); color: #1A1A1A; border: none;
  }
  .validar-grid:not(.sem-scanner) .validar-grid__validar {
    background: transparent; color: var(--color-text); border: 1px solid var(--color-border-light);
  }

  .console-kpis { grid-template-columns: 1fr; gap: 12px; }
  .parceiro-kpi { min-height: 76px; padding: 16px 20px; }
  .parceiro-kpi__value { font-size: 26px; }
  .console-filtros, .console-filtros > div, .console-filtros select { width: 100%; }
  .console-estado__card { padding: 32px 22px; }
  .console-estado__acoes { flex-direction: column; }
}

/* ---- Equipe ----------------------------------------------------------------- */
.equipe-convite {
  background: #171717; border: 1px solid #2A2A2A; border-radius: 16px;
  padding: 22px 24px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 14px;
}
.equipe-convite__titulo { margin: 0; font-size: 18px; font-weight: 700; }
.equipe-convite__sub { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.equipe-convite__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.equipe-convite__campos label { display: block; font-size: 13px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 8px; }
.equipe-convite .console-btn { align-self: flex-start; }

.equipe-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.equipe-vazia { color: var(--color-text-muted); padding: 16px 0; }
.equipe-pessoa {
  width: 100%; box-sizing: border-box; text-align: left; min-height: 64px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center;
  padding: 14px 18px; background: #141414; border: 1px solid #242424; border-radius: 12px;
  color: var(--color-text); font: inherit; cursor: pointer;
}
button.equipe-pessoa:hover { border-color: var(--color-border-light); }
.equipe-pessoa--owner { cursor: default; }
.equipe-pessoa__nome { font-weight: 700; }
.equipe-pessoa__email, .equipe-pessoa__meta { font-size: 13px; color: var(--color-text-muted); grid-column: 1; }
.equipe-pessoa__papel {
  grid-column: 2; grid-row: 1; justify-self: end; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--color-border);
}
.equipe-pessoa__papel--owner { color: var(--color-primary); border-color: var(--color-primary); }

.equipe-pessoa-painel {
  margin-top: 16px; background: #171717; border: 1px solid #2A2A2A; border-radius: 16px; padding: 20px 22px;
}
.equipe-pessoa-painel__topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.equipe-pessoa-painel__nome { font-weight: 700; font-size: 18px; }
.equipe-pessoa-painel__email, .equipe-pessoa-painel__situacao { font-size: 14px; color: var(--color-text-muted); }
.equipe-pessoa-painel__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.equipe-remover { color: var(--color-danger); border-color: rgba(255,77,77,0.5); }
.equipe-confirmar {
  margin-top: 14px; padding: 16px; border-radius: 12px;
  background: rgba(255,77,77,0.08); border: 1px solid rgba(255,77,77,0.35);
}
.equipe-confirmar p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
/* .equipe-pessoa-painel__acoes [hidden] cobre o botão "Reenviar convite": sem
   isto, .console-btn { display: inline-flex } (regra base, sem media query)
   venceria o [hidden] do DOM e o botão ficaria visível pra quem já é 'ativo'
   — mesma causa-raiz do bug de .console-nav[hidden] (board Equipe). */
.equipe-pessoa-painel[hidden], .equipe-confirmar[hidden], .equipe-pessoa-painel__acoes [hidden] { display: none; }

@media (max-width: 767px) {
  .equipe-convite__campos { grid-template-columns: 1fr; }
  .equipe-convite .console-btn { align-self: stretch; }
  .equipe-pessoa-painel__acoes { flex-direction: column; }
}

/* ---- Baixas ------------------------------------------------------------------
   Lista em grid (não é <table>): board Baixas, brief-baixas 2026-09-29. Cada
   linha vira coluna única no celular via troca de grid-template-areas — sem
   scroll horizontal nem tabela larga a 360px. */
.baixas-lista { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.baixas-vazia { color: var(--color-text-muted); padding: 16px 0; }
.baixa-item {
  display: grid; align-items: center; gap: 4px 16px;
  grid-template-columns: 96px 92px 1.3fr 1fr;
  grid-template-areas: "data codigo oferta cliente";
  padding: 14px 18px; background: #141414; border: 1px solid #242424; border-radius: 12px;
  min-height: 44px;
}
/* Owner ganha a 5ª coluna "Baixado por" — atendente nunca recebe esse campo
   da API (ver services/parceiros.get_papel), então nem o CSS precisa prever. */
.baixa-item--owner {
  grid-template-columns: 96px 92px 1.1fr 1fr 130px;
  grid-template-areas: "data codigo oferta cliente validador";
}
.baixa-item__data { grid-area: data; font-weight: 700; }
.baixa-item__codigo { grid-area: codigo; letter-spacing: 0.04em; }
.baixa-item__oferta { grid-area: oferta; }
.baixa-item__cliente { grid-area: cliente; color: var(--color-text-muted); }
.baixa-item__validador { grid-area: validador; font-size: 13px; color: var(--color-text-muted); }
/* Fix pós-review (2026-09-29): item de grid sem min-width:0 usa o tamanho do
   CONTEÚDO como mínimo — um nome de oferta/cliente comprido empurra a coluna
   e estoura a largura a 360px. overflow-wrap:anywhere quebra a palavra em vez
   de só vazar. */
.baixa-item > * { min-width: 0; overflow-wrap: anywhere; }
/* Cabeçalho das colunas: mesma grade das linhas, sem o cartão. */
.baixa-item--cabecalho {
  background: none; border: none; padding-top: 0; padding-bottom: 0; min-height: 0;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.baixa-item--cabecalho > * { font-weight: 700; font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.08em; }
.baixas-carregar-mais { margin: 4px auto 0; }
/* `.console-btn` tem `display: inline-flex` sem media query — mesma causa-raiz
   já corrigida em `.console-nav[hidden]`/`.equipe-pessoa-painel__acoes [hidden]`:
   sem este override o botão "Carregar mais" ficaria visível mesmo com hidden. */
.baixas-carregar-mais[hidden] { display: none; }
.baixas-erro-mais { margin: 8px 0 0; font-size: 13px; color: var(--color-danger); text-align: center; }
.baixas-erro-mais[hidden] { display: none; }

@media (max-width: 767px) {
  .baixa-item {
    grid-template-columns: 1fr;
    grid-template-areas: "data" "codigo" "oferta" "cliente";
    gap: 4px;
  }
  /* Área "validador" só existe pra quem TEM o campo (owner) — senão sobra uma
     linha vazia no grid (gap extra em branco) pro atendente. */
  .baixa-item--owner {
    grid-template-areas: "data" "codigo" "oferta" "cliente" "validador";
  }
  /* Rótulos só decorativos (CSS puro, nunca dado da API) — a pilha de campos
     sem cabeçalho de coluna fica ambígua no celular ("Setor VIP" é a
     experiência ou o cliente?). */
  /* No celular cada linha tem rótulo próprio; o cabeçalho de colunas sai. */
  .baixa-item--cabecalho { display: none; }
  .baixa-item__codigo::before { content: "Card "; color: var(--color-text-muted); font-weight: 400; }
  .baixa-item__oferta::before { content: "Experiência: "; color: var(--color-text-muted); }
  .baixa-item__cliente::before { content: "Cliente: "; }
  .baixa-item__validador::before { content: "Baixado por: "; }
}