/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS.CSS — Tooltip, Divider, Loading, Card, Button, Input,
   data rows, inline utilities.
   Anatomia exata do _ref2/components.css + data-components.css.
   Fonte única de tokens: _ref2/tokens.css via base.css
   ⚠ Nomes de classe preservados — JS bound throughout.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tooltip ──────────────────────────────────────────────────────── */
/* PRESERVED: .tooltip-wrap, .tooltip-bubble — JS may trigger these */
.tooltip-wrap {
  position: relative;
  display:  inline-flex;
}
.tooltip-wrap:hover .tooltip-bubble {
  visibility: visible;
  opacity:    1;
  transform:  translateX(-50%) translateY(0);
}

.tooltip-bubble {
  position:       absolute;
  bottom:         calc(100% + 6px);
  left:           50%;
  transform:      translateX(-50%) translateY(4px);
  background:     var(--color-surface-04);
  color:          var(--color-text-sub);
  font-size:      var(--font-size-xs, 11px);
  padding:        5px 10px;
  border-radius:  var(--radius-sm, 4px);
  border:         1px solid var(--color-border-default);
  white-space:    normal;
  visibility:     hidden;
  opacity:        0;
  transition:     opacity var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast) var(--ease-out-quart);
  pointer-events: none;
  z-index:        var(--z-max, 999);
  max-width:      220px;
  text-align:     center;
  line-height:    1.4;
  box-shadow:     var(--shadow-lg);
  font-family:    var(--font-family-base, 'Archivo', system-ui, sans-serif);
}
.tooltip-bubble::after {
  content:          '';
  position:         absolute;
  top:              100%;
  left:             50%;
  transform:        translateX(-50%);
  border:           5px solid transparent;
  border-top-color: var(--color-surface-04);
}

/* ── Divider ──────────────────────────────────────────────────────── */
.divider {
  border:     none;
  border-top: 1px solid var(--color-border-subtle);
  margin:     var(--space-4, 16px) 0;
}

/* ── Loading overlay ──────────────────────────────────────────────── */
/* PRESERVED: .loading-overlay — JS shows during async operations */
.loading-overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(0, 0, 0, 0.65);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   inherit;
  z-index:         var(--z-raised, 10);
  backdrop-filter: blur(2px);
}

/* ════════════════════════════════════════════════════════════════════
   BUTTON VARIANTS — anatomia exata do _ref2/components.css
   Mobile-first: touch target mínimo 44px.
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .btn — base for all button variants */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2, 8px);
  font-family:    var(--font-family-base, 'Archivo', system-ui, sans-serif);
  font-size:      var(--font-size-xs, 11px);
  font-weight:    var(--font-weight-medium, 500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height:     44px;
  padding:        0 var(--space-5, 20px);
  border-radius:  var(--radius-sm, 4px);
  border:         1px solid transparent;
  white-space:    nowrap;
  max-width:      100%;
  overflow:       hidden;
  text-overflow:  ellipsis;
  cursor:         pointer;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-out-quart),
    border-color var(--duration-fast) var(--ease-out-quart),
    color var(--duration-fast) var(--ease-out-quart),
    opacity var(--duration-fast),
    transform var(--duration-fast);
}

.btn:active { transform: scale(0.98); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.30);
}
.btn:disabled { opacity: 0.32; cursor: not-allowed; pointer-events: none; }

/* PRESERVED: .btn-primary — primary CTA */
.btn-primary {
  background:   var(--color-text-primary);
  color:        var(--color-text-inverse);
  border-color: var(--color-text-primary);
  font-weight:  var(--font-weight-bold, 700);
}
.btn-primary:hover { background: var(--color-text-sub); border-color: var(--color-text-sub); }

/* PRESERVED: .btn-secondary — bordered secondary */
.btn-secondary {
  background:   transparent;
  color:        var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover {
  background:   var(--color-interactive-hover);
  border-color: rgba(255,255,255,0.30);
}

/* PRESERVED: .btn-outline — ghost with border */
.btn-outline {
  background:   transparent;
  color:        var(--color-text-secondary);
  border-color: var(--color-border-default);
}
.btn-outline:hover {
  background:   rgba(255,255,255,0.06);
  color:        var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* PRESERVED: .btn-ghost — no border */
.btn-ghost {
  background:   transparent;
  color:        var(--color-text-secondary);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--color-interactive-dim);
  color:      var(--color-text-primary);
}

/* Muted / contextual */
.btn-muted {
  background:   var(--color-surface-03);
  color:        var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}
.btn-muted:hover {
  background:   var(--color-surface-04);
  color:        var(--color-text-primary);
  border-color: var(--color-border-default);
}

/* ── Tamanhos ─────────────────────────────────────────────────────── */

/* PRESERVED: .btn-xs, .btn-sm, .btn-lg */
.btn-xs { font-size: var(--font-size-2xs, 10px); min-height: 32px; padding: 0 12px; }
.btn-sm { font-size: var(--font-size-xs, 11px);  min-height: 38px; padding: 0 16px; }
.btn-lg { font-size: var(--font-size-base, 15px); min-height: 52px; padding: 0 32px; letter-spacing: 0.06em; }

/* Icon button — square, no padding */
.btn-icon {
  padding:      0;
  min-height:   44px;
  width:        44px;
  aspect-ratio: 1;
  border-radius: var(--radius-sm, 4px);
  flex-shrink:  0;
}

/* ════════════════════════════════════════════════════════════════════
   CARD GENERIC — anatomia do _ref2
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .card — generic card wrapper */
.card {
  background:    var(--color-surface-02);
  border:        1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 8px);
  padding:       var(--space-6, 24px);
  overflow:      hidden;
  min-width:     0;
  transition:
    border-color var(--duration-base) var(--ease-out-quart),
    background var(--duration-base) var(--ease-out-quart),
    transform var(--duration-fast);
}

