/* --------------------------------------------------------------------------
   Componentes reutilizáveis: botões, badges, alertas, cards e estados.
   -------------------------------------------------------------------------- */
.eyebrow { display: inline-block; margin-bottom: 10px; color: var(--color-primary-700); font-size: 0.75rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow--light { color: #d8e9ff; }
.status-badge { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 800; white-space: nowrap; }
.status-badge--open { color: var(--color-success-700); background: var(--color-success-100); border: 1px solid #c8ead7; }
.status-badge--closed { color: var(--color-danger-700); background: var(--color-danger-100); border: 1px solid #f3cbc8; }
.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity var(--transition);
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .58; cursor: not-allowed; }
.button--primary { color: #fff; background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-600)); box-shadow: 0 9px 20px rgba(13, 71, 143, .19); }
.button--secondary { color: var(--color-primary-900); background: var(--color-primary-50); border: 1px solid #cfe0f4; }
.button--ghost { color: var(--color-primary-900); background: #fff; border: 1px solid var(--color-border); }
.button--small { min-height: 38px; padding-inline: 14px; font-size: .84rem; }
.button--full { width: 100%; }
.alert { display: none; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 650; }
.alert.is-visible { display: block; }
.alert--success { color: var(--color-success-700); background: var(--color-success-100); border: 1px solid #c9ebd8; }
.alert--error { color: var(--color-danger-700); background: var(--color-danger-100); border: 1px solid #f1cecb; }
.alert--warning { color: var(--color-warning-700); background: var(--color-warning-100); border: 1px solid #f0d79c; }
.empty-state, .error-card { padding: 44px; text-align: center; }
.empty-state__icon, .error-code { width: 72px; height: 72px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary-900); background: var(--color-primary-100); font-size: 1.4rem; font-weight: 900; }
.empty-state p, .error-card p { max-width: 620px; margin: 0 auto 24px; }
.error-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.error-card { width: min(100%, 640px); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.error-code { width: auto; height: auto; background: transparent; font-size: 1rem; color: var(--color-muted); }