/**
 * HOME THEME CSS
 * Estilos dinámicos para la pantalla principal y botones de login
 * Se aplican vía theme-manager.js en tiempo de ejecución
 */

/* ============================================ */
/* TARJETA DE SALDO */
/* ============================================ */

.op-workspace-layout .op-balance-card {
    background: linear-gradient(135deg, var(--color-fondo) 0%, var(--color-fondo) 55%, var(--color-fondo) 100%) !important;
}

/* ============================================ */
/* BARRA TOTAL DE OBLIGACIONES */
/* ============================================ */

.op-workspace-layout .op-loans-total-bar {
    background: linear-gradient(135deg, var(--color-fondo) 0%, var(--color-fondo) 55%, var(--color-fondo) 100%) !important;
    color: var(--color-texto) !important;
}

.op-workspace-layout .op-balance-label {
    color: var(--color-texto) !important;
}

.op-workspace-layout .op-balance-amount {
    color: var(--color-texto) !important;
}

.op-workspace-layout .op-balance-side-label {
    color: var(--color-texto) !important;
}

.op-workspace-layout .op-balance-side-value {
    color: var(--color-texto) !important;
}

/* ============================================ */
/* MENÚ DE USUARIO (Dropdown) - Solo el color de selección */
/* ============================================ */

.op-user-dropdown a:hover {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}

.op-user-dropdown a:active {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}

.op-workspace-layout .op-user-dropdown a:hover {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}

.op-workspace-layout .op-user-icon {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}

/* ============================================ */
/* BOTÓN HOME */
/* ============================================ */

.op-home-button {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    border: none !important;
}

.op-home-button:hover {
    background-color: var(--color-acentos) !important;
    opacity: 0.9 !important;
}

/* ============================================ */
/* BOTONES DE OPERACIONES */
/* ============================================ */

.op-workspace-layout .op-icon-option {
    background: var(--color-fondo) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14) !important;
}

.op-workspace-layout .op-icon-option:hover {
    background: var(--color-acentos) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px) !important;
}

.op-workspace-layout .op-icon-option:active {
    transform: scale(0.98) !important;
}

/* La caja interna mantiene su estilo semi-transparente */
.op-icon-option .op-icon-box {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================ */
/* BOTONES PRIMARIOS DE FORMULARIOS */
/* ============================================ */

.op-ui-btn-primary {
    background-color: var(--color-botones) !important;
    color: var(--color-texto) !important;
    border-color: transparent;
    transition: all 0.3s ease-in-out;
}

.op-ui-btn-primary:hover {
    opacity: 0.9;
    filter: brightness(0.95);
}

.op-ui-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================ */
/* BOTONES DE LOGIN Y RECOVER */
/* ============================================ */

.op-auth-button {
    background-color: var(--color-botones) !important;
    color: var(--color-texto) !important;
    border: none !important;
}

.op-auth-button:hover {
    opacity: 0.9 !important;
    filter: brightness(0.95) !important;
}

.op-auth-button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}