/**
 * Design tokens de @nexa/ui. Siempre se incluyen si se usa cualquier
 * componente — cualquier CSS externo puede seguir funcionando junto a
 * estos, son variables normales, no un framework que tome el control.
 */
:root {
    --nx-color-primary: #2563eb;
    --nx-color-primary-hover: #1d4ed8;
    --nx-color-on-primary: #ffffff;
    --nx-color-surface: #ffffff;
    --nx-color-text: #111827;
    --nx-color-border: #d1d5db;
    --nx-color-danger: #dc2626;

    --nx-space-1: 0.25rem;
    --nx-space-2: 0.5rem;
    --nx-space-3: 0.75rem;
    --nx-space-4: 1rem;

    --nx-radius-sm: 0.25rem;
    --nx-radius-md: 0.5rem;

    --nx-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;

    --nx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-4);
    border-radius: var(--nx-radius-md);
    border: 1px solid transparent;
    font-family: var(--nx-font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.nx-btn:focus-visible {
    outline: 2px solid var(--nx-color-primary);
    outline-offset: 2px;
}

.nx-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.nx-btn-primary {
    background-color: var(--nx-color-primary);
    color: var(--nx-color-on-primary);
}

.nx-btn-primary:hover {
    background-color: var(--nx-color-primary-hover);
}

.nx-btn-outline {
    background-color: transparent;
    border-color: var(--nx-color-border);
    color: var(--nx-color-text);
}

.nx-btn-outline:hover {
    background-color: var(--nx-color-border);
}

.nx-card {
    background-color: var(--nx-color-surface);
    border: 1px solid var(--nx-color-border);
    border-radius: var(--nx-radius-md);
    padding: var(--nx-space-4);
}

.nx-card-title {
    font-family: var(--nx-font-body);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--nx-color-text);
    margin: 0 0 var(--nx-space-2) 0;
}