/* Componentes base — Roteirizador BR4 (UI-01 / DEC-062).
 * CSS puro sobre os tokens (tokens.css). Classes documentadas; contrato visual
 * exibido em /styleguide/ (DEBUG). Nada de Tailwind/build. */

/* ============================ Botões (pill) ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--font-poppins);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-buttons);      /* pill 160px — assinatura do DESIGN */
  padding: 13px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: filter .12s ease, background .12s ease;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/* Primário — a ação mais importante da tela. Violet é a ÚNICA cor de ação (DESIGN). */
.btn-primario {
  background: var(--color-monday-violet);
  color: var(--color-snow);
}
.btn-primario:hover { filter: brightness(1.06); text-decoration: none; }

/* Secundário — contorno, menor comprometimento. */
.btn-secundario {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-slate);
}
.btn-secundario:hover { background: var(--color-cloud); text-decoration: none; }

.btn-sm { padding: 8px 16px; font-size: var(--text-body-sm); }

/* ============================ Status Pill ============================ */
/* Wash pastel + texto Ink (DESIGN "Status Pill"). O mapeamento estado→variante
 * vive no Python (web/otimizacao/status_pill.py) e é testado 1:1 contra os enums —
 * aqui só as variantes de cor. Badge de 6px, como o DESIGN. */
.pill {
  display: inline-block;
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-badges);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-caption);
  color: var(--pill-text);
  white-space: nowrap;
}
.pill-done { background: var(--pill-done-bg); }
.pill-progress { background: var(--pill-progress-bg); }
.pill-info { background: var(--pill-info-bg); }
.pill-brand { background: var(--pill-brand-bg); }
.pill-neutral { background: var(--pill-neutral-bg); }
.pill-danger { background: var(--pill-danger-bg); }

/* ============================ Cards ============================ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-cards);        /* 24px */
  box-shadow: var(--shadow-xl);              /* sombra única, suave, lavanda 40% */
  padding: var(--card-padding);
}
.card + .card { margin-top: var(--spacing-16); }
.card-titulo {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--spacing-8);
}

/* ============================ Tabela densa ============================ */
/* base.css já estiliza <table>; .tabela acrescenta zebra sutil + hover Cloud,
 * e envolve num card de cantos arredondados para a densidade não virar ruído. */
.tabela { width: 100%; }
.tabela tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-cloud) 55%, transparent); }
.tabela tbody tr:hover { background: var(--color-cloud); }

/* ============================ Inputs & badges ============================ */
.input,
input[type="text"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-family: var(--font-poppins);
  font-size: var(--text-body-sm);
  color: var(--color-ink);
  background: var(--surface-card);
  border: 1px solid var(--color-pebble);
  border-radius: var(--radius-inputs);       /* 6px */
  padding: var(--spacing-8) var(--spacing-16);
}
.input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-cornflower);
  outline-offset: 1px;
}

.badge {
  display: inline-block;
  padding: 2px var(--spacing-8);
  border-radius: var(--radius-badges);
  border: 1px solid var(--color-pebble);
  background: var(--surface-card);
  font-size: var(--text-caption);
  color: var(--color-slate);
}

/* ============================ Utilidades de layout ============================ */
.cluster { display: flex; flex-wrap: wrap; gap: var(--spacing-8); align-items: center; }
.stack > * + * { margin-top: var(--spacing-16); }