/*
 * GenteLaPrision · Componentes compartidos v2.50.73
 *
 * Esta hoja define el contrato visual común de los componentes básicos.
 * Se carga antes de app.css para mantener la compatibilidad con las reglas
 * históricas mientras cada módulo se migra de forma progresiva.
 */

:where(.button, .ui-button, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height-md);
    gap: var(--space-2);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-xs);
    background: var(--color-accent-primary);
    color: var(--color-text-inverse);
    padding: 11px 17px;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: filter var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

:where(.button, .ui-button):hover {
    text-decoration: none;
    filter: brightness(1.08);
}

:where(.button, .ui-button).ghost,
.ui-button--ghost {
    background: transparent;
    border-color: var(--color-border-action);
}

:where(.button, .ui-button).small,
.ui-button--small {
    min-height: var(--control-height-sm);
    padding: 7px 11px;
    font-size: var(--font-size-sm);
}

:where(.button, .ui-button).disabled,
:where(.button, .ui-button)[aria-disabled="true"],
:where(button, input, select, textarea):disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

:where(input:not([type="checkbox"]):not([type="radio"]), textarea, select, .ui-control) {
    width: 100%;
    min-height: var(--control-height-md);
    border: var(--border-width) solid var(--color-border-control);
    border-radius: var(--radius-xs);
    background: var(--color-surface-input);
    color: var(--color-text-inverse);
    padding: 11px;
    font: inherit;
}

:where(textarea, .ui-control--multiline) {
    min-height: 130px;
    resize: vertical;
}

:where(input, textarea, select, button, .button, .ui-button):focus-visible {
    outline: 2px solid var(--color-accent-secondary);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

:where(.panel, .form-card, .ui-card) {
    background: var(--color-surface-1);
    border: var(--border-width) solid var(--color-border-default);
    border-radius: var(--radius-xs);
    padding: 28px;
}

.ui-card--compact {
    padding: var(--space-4);
}

:where(.alert, .ui-alert) {
    padding: 14px 18px;
    margin-bottom: 20px;
    border: var(--border-width) solid;
    border-radius: var(--radius-xs);
}

:where(.alert.success, .ui-alert--success) {
    background: var(--color-success-surface);
    border-color: var(--color-success-border);
}

:where(.alert.error, .ui-alert--danger) {
    background: var(--color-danger-surface);
    border-color: var(--color-danger-border);
}

.ui-alert--warning {
    background: var(--color-warning-surface);
    border-color: var(--color-warning-border);
}

.ui-alert--info {
    background: var(--color-info-surface);
    border-color: var(--color-info-border);
}

:where(.ui-stack, .form-card) {
    display: grid;
    gap: var(--space-4);
}

.ui-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.ui-muted {
    color: var(--color-text-muted);
}

@media (max-width: 680px) {
    :where(.panel, .form-card, .ui-card) {
        padding: var(--space-5);
    }

    .ui-cluster--mobile-stack {
        align-items: stretch;
        flex-direction: column;
    }
}