/* 
 * WALLEE - LEGACY CLEANUP
 * Este archivo contiene overrides para limpiar estilos legacy
 * y asegurar que solo se usen los nuevos estilos modernos
 */

/* Reset de estilos legacy */
.old-style,
.legacy-button,
.legacy-form,
.legacy-card {
    display: none !important;
}

/* Asegurar que solo se usen las nuevas clases */
.wallee-btn:not([class*="wallee-btn--"]) {
    @apply wallee-btn--primary;
}

.wallee-input:not([class*="wallee-input--"]) {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
}

/* Override de estilos inline legacy */
[style*="background: linear-gradient"] {
    background: var(--gradient-primary) !important;
}

[style*="color: #"] {
    color: var(--text-primary) !important;
}

/* Cleanup de clases Bootstrap legacy si existen */
.btn:not(.wallee-btn) {
    display: none !important;
}

.form-control:not(.wallee-input) {
    display: none !important;
}

.card:not(.wallee-card) {
    display: none !important;
}

/* Asegurar consistencia en iconos */
.fa, .fas, .far, .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* Cleanup de estilos de tabla legacy */
table:not(.wallee-table):not(.admin-table) {
    border-collapse: collapse;
    width: 100%;
    background: var(--bg-primary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

table:not(.wallee-table):not(.admin-table) th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-lg);
    text-align: left;
    border-bottom: var(--border-width) solid var(--border-color);
}

table:not(.wallee-table):not(.admin-table) td {
    padding: var(--spacing-lg);
    border-bottom: var(--border-width) solid var(--border-color);
    color: var(--text-secondary);
}

table:not(.wallee-table):not(.admin-table) tr:hover {
    background: var(--bg-secondary);
}

/* Cleanup de formularios legacy */
form:not([class*="wallee-"]) input,
form:not([class*="wallee-"]) select,
form:not([class*="wallee-"]) textarea {
    width: 100%;
    padding: var(--spacing-lg);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    transition: var(--transition-colors);
}

form:not([class*="wallee-"]) input:focus,
form:not([class*="wallee-"]) select:focus,
form:not([class*="wallee-"]) textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Cleanup de botones legacy */
button:not([class*="wallee-"]),
input[type="submit"]:not([class*="wallee-"]) {
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--primary-color);
    color: var(--text-light);
    border: none;
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-all);
}

button:not([class*="wallee-"]):hover,
input[type="submit"]:not([class*="wallee-"]):hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Asegurar que los modals usen el nuevo sistema */
.modal:not(.wallee-modal) {
    display: none !important;
}

/* Cleanup de alertas legacy */
.alert:not(.wallee-alert) {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-lg);
    border: var(--border-width) solid;
}

.alert-success:not(.wallee-alert) {
    background: var(--success-light);
    color: var(--success-dark);
    border-color: var(--success-color);
}

.alert-error:not(.wallee-alert),
.alert-danger:not(.wallee-alert) {
    background: var(--error-light);
    color: var(--error-dark);
    border-color: var(--error-color);
}

.alert-warning:not(.wallee-alert) {
    background: var(--warning-light);
    color: var(--warning-dark);
    border-color: var(--warning-color);
}

.alert-info:not(.wallee-alert) {
    background: var(--info-light);
    color: var(--info-dark);
    border-color: var(--info-color);
}

/* Responsive cleanup */
@media (max-width: 768px) {
    /* Asegurar que elementos legacy sean responsive */
    table:not(.wallee-table):not(.admin-table) {
        font-size: var(--font-size-sm);
    }
    
    table:not(.wallee-table):not(.admin-table) th,
    table:not(.wallee-table):not(.admin-table) td {
        padding: var(--spacing-sm);
    }
}

/* Print styles cleanup */
@media print {
    .wallee-sidebar,
    .wallee-nav,
    button:not(.print-button),
    .wallee-modal {
        display: none !important;
    }
    
    .wallee-main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Dark mode cleanup para elementos legacy */
[data-theme="dark"] table:not(.wallee-table):not(.admin-table) {
    background: var(--bg-primary);
}

[data-theme="dark"] table:not(.wallee-table):not(.admin-table) th {
    background: var(--bg-secondary);
}

/* Accessibility cleanup */
button:not([class*="wallee-"]):focus,
input:not([class*="wallee-"]):focus,
select:not([class*="wallee-"]):focus,
textarea:not([class*="wallee-"]):focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Animation cleanup */
* {
    scroll-behavior: smooth;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}