/*
 * Sistema de Comissões - Grupo Aerotur
 * Componentes adicionais escritos em CSS puro (sem depender do build do Tailwind).
 * Carregado logo após main.css em base.html.
 */

/* ------------------------------------------------------------------ selects */

/* No projeto `.form-select` é aplicado sozinho, sem `.form-control`, e sozinho
   ele só remove a seta nativa — o select ficava sem borda e sem seta em todas
   as telas. Aqui ele recebe a mesma aparência dos demais campos. */
select.form-select {
  width: 100%;
  border-radius: var(--radius-md, 0.5rem);
  border: 1px solid var(--color-nevoa);
  background-color: #fff;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-pista);
  transition-property: border-color, box-shadow;
  transition-duration: 150ms;
}

select.form-select:focus {
  outline: none;
  border-color: var(--color-aerotur);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.15);
}

select.form-select[multiple] {
  padding-right: 0.75rem;
  background-image: none;
}

/* ---------------------------------------------------------------- badges */

.badge-danger {
  background-color: #FEE2E2;
  color: #B91C1C;
}

/* ------------------------------------------------------- cartão de regra */

.regra-card {
  background-color: var(--color-cartao);
  border: 1px solid var(--color-nevoa);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.regra-card + .regra-card {
  margin-top: 1rem;
}

.regra-card:focus-within {
  border-color: var(--color-aerotur);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.08);
}

.regra-card.is-removed {
  display: none;
}

.regra-card.has-errors {
  border-color: #DC2626;
}

.regra-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-terminal);
  border-bottom: 1px solid var(--color-nevoa);
}

.regra-card__num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--color-aerotur-light);
  color: var(--color-aerotur-dark);
  font-size: 0.75rem;
  font-weight: 700;
}

.regra-card__titulo {
  flex: 1 1 auto;
  min-width: 0;
}

.regra-card__titulo .form-control {
  font-weight: 600;
}

.regra-card__acoes {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.regra-card__body {
  padding: 1rem;
}

.regra-card.is-collapsed .regra-card__body {
  display: none;
}

.regra-card.is-collapsed .regra-card__head {
  border-bottom: none;
}

.regra-card__toggle i {
  transition: transform 0.15s ease;
  display: inline-block;
}

.regra-card.is-collapsed .regra-card__toggle i {
  transform: rotate(-90deg);
}

/* ------------------------------------------------------------- seções */

.regra-section + .regra-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--color-nevoa);
}

.regra-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-asfalto);
  margin-bottom: 0.75rem;
}

.field-hint {
  font-size: 0.6875rem;
  color: var(--color-asfalto);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* -------------------------------------------------- construtor de condições */

.cond-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cond-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 36px;
  gap: 0.5rem;
  align-items: start;
}

/* No desktop os itens seguem a ordem natural das 4 colunas. No mobile eles são
   reposicionados por áreas nomeadas — que só podem ser declaradas aqui dentro,
   senão o grid do desktop ganha colunas implícitas. */
@media (max-width: 700px) {
  .cond-row {
    grid-template-columns: minmax(0, 1fr) 36px;
    grid-template-areas:
      "campo remover"
      "operador remover"
      "valor remover";
  }
  .cond-campo { grid-area: campo; }
  .cond-operador { grid-area: operador; }
  .cond-valor { grid-area: valor; }
  .cond-row > .cond-remover {
    grid-area: remover;
    align-self: start;
  }
}

.cond-row .form-select,
.cond-row .form-control {
  width: 100%;
}

.cond-remover {
  height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--color-asfalto);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cond-remover:hover {
  background-color: #FEE2E2;
  color: #B91C1C;
}

.cond-conector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0;
}

.cond-conector::before,
.cond-conector::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--color-nevoa);
}

.cond-conector__grupo {
  display: inline-flex;
  border: 1px solid var(--color-nevoa);
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--color-cartao);
}

.cond-conector__btn {
  border: 0;
  background: transparent;
  padding: 0.125rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-asfalto);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cond-conector__btn:hover {
  background-color: var(--color-terminal);
}

.cond-conector__btn.is-active {
  background-color: var(--color-aerotur);
  color: #fff;
}

