/* ============================================================
   U-LAYER — Camada de classes universais (Sinal+Selo)
   ------------------------------------------------------------
   100% token-driven (var(--mb-*)/semânticos) → claro e escuro
   automáticos, SEM apêndice [data-theme=light]. Modelo: assessoria.css.

   Substitui as reinvenções espalhadas (consolidação):
   ~30 cards, ~12 botões, ~15 badges, grade-chip 7×, stat 5×,
   hero 6×, input ~12×, overlay/paywall 4×, table 3×, tabs.

   Uso: troque .prefeitura-licitacao / .public-card / .jv-tool /
   .comunidade-section … por .u-card; .gate-cta-primary /
   .review__btn / .download-gate-btn … por .u-btn--primary; etc.
   Cores locais (rgba/#00F0FF) saem; o token entra.
   ============================================================ */

/* ── CARD ─────────────────────────────────────────────────── */
.u-card {
  background: var(--mb-surface-1);
  border: 1px solid var(--mb-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--mb-shadow-s);
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.u-card--hover:hover { transform: translateY(-2px); border-color: var(--mb-primary); }
.u-card--inset  { background: var(--mb-surface-inset); box-shadow: var(--mb-shadow-inset); }
.u-card--sunken { background: var(--mb-surface-3); }
.u-card--flat   { box-shadow: none; }
.u-card--accent { border-color: var(--u-accent, var(--mb-accent)); }
.u-card--pad-lg { padding: var(--space-8); }
.u-card--pad-sm { padding: var(--space-4); }

/* ── HERO ─────────────────────────────────────────────────── */
.u-hero {
  position: relative; overflow: hidden;
  padding: var(--space-12) var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--mb-border-default);
  background:
    var(--brand-glow),                              /* atmosfera (transparente no claro) */
    linear-gradient(135deg, var(--mb-surface-1), var(--mb-surface-3));
}
.u-hero__eyebrow {
  display: inline-block; margin-bottom: var(--space-2);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--mb-accent);
}
.u-hero__title { margin: 0; font-weight: 800; line-height: 1.1; color: var(--mb-text-primary);
  font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; }
.u-hero__sub   { margin: var(--space-3) 0 0; max-width: 60ch; color: var(--mb-text-secondary); line-height: 1.55; }

/* ── BUTTON ───────────────────────────────────────────────── */
.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: .6rem 1.05rem; border-radius: var(--radius-sm);
  border: 1px solid var(--mb-border-default); background: var(--mb-surface-1);
  color: var(--mb-text-secondary); font-weight: 600; font-size: .92rem; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast), border-color var(--duration-fast),
              color var(--duration-fast), transform var(--duration-fast);
}
.u-btn:hover  { border-color: var(--mb-primary); color: var(--mb-text-primary); }
.u-btn:active { transform: scale(.98); }
.u-btn--primary { background: var(--mb-primary); border-color: transparent; color: var(--mb-primary-content); box-shadow: var(--shadow-brand); }
.u-btn--primary:hover { background: var(--mb-primary-hover); color: var(--mb-primary-content); }
.u-btn--accent  { background: var(--mb-accent); border-color: transparent; color: var(--mb-accent-content); }
.u-btn--accent:hover { background: var(--mb-accent-hover); color: var(--mb-accent-content); }
.u-btn--ghost   { background: transparent; }
.u-btn--ghost:hover { background: var(--mb-surface-3); }
.u-btn--icon    { padding: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); flex: 0 0 auto; }
.u-btn--block   { width: 100%; }
.u-btn--sm      { padding: .4rem .75rem; font-size: .82rem; }
.u-btn--lg      { padding: .8rem 1.4rem; font-size: 1rem; }
.u-btn:disabled, .u-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ── BADGE / PILL / TAG ───────────────────────────────────── */
.u-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--radius-full); border: 1px solid transparent;
  font-size: .72rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
  background: var(--u-tone-bg, var(--mb-surface-inset));
  color: var(--u-tone-fg, var(--mb-text-secondary));
}
.u-badge--success { --u-tone-bg: var(--tone-success-bg); --u-tone-fg: var(--tone-success-fg); }
.u-badge--info    { --u-tone-bg: var(--tone-info-bg);    --u-tone-fg: var(--tone-info-fg); }
.u-badge--warn    { --u-tone-bg: var(--tone-warn-bg);    --u-tone-fg: var(--tone-warn-fg); }
.u-badge--danger  { --u-tone-bg: var(--tone-danger-bg);  --u-tone-fg: var(--tone-danger-fg); }
.u-badge--pro     { --u-tone-bg: var(--tone-pro-bg);     --u-tone-fg: var(--tone-pro-fg); }
.u-badge--brand   { --u-tone-bg: var(--tone-brand-bg);   --u-tone-fg: var(--tone-brand-fg); }
.u-badge--accent  { --u-tone-bg: var(--tone-accent-bg);  --u-tone-fg: var(--tone-accent-fg); }
.u-badge--solid   { background: var(--mb-primary); color: var(--mb-primary-content); }
.u-badge--uppercase { text-transform: uppercase; letter-spacing: .05em; font-size: .66rem; }

