/* ============================================================
   Prática Biomed — Component layer
   Requires colors_and_type.css. Link AFTER it.
   ============================================================ */

/* ---------------- Buttons ---------------- */
.btn {
  --_pad: 12px 22px; --_fs: .95rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: var(--_fs);
  padding: var(--_pad); border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; line-height: 1;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-decoration: none;
}
.btn:active { transform: scale(.98); }
.btn-lg { --_pad: 16px 30px; --_fs: 1.02rem; }
.btn-sm { --_pad: 9px 16px; --_fs: .85rem; }

.btn-primary {
  background: var(--grad-cta); color: var(--primary-foreground);
  box-shadow: var(--glow-cta);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(95,175,169,.62); color: var(--primary-foreground); }

.btn-secondary {
  background: rgba(143,203,198,.08); color: var(--foreground); border-color: var(--border-strong);
}
.btn-secondary:hover { background: rgba(143,203,198,.14); border-color: var(--primary); color: var(--foreground); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--muted-foreground); }
.btn-ghost:hover { color: var(--foreground); background: rgba(143,203,198,.07); }

.btn-cream { background: var(--cream); color: var(--navy); box-shadow: var(--shadow-md); }
.btn-cream:hover { transform: translateY(-2px); color: var(--navy); }

.btn[disabled], .btn-disabled {
  background: rgba(143,203,198,.06); color: var(--subtle-foreground);
  box-shadow: none; border-color: var(--border); cursor: not-allowed; transform: none;
}
.btn-block { width: 100%; }

/* ---------------- Badges ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans); font-weight: 600; font-size: .78rem; line-height: 1;
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid transparent;
}
.badge-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-teal    { background: rgba(95,175,169,.14); color: var(--teal-tint); border-color: rgba(95,175,169,.28); }
.badge-neutral { background: rgba(143,203,198,.08); color: var(--muted-foreground); border-color: var(--border); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--destructive-bg); color: var(--destructive); }
.badge-info    { background: var(--info-bg); color: var(--info); }
.badge-mono    { font-family: var(--font-mono); font-weight: 500; letter-spacing:.04em; background: rgba(143,203,198,.06); color: var(--subtle-foreground); border-color: var(--border); }

/* ---------------- Inputs ---------------- */
.field { display:flex; flex-direction:column; gap:7px; }
.field-label { font-weight:600; font-size:.9rem; color: var(--foreground); }
.field-hint  { font-family: var(--font-mono); font-size:.72rem; color: var(--subtle-foreground); }
.input {
  font-family: var(--font-sans); font-size: 1rem; color: var(--foreground);
  background: var(--input); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 13px 15px; width: 100%; outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input::placeholder { color: var(--subtle-foreground); }
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(95,175,169,.18); background: rgba(95,175,169,.05); }

/* ---------------- Cards ---------------- */
.card {
  background: var(--grad-card); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.card-pad { padding: var(--sp-5); }
.card-feature { box-shadow: var(--glow-card); }

/* ---------------- Alerts ---------------- */
.alert {
  display:flex; gap:13px; align-items:flex-start;
  border:1px solid var(--border); border-left-width:3px; border-radius: var(--r-md);
  padding: 15px 17px; background: var(--card);
}
.alert-title { font-weight:700; font-size:.96rem; margin:0 0 3px; }
.alert-body  { font-size:.88rem; color: var(--muted-foreground); margin:0; line-height:1.5; }
.alert-success { border-left-color: var(--success); background: var(--success-bg); }
.alert-success .alert-title { color: var(--success); }
.alert-warning { border-left-color: var(--warning); background: var(--warning-bg); }
.alert-warning .alert-title { color: var(--warning); }
.alert-danger  { border-left-color: var(--destructive); background: var(--destructive-bg); }
.alert-danger .alert-title { color: var(--destructive); }

/* ---------------- Stat ---------------- */
.stat-num { font-weight:800; font-size: clamp(2rem,3vw,2.6rem); letter-spacing:-.02em; line-height:1; color: var(--foreground); }
.stat-num.accent { color: var(--primary); }
.stat-label { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.04em; color: var(--subtle-foreground); margin-top:8px; }

/* ---------------- Medallion ---------------- */
.medallion {
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--grad-card); border:1px solid var(--border-strong);
  box-shadow: var(--shadow-md), 0 0 0 6px rgba(6,20,23,.5);
}
.medallion-glow { box-shadow: var(--glow-card); }

/* avatar stack */
.avatars { display:flex; }
.avatars .av {
  width:34px; height:34px; border-radius:50%; margin-left:-10px;
  border:2px solid var(--background); display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-size:.66rem; font-weight:600; color: var(--navy);
  background: var(--teal-tint);
}
.avatars .av:first-child { margin-left:0; }

/* star rating */
.stars { color: var(--warning); letter-spacing:2px; font-size:.95rem; }

/* mono eyebrow row helper */
.eyebrow-row { display:flex; align-items:center; gap:10px; }
.eyebrow-row::before { content:""; width:22px; height:1px; background: var(--primary); }