.cond-vazio {
  padding: 0.75rem 1rem;
  border: 1px dashed var(--color-nevoa);
  border-radius: 10px;
  background-color: var(--color-terminal);
  color: var(--color-asfalto);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------- pré-visualização */

.regra-preview {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background-color: var(--color-info-light);
  color: var(--color-info);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.regra-preview i {
  flex: 0 0 auto;
  margin-top: 0.125rem;
}

.regra-preview strong {
  font-weight: 700;
}

.regra-card__resumo {
  font-size: 0.75rem;
  color: var(--color-asfalto);
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------- campos numéricos */

.input-sufixo {
  position: relative;
}

.input-sufixo > .form-control {
  padding-right: 2.25rem;
}

.input-sufixo__label {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-asfalto);
  pointer-events: none;
}

/* ------------------------------------------------------------ meta toggle */

.meta-box {
  border: 1px solid var(--color-nevoa);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  background-color: var(--color-terminal);
}

.meta-box__campos {
  margin-top: 0.75rem;
}

.meta-box:not(.is-ativo) .meta-box__campos {
  display: none;
}

/* --------------------------------------------------------- grid utilitário */

.grid-campos {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.btn-tracejado {
  border-style: dashed !important;
}

/* ==================================================================
   Ficha do colaborador — visão de acompanhamento
   ================================================================== */

/* -------------------------------------------------- hero de comissão */

.hero-comissao {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl, 16px);
  /* Versão calma: brilho vermelho bem sutil, sem listras diagonais. */
  background:
    radial-gradient(900px 320px at 100% -40%, rgba(227, 6, 19, 0.12), transparent 62%),
    linear-gradient(135deg, #111A2B 0%, #17233B 100%);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.hero-comissao__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem;
}

.hero-comissao__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.hero-comissao__valor {
  font-family: var(--font-mono);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  margin-top: 0.35rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.hero-comissao__periodo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-chip--ok {
  background: rgba(4, 120, 87, 0.28);
  border-color: rgba(16, 185, 129, 0.45);
  color: #A7F3D0;
}

.hero-chip--pendente {
  background: rgba(217, 119, 6, 0.24);
  border-color: rgba(245, 158, 11, 0.4);
  color: #FDE68A;
}

/* mini-resumo dentro do hero (tarifa / receita / vendas) */
.hero-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
}

.hero-mini__item {
  min-width: 96px;
}

.hero-mini__k {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.hero-mini__v {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-top: 0.15rem;
}

/* --------------------------------------------- composição da comissão */

.composicao-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-nevoa);
}

.composicao-item:last-child {
  border-bottom: none;
}

.composicao-item__icone {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.9rem;
}

.composicao-item__icone--proprias {
  background: var(--color-aerotur-light);
  color: var(--color-aerotur-dark);
}

.composicao-item__icone--setor {
  background: var(--color-info-light);
  color: var(--color-info);
}

.composicao-item__icone--ccpp {
  background: var(--color-atraso-light);
  color: var(--color-atraso);
}

.composicao-item__corpo {
  flex: 1 1 auto;
  min-width: 0;
}

.composicao-item__nome {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-pista);
}

.composicao-item__meta {
  font-size: 0.75rem;
  color: var(--color-asfalto);
  margin-top: 0.1rem;
}

.composicao-item__valor {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-partida);
  white-space: nowrap;
}

/* ------------------------------------------------ KPIs secundários */

.stat-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.stat-mini {
  background: var(--color-cartao);
  border: 1px solid var(--color-nevoa);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}

.stat-mini__k {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-asfalto);
  font-weight: 600;
}

.stat-mini__v {
  font-family: var(--font-mono);
  /* Fixo (não vw): cards estreitos no grid de 5 não podem cortar um valor em R$. */
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-pista);
  margin-top: 0.35rem;
  white-space: nowrap;
}

.stat-mini__v--verde { color: var(--color-partida); }
.stat-mini__v--azul { color: var(--color-info); }

/* barra de progresso de meta reutilizável */
.meta-bar {
  height: 8px;
  width: 100%;
  background: var(--color-terminal);
  border: 1px solid var(--color-nevoa);
  border-radius: 999px;
  overflow: hidden;
}

.meta-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.meta-bar__fill--ok { background: var(--color-partida); }
.meta-bar__fill--quase { background: var(--color-atraso); }
.meta-bar__fill--longe { background: var(--color-aerotur); }

/* ==================================================================
   Dashboard — cabeçalhos de seção, KPIs, variação, ranking e gráfico
   ================================================================== */

