/* Componentes de presentación; no modifica las clases heredadas del panel. */
.hsp-ui, .hsp-ui *, .hsp-ui *::before, .hsp-ui *::after { box-sizing: border-box; }
.hsp-ui :where(button, input, select, textarea) { font: inherit; }
:where(.hsp-ui a) { color: var(--hsp-brand); text-underline-offset: 3px; }
.hsp-ui :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--hsp-focus); outline-offset: 3px;
}
.hsp-ui .hsp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border: 1px solid transparent;
  border-radius: var(--hsp-radius-control); font-weight: 700; font-size: 14px;
  text-decoration: none; cursor: pointer; background: var(--hsp-brand); color: #fff;
}
.hsp-ui .hsp-button:hover { background: var(--hsp-brand-hover); }
.hsp-ui .hsp-button--secondary { background: var(--hsp-surface); border-color: var(--hsp-control-border); color: var(--hsp-text); }
.hsp-ui .hsp-button--secondary:hover { background: var(--hsp-surface-subtle); }
.hsp-ui .hsp-button--quiet { background: transparent; color: var(--hsp-brand); }
.hsp-ui .hsp-button--quiet:hover { background: var(--hsp-brand-subtle); }
.hsp-ui .hsp-button--danger { background: var(--hsp-danger); }
.hsp-ui .hsp-button--danger:hover { background: #8c1c13; }
.hsp-ui .hsp-button:disabled { opacity: .55; cursor: not-allowed; }
.hsp-ui .hsp-card { padding: 24px; background: var(--hsp-surface); border: 1px solid var(--hsp-border); border-radius: var(--hsp-radius-card); box-shadow: var(--hsp-shadow); }
.hsp-ui .hsp-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.hsp-ui .hsp-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--hsp-control-border); border-radius: var(--hsp-radius-control); background: var(--hsp-surface); color: var(--hsp-text); font-size: 16px; }
.hsp-ui .hsp-input[aria-invalid="true"] { border-color: var(--hsp-danger); }
.hsp-ui .hsp-help { margin: 8px 0 0; color: var(--hsp-text-secondary); font-size: 14px; }
.hsp-ui .hsp-alert { padding: 12px 16px; border: 1px solid currentColor; border-radius: var(--hsp-radius-control); color: var(--hsp-info); background: var(--hsp-info-bg); }
.hsp-ui .hsp-alert--error { color: var(--hsp-danger); background: var(--hsp-danger-bg); }
.hsp-ui .hsp-alert--success { color: var(--hsp-success); background: var(--hsp-success-bg); }
.hsp-ui .hsp-alert--warning { color: var(--hsp-warning); background: var(--hsp-warning-bg); }
.hsp-ui .hsp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--hsp-info); background: var(--hsp-info-bg); }
.hsp-ui .hsp-badge--success { color: var(--hsp-success); background: var(--hsp-success-bg); }
.hsp-ui .hsp-badge--warning { color: var(--hsp-warning); background: var(--hsp-warning-bg); }
.hsp-ui .hsp-badge--danger { color: var(--hsp-danger); background: var(--hsp-danger-bg); }
.hsp-ui .hsp-table-wrap { overflow-x: auto; }
.hsp-ui .hsp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hsp-ui .hsp-table :is(th, td) { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--hsp-border); }
.hsp-ui .hsp-table th { background: var(--hsp-surface-subtle); font-weight: 600; }
.hsp-ui .hsp-table .hsp-number { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .hsp-ui .hsp-card { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .hsp-ui *, .hsp-ui *::before, .hsp-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }