/**
 * ============================================================================
 * KEYCLOAK COMPATIBILITY STYLES
 * ============================================================================
 * Estilos de compatibilidad para clases específicas de Keycloak
 * ============================================================================
 */

/* ============================================================================
   CLASES DE KEYCLOAK
   ============================================================================ */

/* Body classes */
.login-pf,
.login-pf-page {
    background: none;
}

/* Form container */
#kc-form {
    width: 100%;
}

#kc-form-wrapper {
    width: 100%;
}

/* Form groups */
.pf-c-form__group,
.form-group {
    margin-bottom: var(--spacing-lg);
}

.pf-c-form__group--last,
.form-group:last-child {
    margin-bottom: var(--spacing-2xl);
}

/* Labels - aplicar estilos del sistema de diseño */
.pf-c-form__label,
.pf-c-form-control label,
label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-sm);
    transition: color var(--transition-fast);
}

/* Inputs - aplicar estilos del sistema de diseño */
.pf-c-form-control,
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 8px 14px;
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    color: var(--color-gray-900);
    background-color: var(--color-white);
    border: 1.5px solid #c8cdd5;
    border-radius: 16px;
    outline: none;
    transition: all var(--transition-fast);
    appearance: none;
}

.pf-c-form-control::placeholder,
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--color-gray-400);
    opacity: 1;
}

.pf-c-form-control:hover,
.form-control:hover,
input:hover,
textarea:hover,
select:hover {
    border-color: #d1d5db;
}

.pf-c-form-control:focus,
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent-orange);
    box-shadow: 0 0 0 3px rgba(215, 64, 9, 0.1);
}

.pf-c-form-control:disabled,
.form-control:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-gray-500);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Input con error */
.pf-c-form-control.pf-m-error,
.form-control.error,
input.error {
    border-color: var(--color-error);
    background-color: var(--color-error-light);
}

.pf-c-form-control.pf-m-error:focus,
.form-control.error:focus,
input.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Botones - aplicar estilos del sistema de diseño */
.pf-c-button,
.btn,
button:not(.auth-form__input-icon):not(.modal__close):not(.password-toggle) {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-family-primary);
    text-align: center;
    border: none;
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    outline: none;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-decoration: none;
}

/* Botón primario */
.pf-c-button.pf-m-primary,
.btn-primary,
input[type="submit"],
button[type="submit"] {
    background: #D74009;
    color: var(--color-white);
    border-radius: 16px;
    padding: 10px 24px;
}

.pf-c-button.pf-m-primary:hover,
.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.pf-c-button.pf-m-primary:active,
.btn-primary:active,
input[type="submit"]:active,
button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.pf-c-button.pf-m-primary:focus,
.btn-primary:focus,
input[type="submit"]:focus,
button[type="submit"]:focus {
    box-shadow: 0 0 0 3px rgba(215, 64, 9, 0.3);
}

/* Botón secundario */
.pf-c-button.pf-m-secondary,
.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary-navy);
    border: var(--border-width-medium) solid var(--color-primary-navy);
}

.pf-c-button.pf-m-secondary:hover,
.btn-secondary:hover {
    background-color: var(--color-primary-navy);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Botón link */
.pf-c-button.pf-m-link,
.btn-link {
    background: none;
    border: none;
    color: var(--color-link);
    text-decoration: underline;
    padding: 0;
    width: auto;
}

.pf-c-button.pf-m-link:hover,
.btn-link:hover {
    color: var(--color-link-hover);
    transform: none;
    box-shadow: none;
}

/* Botón deshabilitado */
.pf-c-button:disabled,
.btn:disabled,
button:disabled {
    background-color: var(--color-gray-300);
    color: var(--color-gray-500);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* Form actions container */
#kc-form-buttons,
.form-actions {
    margin-top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Form options */
#kc-form-options {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

#kc-form-options a {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-align: center;
}

#kc-form-options a:hover {
    color: var(--color-primary-navy);
}

/* Checkbox y remember me */
.pf-c-check,
.checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.pf-c-check__input,
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.pf-c-check__label,
.checkbox label {
    margin: 0;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

/* Select dropdown */
select.pf-c-form-control,
select.form-control {
    padding-right: var(--spacing-4xl);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-lg) center;
    cursor: pointer;
}

/* Help text */
.pf-c-form__helper-text,
.help-block {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    margin-top: var(--spacing-sm);
    line-height: var(--line-height-normal);
}

/* Error text */
.pf-c-form__helper-text.pf-m-error,
.help-block.error,
#input-error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

/* Info text */
#kc-info {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md);
    background-color: var(--color-info-light);
    border-left: 4px solid var(--color-info);
    border-radius: var(--border-radius-md);
}

#kc-info-wrapper {
    font-size: var(--font-size-sm);
    color: var(--color-info);
}

/* Attempts left */
.kc-feedback-text {
    display: block;
    line-height: var(--line-height-normal);
}

/* Social providers */
#kc-social-providers {
    margin-top: var(--spacing-2xl);
}

#kc-social-providers ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

#kc-social-providers li {
    margin: 0;
}

#kc-social-providers .pf-c-button {
    background-color: var(--color-white);
    color: var(--color-gray-700);
    border: var(--border-width-thin) solid var(--color-gray-300);
}

#kc-social-providers .pf-c-button:hover {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-400);
}

/* Required indicator */
.required {
    color: var(--color-error);
}

/* Locale selector */
#kc-locale {
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    z-index: 100;
}

#kc-locale-dropdown {
    display: inline-block;
}

.kc-dropdown {
    position: relative;
}

/* Reset Keycloak specific styles that might conflict */
.login-pf body {
    background: none;
}

.login-pf .container {
    background: none;
    box-shadow: none;
}

/* Terms and conditions */
#kc-terms-text {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--spacing-lg);
    background-color: var(--color-gray-50);
    border: var(--border-width-thin) solid var(--color-gray-300);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-lg);
}

/* Username / password fields specific */
#username,
#password,
#password-new,
#password-confirm {
    font-size: var(--font-size-base);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 480px) {
    .pf-c-button,
    .btn,
    button {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
}