/* -------------------------------------------------- cabeçalho de seção */

.section-heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.9rem;
}

.section-heading__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--color-aerotur-light);
  color: var(--color-aerotur);
  font-size: 0.95rem;
}

.section-heading__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-pista);
  line-height: 1.2;
}

.section-heading__sub {
  font-size: 0.75rem;
  color: var(--color-asfalto);
  margin-top: 0.05rem;
}

/* --------------------------------------------------------- KPI cards */

/* Card de KPI com faixa de destaque no topo e leve elevação no hover.
   Substitui as bordas laterais soltas por uma linguagem visual unificada. */
.kpi {
  position: relative;
  background: var(--color-cartao);
  border: 1px solid var(--color-nevoa);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.2rem 1.2rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.kpi::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kpi-accent, var(--color-aerotur));
  opacity: 0.9;
}

.kpi:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(75, 85, 99, 0.22);
}

.kpi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.kpi__label {
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-asfalto);
  font-weight: 600;
}

.kpi__icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 0.95rem;
  background: var(--kpi-icon-bg, var(--color-aerotur-light));
  color: var(--kpi-accent, var(--color-aerotur));
}

.kpi__value {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 1.35rem, 1.4rem);
  font-weight: 600;
  color: var(--color-pista);
  line-height: 1.12;
  letter-spacing: -0.02em;
  /* Nunca esconder um valor em R$: se não couber, quebra — não trunca. */
  overflow-wrap: anywhere;
}

.kpi__foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.kpi__hint {
  font-size: 0.75rem;
  color: var(--color-asfalto);
}

/* variantes de cor por token (definem faixa + fundo do ícone) */
.kpi--aerotur { --kpi-accent: var(--color-aerotur); --kpi-icon-bg: var(--color-aerotur-light); }
.kpi--info    { --kpi-accent: var(--color-info);    --kpi-icon-bg: var(--color-info-light); }
.kpi--partida { --kpi-accent: var(--color-partida); --kpi-icon-bg: var(--color-partida-light); }
.kpi--atraso  { --kpi-accent: var(--color-atraso);  --kpi-icon-bg: var(--color-atraso-light); }

/* ---------------------------------------- pílula de variação % (delta) */

.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
}

/* Nunca só cor: sempre acompanha uma seta + sinal. */
.delta--up {
  background: var(--color-partida-light);
  color: var(--color-partida);
}

.delta--down {
  background: var(--color-aerotur-light);
  color: var(--color-aerotur-dark);
}

.delta--flat {
  background: var(--color-terminal);
  color: var(--color-asfalto);
  border: 1px solid var(--color-nevoa);
}

.delta i {
  font-size: 0.72rem;
}

/* ---------------------------------------------------- ranking com barras */

.rank-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.rank-pos {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-terminal);
  border: 1px solid var(--color-nevoa);
  color: var(--color-asfalto);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

/* pódio: 1º, 2º e 3º ganham cor */
.rank-pos--1 { background: var(--color-atraso-light); border-color: transparent; color: var(--color-atraso); }
.rank-pos--2 { background: #EEF2F7; border-color: transparent; color: #64748B; }
.rank-pos--3 { background: var(--color-aerotur-light); border-color: transparent; color: var(--color-aerotur-dark); }

.rank-bar {
  height: 6px;
  width: 100%;
  min-width: 60px;
  background: var(--color-terminal);
  border-radius: 999px;
  overflow: hidden;
}

.rank-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-aerotur), #F0555F);
  transition: width 0.5s cubic-bezier(0, 0, 0.2, 1);
}

/* ----------------------------------------------------------- gráfico */

.chart-box {
  position: relative;
  width: 100%;
  height: 300px;
  padding: 0.5rem 0.25rem 0;
}

@media (max-width: 640px) {
  .chart-box { height: 240px; }
}

/* ==================================================================
   Ficha do colaborador — leigo-friendly: dicas, explicação e proporção
   ================================================================== */

/* --------------------------------------------- dica de ajuda (tooltip) */

/* Ícone "?" que revela uma explicação em linguagem simples no hover/foco.
   Acessível: recebe foco por teclado (tabindex=0 no HTML). */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 0.3rem;
  border-radius: 999px;
  background: var(--color-nevoa);
  color: var(--color-asfalto);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.help-tip:hover,
.help-tip:focus-visible {
  background: var(--color-aerotur);
  color: #fff;
  outline: none;
}

