/* Botones */
.wp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: 1px solid transparent;
    gap: var(--spacing-sm);
}

.wp-button-primary {
    background: var(--wp-theme-color);
    color: var(--text-light);
}

.wp-button-primary:hover {
    background: var(--wp-theme-color-darker);
}

.wp-button-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.wp-button-secondary:hover {
    background: var(--bg-primary);
}

/* Tarjetas */
.wp-card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-normal);
}

.wp-card:hover {
    box-shadow: var(--shadow-md);
}

/* Formularios */
.wp-form-control {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.wp-form-control label {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.wp-form-control input,
.wp-form-control select,
.wp-form-control textarea {
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-md);
    transition: all var(--transition-fast);
}

.wp-form-control input:focus,
.wp-form-control select:focus,
.wp-form-control textarea:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 1px var(--border-focus);
    outline: none;
}

/* Tablas */
.wp-table {
    width: 100%;
    border-collapse: collapse;
}

.wp-table th,
.wp-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.wp-table th {
    background: var(--bg-tertiary);
    font-weight: 500;
    color: var(--text-primary);
}

.wp-table tr:hover {
    background: var(--bg-tertiary);
}

/* Badges */
.wp-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.wp-badge-success {
    background: color-mix(in srgb, var(--success-color) 15%, white);
    color: var(--success-color);
}

.wp-badge-warning {
    background: color-mix(in srgb, var(--warning-color) 15%, white);
    color: var(--warning-color);
}

/* Animaciones */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.fade-in {
    animation: fadeIn var(--transition-normal);
}

.slide-in {
    animation: slideIn var(--transition-normal);
}