/* =========================================================
   Componente: Tabs e Stepper
   ========================================================= */

/* ---------- Tabs ---------- */
.tabs-cf { border-bottom: 1px solid var(--border-color); display: flex; gap: var(--space-2); }
.tabs-cf__tab {
  position: relative;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.tabs-cf__tab:hover { color: var(--text-primary); }
.tabs-cf__tab.active { color: var(--indigo-600); }
.tabs-cf__tab.active::after {
  content: '';
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: -1px;
  height: 2px;
  background: var(--indigo-600);
  border-radius: var(--radius-full);
}
.tabs-cf__panel { padding-top: var(--space-4); }
.tabs-cf__panel[hidden] { display: none; }

/* ---------- Stepper ---------- */
.stepper-cf { display: flex; align-items: center; }
.stepper-cf__step { display: flex; align-items: center; gap: var(--space-2); }
.stepper-cf__dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  background: var(--bg-muted); color: var(--text-muted);
  border: 2px solid var(--border-color);
  transition: all var(--dur-base) var(--ease-out);
}
.stepper-cf__label { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.stepper-cf__line { width: 40px; height: 2px; background: var(--border-color); margin: 0 var(--space-2); }

.stepper-cf__step.active .stepper-cf__dot { background: var(--indigo-600); border-color: var(--indigo-600); color: #fff; }
.stepper-cf__step.active .stepper-cf__label { color: var(--text-primary); }
.stepper-cf__step.done .stepper-cf__dot { background: var(--presente); border-color: var(--presente); color: #fff; }
.stepper-cf__step.done ~ .stepper-cf__line,
.stepper-cf__line.done { background: var(--presente); }