@media (min-width: 640px) {
  .card { padding: var(--space-8, 32px); }
}

/* PRESERVED: .card-interactive — adds hover pointer and translate */
.card-interactive {
  cursor: pointer;
}
.card-interactive:hover {
  border-color: var(--color-border-default);
  background:   var(--color-surface-03);
  transform:    translateY(-1px);
}

/* PRESERVED: .card-body — inner padding when card has no own padding */
.card-body { padding: var(--space-5, 20px); }

/* ── Card variante: featured ─────────────────────────────────────── */
.card--featured {
  background:   var(--color-surface-03);
  border-color: var(--color-border-default);
  position:     relative;
  overflow:     hidden;
}

.card--featured::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       var(--space-6, 24px);
  right:      var(--space-6, 24px);
  height:     1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

/* ── Card variante: ghost ────────────────────────────────────────── */
.card--ghost {
  background:   transparent;
  border-color: var(--color-border-subtle);
}

/* ════════════════════════════════════════════════════════════════════
   INPUT ANATOMY — _ref2/components.css
   ════════════════════════════════════════════════════════════════════ */

/* PRESERVED: .input — base input field */
.input {
  width:        100%;
  min-height:   44px;
  background:   var(--color-surface-02);
  border:       1px solid var(--color-border-default);
  border-radius: var(--radius-sm, 4px);
  padding:      0 var(--space-4, 16px);
  color:        var(--color-text-primary);
  font-family:  var(--font-family-base, 'Archivo', system-ui, sans-serif);
  font-size:    var(--font-size-base, 15px);
  font-weight:  var(--font-weight-regular, 400);
  outline:      none;
  transition:
    border-color var(--duration-base) var(--ease-out-quart),
    background var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}

.input::placeholder { color: var(--color-text-disabled); }

.input:hover { border-color: var(--color-border-strong); }

.input:focus {
  border-color: rgba(255, 255, 255, 0.45);
  background:   var(--color-surface-03);
  box-shadow:   0 0 0 3px rgba(255, 255, 255, 0.05);
}

.input.is-error {
  border-color: var(--color-semantic-negative-border);
}

.input-hint {
  font-size:  var(--font-size-xs, 11px);
  color:      var(--color-text-tertiary);
  margin-top: var(--space-1, 4px);
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

/* PRESERVED: .input-label — label above form fields */
.input-label {
  font-size:      var(--font-size-xs, 11px);
  font-weight:    var(--font-weight-semibold, 600);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--color-text-secondary);
  font-family:    var(--font-family-base, 'Archivo', system-ui, sans-serif);
  margin-bottom:  var(--space-2, 8px);
  display:        block;
}

/* Textarea */
.input-textarea {
  min-height:  120px;
  padding-top: var(--space-3, 12px);
  resize:      vertical;
  line-height: var(--line-height-relaxed, 1.68);
}

/* Group wrapper for label + input */
.input-group {
  display:    flex;
  flex-direction: column;
  width:      100%;
  min-height: 44px;
  gap:        var(--space-2, 8px);
}

/* ── Data row — label : value ─────────────────────────────────────── */
/* PRESERVED: .data-row — may be used in detail panels */
.data-row {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             var(--space-4, 16px);
  padding:         var(--space-3, 12px) 0;
  border-bottom:   1px solid var(--color-border-subtle);
  min-width:       0;
}
.data-row:last-child { border-bottom: none; }

.data-row__label {
  font-size:     var(--font-size-sm, 13px);
  color:         var(--color-text-tertiary);
  min-width:     0;
  overflow-wrap: break-word;
  font-family:   var(--font-family-base, 'Archivo', system-ui, sans-serif);
}

.data-row__value {
  font-size:   var(--font-size-sm, 13px);
  font-weight: var(--font-weight-medium, 500);
  color:       var(--color-text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-family-base, 'Archivo', system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}

/* ── Separator dot ────────────────────────────────────────────────── */
.sep { margin: 0 4px; color: var(--color-text-disabled); }

/* ── Flex utilities ───────────────────────────────────────────────── */
.flex             { display: flex; }
.flex-col         { display: flex; flex-direction: column; }
.flex-center      { display: flex; align-items: center; justify-content: center; }
.flex-between     { display: flex; align-items: center; justify-content: space-between; }
.items-center     { align-items: center; }
.items-start      { align-items: flex-start; }
.justify-between  { justify-content: space-between; }
.flex-wrap        { flex-wrap: wrap; }
.gap-2            { gap: var(--space-2, 8px); }
.gap-3            { gap: var(--space-3, 12px); }
.gap-4            { gap: var(--space-4, 16px); }
.gap-6            { gap: var(--space-6, 24px); }
.flex-1           { flex: 1; }

/* ── Text utilities ───────────────────────────────────────────────── */
.font-mono      { font-family: var(--font-mono); }
.font-bold      { font-weight: var(--font-weight-bold, 700); }
.font-medium    { font-weight: var(--font-weight-medium, 500); }
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-success   { color: var(--color-semantic-positive-text); }
.text-danger    { color: var(--color-semantic-negative-text); }
.text-warning   { color: var(--color-semantic-warning-text); }
.text-info      { color: var(--color-semantic-info-text); }
.text-disabled  { color: var(--color-text-disabled); }

/* ── Responsive display ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .content { padding: var(--space-4, 16px); }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
}