.help-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: var(--color-pista);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
}

.help-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-pista);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 50;
}

.help-tip:hover::after,
.help-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.help-tip:hover::before,
.help-tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* dicas próximas da borda direita abrem alinhadas à direita */
.help-tip--right::after { left: auto; right: 0; transform: translateX(0) translateY(4px); }
.help-tip--right:hover::after,
.help-tip--right:focus-visible::after { transform: translateX(0) translateY(0); }
.help-tip--right::before { left: auto; right: 5px; transform: none; }

/* --------------------------------------------- banner de explicação */

.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-info-light);
  border: 1px solid rgba(3, 105, 161, 0.18);
  color: #0C4A6E;
  font-size: 0.85rem;
  line-height: 1.5;
}

.info-banner i {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  font-size: 1rem;
  color: var(--color-info);
}

/* -------------------------------- proporção "de onde vem a comissão" */

.share-bar {
  height: 6px;
  width: 100%;
  background: var(--color-terminal);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.share-bar__fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.share-bar__fill--proprias { background: linear-gradient(90deg, var(--color-aerotur), #F0555F); }
.share-bar__fill--setor { background: linear-gradient(90deg, var(--color-info), #38A3D9); }
.share-bar__fill--ccpp { background: linear-gradient(90deg, var(--color-atraso), #F0B24B); }

.share-pct {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-asfalto);
}

/* a composição vira "clicável" (expande a explicação em linguagem simples) */
.composicao-item {
  cursor: default;
  border-radius: 10px;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  transition: background-color 0.15s ease;
}

.composicao-item:hover {
  background: var(--color-terminal);
}

.composicao-explica {
  font-size: 0.78rem;
  color: var(--color-asfalto);
  line-height: 1.5;
  margin-top: 0.3rem;
}

/* tabs com melhor alvo de toque no mobile */
@media (max-width: 640px) {
  .tab-btn {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }
}

/* ==================================================================
   Ficha do colaborador — modo calmo (uma coluna, menos cor, mais ar)
   ================================================================== */

/* Sem margens laterais: o conteúdo ocupa toda a largura disponível.
   A calma vem da coluna única, dos cards achatados e das cores neutras. */
.ficha-wrap {
  width: 100%;
}

/* Cards achatados: sem sombra e borda mais leve — menos "caixas" brigando.
   O que separa as seções passa a ser o espaço em branco, não a moldura. */
.ficha-wrap .card {
  box-shadow: none;
  border-color: rgba(229, 231, 235, 0.9);
}

/* Respiro maior entre as seções empilhadas. */
.ficha-wrap > * {
  margin-bottom: 1.5rem;
}
.ficha-wrap > *:last-child {
  margin-bottom: 0;
}

/* Nota de ajuda discreta (substitui o banner azul chamativo). */
.ficha-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0;
  color: var(--color-asfalto);
  font-size: 0.85rem;
  line-height: 1.55;
}
.ficha-note i {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--color-asfalto);
}
.ficha-note strong {
  color: var(--color-pista);
  font-weight: 600;
}

/* No modo calmo os números secundários ficam neutros (nada de verde/azul). */
.ficha-wrap .stat-mini__v--verde,
.ficha-wrap .stat-mini__v--azul {
  color: var(--color-pista);
}

/* Indicadores secundários mais leves: fundo sutil, sem borda dura. */
.ficha-wrap .stat-mini {
  background: var(--color-terminal);
  border-color: transparent;
}

/* ==================================================================
   REFINAMENTO VISUAL GLOBAL (v6) — aplica-se a todas as telas
   Objetivo: acabamento mais moderno e calmo, mantendo a identidade.
   Só toca componentes compartilhados; carrega depois do main.css.
   ================================================================== */

/* --- Cards: cantos um pouco maiores, borda mais suave, sombra discreta --- */
.card {
  border-radius: 14px;
  border-color: #ECEEF2;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03);
}

/* --- Tabelas: mais respiro, cabeçalho limpo, hover suave --- */
.data-table thead {
  background: transparent;
  border-bottom: 1px solid #ECEEF2;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: #6B7280;
}
.data-table th,
.data-table td {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.data-table th:first-child,
.data-table td:first-child { padding-left: 1.25rem; }
.data-table th:last-child,
.data-table td:last-child { padding-right: 1.25rem; }
.data-table tbody tr {
  transition: background-color 0.12s ease;
}
.data-table tbody tr:hover {
  background-color: #F7F9FC;
}

/* --- Botões: cantos mais macios e profundidade sutil --- */
.btn { border-radius: 9px; }
.btn-primary {
  box-shadow: 0 1px 2px rgba(227, 6, 19, 0.22);
}
.btn-primary:hover {
  box-shadow: 0 3px 8px rgba(227, 6, 19, 0.24);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary:hover { transform: translateY(-1px); }

/* --- Campos de formulário: cantos coerentes com os botões --- */
.form-control,
select.form-select {
  border-radius: 9px;
}

/* --- Sidebar: item ativo com barra de destaque e cantos macios --- */
.nav-link { border-radius: 9px; }
.nav-link.active {
  position: relative;
}
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  width: 3px;
  border-radius: 999px;
  background: var(--color-aerotur);
}

/* --- Cabeçalho de página: um pouco mais de ar embaixo --- */
.page-header { margin-bottom: 1.75rem; }

/* --- Alertas e badges: cantos e tom levemente mais suaves --- */
.alert { border-radius: 12px; }

/* --- Barra de rolagem já é sutil (main.css); nada a fazer aqui --- */

/* ==================================================================
   MOBILE — modal "Ver vendas" vira cards (uma venda por card)
   ================================================================== */
@media (max-width: 640px) {
  /* Cabeçalho da tabela some; cada linha vira um card. */
  #tabela-vendas-modal thead,
  #tabela-vendas-modal tfoot {
    display: none;
  }
  #tabela-vendas-modal,
  #tabela-vendas-modal tbody,
  #tabela-vendas-modal tr,
  #tabela-vendas-modal td {
    display: block;
    width: 100%;
  }
  #tabela-vendas-modal tr {
    border: 1px solid var(--color-nevoa);
    border-radius: 12px;
    margin-bottom: 0.7rem;
    padding: 0.5rem 0.85rem;
    background: var(--color-cartao);
    box-shadow: var(--shadow-sm);
  }
  #tabela-vendas-modal td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.28rem 0;
    border: none;
    text-align: right;
    font-size: 0.8125rem;
  }
  #tabela-vendas-modal td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-asfalto);
    font-weight: 600;
    text-align: left;
  }
  /* No celular, mostra só o essencial por card. */
  #tabela-vendas-modal td[data-label="ID Venda"],
  #tabela-vendas-modal td[data-label="OBT"],
  #tabela-vendas-modal td[data-label="Tipo Comissão"],
  #tabela-vendas-modal td[data-label="Setor"],
  #tabela-vendas-modal td[data-label="Cliente"],
  #tabela-vendas-modal td[data-label="Pax"],
  #tabela-vendas-modal td[data-label="Forma Receb."],
  #tabela-vendas-modal td[data-label="Taxas"],
  #tabela-vendas-modal td[data-label="Comissão Sistema"],
  #tabela-vendas-modal td[data-label="Markup"],
  #tabela-vendas-modal td[data-label="MFee"],
  #tabela-vendas-modal td[data-label="Comissão Prev."],
  #tabela-vendas-modal td[data-label="Incentivo"],
  #tabela-vendas-modal td[data-label="Descontos"],
  #tabela-vendas-modal td[data-label="Tx. Cartão Cia"],
  #tabela-vendas-modal td[data-label="Tx. Cartão Conv."] {
    display: none;
  }
  /* A comissão em destaque no rodapé do card. */
  #tabela-vendas-modal td[data-label="Comissão"] {
    margin-top: 0.35rem;
    padding-top: 0.45rem;
    border-top: 1px dashed var(--color-nevoa);
    font-size: 0.95rem;
  }
  #tabela-vendas-modal td[data-label="Comissão"]::before {
    align-self: center;
  }
}

/* ------------------------------------------------ tabela ordenável */

.data-table th.th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.data-table th.th-sort:hover {
  color: var(--color-pista);
}

.th-sort__arrow {
  display: inline-block;
  width: 0.9em;
  margin-left: 0.25rem;
  color: var(--color-asfalto);
  opacity: 0.35;
  font-size: 0.8em;
  vertical-align: middle;
}

.data-table th.th-sort.is-sorted .th-sort__arrow {
  opacity: 1;
  color: var(--color-aerotur);
}