/* Clínica Biocardio: estilos dos componentes (classes bc-*). Carregue depois de tokens.css. */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; }
.bc-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.bc-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-5); }

/* Focus */
.bc-btn:focus-visible, .bc-field input:focus-visible, .bc-field select:focus-visible, .bc-card a:focus-visible, .bc-header a:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* Button */
.bc-btn { font: 500 16px/24px var(--font-sans); border-radius: var(--radius-md); padding: var(--space-3) 20px; border: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.bc-btn-sm { font-size: 14px; line-height: 20px; padding: 6px 14px; }
.bc-btn-lg { font-size: 18px; line-height: 28px; padding: 14px 28px; }
.bc-btn-block { width: 100%; justify-content: center; }
.bc-btn-primary { background: var(--primary); color: var(--on-primary); }
.bc-btn-primary:hover { background: var(--primary-hover); }
.bc-btn-accent { background: var(--accent); color: var(--on-accent); }
.bc-btn-accent:hover { background: var(--accent-hover); }
.bc-btn-secondary { background: transparent; color: var(--primary); border-color: var(--primary); }
.bc-btn-secondary:hover { background: var(--primary-soft); }
.bc-btn-ghost { background: transparent; color: var(--primary); }
.bc-btn-ghost:hover { background: var(--primary-soft); }
.bc-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Badge */
.bc-badge { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 14px/20px var(--font-sans); padding: 2px 10px; border-radius: var(--radius-pill); }
.bc-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bc-badge-info { background: var(--primary-soft); color: var(--blue-700); }
.bc-badge-success { background: var(--success-soft); color: var(--success); }
.bc-badge-warning { background: var(--warning-soft); color: var(--warning); }
.bc-badge-danger { background: var(--danger-soft); color: var(--danger); }
.bc-badge-neutral { background: var(--gray-100); color: var(--ink-muted); }

/* TextField */
.bc-field { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.bc-field label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.bc-field input, .bc-field select { font: 400 16px/24px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 11px 14px; }
.bc-field input::placeholder { color: var(--ink-muted); }
.bc-field-hint { font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.bc-field-invalid input { border-color: var(--danger); border-width: 2px; padding: 10px 13px; }
.bc-field-error { font: 600 14px/20px var(--font-sans); color: var(--danger); display: flex; gap: var(--space-1); align-items: center; }

/* Alert */
.bc-alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); }
.bc-alert-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--font-sans); color: var(--surface); }
.bc-alert-title { font-weight: 600; margin: 0 0 2px; }
.bc-alert p { margin: 0; color: var(--ink); }
.bc-alert-info { background: var(--primary-soft); } .bc-alert-info .bc-alert-icon { background: var(--primary); } .bc-alert-info .bc-alert-title { color: var(--blue-700); }
.bc-alert-success { background: var(--success-soft); } .bc-alert-success .bc-alert-icon { background: var(--success); } .bc-alert-success .bc-alert-title { color: var(--success); }
.bc-alert-warning { background: var(--warning-soft); } .bc-alert-warning .bc-alert-icon { background: var(--warning); } .bc-alert-warning .bc-alert-title { color: var(--warning); }
.bc-alert-danger { background: var(--danger-soft); } .bc-alert-danger .bc-alert-icon { background: var(--danger); } .bc-alert-danger .bc-alert-title { color: var(--danger); }

/* Card (ServiceCard, AppointmentCard) */
.bc-card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow .15s; }
.bc-card:hover { box-shadow: var(--shadow-md); }
.bc-card h3 { font: 600 18px/26px var(--font-sans); margin: 0; color: var(--ink); }
.bc-card p { margin: 0; color: var(--ink-muted); }
.bc-card-kicker { font: 600 12px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.bc-card-link { font-weight: 600; color: var(--primary); text-decoration: none; margin-top: auto; }
.bc-card-link:hover { text-decoration: underline; }
.bc-appt { flex-direction: row; gap: var(--space-5); align-items: flex-start; }
.bc-appt-date { flex: none; width: 72px; border-radius: var(--radius-md); background: var(--primary-soft); text-align: center; padding: var(--space-2) 0; }
.bc-appt-day { display: block; font: 700 28px/32px var(--font-sans); color: var(--primary); }
.bc-appt-month { display: block; font: 600 12px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.bc-appt-body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.bc-appt-meta { font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }

/* Header */
.bc-header { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--space-5); background: var(--surface-raised); border-bottom: 1px solid var(--border); }
.bc-header-logo { display: block; height: 52px; box-sizing: border-box; padding: 4px 8px; background: #ffffff; border-radius: var(--radius-sm); }
.bc-header-logo img { height: 44px; display: block; }
.bc-header nav { display: flex; gap: var(--space-5); flex: 1; }
.bc-header nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.bc-header nav a:hover, .bc-header nav a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
@media (max-width: 720px) { .bc-header nav { display: none; } .bc-header { justify-content: space-between; } }