/* ── GRADE CHIP (CAPAG A/B/C/D/ND) — era hardcoded 7× ─────── */
.u-grade-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 9px; border-radius: var(--radius-full);
  font-weight: 700; font-size: .72rem; line-height: 1.4;
  color: var(--u-g, var(--mb-text-secondary));
  background: color-mix(in srgb, var(--u-g, var(--mb-text-tertiary)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--u-g, var(--mb-text-tertiary)) 40%, transparent);
}
.u-grade-chip[data-grade="a"]  { --u-g: var(--grade-a); }
.u-grade-chip[data-grade="b"]  { --u-g: var(--grade-b); }
.u-grade-chip[data-grade="c"]  { --u-g: var(--grade-c); }
.u-grade-chip[data-grade="d"]  { --u-g: var(--grade-d); }
.u-grade-chip[data-grade="nd"] { --u-g: var(--grade-nd); }

/* ── STAT / METRIC (número grande + label maiúsculo) ──────── */
.u-stat { display: flex; flex-direction: column; gap: 2px; }
.u-stat__value { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--u-stat-accent, var(--mb-text-primary)); font-variant-numeric: tabular-nums; }
.u-stat__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mb-text-tertiary); }
.u-stat--accent  { --u-stat-accent: var(--mb-accent); }
.u-stat--primary { --u-stat-accent: var(--mb-primary); }
.u-stat--success { --u-stat-accent: var(--mb-success); }

/* ── INPUT / FORM FIELD ───────────────────────────────────── */
.u-input, .u-field input, .u-field textarea, .u-field select {
  width: 100%; box-sizing: border-box; padding: .65rem .8rem;
  border-radius: var(--radius-sm); font: inherit; font-size: .95rem;
  background: var(--mb-surface-inset); color: var(--mb-text-primary);
  border: 1px solid var(--mb-border-default);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.u-input::placeholder, .u-field input::placeholder, .u-field textarea::placeholder { color: var(--mb-text-tertiary); }
.u-input:focus, .u-field input:focus, .u-field textarea:focus, .u-field select:focus {
  outline: none; border-color: var(--mb-primary); box-shadow: 0 0 0 3px var(--mb-ring);
}
.u-field { display: grid; gap: 6px; }
.u-field > label { font-weight: 700; font-size: .9rem; color: var(--mb-text-primary); }
.u-field small  { font-size: .78rem; color: var(--mb-text-secondary); }
.u-field__error { font-size: .8rem; color: var(--mb-error); }

/* ── OVERLAY / PAYWALL SCRIM ──────────────────────────────── */
.u-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-overlay);
}
.u-paywall {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
}
.u-paywall__locked { filter: blur(6px); pointer-events: none; user-select: none; }
.u-paywall__gate {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  text-align: center; padding: var(--space-6);
  background: color-mix(in srgb, var(--mb-surface-1) 86%, transparent);
}
.u-paywall__gate i { font-size: 1.6rem; color: var(--mb-accent); }

/* ── TABLE ────────────────────────────────────────────────── */
.u-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.u-table thead th {
  text-align: left; padding: .6rem .8rem; font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--mb-text-tertiary);
  background: var(--mb-surface-3); border-bottom: 1px solid var(--mb-border-default);
}
.u-table tbody td { padding: .6rem .8rem; color: var(--mb-text-secondary); border-bottom: 1px solid var(--mb-border-subtle); }
.u-table tbody tr:hover td { background: var(--mb-surface-3); color: var(--mb-text-primary); }

/* ── TABS (sublinhado) ────────────────────────────────────── */
.u-tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--mb-border-default); }
.u-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: .6rem 0; margin-bottom: -1px; font-weight: 600; font-size: .92rem;
  color: var(--mb-text-secondary); border-bottom: 2px solid transparent;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.u-tab:hover { color: var(--mb-text-primary); }
.u-tab.is-active { color: var(--mb-primary); border-bottom-color: var(--mb-primary); }

/* ── HELPERS ──────────────────────────────────────────────── */
.u-eyebrow { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--mb-accent); }
.u-divider { height: 1px; border: 0; background: var(--mb-border-subtle); margin: var(--space-5) 0; }
.u-muted   { color: var(--mb-text-tertiary); }
.u-prose   { color: var(--mb-text-secondary); line-height: 1.65; }
.u-prose strong { color: var(--mb-text-primary); }